User input of images won't work when I do this.app.touch.on()

Help & Support
1

I have 6 buttons in a game and they only appear when the browser is a phone’s or tablet’s.
So for desktop the game is controlled with they keyboard, and for phones and tablets it’s controlled with these buttons, and a drag movement.
I have to do
this.app.touch.on("touchstart", this.touchStart, this);
this.app.touch.on("touchend", this.touchEnd, this);
for the drag, so I check when it starts touching and when it finishes, in all the screen. But now the problem is that if I try to use the buttons, they won’t work cause of the this.app.touch.on.
Is there any way to make the buttons work?

2

Hi @Visama,

Have you tried playing with this tutorial?

https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/

Basically to detect input on an Element component:

  • You enable the Use Input property.
  • You use one of the following event handlers directly on the entity element:
    // mouse events
    this.entity.element.on('mouseenter', this.onEnter, this);
    this.entity.element.on('mousedown', this.onPress, this);
    this.entity.element.on('mouseup', this.onRelease, this);
    this.entity.element.on('mouseleave', this.onLeave, this);

    // touch events
    this.entity.element.on('touchstart', this.onPress, this);
    this.entity.element.on('touchend', this.onRelease, this);
3

Yes, for the 6 buttons I have this piece of code

this.rotXpos.element.on('touch', function (event) {
        if (this.activePiece !== undefined && this.activePiece !== null) {
            this.activePiece.script.piece.rotateX(90);
        }
    }, this);
    
    this.rotXneg.element.on('touch', function (event) {
        if (this.activePiece !== undefined && this.activePiece !== null) {
            this.activePiece.script.piece.rotateX(-90);
        }
    }, this);
    
    this.rotYpos.element.on('touch', function (event) {
        if (this.activePiece !== undefined && this.activePiece !== null) {
            this.activePiece.script.piece.rotateY(90);
        }
    }, this);
    
    this.rotYneg.element.on('touch', function (event) {
        if (this.activePiece !== undefined && this.activePiece !== null) {
            this.activePiece.script.piece.rotateY(-90);
        }
    }, this);
    
    this.rotZpos.element.on('touch', function (event) {
        if (this.activePiece !== undefined && this.activePiece !== null) {
            this.activePiece.script.piece.rotateZ(90);
        }
    }, this);
    
    this.rotZpos.element.on('touch', function (event) {
        if (this.activePiece !== undefined && this.activePiece !== null) {
            this.activePiece.script.piece.rotateZ(-90);
        }
    }, this);

I know this.activePiece is defined and is not null since when I try the controls with the keybard, the if is true, so it has to be sth from the touch. I also tried a console.log with one of the buttons before the if, but it doesn’t print anything in the console.

4

Not sure what’s the issue then, can you share a project link to take a look?

5

Unluckily, I can’t do that anymore. The client wants the project to be private.

6

Maybe then try recreating a simple sample project that reproduces the issue?

Otherwise, if that’s acceptable, try adding me to the project with my pc username: leonidas

7

Well. I made a sample project for you to see, but in the sample it works perfectly xDDD
So I’m gonna check what’s happening with the real project.

1 Like
8

That’s great, most likely it’s a conflict somewhere. Your logic seems to be ok.