[SOLVED] Touch on Pictures

● ARCHIVED · READ-ONLY
Started by SangHendrix 10 posts View original ↗
  1. SangHendrix
    #1 Source
    Hello. I'm porting a game of mine to Android and the game features touchable buttons that made entirely with Pictures such as Title Screen and Menu Button. I want when I touch these pictures, the commands I set up will be activated. At the moment, I'm using a plugin called "TTKC - Detect Picture Click" by Fogomax, but unfortunately, this plugin only supports mouse click, not mobile touch. Below here is how the plugin works. If I click on picture number 1, all commands below will be activated. Can anyone help me with this? Thank you.

    Fv3jUBP.png
  2. Shaz
    #2 Source
    It sounds like you might just need a mod to that plugin that detects touch as well as mouse.
  3. SangHendrix
    #3 Source
    Shaz said:
    It sounds like you might just need a mod to that plugin that detects touch as well as mouse.
    Well that's corrected but after hours of research I couldn't do it, sadly. I hope someone can help me with this. That'd be so awesome.
  4. Shaz
    #4 Source
    Try adding this:
    Code:
      var _TouchInput_onTouchStart = TouchInput._onTouchStart;

  TouchInput._onTouchStart = function(event) {
    _TouchInput_onTouchStart.call(this, event);
    if (SceneManager._scene instanceof Scene_Map) {
      for (var i = 0; i < $.pictures.length; i++) {
        var pictureSprite = SceneManager._scene._spriteset._pictureContainer.children[$.pictures[i] - 1];
        var x = Graphics.pageToCanvasX(event.pageX);
        var y = Graphics.pageToCanvasY(event.pageY);
        if (x >= pictureSprite.getScreenX() && x <= pictureSprite.getScreenX() + pictureSprite.width
          && y >= pictureSprite.getScreenY() && y <= pictureSprite.getScreenY() + pictureSprite.height
          && pictureSprite.visible) {
          $.picturesResults[$.pictures[i]] = true;
        }
      }
    }
  };

  var _TouchInput_onTouchEnd = TouchInput._onTouchEnd;

  TouchInput._onTouchEnd = function(event) {
    _TouchInput_onTouchEnd.call(this, event);
    if (SceneManager._scene instanceof Scene_Map) {
      for (var i = 0; i < $.pictures.length; i++) {
        $.picturesResults[$.pictures[i]] = false;
      }
      if (!$.playerCanMove) $.playerCanMove = true;
    }
  };

    after this:
    Code:
    //-----------------------------------------------------------------------------
// TouchInput
//

    I haven't tested it (and I have no way to test it). If it gives you an error, please post a screenshot of the console log.

    I couldn't give it to you earlier because I was at work and didn't have my laptop with me.
  5. SangHendrix
    #5 Source
    It didn't work, sadly. I actually tried that this morning but nothing happened.
  6. Shaz
    #6 Source
    That's the only thing I can come up with, and as I don't have anything to test on, I can't try to tweak it. Sorry.
  7. SangHendrix
    #7 Source
    Shaz said:
    That's the only thing I can come up with, and as I don't have anything to test on, I can't try to tweak it. Sorry.
    That's alright.
    Update:
    @Shaz: I think your code did add touch function to the plugin, but the code couldn't recognize if I touched the pictures or not. Probably because mouse cursor does have a visual icon, while touch doesn't have.
  8. SangHendrix
    #8 Source
    Update: I solved the problem by myself.
    In case anyone needs the plugins to work the same way that I wanted, here's what you need to add below the "//TouchInput" line:


    //-----------------------------------------------------------------------------
    // TouchInput
    //

    var _TouchInput_onTouchStart = TouchInput._onTouchStart;

    TouchInput._onTouchStart = function(event) {
    _TouchInput_onTouchStart.call(this, event);
    if (SceneManager._scene instanceof Scene_Map) {
    for (var i = 0; i < $.pictures.length; i++) {
    var pictureSprite = SceneManager._scene._spriteset._pictureContainer.children[$.pictures - 1];
    var x = TouchInput.x;
    var y = TouchInput.y;
    if (x >= pictureSprite.getScreenX() && x <= pictureSprite.getScreenX() + pictureSprite.width
    && y >= pictureSprite.getScreenY() && y <= pictureSprite.getScreenY() + pictureSprite.height
    && pictureSprite.visible) {
    $.picturesResults[$.pictures] = true;
    }
    }
    }
    };

    var _TouchInput_onTouchEnd = TouchInput._onTouchEnd;

    TouchInput._onTouchEnd = function(event) {
    _TouchInput_onTouchEnd.call(this, event);
    if (SceneManager._scene instanceof Scene_Map) {
    for (var i = 0; i < $.pictures.length; i++) {
    $.picturesResults[$.pictures] = false;
    }
    if (!$.playerCanMove) $.playerCanMove = true;
    }
    };
  9. Shaz
    #9 Source
    Okay, so I see you've used
    Code:
    var x = TouchInput.x;
var y = TouchInput.y;
    instead of
    Code:
    var x = Graphics.pageToCanvasX(event.pageX);
var y = Graphics.pageToCanvasY(event.pageY);

    which makes sense. I didn't look closely enough and probably wouldn't have picked that up anyway.

    But I think in every place where you've removed the after $.pictures you should put it back. That's an array and you're iterating through it. I'm not sure what the result is with what you've done, but I would expect it to not work properly because of it. Try having multiple interactive pictures and click on different ones and see if they all work. I think it's going to cause problems sooner or later.
  10. SangHendrix
    #10 Source
    I tested and it worked wonderfuly. Which is a relief. I have 3 pictures on screen all the times and they all work fine.