RMMV Displaying Sprites in the Main Menu Scene

[chrrsy]

How could I go about adding a image/sprite in the main menu scene? Thanks!

 

[caethyril]

I assume you mean the pause menu, Scene_Menu; the title menu is Scene_Title. That said, the latter is a great example of how to add sprites, so let's look at some of its code (rpg_scenes.js):

Spoiler: A chunk of Scene_Title code from rpg_scenes.js

Scene_Title.prototype.create = function() {
    Scene_Base.prototype.create.call(this);
    this.createBackground();
    this.createForeground();
    this.createWindowLayer();
    this.createCommandWindow();
};

Scene_Title.prototype.createBackground = function() {
    this._backSprite1 = new Sprite(ImageManager.loadTitle1($dataSystem.title1Name));
    this._backSprite2 = new Sprite(ImageManager.loadTitle2($dataSystem.title2Name));
    this.addChild(this._backSprite1);
    this.addChild(this._backSprite2);
};

Scene_Title.prototype.createForeground = function() {
    this._gameTitleSprite = new Sprite(new Bitmap(Graphics.width, Graphics.height));
    this.addChild(this._gameTitleSprite);
    if ($dataSystem.optDrawTitle) {
        this.drawGameTitle();
    }
};

Scene_Title.prototype.drawGameTitle = function() {
    var x = 20;
    var y = Graphics.height / 4;
    var maxWidth = Graphics.width - x * 2;
    var text = $dataSystem.gameTitle;
    this._gameTitleSprite.bitmap.outlineColor = 'black';
    this._gameTitleSprite.bitmap.outlineWidth = 8;
    this._gameTitleSprite.bitmap.fontSize = 72;
    this._gameTitleSprite.bitmap.drawText(text, x, y, maxWidth, 48, 'center');
};

Scene_Title.prototype.centerSprite = function(sprite) {
    sprite.x = Graphics.width / 2;
    sprite.y = Graphics.height / 2;
    sprite.anchor.x = 0.5;
    sprite.anchor.y = 0.5;
};

So, from this you can infer that the basic steps are:

1. Make a new sprite, e.g.
   

   this._myPic = new Sprite(ImageManager.loadEnemy('Slime'));

   
   
2. Add that sprite as a child of the object in which you want it to display, e.g.
   

   this.addChild(this._myPic);

   The child will update along with its parent object.
   
   
3. Optionally adjust the sprite by altering its properties, e.g.
   

   this._myPic.x = 50;

The steps are basically the same regardless of whether the parent object is a scene or a window. If it's a pre-existing window you can alias a relevant method (e.g. initialize) and do the sprite stuff there; else you can just code it directly into your window's "start-up" method(s).

That said: RPG Maker's windows tend to paint text directly onto the window contents (bit block transfer, a.k.a. "blitting"). A child sprite added to the window will display above the text/images/etc painted directly on the window. If you want your image to be in the background, you may want to blit your image in first. Here's a snippet from rpg_windows.js demonstrating use of RMMV's blitting method:

Spoiler: Window_Message > drawFace

Window_Base.prototype.drawFace = function(faceName, faceIndex, x, y, width, height) {
    width = width || Window_Base._faceWidth;
    height = height || Window_Base._faceHeight;
    var bitmap = ImageManager.loadFace(faceName);
    var pw = Window_Base._faceWidth;
    var ph = Window_Base._faceHeight;
    var sw = Math.min(width, pw);
    var sh = Math.min(height, ph);
    var dx = Math.floor(x + Math.max(width - pw, 0) / 2);
    var dy = Math.floor(y + Math.max(height - ph, 0) / 2);
    var sx = faceIndex % 4 * pw + (pw - sw) / 2;
    var sy = Math.floor(faceIndex / 4) * ph + (ph - sh) / 2;
    this.contents.blt(bitmap, sx, sy, sw, sh, dx, dy);
};

blt takes source image coordinates (x, y, width, height) and destination coordinates (destination width/height are optional). Here you see it's drawing one face from the image, to a specific x & y in the window.

Hope that helps!

 

[Guy_Fellows]

caethyril

I'm struggling to get my head into JavaScript for game development, so I went ahead and gave this a try and worked! Thank you for taking the time to provide such a thorough explanation!

 

[chrrsy]

@caethyril, thank you for the help! I really appreciate how you explained how it works, it was helpful and I'm glad I got it able to work.