Adding a Picture Window to Custom Menu

[Rink27]

Hello. I'm trying to design my own custom menu and I'm not finding success in displaying a picture.

Partial code below:

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

        this.createMapWindow();
};

So within the aliased menu creation scene, I added the creation of a new window as defined below:

    Scene_Menu.prototype.createMapWindow = function() {
    this._mapWindow = new Window_Map(0, 0);
    this._mapWindow.y = Graphics.boxHeight - this._mapWindow.height;
    this.addWindow(this._mapWindow);
};

For Window_Map I basically copied the Window_Gold function along with the other functions it calls. I renamed accordingly.

Window_Map.prototype.currencyUnit = function (){
 //return TextManager.currencyUnit;

}

Note: I didn't adjust currencyUnit to a proper name yet. Since it was used to display the gold icon, I was just converting this part to show a picture instead (Could display different icons instead). I've tried various methods to try to display a picture (some of which I don't fully understand myself):

Spoiler

  //$gameScreen.showPicture(24, "Package2_8.png", 0, 5, 5, 100, 100, 120, 0);
    //return $gameScreen.showPicture(pictureId, name, origin, x, y, scaleX, scaleY, opacity, blendMode);
    //return ImageManager.loadMap;//TextManager.currencyUnit;
    // var sprite = new Sprite();
 //    sprite.bitmap =ImageManager.loadPicture("Package2_8");
 //    sprite.x=5;
 //    sprite.y=5;
// return this.drawIcon($dataWeapons[2].iconIndex, 5, 5); //Can display different icons!
 // return this.drawPicture("Package2_8", 5, 5);

For the drawPicture method, I tried including a copied version of its function:

  Window_Map.prototype.drawPicture = function(filename, x, y) {
    var bitmap = ImageManager.loadPicture(filename);
    this.contents.blt(bitmap, 0, 0, 200, 200, 5, 5);
  };

Is it possible for pictures to be displayed in a window? I was reading icons can only be displayed in a window. I think pictures can be too, but just checking.

Am I going about this completely wrong?
My first step is just trying to succeed with adding a window to my custom menu that displays at least one picture.
My next step would be getting the displayed picture to change depending on certain parameters, probably a variable.

 

[Trihan]

You can display any image in a window. The block transfer (blt) function of the Bitmap class doesn't care whether your image is a picture or an icon sheet or what.

 

[Rink27]

You can display any image in a window. The block transfer (blt) function of the Bitmap class doesn't care whether your image is a picture or an icon sheet or what.

Ah, hi again. Ignoring the "currencyUnit" name I have, what's wrong with the code below:

Window_Map.prototype.currencyUnit = function() {
  return this.drawPicture("PackageTest", 5, 5);
};

  Window_Map.prototype.drawPicture = function(filename, x, y) {
    var bitmap = ImageManager.loadPicture(filename);
    this.contents.blt(bitmap, 5, 5, 200, 200, 5, 5);
  };

I hardcoded the other parameters in the blt, but I don't think that should be an issue. Am I not including enough parameters? Because in rpg_core I found:

Bitmap.prototype.blt = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    dw = dw || sw;
    dh = dh || sh;
    if (sx >= 0 && sy >= 0 && sw > 0 && sh > 0 && dw > 0 && dh > 0 &&
            sx + sw <= source.width && sy + sh <= source.height) {
        this._context.globalCompositeOperation = 'source-over';
        this._context.drawImage(source._canvas, sx, sy, sw, sh, dx, dy, dw, dh);
        this._setDirty();
    }
};

and it uses more parameters than I'm defining. I don't really understand the parameters either.
Edit: Well some. What's the difference between s and d.

Edit 2: Tried executing the code in the refresh function instead wondering if the drawCurrencyValue was preventing too large a picture from showing. Didn't work though.

Window_Map.prototype.refresh = function() {
    var x = this.textPadding();
    var width = this.contents.width - this.textPadding() * 2;
    this.contents.clear();
    this.drawCurrencyValue(this.value(), this.currencyUnit(), x, 0, width);
    this.drawPicture("PackageTest", 5, 5);
};

 

[Trihan]

What does Window_Map inherit from? And are you actually calling the refresh function anywhere?

 

[Rink27]

What does Window_Map inherit from? And are you actually calling the refresh function anywhere?

(Didn't see any notification for your reply)

Um, I believe I'm inheriting from Window_Base.
And yea, I think so? Refresh is called at the end of initialize.

function Window_Map() {
    this.initialize.apply(this, arguments);
}

Window_Map.prototype = Object.create(Window_Base.prototype);
Window_Map.prototype.constructor = Window_Map;

Window_Map.prototype.initialize = function(x, y) {
    var width = this.windowWidth();
    var height = this.windowHeight();
    Window_Base.prototype.initialize.call(this, x, y, width, height);
    this.refresh();
};

Window_Map.prototype.windowWidth = function() {
    return 400;
};

Window_Map.prototype.windowHeight = function() {
    return 400;//this.fittingHeight(1);
};

Window_Map.prototype.refresh = function() {
    var x = this.textPadding();
    var width = this.contents.width - this.textPadding() * 2;
    this.contents.clear();
    this.drawCurrencyValue(this.value(), this.currencyUnit(), x, 0, width);
    this.drawPicture("PackageTest", 5, 5);
};

 

[Trihan]

And is it drawing anything in the window at all?

 

[Rink27]

And is it drawing anything in the window at all?

Nope. The value or icon can be drawn, but not the picture. The opacity isn't 0 either.

By the way, is it possible to execute a plugin command/common event when the menu is called/opened?
*alongside it's call. Or at the same time.

I tried:

(function() {

var _Scene_Map_callMenu = Scene_Map.prototype.callMenu;
Scene_Map.prototype.callMenu = function() {
    _Scene_Map_callMenu.call(this);
    $gameTemp.reserveCommonEvent(215);
};

as a work around, but it is called after leaving the menu.

 

[Trihan]

The thing with common events is that they're executed on the map; when you reserve one in the menu it won't execute until you exist it. Plugin commands are a different story, as they generally do whatever they're coded to. What is it you're trying to accomplish exactly?

As for your picture, I'm not entirely sure what the issue is. What are the dimensions of the picture you're trying to block transfer to the window?

 

[Rink27]

The thing with common events is that they're executed on the map; when you reserve one in the menu it won't execute until you exist it. Plugin commands are a different story, as they generally do whatever they're coded to. What is it you're trying to accomplish exactly?

As for your picture, I'm not entirely sure what the issue is. What are the dimensions of the picture you're trying to block transfer to the window?

I tried a 450x450 picture first and then a 150x150 (since the width height dimensions were 200 for blt (if I got the parameters right)).

Well, if I can't display a map via pictures, I was thinking of using another plugin that can display maps with a plugin command and have that executed to display the picture whenever the menu is accessed.

 

[Trihan]

Yeah, with the blt call you showed, you'd slice a 200x200 area of 'PackageTest' starting at (5, 5) and positioning it at (5, 5) in the window. I'm not sure why that isn't working.

If you press F8 to open the console, does it show any errors?

 

[Rink27]

Yeah, with the blt call you showed, you'd slice a 200x200 area of 'PackageTest' starting at (5, 5) and positioning it at (5, 5) in the window. I'm not sure why that isn't working.

If you press F8 to open the console, does it show any errors?

(Is it annoying of me to quote you over and over?)

Um. Opened game. Opened console. There were unrelated errors in console.
Opened Menu. Closed Menu. No new logs in console.
Should I be able to find "PackageTest" in the Elements tab if it was drawn to the screen? Because I couldn't find it within that tab.

 

[Trihan]

It's fine, I get the notifications that way and know you've made a new post.

I was able to display a screenshot of my game inside a window no problem, so I'm unsure what the issue is on your end. You won't specifically see "PackageTest" in the Elements tab.

Here's what I did in an event script command just for a quick and dirty test.

test = new Window_Base(0, 0, 400, 400);
test.contents.blt(ImageManager.loadPicture('screenshot2'), 0, 0, 200, 200, 25, 25);
test.update();
SceneManager._scene.addWindow(test);

Works fine, though you do have to interact with the event twice for the picture to appear.

 

[Rink27]

I was able to display a screenshot of my game inside a window no problem, so I'm unsure what the issue is on your end.

test = new Window_Base(0, 0, 400, 400);
test.contents.blt(ImageManager.loadPicture('screenshot2'), 0, 0, 200, 200, 25, 25);
test.update();
SceneManager._scene.addWindow(test);

Huhhh. 'screenshot2' is an image from your pictures folder, right, and not from some other screenshotting functionality you have? I created an event script command with that coding and changed it to PackageTest. The window appears, but it is blank. I clicked the event multiple times.

Maybe I've accidentally altered one of the (dunno what to refer to them as) "fundamental" plugins? And I took out something by error?

 

[Trihan]

Yeah, I put the png in my Pictures folder prior to writing the script command.

 

[Rink27]

Yeah, I put the png in my Pictures folder prior to writing the script command.

Well if that script command gives me an empty window, what else can that imply besides me probably removing a function from rpg_scenes maybe? I don't think I did, but I'd have to go and check now.

 

[Trihan]

Try creating a fresh project and run the same code there?

 

[Rink27]

Try creating a fresh project and run the same code there?

Well this is interesting.

I opened up a previous version (backup) of my game and the script command displays the picture (though it's cut in half). I tested using either's "core, objects, scene" etc and it didn't change anything. I even turned off scripts that were added after that previous version. Didn't result in my current version getting the picture to display.

Edit: The older version got the picture to be displayed in the custom added window in the menu (though I had to open it twice for that).

 

[Trihan]

Hmm, I honestly have no idea what's preventing it from showing in your newer version.

 

[Rink27]

Hmm, I honestly have no idea what's preventing it from showing in your newer version.

Sooo... Apparently the specific image was providing difficulty in being displayed.

I was using the default Package2_8 (the white robot guy) as a test. Scaled him down (150x150) with an image editor and named that to "PackageTest". When I got to testing with the older backup, I also created a copy of Package2_8 named PackageTest (450x450).

Test (150x150) doesn't display in the older version (copied 450x450 version did), but 2_8 (now, for some reason) displays in the current version. In the script command and menu window. (I'm confused as to problems prior editing the picture, but I can't clearly remember the order of events)

My guess at the moment is maybe because Test was altered through an image editor instead of being imported into the project?

Well, I'd continue experimenting and trying to achieve what I'm hoping for.

 

[Trihan]

Possibly. If you imported it via an image editor make sure it's been reduced to a 256-colour palette. I usually experience problems with images if I don't do that.