Trouble scaling a background sprite / General questions

Discussion in 'Learning Javascript' started by Tasmaniac, Jun 5, 2017.

  1. Tasmaniac

    Tasmaniac Villager Member

    Messages:
    10
    Likes Received:
    2
    Location:
    Hobart
    First Language:
    English
    Primarily Uses:
    RMMV
    Hey all,

    I'm beginning to learn JS, and I'm doing alright but I've hit a snag I can't explain. I was following SRDude's tutorial on making a custom menu, and I went off the beaten track a bit and decided I wanted to add my own custom text box image. I was successful in getting it added, but I can't center it! I tried the recommended;

    this._menuSprite.scale.x = Number(Graphics.width / this._menuSprite.width);

    But it doesn't seem to have any value for width. I tried graphics.width / graphics.width and it returned the scale of 1 so I know that value is working, but it doesn't draw at all as soon as I try and use its width to create an accurate scale.

    Any ideas on what might be causing this and how it might be fixed? I tried googling around, I can't find any good resources online for how to handle spites in JS. Am I missing a search term or a reference sheet or something that might help me find the answer myself? I also tried to use the console log, I couldn't get any sort of return on the sprite at all.

    Thanks in advance!

    (function() {

    var background = String(PluginManager.parameters("AltMenuTest")['BackgroundPicture']);
    var opacity = Number(PluginManager.parameters("AltMenuTest")['Window Opacity']);

    var _Scene_MenuBase_createBackground = Scene_MenuBase.prototype.createBackground;

    Scene_MenuBase.prototype.createBackground = function() {
    if(background) {
    this._backgroundSprite = new Sprite();
    this._backgroundSprite.bitmap = ImageManager.loadPicture(background);
    this.addChild(this._backgroundSprite);

    this._menuSprite = new Sprite();
    this._menuSprite.bitmap = ImageManager.loadPicture("Textbox1");


    /*this._menuSprite.scale.x = 2.62;
    this._menuSprite.scale.y = 0.6;*/
    this.addChild(this._menuSprite);
    this._menuSprite.scale.x = Number(Graphics.width / Graphics.width);
    this._menuSprite.scale.y = 0.6;
    }
    else {
    _Scene_MenuBase_createBackground.call(this);
    }
    };

    var _Scene_Menu_create = Scene_Menu.prototype.create;
    Scene_Menu.prototype.create = function(){
    _Scene_Menu_create.call(this);
     
    #1
  2. Kyo Panda

    Kyo Panda Veteran Veteran

    Messages:
    34
    Likes Received:
    24
    Location:
    Brazil
    First Language:
    Portuguese
    Primarily Uses:
    RMMV
    This part:

    Code:
    this._menuSprite.scale.x = Number(Graphics.width / Graphics.width);
    Isn't doing much. As X / X = 1, and the natural scale of the sprite is 1, the sprite will keep its size.

    ---

    About centering the sprite, you could center the bitmap anchor and set the point to the middle of the screen:

    Code:
    this._menuSprite.anchor.set(0.5);
    this._menuSprite.x = Graphics.width / 2;
    Or leave the anchor in the top left corner and aligning it based on the bitmap width:

    Code:
    this._menuSprite.x = (Graphics.width - this._menuSprite.bitmap.width) / 2;
    ---

    The scale method does what it says, it scales the image. So, suppose you want to shrink the image by half of its size, you could do something like this:

    Code:
    this._menuSprite.scale.set(0.5);
    Which is equivalent to:

    Code:
    this._menuSprite.scale.x = 0.5;
    this._menuSprite.scale.y = 0.5;
    Or:

    Code:
    this._menuSprite.scale(0.5, 0.5);
    Both Sprite.scale and Sprite.anchor are a PIXI.ObservablePoint. It makes easier to modify X and Y values.

    o/

    ---

    Your script was cut, so I closed it. It's possible some code was missing:

    Code:
    (function() {
    
        var background = String(PluginManager.parameters("AltMenuTest")['BackgroundPicture']);
        var opacity = Number(PluginManager.parameters("AltMenuTest")['Window Opacity']);
    
        var _Scene_MenuBase_createBackground = Scene_MenuBase.prototype.createBackground;
    
        Scene_MenuBase.prototype.createBackground = function() {
            if (background) {
                this._backgroundSprite = new Sprite();
                this._backgroundSprite.bitmap = ImageManager.loadPicture(background);
                this.addChild(this._backgroundSprite);
    
                this._menuSprite = new Sprite();
                this._menuSprite.bitmap = ImageManager.loadPicture("Textbox1");
              
                /** Width method */
                // this._menuSprite.x = (Graphics.width - this._menuSprite.bitmap.width) / 2;
              
                /** Anchor method */
                this._menuSprite.anchor.set(0.5);
                this._menuSprite.x = Graphics.width / 2;
              
                this.addChild(this._menuSprite);
                this._menuSprite.scale.set(0.5);
            } else {
                _Scene_MenuBase_createBackground.call(this);
            }
        };
    
        var _Scene_Menu_create = Scene_Menu.prototype.create;
      
        Scene_Menu.prototype.create = function() {
            _Scene_Menu_create.call(this);
        };
    }());
    
     
    #2
    Tasmaniac likes this.
  3. Tasmaniac

    Tasmaniac Villager Member

    Messages:
    10
    Likes Received:
    2
    Location:
    Hobart
    First Language:
    English
    Primarily Uses:
    RMMV
    That was an incredibly insightful and helpful post! I wasn't dividing it by 2 at the end (accidentally left graphics width in twice sorry, did it to troubleshoot). I'm getting another weird error now (I think I'm scaled up by 100 or so times, a tiny fraction of by border is stretched across the whole X axis) but I am back up and tinkering again thanks to you! :D

    OK, Tinkering done....

    It scales perfectly with the below for some reason... I had to divide by 315 to get the scale right. Any ideas why? I'll put the whole code in this time.

    /*:
    @plugindesc Alt Menu
    @author Gregames

    @param BackgroundPicture
    @desc Menu Background
    @Default penngg

    @param Window Opacity
    @desc Opacity of the windows
    @Default 0

    @Help
    */

    (function() {

    var background = String(PluginManager.parameters("AltMenuTest")['BackgroundPicture']);
    var opacity = Number(PluginManager.parameters("AltMenuTest")['Window Opacity']);

    var _Scene_MenuBase_createBackground = Scene_MenuBase.prototype.createBackground;

    Scene_MenuBase.prototype.createBackground = function() {
    if(background) {
    this._backgroundSprite = new Sprite();
    this._backgroundSprite.bitmap = ImageManager.loadPicture(background);
    this.addChild(this._backgroundSprite);

    this._menuSprite = new Sprite();
    this._menuSprite.bitmap = ImageManager.loadPicture("Textbox1");
    this._menuSprite.scale.x = ((Graphics.width - this._menuSprite.bitmap.width)/315);
    this._menuSprite.scale.y = 0.6;

    /*this._menuSprite.scale.x = 2.62;
    this._menuSprite.scale.y = 0.6;*/
    this.addChild(this._menuSprite);

    }
    else {
    _Scene_MenuBase_createBackground.call(this);
    }
    };

    var _Scene_Menu_create = Scene_Menu.prototype.create;
    Scene_Menu.prototype.create = function(){
    _Scene_Menu_create.call(this);

    /*
    this._commandWindow
    this._goldWindow
    this._statusWindow

    this.createHelpWindow();
    this.createCategoryWindow();
    this.createItemWindow();
    this.createActorWindow();*/

    this._statusWindow.x = 0;
    this._statusWindow.y = this._commandWindow.height;
    this._statusWindow.opacity = opacity;

    this._commandWindow.x = 0;//this._statusWindow.width;
    this._commandWindow.y = 0;
    this._commandWindow.opacity = opacity;

    this._goldWindow.x = this._statusWindow.width;
    this._goldWindow.y = this._commandWindow.height;
    this._goldWindow.opacity = opacity;
    };


    var _Scene_Item_create = Scene_Item.prototype.create;
    Scene_Item.prototype.create = function() {
    _Scene_Item_create.call(this);

    this._actorWindow.opacity = 0;
    this._categoryWindow.opacity = 0;
    this._itemWindow.opacity = 0;
    this._helpWindow.opacity = 0;
    };

    Window_MenuStatus.prototype.windowWidth = function() {
    return Graphics.boxWidth - 240;
    };
    Window_MenuStatus.prototype.windowHeight = function() {
    return Graphics.boxHeight / 2;
    };
    Window_MenuStatus.prototype.numVisibleRows = function() {
    return 2;
    };
    Window_MenuStatus.prototype.maxCols = function() {
    return 1;
    };

    Window_MenuCommand.prototype.windowWidth = function() {
    return Graphics.boxWidth;
    };
    Window_MenuCommand.prototype.windowHeight = function() {
    return this.fittingHeight(this.numVisibleRows());
    };
    Window_MenuCommand.prototype.numVisibleRows = function() {
    return 2;
    };
    Window_MenuCommand.prototype.maxCols = function() {
    return 4;
    };

    })();

    Final edit probably. Just checked my graphics, the image I'm using is 316 pixles wide.... Surely they're related but I can't see why I need to divide by the width of my sprite for this to work
     
    Last edited: Jun 6, 2017
    #3
  4. Kyo Panda

    Kyo Panda Veteran Veteran

    Messages:
    34
    Likes Received:
    24
    Location:
    Brazil
    First Language:
    Portuguese
    Primarily Uses:
    RMMV
    Oh... I think I've understood what you desire.

    The why it scales properly with 315 probably has to do with your image size.

    Code:
    (816 - 316) / 315 = 1.5873015873015872
    But the numbers doesn't match, as 316 * 1.5873015873015872 = 501.58730158730157.

    The proper code should be:

    Code:
    816 / 316 = 2.5822784810126582
    As 316 * 2.5822784810126582 = 816.

    ---

    This line:

    Code:
    this._menuSprite.scale.x = ((Graphics.width - this._menuSprite.bitmap.width)/315);
    Therefore should be:

    Code:
    this._menuSprite.scale.x = Graphics.width / this._menuSprite.bitmap.width;
    As your initial code, but using the Bitmap width instead the Sprite width.

    ---

    Unless you're not trying to stretch the image to the screen width. In which case, the code should be:

    Code:
    var width = 500;
    this._menuSprite.scale.x = width / this._menuSprite.bitmap.width;
    Or using the Sprite.width property, which will do this calculation for us:

    Code:
    this._menuSprite.scale.width = 500;
    ---

    Or you're wanting something else and I still don't get it. :v
     
    #4
    Tasmaniac likes this.
  5. Tasmaniac

    Tasmaniac Villager Member

    Messages:
    10
    Likes Received:
    2
    Location:
    Hobart
    First Language:
    English
    Primarily Uses:
    RMMV
    I can't believe I was using the wrong operator... ........ That's so embarrassing! Thanks for the explanation!
     
    #5

Share This Page