Jump to content

General positioning questions


Recommended Posts

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. :)



Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. :/

Link to comment
Share on other sites

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)

Link to comment
Share on other sites



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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...