Jump to content

Touch Events with Pixi.js & CocoonJS

Go to solution Solved by benny!,

Recommended Posts

The following code works just fine in browser. However, in CocoonJS only the touchstart event for the stage is fired and not for the bunny sprite ?!
<html>    <head>        <title></title>        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">        <style type="text/css">body { margin: 0px; }</style> <!-- Android fix -->    </head>    <body>        <script src="js/libs/pixi.dev.js"></script>        <script type="text/javascript">            window.onload = function() {                var canvas = document.createElement(navigator.isCocoonJS ? 'screencanvas' : 'canvas'),                    appWidth = 320,                    appHeight = 480;                canvas.style.cssText="idtkscale:ScaleAspectFill;";                canvas.width = appWidth;                canvas.height = appHeight;                document.body.appendChild(canvas);                var stage = new PIXI.Stage(0x66FF99, true);                stage.touchstart = stage.mousedown = function( data ) {                    console.log( "Stage click" );                };                // Browser:                // everything works fine                //                 // CocoonJS 1.4.3:                // Stage click works                // Bunny click does not                var renderer = new PIXI.CanvasRenderer(appWidth, appHeight, canvas);                requestAnimFrame( animate );                var bunny = PIXI.Sprite.fromImage("bunny.png");                bunny.anchor.x = 0.5;                bunny.anchor.y = 0.5;                bunny.position.x = appWidth / 2;                bunny.position.y = appHeight / 2;                bunny.touchstart = bunny.mousedown =  function( data ) {                    console.log( "Bunny click" );                };                bunny.setInteractive( true );                                stage.addChild( bunny );                function animate() {                    requestAnimFrame( animate );                    bunny.rotation += 0.1;                    renderer.render(stage);                }                    };        </script>    </body></html>
Is it a bug in logic, Pixi.js and/or CocoonJS?
I am using latest Pixi dev version and CocoonJS1.4.3.
Any help appreciated.


Link to post
Share on other sites

I did some more investigation ... a small update on this issue:


It seems like the function getBoundingClientRect() which is used by pixi.js for touch event calculations returns strange values when used in CocoonJS.


Maybe this has something to do with how CocoonJS's screencanvas handles the viewport internally.


Just guessing here. I will investigate this a bit more.

Link to post
Share on other sites
  • Solution

I emailed an example project describing the bug to ludei support yesterday. Today I got the following feedback:




We've going through the test case, and it seems an error on our side.

I've moved the issue to the guys working with render part of the system. I hope the fix will be included in 1.4.6 (1.4.5 is already in testing pipeline and only severe hotfixes are pushed).



Really quick response. I appreciate this. Since this is not Pixi.js related - I mark this thread as solved.


Thanks for your attention ;-)



Link to post
Share on other sites
  • 1 month later...

I have found, that when using canvas.style.cssText="idtkscale:ScaleAspectFit;" the touch coordinates are wrong.


You can fix it by adding this to onTouchStart, onTouchEnd and onTouchMove functions:

if(navigator.isCocoonJS) {	touchData.global.x = touchEvent.clientX;	touchData.global.y = touchEvent.clientY;}

Tested on iPad 2, iPhone 5 and Nexus 7.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...