[Help] Fade-In and Image on screen by calling a function

[Fabricio]

Hey guys!

I'm developing a plugin here to use on my project but I ran out into a problem.

To give a full context, here's what my plugin is going to do:
My plugin will manage common actions after a character levels up. For example:
- Display a message;
- Display an image for x seconds;
- Play a song;
- Restore MP and HP.

To make those actions happen I'm working under the Game_Actor.prototype.changeExp function, so if I level up, it will do one or any of those actions described above.

Here's the problem that I'm facing while trying to display an image:

I have this block of code to setup my image:

ImageManager.loadLevelUpImage = function(filename) {
        return this.loadBitmap('img/pictures/', filename, 0, true);
    };   

    Scene_Map.prototype.loadLevelUpImage = function(opacity) {
      var levelUpImage   = new Sprite_Base();
      levelUpImage.bitmap = ImageManager.loadLevelUpImage('levelup');
      levelUpImage.x = gfxImageXPosition;
      levelUpImage.y = gfxImageYPosition;
      levelUpImage.opacity = opacity;
      this.addChild(levelUpImage);
    };

The problem is that, if I try to call the function loadLevelUpImage, I get the "undefined is not a function", I think that I'm not making the call in the right way (I'm new into Javascript);

var _Game_Actor_changeExp = Game_Actor.prototype.changeExp;
var _Game_BattlerBase_setHp = Game_BattlerBase.prototype.setHp;
var _Game_BattlerBase_setMp = Game_BattlerBase.prototype.setMp;
var _Scene_Map_loadLevelUpImage = Scene_Map.prototype.loadLevelUpImage;

Game_Actor.prototype.changeExp = function(exp, show) {       
        
           var lastLevel = this._level;
        
        _Game_Actor_changeExp.call(this, exp, show)
        
        if(this._level > lastLevel){
            
            if(gfxEnabled){ //gfxEnabled is a flag to check if I want to enable or disable this function
                _Scene_Map_loadLevelUpImage.call(this,255); //Here's where I want to draw the image on screen
            }

        }
    };

So, I'm kinda lost on how to make this works... Also, is this the best way to show an image on screen? If not, what can I use instead?

Not sure if this is useful but I could show the image using Scene_Map.prototype.start, but that will show right after the map starts:

ImageManager.loadLevelUpImage = function(filename) {
        return this.loadBitmap('img/pictures/', filename, 0, true);
    };   
    
    var _Scene_Map_start = Scene_Map.prototype.start;
    Scene_Map.prototype.start = function(){
        _Scene_Map_start.call(this);
        this.loadLevelUpImage(255);
    }

    Scene_Map.prototype.loadLevelUpImage = function(opacity) {
      var levelUpImage   = new Sprite_Base();
      levelUpImage.bitmap = ImageManager.loadLevelUpImage('levelup');
      levelUpImage.x = gfxImageXPosition;
      levelUpImage.y = gfxImageYPosition;
      levelUpImage.opacity = opacity;
      this.addChild(levelUpImage);
    };

 

[Poryg]

When you get such error, press f8. This opens up a console that says where the mistake is.

 

[Fabricio]

Hmm... So I did that and it's saying that the error is at

this.addChild(levelUpImage);

But is still kinda confusing because it works when used with Scene_Map.prototype.start

 

[Gamefall Team]

Mmmh... Your making the things too complex, man. Well, well I'm not sure what are you trying to reach, but there are some things to analyze and change.

ImageManager.loadLevelUpImage = function(filename) {
        return this.loadBitmap('img/pictures/', filename, 0, true);
    };

Well, this method is essentially useless, because you have another method that cover the same scope:

ImageManager.loadPicture = function(filename, hue) {
    return this.loadBitmap('img/pictures/', filename, hue, true);
};

This is the original method that you have seen for sure in the rpg_manager lib. Well, with this one you can reach the same result of the one you have created, because both loads a bitmap from the img/picture. The only difference is that you have preset the hue, but you have an args for this. This way you can polish a little your code, avoiding useless methods. So, your code would be:

    Scene_Map.prototype.loadLevelUpImage = function(opacity) {
      this._levelUpImage   = new Sprite();
      this._levelUpImage.bitmap = ImageManager.loadPicture('levelup', 0); //If you need the hue, you can add the 0 as second arg;
      this._levelUpImage.x = gfxImageXPosition;
      this._levelUpImage.y = gfxImageYPosition;
      this._levelUpImage.opacity = opacity;
      this.addChild(this._levelUpImage); // I made a little mistake here, so I edited the post
    };

As you can see there other two differences in the code I wrote:
• I changed the levelupImage in an variable that is instance of the Scene Map class, this way would be more simple the approach and the editing;
• I thought, reading what you want to do, that you want only to load a simple bitmap. So, you can use simply the defaul Sprite class that is a direct porting of the PIXI.Sprite class from Pixi.js. You can find more information about it in the core lib of your project. The Sprite_Base class is another class constructed on the Sprite class that has other feature and It is the basis for the Sprite Character Class and other typical sprites used in MV (animation, timer etc...). So this means that with the Sprite_Base you can use other method like playing an animation on your sprite, but if you want only to load a bitmap you can use the default sprite class. Depending on what you want to reach.

Game_Actor.prototype.changeExp = function(exp, show) {      
       
           var lastLevel = this._level;
       
        _Game_Actor_changeExp.call(this, exp, show)
       
        if(this._level > lastLevel){
           
            if(gfxEnabled){ //gfxEnabled is a flag to check if I want to enable or disable this function
                _Scene_Map_loadLevelUpImage.call(this,255); //Here's where I want to draw the image on screen
            }

        }
    };

About there, I'm not sure what are you trying to reach, but your approach is not right. You have only called a function, meaning that all the things contained in it will be pushed in the function you called into, without real effect.
You can try proceeding this way, but I don't know all the logic you used for writing your code and I'm not sure if It will work as you wanted:

Game_Actor.prototype.changeExp = function(exp, show) {            
          var lastLevel = this._level;    
        _Game_Actor_changeExp.call(this, exp, show)
        if(this._level > lastLevel){    
            if(gfxEnabled && SceneManager._scene instanceof Scene_Map){ //Check if the function is run on Scene_Map, too.
                SceneManager._scene.loadLevelUpImage(255); //Here's where I want to draw the image on screen
            }

        }
    };

Well, the code I wrote is a little different from yours:
• To make the plugin more accurate, in addition to your gfx flag I added another condition that checks if the method run in Scene Map, too.
• The method is called directly from the Scene class from SceneManager._scene that stores the actual running scenes.

But you're doing a good starting in MV coding, taking a look on Js in general and studying the MV libs, you will improve in a small time!

 

[Fabricio]

Awesome, now I understand a little more how stuff works hahaha! It's working perfectly, thanks a lot!

 

[Gamefall Team]

Well, It's a good news! Good developing and learning