RMMV Displaying Sprites in the Main Menu Scene

chrrsy

Veteran
Veteran
Joined
Feb 5, 2017
Messages
74
Reaction score
14
First Language
English
Primarily Uses
RMMV
How could I go about adding a image/sprite in the main menu scene? Thanks!
 
Last edited:

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,043
Reaction score
1,474
First Language
EN
Primarily Uses
RMMZ
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):
JavaScript:
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.
    JavaScript:
    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.
    JavaScript:
    this.addChild(this._myPic);
    The child will update along with its parent object.

  3. Optionally adjust the sprite by altering its properties, e.g.
    JavaScript:
    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:
JavaScript:
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! :kaothx:
 

Guy_Fellows

Villager
Member
Joined
Jul 30, 2020
Messages
14
Reaction score
7
First Language
English
Primarily Uses
RMMV
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

Veteran
Veteran
Joined
Feb 5, 2017
Messages
74
Reaction score
14
First Language
English
Primarily Uses
RMMV
@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.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

People1.png & SF_People1.png added!!!!

Adventurer:
"Why your body looks like a bird?"

Stranger:
"Because I'm harpy"

Adventurer:
"Clap along if you feel like a room without a roof"

*Both dancing to Pharrell Williams song*
Stream will be live shortly with a make-up session of the Interactive Text Adventure! Feel free to drop by!
Pootscooter wrote on Pharonix's profile.
Hey @Pharonix, just wondering what you're up to lately and if you've had an opportunity to check out the LTBS thread in the past few days...(a couple of us could really use your expertise). Hope you are well and Happy Thanksgiving!

Forum statistics

Threads
105,506
Messages
1,014,259
Members
137,173
Latest member
zoetsoi
Top