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

Discussion in 'Learning Javascript' started by Amarok, May 21, 2019.

  1. Amarok

    Amarok Veteran Veteran

    Messages:
    288
    Likes Received:
    710
    Location:
    Spain
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    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!
     
    #1
  2. caethyril

    caethyril ^_^ Veteran

    Messages:
    1,270
    Likes Received:
    790
    Location:
    UK
    First Language:
    English
    Primarily Uses:
    RMMV
    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. :)
     
    #2
    Amarok and Bex like this.
  3. Amarok

    Amarok Veteran Veteran

    Messages:
    288
    Likes Received:
    710
    Location:
    Spain
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    @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
     
    #3
  4. caethyril

    caethyril ^_^ Veteran

    Messages:
    1,270
    Likes Received:
    790
    Location:
    UK
    First Language:
    English
    Primarily Uses:
    RMMV
    Oh, if you're having trouble tracking down the processTouch stuff:
    Code:
    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:
    Code:
    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.
    Code:
    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. :kaoswt2:

    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:
    Code:
    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. :kaothx:
     
    Last edited: May 24, 2019
    #4
    Amarok likes this.
  5. Trace

    Trace A Rieri Fan :3 Member

    Messages:
    10
    Likes Received:
    9
    First Language:
    Indonesia
    Primarily Uses:
    RMMV
    Or you can just use sprite_button and overlay that sprite_button on top your text for convenient use
    :kaopride:
     
    #5
    caethyril likes this.

Share This Page