Black/White background when loading menu picture

Discussion in 'Learning Javascript' started by megumi014, Mar 3, 2018.

  1. megumi014

    megumi014 Veteran Veteran

    Messages:
    130
    Likes Received:
    206
    Location:
    fish tank
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    Hi, I'm trying to learn javascript and I've been messing around with the Command Menu (following a tutorial and trying to change things here and there), but I stumbled upon an issue and I have no idea how to fix it because I don't understand what is the engine doing or why.

    I'm trying to put a background image on the Command Menu window, and only there (not the whole screen), so I tried this:

    Code:
    (function() {
        
        // LOCATION MAIN MENU (COMMAND)
        
        var _Scene_Menu_create = Scene_Menu.prototype.create;
        Scene_Menu.prototype.create = function() {
            _Scene_Menu_create.call(this);
            this._goldWindow.hide(); // Just for now
            this._statusWindow.hide(); // Just for now
        
            this._commandWindow.x = 0;
            this._commandWindow.y = Graphics.boxHeight / 2 - (this._commandWindow.height / 2);
              
            this._commandWindow.opacity = 0;
        };
        
        
        // COMMAND MENU BACKGROUND IMAGE & UPDATE
        
        var _Scene_Menu_createBackground = Scene_Menu.prototype.createBackground;
        Scene_Menu.prototype.createBackground = function() {
            this._backgroundSprite = new Sprite();
            this._backgroundSprite.bitmap = ImageManager.loadPicture("Pink3");
            this.addChild(this._backgroundSprite);
            this._isBackgroundScaled = false;
            
            //this._backgroundSprite.opacity = 255;
            
        };
        
        var _Scene_Menu_update = Scene_Menu.prototype.update;
        Scene_Menu.prototype.update = function() {
            _Scene_Menu_update.call(this);
            if(this._isBackgroundScaled == false && this._backgroundSprite.bitmap.width != 0) {
                this._isBackgroundScaled = true;
                this._backgroundSprite.scale.x = Number(this._commandWindow.width / this._backgroundSprite.bitmap.width);
                this._backgroundSprite.scale.y = Number(this._commandWindow.height / this._backgroundSprite.bitmap.height);
                this._backgroundSprite.x = this._commandWindow.x;
                this._backgroundSprite.y = this._commandWindow.y;
            }
        };
    
        
    })();
     
    The background picture stretches to fit the menu box no matter its position or if i change the screen size, but this happens (the white line is actually a transparent padding I added to check if it made any difference):

    Hide&Seek.jpg

    I have tried playing around with the opacity but it doesn't affect that black blackground, and trying to use a picture with the exact screen resolution but filled with a transparency layer makes it go white like this (I didn't care about the pink position for this one):

    Hide&Seek2.jpg

    Sooo any help/advice you could give me it would be welcomed. I tried looking up for some options and the only thing I found was the Window_Base bit with updateBackOpacity() but I have no idea if that is what I'm looking for, or If the problem is the way I'm loading the picture.
     
    #1
  2. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,626
    Likes Received:
    1,053
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    Is there a reason that you're aliasing the createBackground method but not calling the alias?
     
    #2
  3. megumi014

    megumi014 Veteran Veteran

    Messages:
    130
    Likes Received:
    206
    Location:
    fish tank
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    I just noticed that, I probably erased it while trying different things, thank you for pointing it out.

    I wasn't going to update the post yet because I will be trying different things but I think I got to fix the background issue. I still don't know why it appears black or white depending on the transparency layer but this is how I kinda-fixed it:

    Code:
        Scene_Menu.prototype.createBackground = function() {
            this._backgroundSprite1 = new Sprite();
            this._backgroundSprite2 = new Sprite();
            this._backgroundSprite1.bitmap = SceneManager.backgroundBitmap();
            this._backgroundSprite2.bitmap = ImageManager.loadPicture("Pink");
            this.addChild(this._backgroundSprite1);
            this.addChild(this._backgroundSprite2);
    I just planted another picture on top of the one that came with the source code and it worked. Probably not the best solution but until I learn more it will do.
     
    #3

Share This Page