Forums » Help » Impact + Cocoon: tap position being offset on right side of Nexus 4 screen

I'm trying to create an Android port of my latest ImpactJS game using CocoonJS and wonder if anyone might be able to shed some light on a problem I'm having with tap locations.

Everything seems to be working fine except this one issue I'm having. I have a pointer entity that interacts with player tiles and follows the mouse cursor like so:

    if (ig.game.mode === '2player' || ig.game.activePlayer === 'player1' || ig.game.currentLevel !== LevelMain) {
            this.pos.x = ig.input.mouse.x;
            this.pos.y = ig.input.mouse.y;
    }

For some reason the farther to the right of the screen I tap my finger, the more of an offset there seems to be between the location of the tap and the pointer (which should be following the mouse cursor, so the location of the tap).

This becomes a problem when I run the game in local two player mode. Tapping tiles on the left side of the screen works as it should, with the pointer entity being moved directly to the location of my tap. Tapping the other player's tiles on the right side of the screen results in the pointer being too far to the right, not touching the actual tile that's meant to be picked up.

You can see an example of this here. The tiny black dot on the right is the location of the pointer entity. My finger, at that time, was actually directly on top of the 'Force dispersal' tile beside it:

http://i.imgur.com/sEKLInF.png

I can actually see the pointer entity being offset more and more as I tap from left to right along the screen.

This is being run on a Nexus 4 and the dimensions of my game window are 1280 x 768.

This problem does not manifest when running directly in the browser, only through the Cocoon launcher. You can run it yourself in the browser or via the Cocoon launcher here:

http://liza.io/interdiction/interdictioncocoon/

I know this isn't really a CocoonJS support forum, but I know several people have used Impact with Cocoon and am thinking maybe someone else has run into this before.

I also had trouble with Impact's listeners working with CocoonJS, so I separated that code out completely and wrote it directly...

//get the canvas object
  var c = document.createElement('canvas');


//now listen for the touchstart on the entire canvas. 
//I attach the location to the ig global and look at it later.
//the divide by 2 is because I scaled x2 

	c.addEventListener(
		"touchstart",
		function(touchEvent) {
			var e= touchEvent.targetTouches[0];
			var touch = Object();
			touch['x'] = e.pageX/2;
			touch['y'] = e.pageY/2;
			ig.touchLocation = touch;
			ig.touchactive = true;
		});

I then manually calculate where the player touched and what sprite was being hit. I'm sure using this method if the player was touching a moving target would probably be a bit tricky, but my buttons never move around the screen, so this works fine for me. I also paint my buttons outside the Impact engine too.

Hope that helps,
Dan

Ah thank you, I will fiddle around with this method today.

Just an update - that worked! Well, a modified version of it worked. I wrote a post about how I ended up solving it here: http://liza.io/porting-interdiction-to-android-with-cocoonjs-overcoming-mouse-position-offset-problem/

Glad it helped.