Fionn23

Eternal Noob
Veteran
Joined
Dec 11, 2021
Messages
115
Reaction score
57
First Language
Filipino
Primarily Uses
RMMZ
I have two Window_Command. One is activated, the other is deactivated.

Here is my sample code:
JavaScript:
Input.keyMapper["71"] = "openTest";

_alias_scene_map_updatetest = Scene_Map.prototype.update;
Scene_Map.prototype.update = function()
{
    _alias_scene_map_updatetest.call(this);
    if(Input.isTriggered("openTest")) SceneManager.push(SceneTest);
}


class WindowTest extends Window_Base
{
    constructor(rect)
    {
        super(rect);
    }
}

class SceneTest extends Scene_MenuBase
{
    create()
    {
        super.create();
        var rect = new Rectangle(0, 0, 100, 100);
        this._customWindow = new WindowTest(rect);
        this._customWindow.drawText("Box", 0, 0);
        this.addWindow(this._customWindow);
        
        var rect1 = new Rectangle(0, 200, 200, 200);
        this._customCommandWindow = new SampleCommand(rect1);
        this._customCommandWindow.setHandler("sampleCommand", this.sampleCommand.bind(this));
        this._customCommandWindow.setHandler("sampleCommand", this.sampleCommand.bind(this));
        this._customCommandWindow.setHandler("sampleCommand", this.sampleCommand.bind(this));
        this.addWindow(this._customCommandWindow);
        this._customCommandWindow.activate();
        this._customCommandWindow.select(0);
        
        
        var rect1 = new Rectangle(300, 200, 200, 200);
        this._anotherCommandWindow = new AnotherCommand(rect1);
        this._anotherCommandWindow.setHandler("anotherCommand", this.anotherCommand.bind(this));
        this._anotherCommandWindow.setHandler("anotherCommand", this.anotherCommand.bind(this));
        this._anotherCommandWindow.setHandler("anotherCommand", this.anotherCommand.bind(this));
        this.addWindow(this._anotherCommandWindow);
        this._anotherCommandWindow.deactivate();
    }

    sampleCommand()
    {
        console.log('sample');
        this._customCommandWindow.activate();
    }
    
    anotherCommand()
    {
        console.log('another');
        this._anotherCommandWindow.activate();
    }
}





class SampleCommand extends Window_Command
{
    constructor(rect)
    {
        super(rect);
    }
    
    makeCommandList()
    {
        this.addCommand ("Sample Command A1", "sampleCommand");
        this.addCommand ("Sample Command A2", "sampleCommand");
        this.addCommand ("Sample Command A3", "sampleCommand");
        
    }
}


class AnotherCommand extends Window_Command
{
    constructor(rect)
    {
        super(rect);
    }
    
    makeCommandList()
    {
        this.addCommand ("Another Command A1", "anotherCommand");
        this.addCommand ("Another Command A2", "anotherCommand");
        this.addCommand ("Another Command A3", "anotherCommand");
        
    }
    
    update()
    {
        super.update();
        
    }
}


SceneTest.prototype.update = function()
{
    Scene_MenuBase.prototype.update.call(this);
    if(Input.isTriggered("cancel")) SceneManager.pop();
}

How will I activate _anotherCommandWindow if the mouse pointer hovers over it?
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,994
Reaction score
2,281
First Language
Portuguese - Br
Primarily Uses
RMMZ
Hi there!
You need to look at the Window_Selectable class to understand how it works. Here:
JavaScript:
Window_Selectable.prototype.processTouch = function() {
    if (this.isOpenAndActive()) {
        if (this.isHoverEnabled() && TouchInput.isHovered()) {
            this.onTouchSelect(false);
        } else if (TouchInput.isTriggered()) {
            this.onTouchSelect(true);
        }
        if (TouchInput.isClicked()) {
            this.onTouchOk();
        } else if (TouchInput.isCancelled()) {
            this.onTouchCancel();
        }
    }
};

Window_Selectable.prototype.isHoverEnabled = function() {
    return true;
};

Window_Selectable.prototype.onTouchSelect = function(trigger) {
    this._doubleTouch = false;
    if (this.isCursorMovable()) {
        const lastIndex = this.index();
        const hitIndex = this.hitIndex();
        if (hitIndex >= 0) {
            if (hitIndex === this.index()) {
                this._doubleTouch = true;
            }
            this.select(hitIndex);
        }
        if (trigger && this.index() !== lastIndex) {
            this.playCursorSound();
        }
    }
};
 

Fionn23

Eternal Noob
Veteran
Joined
Dec 11, 2021
Messages
115
Reaction score
57
First Language
Filipino
Primarily Uses
RMMZ
Hi there!
You need to look at the Window_Selectable class to understand how it works. Here:
JavaScript:
Window_Selectable.prototype.processTouch = function() {
    if (this.isOpenAndActive()) {
        if (this.isHoverEnabled() && TouchInput.isHovered()) {
            this.onTouchSelect(false);
        } else if (TouchInput.isTriggered()) {
            this.onTouchSelect(true);
        }
        if (TouchInput.isClicked()) {
            this.onTouchOk();
        } else if (TouchInput.isCancelled()) {
            this.onTouchCancel();
        }
    }
};

Window_Selectable.prototype.isHoverEnabled = function() {
    return true;
};

Window_Selectable.prototype.onTouchSelect = function(trigger) {
    this._doubleTouch = false;
    if (this.isCursorMovable()) {
        const lastIndex = this.index();
        const hitIndex = this.hitIndex();
        if (hitIndex >= 0) {
            if (hitIndex === this.index()) {
                this._doubleTouch = true;
            }
            this.select(hitIndex);
        }
        if (trigger && this.index() !== lastIndex) {
            this.playCursorSound();
        }
    }
};
Thanks for pointing this to me. But still, I have no idea how to activate _anotherCommandWindow as the 'this' context inside those functions are always referring to the activated Window_Command.

What I've done to solve my problem is calculate the x and y values of the window. Whenever TouchInput.x and TouchInput.y points inside the window, that window will be activated.

I have no idea if this is a good way to do this though.
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,994
Reaction score
2,281
First Language
Portuguese - Br
Primarily Uses
RMMZ
Thanks for pointing this to me. But still, I have no idea how to activate _anotherCommandWindow as the 'this' context inside those functions are always referring to the activated Window_Command.

What I've done to solve my problem is calculate the x and y values of the window. Whenever TouchInput.x and TouchInput.y points inside the window, that window will be activated.

I have no idea if this is a good way to do this though.
By default the command window is already activated:
JavaScript:
Window_Command.prototype.initialize = function(rect) {
    Window_Selectable.prototype.initialize.call(this, rect);
    this.refresh();
    this.select(0);
    this.activate();
};

So, you just need to hover the mouse above its commands and it will select them automatically.

But I see you are deactivating the anotherCommandWIndow after you create and set the command handlers.
In that case, if you want to activate the window when the mouse is above it and deactivate the window if the mouse is not above it, I guess it's fine to do what you are doing: Checking if the mouse coordinate X and Y is inside the window.
The problem is by default, the Touch X and Y are only updated when you click. And there is a function to check if a click was being made inside the window frame:

JavaScript:
Window_Scrollable.prototype.isTouchedInsideFrame = function() {
    const touchPos = new Point(TouchInput.x, TouchInput.y);
    const localPos = this.worldTransform.applyInverse(touchPos);
    return this.innerRect.contains(localPos.x, localPos.y);
};

If that is not what you want, activate the window by clicking on it, you need to create other properties to keep track of the mouse X and Y when you move the mouse.

You can do this by storing the x and y of this function into a global object(or extend the touch input object with two new properties to hold that value):

JavaScript:
TouchInput._onMouseMove = function(event) {
    const x = Graphics.pageToCanvasX(event.pageX);
    const y = Graphics.pageToCanvasY(event.pageY);
    if (this._mousePressed) {
        this._onMove(x, y);
    } else if (Graphics.isInsideCanvas(x, y)) {
        this._onHover(x, y);
    }
};

Otherwise, you can keep the way you are doing.
 

Latest Threads

Latest Profile Posts

Made some new ground textures for our game, lots of textures still to be made but I think it start to look good =3
FddE0coWIAUA5Vy
People are stupid.
"Hello, our electricity has stopped working."
"Yeah, it just stopped for the entire area a couple mins ago."
"And why?"
"I don't know, need to investigate."
"And how long's it gonna last?"
Dude... Seriously?

Clarn Hold
(No storylines)

Forum statistics

Threads
125,549
Messages
1,171,866
Members
164,623
Latest member
Psychoghost
Top