General positioning questions

[ZRT]

EDIT 2: Doesn't seem to work for groups properly. I might be doing something wrong, but this doesn't give the same position:

p = game.add.sprite(game.world.width, game.world.height, 'player');

with this:

e = enemy.create(game.world.width, game.world.height, 'enemy');

Seems that the only reason the "p" shows in the left bottom corner is that I have p.body.collideWorldBounds = true; set.

 

EDIT: game.world.x, game.world.y in combination with game.world.width and game.world.height does this fine, so I guess I can mark this as solved.

 

 

Hey guys,

 

I assume for the game to scale and fit all sizes on mobile devices, you need precise positioning of sprites. Is there a general approach/math for this, to avoid hardcoded positions. How do you set the sprite to spawn in bottom right or top right for example, independently of the canvas size? Is there a general approach to this problem or it depends on canvas size? I tried one of the prototypes I'm making on a mobile device and looked awful with those hardcoded positions. Still very new in Phaser, so any tips are welcomed.

 

Thanks.

[CaueCR]

Well, I don't know if it's of any help, but I used to do my sprite positioning based on my canvas dimensions. I'm quite new to Phaser too, so I don't know if there's any functionality in it that already do that.

For example, if you use:
var canvas = document.getElementById("canvas");

var x = canvas.width;

var y = canvas.height;

 

Even if the screen is resized, your sprite should be on the lower right edge of the canvas.

 

You can even use the sprite's dimensions on this:
var sprite = new Image();

var x = canvas.width - sprite.width;

I hope this helps!

[ZRT]

Thanks. I will try this. But the problem now is with grouped sprites that don't collide with world bounds. Those ain't staying the bottom right corner. I have the same sprite spawning top and bottom right. The top sprites are fine, because the Y position is set to 0. Don't know how to fix the bottom, I tried every combination I could think of/made sense to me. :/

[CaueCR]

Have you tried with a hard coded number? Let's say you put the y coordinate with the value of 500, does it work? If it does, maybe the sprite is receiving a value that is bigger than your game screen's y. Use the console.log() command and see if the y coordinate (not the hard coded one) is on the screen. Depending on it's value, it may be easier to solve without hard coding.

 

What I think can be happening is something like this: The game you created was 800x600, maybe because of the sprite's anchor point being at 0,0 phaser is passing down 600 to the sprite's y and the rest of the sprite is being rendered out of the game screen.

 

After getting the y coordinate with console.log(), if the value is what it should be, try to change the anchor point of the bottom ones to (1,1)

[ZRT]

Hey CaueCR!

 

Yes, it works with a hardcoded value. I'm trying to make it work without them. I haven't even used anchors at all, but I'll try and see what happens. Thanks for the tip.

[CaueCR]

No problem! If you need anything else just say it and I'll do my best to help!

[ZRT]

Hello!

 

Sorry for responding this late, I've been busy these days.

 

Thanks, CaueCR, it works when I set the anchor(1,1) for the bottom enemy/obstacle. Full code from the create function for this here, hope anyone else will find it useful:

function createObstacles() {  // create bottom obstacles  ob = obstaclesBottom.create(game.world.width, game.world.height, 'obstacle');  ob.anchor.setTo(1,1);  ob.events.onOutOfBounds.add(obstaclesResetBottom);  ob.body.velocity.x = -350;  // create top obstacles  obt = obstaclesTop.create(game.world.width, 0, 'obstacle');  obt.events.onOutOfBounds.add(obstaclesResetTop)  obt.body.velocity.x = -350;}

The reset function called only resets them on a different position done with Math.random() * X. Thanks again. I will mark this as answered.

 

While I'm here, any ideas why the movement feels kinda laggy? It was going smooth before. I tried this on two different, yet powerful machines and have the same result.