CODEWITHSUNDEEP
jquerycoordinatesphaser-framework
weratius
weratius

Reputation: 123

How to set coordinates for sprite correctly in Phaser?

I have a code:

 w = window.innerWidth * window.devicePixelRatio,
 h = window.innerHeight * window.devicePixelRatio;

 holdLeft = game.add.button(w/2.892, h/1.3092, 'holdLeft', this.holdLeft, this);

And I have problems setting coordinates to this sprite, for example, I don't know exactly where this one should be and I need to think out some coordinates but then I always need to change it again and again

Maybe there is some another easier way to do it?

Thank you in advance!

I will really appreciate!

Upvotes: 2

Views: 4179

Answers (2)

Marwane K.A.
Marwane K.A.

Reputation: 143

First, if you want to position your button according to the game size, you should probably use game.width/game.height which are more reliable.

Now if you want to adapt your button's position according to the screen size, there's no magic solution. Here's a generic article about the topic for instance. You should decide from which origin you'll position each UI element, be it a screen corner, the center of the screen, a gameplay object, etc. and anticipate how things will turn out if the resolution changes.

For example, if you want to have a square pop-up in the center of your screen, you'll do something like:

var popup = game.add.sprite(game.width/2, game.height/2, 'popup');
popup.width = 400;
popup.height = 400;
popup.anchor.set(0.5, 0.5);

Now to give it a title, you'll probably want to position it according to the popup itself:

var text = game.add.sprite(popup.x, popup.y + 10, 'Hello world');
text.anchor.set(0.5, 0);

etc. There's no one-solution-fits-all but make it clear what uses what as the origin and hopefully you won't have surprises when resizing the screen.

Upvotes: 1

Kamen Minkov
Kamen Minkov

Reputation: 3712

Phaser.Button, just like images and sprites, has an anchor property, which is by default set at (0, 0) (top left corner). You can set it to half the width and half the height of the button like this:

holdLeft.anchor.set(0.5, 0.5);

http://phaser.io/docs/2.3.0/Phaser.Button.html

Upvotes: 0

Related Questions