Hi Leissa

There are ways to change how objects are affected by camera movement, most notably you can use wade.setLayerTransform to change how objects on each layer move and scale. Typically you'll set transform values to 0 for layers that you want to use as UI (so they never move when the camera moves), and you'll set them to 1 for everything else. You can also use other values for effects such as parallax, but that's a different topic altogether. I don't think that's your problem there.

It sounds like you're using the mouse position on the screen to calculate which areas of the targets you're hitting. You probably want to use the mouse position in the game world instead (when the camera moves, this is no longer the same as the screen position).

Can you copy and paste the code that you use to detect hits? Then I'll suggest how to change it to take camera movement into account (should be straightforward).

Hi Gio,

Thank you very much for your help. If you remember I had in the target image a transparent area. So, in app.js in the init function the sprite of the target was drawToImage, than, in the target js file(target.js) was called this imageData

 self.target.imageData = wade.app.targetsImageData.target;

where targetsImageData is the array which contain all the targets draws.

In the same target js,  is a variable which contain the function which  will attach a sprite (the bullet hole sprite) to the target.

         var hole = function(position, spriteName, size, parent, layer)         {              var sprite = new Sprite(spriteName, layer);              sprite.setSize(size, size);              var offset = {x:position.x-parent.getPosition().x,                             y:position.y-parent.getPosition().y};              parent.addSprite(sprite, offset);         };

This function is called in the onClick(),  in onAddToScene() function of the target class.

Because of the transparent area, the function is:

         var pos = {x:eventData.screenPosition.x-this.getPosition().x+this.getSprite(0).getSize().x/2,                    y:eventData.screenPosition.y-this.getPosition().y+this.getSprite(0).getSize().y/2};         if(this.imageData.data[(Math.floor(pos.x) + Math.floor(pos.y) * this.imageData.width) * 4 + 3] != 0.0)         {               hole(eventData.screenPosition, "images/gun/hole.png",5, this, wade.app.layers.target);         }

         this.onMouseMove = function(eventData)         {              this.setPosition(eventData.screenPosition.x, eventData.screenPosition.y);         };

I think the problem is in the line that calculates the position:

var pos = {x:eventData.screenPosition.x-this.getPosition().x+this.getSprite(0).getSize().x/2,                    y:eventData.screenPosition.y-this.getPosition().y+this.getSprite(0).getSize().y/2};

You are getting the screen position of the mouse click and then subtracting the world position of the object. You should get, instead, the world position of the mouse click and subtract the world position of the object.

But in reality you don't even need to do that, because WADE does it for you :) All you need to do is use the position property of the event data (as opposed to screenPosition)

var pos = {x:eventData.position.x+this.getSprite(0).getSize().x/2,                    y:eventData.position.y+this.getSprite(0).getSize().y/2};

Let me know if that works

Hi Gio,

works like magic! 

So eventData.position is the world position of the mouse! Of course! Is like setting the obj position to the world or to the screen...

a big THAAAANK YOU!  :)