Pixel Perfect click detection now works even if the Sprite is part of a texture atlas.

examples/_site/examples.json

@@ -320,6 +320,10 @@
       "file": "pixel+perfect+click+detection.js",
       "title": "pixel perfect click detection"
     },
+    {
+      "file": "pixelpick+-+atlas.js",
+      "title": "pixelpick - atlas"
+    },
     {
       "file": "pixelpick+-+scrolling+effect.js",
       "title": "pixelpick - scrolling effect"

examples/buttons/button scale.js

@@ -43,6 +43,8 @@ function create() {
     button3 = game.add.button(100, 300, 'button', changeSky, this, 2, 1, 0);
     button3.name = 'sky3';
     button3.width = 300;
+    button3.anchor.setTo(0, 0.5);
+    // button3.angle = 0.1;
 
     //  Scaled button
     button4 = game.add.button(300, 450, 'button', changeSky, this, 2, 1, 0);
@@ -85,7 +87,8 @@ function render () {
 
     // game.debug.renderWorldTransformInfo(button1, 32, 132);
     // game.debug.renderText('sx: ' + button3.scale.x + ' sy: ' + button3.scale.y + ' w: ' + button3.width + ' cw: ' + button3._cache.width, 32, 20);
-    // game.debug.renderPoint(button2.input._tempPoint);
-    // game.debug.renderPoint(button6.input._tempPoint);
+    game.debug.renderText('ox: ' + game.stage.offset.x + ' oy: ' + game.stage.offset.y, 32, 20);
+    game.debug.renderPoint(button3.input._tempPoint);
+    game.debug.renderPoint(button6.input._tempPoint);
 
 }

examples/input/pixel perfect click detection.js

@@ -37,11 +37,13 @@ function outSprite() {
 }
 
 function update() {
-    b.angle += 0.1;
+    b.angle += 0.05;
 }
 
 function render() {
 
     game.debug.renderSpriteInputInfo(b, 32, 32);
+    game.debug.renderSpriteCorners(b);
+    game.debug.renderPoint(b.input._tempPoint);
 
 }

examples/input/pixelpick - atlas.js

@@ -0,0 +1,52 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
+
+function preload() {
+
+    game.load.atlas('atlas', 'assets/pics/texturepacker_test.png', 'assets/pics/texturepacker_test.json');
+
+}
+
+var chick;
+var car;
+var mech;
+var robot;
+var cop;
+
+function create() {
+
+    game.stage.backgroundColor = '#404040';
+
+    //  This demonstrates pixel perfect click detection even if using sprites in a texture atlas.
+
+    chick = game.add.sprite(64, 64, 'atlas');
+    chick.frameName = 'budbrain_chick.png';
+    chick.inputEnabled = true;
+    chick.input.pixelPerfect = true;
+    chick.input.useHandCursor = true;
+
+    cop = game.add.sprite(600, 64, 'atlas');
+    cop.frameName = 'ladycop.png';
+    cop.inputEnabled = true;
+    cop.input.pixelPerfect = true;
+    cop.input.useHandCursor = true;
+
+    robot = game.add.sprite(50, 300, 'atlas');
+    robot.frameName = 'robot.png';
+    robot.inputEnabled = true;
+    robot.input.pixelPerfect = true;
+    robot.input.useHandCursor = true;
+
+    car = game.add.sprite(100, 400, 'atlas');
+    car.frameName = 'supercars_parsec.png';
+    car.inputEnabled = true;
+    car.input.pixelPerfect = true;
+    car.input.useHandCursor = true;
+
+    mech = game.add.sprite(250, 100, 'atlas');
+    mech.frameName = 'titan_mech.png';
+    mech.inputEnabled = true;
+    mech.input.pixelPerfect = true;
+    mech.input.useHandCursor = true;
+
+}

examples/input/pixelpick - spritesheet.js

@@ -11,7 +11,10 @@ var b;
 
 function create() {
 
+    Phaser.Canvas.setSmoothingEnabled(game.context, false);
+
     b = game.add.sprite(game.world.centerX, game.world.centerY, 'mummy');
+
     b.anchor.setTo(0.5, 0.5);
     b.scale.setTo(6, 6);
     b.animations.add('walk');
@@ -42,5 +45,7 @@ function outSprite() {
 function render() {
 
     game.debug.renderSpriteInputInfo(b, 32, 32);
+    game.debug.renderSpriteCorners(b);
+    game.debug.renderPoint(b.input._tempPoint);
 
 }