Adding pictures to windows + calling a function when clicking on text?

[Amarok]

Hey there, been trying to achieve this for a while, but all the standard JS solutions i tried didnt work.
Does anyone know how to achieve any of this? btw i dont mean the default text, but the one you call with the drawtext function.
For reference, this is my code:

Making the window in question:

NarrationWindow = new Window_Base(380, 520, 1200, 266);
SceneManager._scene.addChild(NarrationWindow)

And this is the text:
NarrationWindow.drawText(string, 0, 0+(20*lineatexto));

that "string" is a global variable with a string of text stored on it, so my guess, maybe i need to find the right way to use on mouse click or on mouse over events on it.

Any info on this can be helpful, thanks a lot in advance!

 

[caethyril]

The general approach is, for each clickable object:

• Check if the object is accepting clicks right now (implementation-dependent).
• Check for a "click": TouchInput.isTriggered().
• Check "click" coordinates against clickable object's coordinates: TouchInput.x & TouchInput.y vs your object's boundaries.
  • I.e. touch x > object x, touch x < object x + object width, etc.

You may find Window_Selectable.prototype.processTouch to be a handy reference (rpg_windows.js). It's called via the window's update() method.

 

[Amarok]

@caethyril thanks a lot! completely forgot to answer too, sorry about that!
Still digging trough the windows.js, i wish there was some good official documentation for the engine

 

[caethyril]

Oh, if you're having trouble tracking down the processTouch stuff:

Spoiler: Code excerpt

Window_Selectable.prototype.processTouch = function() {
    if (this.isOpenAndActive()) {
        if (TouchInput.isTriggered() && this.isTouchedInsideFrame()) {
            this._touching = true;
            this.onTouch(true);
        } else if (TouchInput.isCancelled()) {
            if (this.isCancelEnabled()) {
                this.processCancel();
            }
        }
        if (this._touching) {
            if (TouchInput.isPressed()) {
                this.onTouch(false);
            } else {
                this._touching = false;
            }
        }
    } else {
        this._touching = false;
    }
};

Window_Selectable.prototype.isTouchedInsideFrame = function() {
    var x = this.canvasToLocalX(TouchInput.x);
    var y = this.canvasToLocalY(TouchInput.y);
    return x >= 0 && y >= 0 && x < this.width && y < this.height;
};

As you can see, it's primarily a case of checking the input coordinates against the "touchable" coordinate area: left, right, top, and bottom (all in pixels). Your text is drawn inside the window, so, for example, the left x-value will be something like:

NarrationWindow.x + NarrationWindow.standardPadding()

...and the right x-value could be offset from that by the width of the text, not sure what the default width is. Your window inherits Window_Base.prototype.textWidth(text), so you could use that if appropriate, i.e.

NarrationWindow.textWidth(string)

In that case you might want to store the result in a variable when the text is drawn, so you're not calling textWidth every frame.

The y-value would be similar...drawText uses the parent window's lineHeight function for the text height, i.e. bottom of text would be at:

y + NarrationWindow.lineHeight()

Also, as you can see from the above excerpt, Window_Selectable uses a _touching flag to distinguish between new and continued input.

 

[Trace]

Or you can just use sprite_button and overlay that sprite_button on top your text for convenient use