Fionn23

Eternal Noob
Veteran
Joined
Dec 11, 2021
Messages
119
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
3,009
Reaction score
2,304
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
119
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
3,009
Reaction score
2,304
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 Posts

Latest Profile Posts

Sometimes I wonder why I still try and recruit others to help with my games. It never works.
ScreenShot_10_3_2022_4_27_17.png
welp, thanks to Luna MV, I was able to add the Balloon as a window... thus allowing me to edit the font color and outline... so now it looks like comic bubbles above characters. I have NO idea why I couldn't get this to work through more conventional means, but here we are.
CUTE CUTE CUTE.gif
I cannot cease doing cute art
War and Wonder is a 100% choice-based open-world visual novel.
1664821313732.png
1664821466359.png
1664821547746.png
Going live soon on Twitch, and will continue Fortunastreet's game "Verloren". For those who are curious, you are welcome to join ;)

-> Franz' Twitch channel

Forum statistics

Threads
125,758
Messages
1,173,265
Members
164,916
Latest member
Syczewski
Top