[Solved] [JS] A few questions regarding Background pictures.

[megumi014]

Hi, I hope I can make a few questions under the same threat, if not I will split them.

I'm currently working on the [Select Item] (Window_EventItem) function to transform it into an Inventory. Instead of drawing the items it just draws the icons (128x128), that I will switch for drawings on the Icon-sheet.
I'm working directly on the code, not in a pluggin, since I'm still learning and it's easier for me this way until I learn more.

This is the part that works correctly:

Spoiler: Select Item

//-----------------------------------------------------------------------------
// Window_EventItem
//
// The window used for the event command [Select Item]. MODIFIED.

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

Window_EventItem.prototype = Object.create(Window_ItemList.prototype);
Window_EventItem.prototype.constructor = Window_EventItem;


Window_EventItem.prototype.initialize = function(messageWindow) {
    this._messageWindow = messageWindow;
    var width = 900; // changed
    var height = 600; // changed
    Window_ItemList.prototype.initialize.call(this, (Graphics.boxWidth / 2) - (width / 2), (Graphics.boxHeight / 2) - (height / 2), width, height); //changed to center the box
    this.opacity = 0; // added
    this.openness = 0;
    this.deactivate();
    this.setHandler('ok',     this.onOk.bind(this));
    this.setHandler('cancel', this.onCancel.bind(this));
};

Window_EventItem.prototype.maxCols = function() {
    return 6;
};

Window_EventItem.prototype.spacing = function() {
    return 12; // Need to improve.
};

// Changed the size for the icons.

Window_EventItem.prototype.itemWidth = function() {
    return 130;
};

Window_EventItem.prototype.itemHeight = function() {
    return 130;
};

// Instead of drawing the text it only draws the Icons, sized 128x128.

Window_EventItem.prototype.drawItem = function(index) {
    var item = this._data[index];
    if (item) {
        var rect = this.itemRect(index);
        rect.width -= this.textPadding();
        this.changePaintOpacity(this.isEnabled(item));
        this.drawItemName(item, rect.x, rect.y, rect.width);
        this.changePaintOpacity(1);
    }
};

Window_EventItem.prototype.drawItemName = function(item, x, y, width) {
    width = width || 312;
    if (item) {
        var iconBoxWidth = Window_Base._iconWidth + 4;
        this.resetTextColor();
        this.drawIcon(item.iconIndex, x + 2, y + 2);
    }
};

Window_EventItem.prototype.start = function() {
    this.refresh();
    //this.updatePlacement(); REMOVED
    this.select(0);
    this.open();
    this.activate();
};

Window_EventItem.prototype.includes = function(item) {
    var itypeId = $gameMessage.itemChoiceItypeId();
    return DataManager.isItem(item) && item.itypeId === itypeId;
};

Window_EventItem.prototype.isEnabled = function(item) {
    return true;
};

Window_EventItem.prototype.onOk = function() {
    var item = this.item();
    var itemId = item ? item.id : 0;
    $gameVariables.setValue($gameMessage.itemChoiceVariableId(), itemId);
    this._messageWindow.terminateMessage();
    this.close();
};

Window_EventItem.prototype.onCancel = function() {
    $gameVariables.setValue($gameMessage.itemChoiceVariableId(), 0);
    this._messageWindow.terminateMessage();
    this.close();
};

And it looks like this in game (ignore the super fancy drawing skills plz):

Spoiler: Without Background

The problem comes when I try to add a Background to the window. I can put it manually on the program with Show Picture, but I'd like to learn how to do it on the code properly.

I have tried adding this:

Window_EventItem.prototype.start = function() {
    this.refresh();
    this.createBackground(); // add
    this.select(0);
    this.open();
    this.activate();
};

Window_EventItem.prototype.createBackground = function() {
    this._background = new Sprite();
    this._background.bitmap = ImageManager.loadPicture('INV_Basesmall');
    this._background.x = this._messageWindow.x - 60;
    this._background.y = this._messageWindow.x - 40;
    //this._background.anchor.x = 0;
    //this._background.anchor.y = 0;
    this.addChild(this._background);
};

And it shows up on the screen, but on top of the window, instead of behind. I tried adding different lines (ofc not at the same time) under the .x and .y lines, but none of them works, like:

this._background.z = this._messageWindow.x - 50;
this._background.z = 0;

And I also tried changing the this.createBackground(); before the refresh, but it doesn't work either. I also tried to create the background on one function and update the position in another function, but still nothing.

I don't know if the way I'm calling the background is wrong, or I'm calling it on the wrong place/order. I found a function called addChildToBack but I'm not sure how to use it or if it would fix the problem, or if I should work on the Game_Message.prototype.setItemChoice on the Objects code.

-----------------

The other question I have is regarding the handlers of this window. I'd like to be able to close it with the key 'i' too, but it doesn't work.

I added this line on the Input.keyMapper

73: 'i',  // I

and this other under the 'ok' and 'cancel' handlers of the Window_EventItem

this.setHandler('i',      this.onCancel.bind(this));

but it does nothing. Am I missing any step on the keymapper? If i change the 'i' for 'cancel' on the keymapper it works, but I don't want the 'i' key to work as a cancel button all the time, only on this function. I also tried to make another function copied from the this.onCancel.bind but named it this.onCancel2.bind, so it wouldn't conflict with the other handler buuut nothing.

I'm so lost XD any help would be more than welcomed.

 

[Jonforum]

what is the child index of your BG ?
if you not sure, you can force the child index with
addChildAt()
http://pixijs.download/dev/docs/PIXI.Container.html#addChildAt

 

[Poryg]

When you add a child to a window, no wonder it will go above the window.

If you don't know how nesting works, it's simple.
I have an array of.... sprites.
[sprite1, sprite2, sprite3]

Let's say that sprite1 contains three child sprites.
So the resulting thing will be
[sprite1[cSprite1, cSprite2, cSprite3], sprite2, sprite3]

Now nesting will work simply. It first takes sprite 1, displays that... and its children on top of it. Then it displays sprite2 on top of sprite1 and its children. And then sprite3. CSS works entirely the same btw.

This is exactly what happens here. You're adding the sprite as a child to the window, so no wonder it displays on top of the window. If you want to have it underneath, you have to have it as a child of the scene itself and it has to be the added as child before windowlayer gets created, otherwise you'll have the background as a fourth child and nothing will work.

Also, this ain't CSS, so adding a z index won't help without a plugin By default Z index is custom defined only for tile and event layers.


As for your second question, did you try 105 instead? Maybe it could fix the problem.

 

[Aloe Guvner]

I think that you should make a separate thread for your 2nd question. Because they are not actually related, it would cause more confusion to have both questions at the same time. If you could edit your title and post, that would help.

You can solve your issue by using the "addChildToBack" function. It only requires 1 argument, which is the sprite that you want to put behind the window (it calls the same "addChildAt" function that JonForum suggested). You can look at the Window_BattleLog for an example of how to do this.

 

[megumi014]

Thank you all

Both the "addChildAt" and "addChildToBack" worked perfectly. I tried to look for the Scene but I couldn't find it for this EventItem that is why I was so lost xD

As for your second question, did you try 105 instead? Maybe it could fix the problem.

Changing 73 for 105? I tried it but nothing worked. But it's ok, maybe it's some plugin incompatibility. I turned down the ones I think that clashed but I guess I will try it later on a new project. Thanks anyways

 

[Jonforum]

Thank you all

Both the "addChildAt" and "addChildToBack" worked perfectly. I tried to look for the Scene but I couldn't find it for this EventItem that is why I was so lost xD

you can make reverse engineering with code.
All parents reference are attach to sprites.
Console.log(this.parent)
do it until you come across the scene content you need.