Buttons that are not affected by camera scale or position

[afcruzs]

Hi,

I implemented a two finger zoom using the game.camera.scale propierty to zoom the game. I also implemented a drag functionality using game.camera.x and game.camera.y propierties.

But now I need to add static floating sprites, such that they are always in the same position on the screen regardless the zoom or the drag movement. But when I add them as sprites (game.add.sprite) they are affected by the camera propierties (x,y,scale). I read this and set fixedToCamera to true, it works partially, the (x,y) is static, but the when I zoom in (increase game.camera.scale) the size of the floating sprites also increases.

Is there any way I could add sprites that are not dependent on the camera?

Thanks!

[afcruzs]

I finally found a way!. As mentioned here the Stage is "above" of the World. So placing an element there won't be affected by the world dynamics (in my case, the camera). So what I did was to add a group in the stage and then add the sprites to that group. As simple as that. The code:

 

var buttonsGroup = this.game.add.group(null, "buttonsGroup", true);

var theSprite = buttonsGroup.create( x, y, "spriteName" );

The arguments of the group method are described here, the first is the parent and the last is a boolean value to indicate if the group should be added to the stage.

I hope it will be useful to anyone

 

[samme]

Fun fact: game.camera.scale is game.world.scale.