need help with touches

[veter.pl]

Hi

 Im working on a platform game for mobiles, and I'm trying to make a touch GUI for move left, right, jump, and enter key. Can sopeone help me with example of using touches? I wanted to create four squares on the screen touch-available, keeping square pressed would keep player moving.

Thanks for any help!

[melonJS]

Hi Peter,

You can check this,
http://www.melonjs.org/demos/whack-a-mole/

and here is a couple of key stuff to look at :

http://www.melonjs.org/docs/symbols/me.input.html#touches
http://www.melonjs.org/docs/symbols/me.input.html#triggerKeyEvent

As well be sure to use the last 0.9.4 version, as a couple of small issues have been corrected on the mouse/touch support.

[melonJS]

Note that basically the idea is to define 4 me.rect region on screen, register them all respectively to touchdown, touchup(or mousedown/mouseup, since this will be automatically converterd to touch events), and in the corresponding callback, call triggerEvent passing the required key id, and true as second parameter in case of touchdown, or false in case of touchup.

[veter.pl]

Thank you, but accually I can't found any touches example (documentation of touches is not clear enought for me)

I just would like to see example how to implement touches rect ingame.

I googled it but i get nothing.

[veter.pl]

I've found the solution (this is for moving left):

var HUD_left = me.HUD_Item.extend({

init : function(x, y) {

// call the parent constructor

this.parent(x, y);

this.isClickable = true;

this.livesIcon = me.loader.getImage("btnleft");

me.input.registerMouseEvent('mousedown', new me.Rect(new me.Vector2d(10, 410), 70, 480), this.mouseDown.bind(this));

me.input.registerMouseEvent('mouseup', new me.Rect(new me.Vector2d(10, 410), 70, 480), this.mouseUp.bind(this));

},

draw : function(context, x, y) {

this.livesIcon = me.loader.getImage("btnleft");

context.drawImage(this.livesIcon, this.pos.x + x, this.pos.y + y);

},

mouseDown : function() {

me.input.triggerKeyEvent(me.input.KEY.LEFT, true);

console.log("Action: mouseDown left");

},

mouseUp : function() {

me.input.triggerKeyEvent(me.input.KEY.LEFT, false);

console.log("Action: mouseUp right");

}

});

and in var PlayScreen onResetEvent added

me.game.HUD.addItem("btnleft", new HUD_left(10, 410));

and so on for every action:)

works perfect!

[melonJS]

Exactly!

Why did you however used HUD items, and not something like GUI Object?
The advantage of the later is that as it extends Sprite and so Rect, you don't have to create/specify a new rect and can directly use the object itself as reference.

Think as well about passing true for the 4th parameter (to indicate it's a floating object), and about adding the onDestroyEvent function to actually remove the mouse/touch listener when the object is destroyed.

Cheers,
Olivier.

[veter.pl]

I read that GUI object will be removed so I used HUD. soooo It won't be removed?:)

Thanks for the tips!

[bdrea...@gmail.com]

Hello!

I tried with GUI_Object instead of hud_item. However, the "touched" region is relative to the game screen and not to the hud screen. So the image is on the bottom but to trigger the clicked, I need to click on top of the screen.

It seems that someone else was able to make it work properly (see first post of https://groups.google.com/forum/#!searchin/melonjs/hud$20control/melonjs/Wxbn8ryY2uE/i7arrZ2I5U8J)

Any explanation for this?

Thanks

[Jay Oster]

GUI_Object has a built-in click handler that uses the `floating` feature to interpret mouse event coordinates as relative to the screen. If you want coordinates that are relative to the map, you need to register mouse events on the rectangle object with `floating` disabled.

If you could explain in more detail what you are doing, or even better provide a link to your game, we could give some other tips.

[bdrea...@gmail.com]

Hi jay!

here's a link to the work im trying to do:

http://civan.gaudtechnologies.com/demo/

if you click on the guy in the blue toolbar below, you should see "CLICKED!" in console. Instead, to print that CLICKED, you need to click on top of the screen at around x:40,y:10

Thanks

[Jay Oster]

My debugger complains about main.js:255

posx = e.touches[0].pageX;
posy = e.touches[0].pageY;

I think those should probably be `me.input.touches[0].x` and `me.input.touches[0].y` to be compatible with desktop browsers.

Another problem I ran into is the "BaseUnit" class registers a mouse event in its constructor, but is missing a destructor to release the mouse event! This causes the debugger to pause on an uncaught exception when I click on the canvas after a BaseUnit class has been removed. This exception also prevents mouse events to propagate to other objects, like your GUI_Item.

Now, to solve your original problem, you can't add a GUI_Item to the HUD_Object. A couple of reasons for this: GUI_Item doesn't support the HUD_Item API, and it will mix up coordinate spaces. Instead, add your GUI_Item to the object manager using the normal `me.game.add()` method, keeping in mind to fix the coordinates for the GUI_Item.