Error when trying to create Own Window

[Illya]

Hi,

I want to make a plugin for my game which includes that it will need to create its own window. So I searched online for some tutorials but for some reason, even-though my code is the exact same as theirs, it doesn't work, and I always get the same error message in the console:


I hope that someone knows what is going on. I think I miss something but I don't know what
Here is my code:

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

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

MyWindow.prototype.initialize = (x, y, width, height) => {
    Window_Base.prototype.initialize(x, y, width, height);
}

MyWindow.prototype.update = () => {
    Window_Base.prototype.update.call(this);
}

let scene = SceneManager._scene;
let myWindow = new MyWindow(200, 200, 300, 300);
scene.addChild(myWindow);

 

[caethyril]

• Arrow functions are not suited for use as methods, use "proper" functions instead. In case you're interested, you can read up on arrow functions here:
  
  

  Arrow function expressions

  An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.

  developer.mozilla.org
• I notice you've used call to invoke the parent update method in the context of this instance; you should do the same with initialize. You can use call or apply, link in case you're interested:
  
  

  Function.prototype.apply()

  The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).

  developer.mozilla.org

Put together:

Spoiler: Untested code

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

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

MyWindow.prototype.initialize = function(x, y, width, height) {
    Window_Base.prototype.initialize.apply(this, arguments);
};

MyWindow.prototype.update = function() {
    Window_Base.prototype.update.apply(this, arguments);
};

const scene = SceneManager._scene;
const myWindow = new MyWindow(200, 200, 300, 300);
scene.addChild(myWindow);

Note I've used const for the two variables at the end. The properties of a const-declared object can be changed, but the variable reference cannot be reassigned. More info here in case you're interested~

const

Constants are block-scoped, much like variables defined using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared.

developer.mozilla.org

 

[Illya]

Hi thanks for your reply. Your code works fine except that I have to create a new MyWindow at runtime in the console. DO you know a method to create the window when the scene (e.g. Scene_Map) gets called when I start the game?
Also thanks for the references.

 

[caethyril]

Great!

Scene_Map has a method named createAllWindows that gets called shortly after it starts (see rpg_scenes.js):

Scene_Map.prototype.createAllWindows = function() {
    this.createMessageWindow();
    this.createScrollTextWindow();
};

You can "alias" that method to run your code right after the original code. Here's an example:

// Store original method in a variable for later (i.e. make an alias)
const _Scene_Map_createAllWindows = Scene_Map.prototype.createAllWindows;
// Now redefine the method~
Scene_Map.prototype.createAllWindows = function() {
  // Call the aliased method (i.e. add the default windows)
  _Scene_Map_createAllWindows.apply(this, arguments);
  // Then create an instance of your window and add it to the scene!
  this._myWindow = new MyWindow(200, 200, 300, 300);
  this.addChild(this._myWindow);
};

 

[Illya]

Thanks a bunch again. Works without any trouble.
Do you know which method(-s) I need to use in order to assign the .close() method to a key? I know that the scene inherit the .addListener() function, but I can't really get it to work.

 

[caethyril]

RMMV uses its own handlers via a couple of methods inherited from Window_Selectable:

• addHandler(symbol, method) and
• callHandler(symbol)

If you want your window to intercept player inputs I'd recommend inheriting from Window_Selectable instead of Window_Base. Then I think you could do something like this:

const _Scene_Map_createAllWindows = Scene_Map.prototype.createAllWindows;
Scene_Map.prototype.createAllWindows = function() {
  _Scene_Map_createAllWindows.apply(this, arguments);
  this._myWindow = new MyWindow(200, 200, 300, 300);
  this._myWindow.setHandler('ok', this.commandMyWindow.bind(this));  // <- added!
  this.addChild(this._myWindow);
};

Scene_Map.prototype.commandMyWindow = function() {
  this._myWindow.close();
  alert('Hello world!');
};

Window_Selectable automatically checks for "OK" button input and fires the handler when appropriate, so the above code is just saying "run this method when OK is triggered".

Edit @Illya: if you really want a special "close" handler you could try defining a custom close or updateClose method for your window, e.g.

MyWindow.prototype.updateClose = function() {
  const wasClosing = this._closing;
  Window_Selectable.prototype.updateClose.apply(this, arguments);
  if (wasClosing && this.isClosed()) this.callHandler('close');
};

...then you could use 'close' in the setHandler line instead of 'ok'.

Hope that makes sense!

 

[Illya]

Hi, thanks for your reply. Sorry to say this but, I get the error this._myWindow.setHandler is not a function.

Edit: And sorry, but the second block of code (updateClose) doesn't make much sense to me yet.

 

[caethyril]

It's OK! I should have just given some example code, see if this works for you and/or makes more sense (I tested it this time!):

Spoiler: Example #2!

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

// Now inherits from Window_Selectable!
MyWindow.prototype = Object.create(Window_Selectable.prototype);
MyWindow.prototype.constructor = MyWindow;

MyWindow.prototype.initialize = function(x, y, width, height) {
    Window_Selectable.prototype.initialize.apply(this, arguments);
};

MyWindow.prototype.update = function() {
    Window_Selectable.prototype.update.apply(this, arguments);
};

const _Scene_Map_createAllWindows = Scene_Map.prototype.createAllWindows;
Scene_Map.prototype.createAllWindows = function() {
    _Scene_Map_createAllWindows.apply(this, arguments);
    this._myWindow = new MyWindow(200, 200, 300, 300);
    this._myWindow.setHandler('ok', this.commandMyWindow.bind(this));
    this._myWindow.active = true;     // <- check player input when active
    this.addChild(this._myWindow);
};

Scene_Map.prototype.commandMyWindow = function() {
    this._myWindow.close();
    alert('My window was closed!');
};

I think the error was maybe because you didn't change Window_Base to Window_Selectable; the handler methods aren't defined on Window_Base.

Where to go from here depends a bit on what you're trying to achieve...at the moment this will just put a window on-screen, which closes (and shows a message) the first time the player presses the OK button. Not very interesting!

In case it helps: you can find the code behind the default windows in your project folder, under js/rpg_windows.js. Since this example makes MyWindow inherit from Window_Selectable, that means everything defined for Window_Selectable will also be available for MyWindow.

 

[Illya]

Hi, thank you very much! The code works really well. If you don't mind, how can I assign keys like 'V' or some other key still unassigned to call the close method?

 

[caethyril]

OK, so first: RMMV has a preset list of buttons it recognises...if you want another one you'll need to figure out its keycode (I think it's mostly just ASCII) and add it to the keymapper, maybe like this:

Input.keyMapper[86] = 'v';

Now you'd also need to get the window to check for that input. By default Window_Selectable checks for a bunch of different inputs during its update cycle every frame:

Spoiler: Window_Selectable input update stuff (rpg_windows.js)

Window_Selectable.prototype.update = function() {
    Window_Base.prototype.update.call(this);
    this.updateArrows();
    this.processCursorMove();
    this.processHandling();
    this.processWheel();
    this.processTouch();
    this._stayCount++;
};

Window_Selectable.prototype.processHandling = function() {
    if (this.isOpenAndActive()) {
        if (this.isOkEnabled() && this.isOkTriggered()) {
            this.processOk();
        } else if (this.isCancelEnabled() && this.isCancelTriggered()) {
            this.processCancel();
        } else if (this.isHandled('pagedown') && Input.isTriggered('pagedown')) {
            this.processPagedown();
        } else if (this.isHandled('pageup') && Input.isTriggered('pageup')) {
            this.processPageup();
        }
    }
};

Window_Selectable.prototype.isOkTriggered = function() {
    return Input.isRepeated('ok');
};

So for your window, you may be able to do something like this:

Spoiler: Custom window input handling?

Input.keyMapper[86] = 'v';   // so the game recognises that button

MyWindow.prototype.processHandling = function() {
  if (this.isOpenAndActive()) {
    if (this.isMyInputTriggered()) {
      this.processMyInput();
    } else {
      Window_Selectable.prototype.processHandling.apply(this, arguments);
    }
  }
};

MyWindow.prototype.isMyInputTriggered = function() {
  return Input.isRepeated('v');
};

MyWindow.prototype.processMyInput = function() {
  alert('Hello world!');
};