Creating a Window in Battle Scene

[Juzkhain]

Hello every one, I've just started learning how to make my own pluguins and I've found a trouble I can't bypass.
What I'm trying to do is to create a window in the Battle Scene that shows the States that the main actor is suffering.
The problem is that I don't know how to create a window in the battle scene, I don't know what I'm doing wrong.

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

Window_ActorState.prototype = Object.create(Window_Command.prototype);
Window_ActorState.prototype.constructor = Window_ActorState;

Window_ActorState.prototype.initialize = function() {
    var y = Graphics.boxHeight - this.windowHeight();
    Window_Command.prototype.initialize.call(this, 0, y);
    this.openness = 0;
    this.deactivate();
    this._actor = null;
};

Window_ActorState.prototype.windowWidth = function() {
    return 192;
};

Window_ActorState.prototype.numVisibleRows = function() {
    return 4;
};

Window_ActorState.prototype.makeCommandList = function() {
    if (this._actor) {
        this.addAttackCommand();
        this.addSkillCommands();
        this.addGuardCommand();
        this.addItemCommand();
    }
};

Window_ActorState.prototype.addAttackCommand = function() {
    this.addCommand(TextManager.attack, 'attack', this._actor.canAttack());
};

Window_ActorState.prototype.addSkillCommands = function() {
    var skillTypes = this._actor.addedSkillTypes();
    skillTypes.sort(function(a, b) {
        return a - b;
    });
    skillTypes.forEach(function(stypeId) {
        var name = $dataSystem.skillTypes[stypeId];
        this.addCommand(name, 'skill', true, stypeId);
    }, this);
};

Window_ActorState.prototype.addGuardCommand = function() {
    this.addCommand(TextManager.guard, 'guard', this._actor.canGuard());
};

Window_ActorState.prototype.addItemCommand = function() {
    this.addCommand(TextManager.item, 'item');
};
Window_ActorState.prototype.setup = function(actor) {
    this._actor = actor;
    this.clearCommandList();
    this.makeCommandList();
    this.refresh();
    this.selectLast();
    this.activate();
    this.open();
};

Window_ActorState.prototype.processOk = function() {
    if (this._actor) {
        if (ConfigManager.commandRemember) {
            this._actor.setLastCommandSymbol(this.currentSymbol());
        } else {
            this._actor.setLastCommandSymbol('');
        }
    }
    Window_Command.prototype.processOk.call(this);
};

Window_ActorState.prototype.selectLast = function() {
    this.select(0);
    if (this._actor && ConfigManager.commandRemember) {
        var symbol = this._actor.lastCommandSymbol();
        this.selectSymbol(symbol);
        if (symbol === 'skill') {
            var skill = this._actor.lastBattleSkill();
            if (skill) {
                this.selectExt(skill.stypeId);
            }
        }
    }
};

Let's say that this is a the window. Is a clone of the Action Command Window, I've only replaced the name for Actor State.

But the thing is that I don't know how to call the window to be allways present in the screen.

I've tried this:

var old_createAllWindows = Scene_Battle.prototype.createAllWindows
Scene_Battle.prototype.createAllWindows = function() {
    old_createAllWindows.call(this)
    this.createActorStateWindow();

};
Scene_Battle.prototype.createActorStateWindow = function() {
    this._actorStateWindow = new Window_ActorState();
    this.addWindow(this._actorStateWindow);
};

Scene_Battle.prototype.isAnyInputWindowActive = function() {
    return (this._partyCommandWindow.active ||
            this._actorCommandWindow.active ||
            this._skillWindow.active ||
            this._actorStateWindow.active ||
            this._itemWindow.active ||
            this._actorWindow.active ||
            this._enemyWindow.active);
};

But nothing works.

Can somebody please help me.
I'm a total noob and maybe I'm comiting all kind of mistakes, please be gentle.

Thank you in advance.

 

[Zevia]

What happens if you add

this._actorStateWindow.open();

in your createActorStateWindow function, at the end? If that doesn't work, what happens if you try .show() instead of .open()?

If that's no good, try opening up the dev console with F8 (or F12 for some people, I guess?) and running the following:

var stateWindow = SceneManager._scene._actorStateWindow;
console.log(stateWindow.x); // Should be 0
console.log(stateWindow.y); // Should be something in the 400-600 range, I'm guessing?
console.log(stateWindow.opacity); // Should be 255
console.log(stateWindow.height); // Should be something around the 200 range, maybe?
console.log(stateWindow.width); // Should be 192

If x or y are undefined or really high values, it could be showing, but offscreen. If opacity is 0, then it could be hidden. If height or width are 0, then it doesn't have the right dimensions.

 

[Juzkhain]

ok, so first of all, thank you for answering.
When I add

this._actorStateWindow.open();

at the end of create state window, it tells me that the function does not exist, and the same for .show.

I did the test with the dev console and all the values returned as you said:

var stateWindow = SceneManager._scene._actorStateWindow;
console.log(stateWindow.x); // 0
console.log(stateWindow.y); // 444
console.log(stateWindow.opacity); // 255
console.log(stateWindow.height); // 180
console.log(stateWindow.width); // 192

Does this mean that the window exist somehow although I can't see it?

I don't know.

 

[Zevia]

Are you sure you added the .open() call correctly? I just tried it in a new project and it works. Make sure you're doing this._actorStateWindow.open() and not this.open().

Here's everything I've got, just copy-pasting your code and adding the open() call:

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

    Window_ActorState.prototype = Object.create(Window_Command.prototype);
    Window_ActorState.prototype.constructor = Window_ActorState;

    Window_ActorState.prototype.initialize = function() {
        var y = Graphics.boxHeight - this.windowHeight();
        Window_Command.prototype.initialize.call(this, 0, y);
        this.openness = 0;
        this.deactivate();
        this._actor = null;
    };

    Window_ActorState.prototype.windowWidth = function() {
        return 192;
    };

    Window_ActorState.prototype.numVisibleRows = function() {
        return 4;
    };

    Window_ActorState.prototype.makeCommandList = function() {
        if (this._actor) {
            this.addAttackCommand();
            this.addSkillCommands();
            this.addGuardCommand();
            this.addItemCommand();
        }
    };

    Window_ActorState.prototype.addAttackCommand = function() {
        this.addCommand(TextManager.attack, 'attack', this._actor.canAttack());
    };

    Window_ActorState.prototype.addSkillCommands = function() {
        var skillTypes = this._actor.addedSkillTypes();
        skillTypes.sort(function(a, b) {
            return a - b;
        });
        skillTypes.forEach(function(stypeId) {
            var name = $dataSystem.skillTypes[stypeId];
            this.addCommand(name, 'skill', true, stypeId);
        }, this);
    };

    Window_ActorState.prototype.addGuardCommand = function() {
        this.addCommand(TextManager.guard, 'guard', this._actor.canGuard());
    };

    Window_ActorState.prototype.addItemCommand = function() {
        this.addCommand(TextManager.item, 'item');
    };
    Window_ActorState.prototype.setup = function(actor) {
        this._actor = actor;
        this.clearCommandList();
        this.makeCommandList();
        this.refresh();
        this.selectLast();
        this.activate();
        this.open();
    };

    Window_ActorState.prototype.processOk = function() {
        if (this._actor) {
            if (ConfigManager.commandRemember) {
                this._actor.setLastCommandSymbol(this.currentSymbol());
            } else {
                this._actor.setLastCommandSymbol('');
            }
        }
        Window_Command.prototype.processOk.call(this);
    };

    Window_ActorState.prototype.selectLast = function() {
        this.select(0);
        if (this._actor && ConfigManager.commandRemember) {
            var symbol = this._actor.lastCommandSymbol();
            this.selectSymbol(symbol);
            if (symbol === 'skill') {
                var skill = this._actor.lastBattleSkill();
                if (skill) {
                    this.selectExt(skill.stypeId);
                }
            }
        }
    };

    var old_createAllWindows = Scene_Battle.prototype.createAllWindows
    Scene_Battle.prototype.createAllWindows = function() {
        old_createAllWindows.call(this)
        this.createActorStateWindow();

    };
    Scene_Battle.prototype.createActorStateWindow = function() {
        this._actorStateWindow = new Window_ActorState();
        this.addWindow(this._actorStateWindow);
        this._actorStateWindow.open(); // This is the only line I've added
    };

    Scene_Battle.prototype.isAnyInputWindowActive = function() {
        return (this._partyCommandWindow.active ||
                this._actorCommandWindow.active ||
                this._skillWindow.active ||
                this._actorStateWindow.active ||
                this._itemWindow.active ||
                this._actorWindow.active ||
                this._enemyWindow.active);
    };
})();

And here's what I get:

Spoiler: Window_ActorState

Since it's basically a copy of the Command Window, it appears over the old Command Window with no commands.

 

[Juzkhain]

Ok, your code works perfectlly.
I don't know, mine dont have:

(function() {

Can this have anything to do? I don't understand where do I have to put it and where don't, I've observed that some puguins include it and some don't.

Well, thank you very much, you solved my problem. I'm still learning, I supose that there are a lot of thngs that I still have to learn.

 

[Zevia]

So that's what's known as an Immediately Invoked Function Expression, or IIFE. It helps prevent global variable declarations so you don't clutter up the window object with anything that you don't need to.

As an example, if I do:

var myVariable = 5;
function logNumber() {
  console.log(myVariable);
}

Then myVariable and logNumber are now on the window. The User could change the value of myVariable with the dev console. If another Plugin is making use of a function called logNumber, it's going to overwrite yours.

However, variables and functions are always local to their scope, which is basically any code block. So by doing:

(function() {
  var myVariable = 5;
  function logNumber() {
    console.log(myVariable);
  }
})();

Now that variable declaration is only available within the scope of that anonymous function I've defined. A User won't be able to modify the value of myVariable or overwrite the logNumber function. Also, other Plugin writers won't have to worry about my variables.

None of that should've had an effect on your code working vs. mine, though. You could get rid of the first and last lines of what I posted if you want and it should still work. My guess is that you accidentally put "this.open()" instead of "this._actorStateWindow.open()". That will try to call open() on the instance of the Scene_Battle currently running which, as the error says, is not defined.

 

[Juzkhain]

Thank you very much, you were right about everything.
I've just started learning code and right now i'm a bit overwhelmed. Right Now it seems like a titanic task to me, but you know, step by step.