Jump to content

game.world.centerX not in the center


Recommended Posts

Hey guys,


I'm kinda new to JavaScript and Phaser and working on some tutorials. Now I started a little project and tried to reproduce some of the tutorial functions into a simple game.

Right now I'm working on the main menu, painting a background and adding a logo to the top center of the screen. While my Loading Screen I show a sprite centered with

this.preloadBar = this.add.sprite(this.world.centerX, this.world.centerY, 'preloaderBar');

and it's working like a charme. Now I tried to set up the logo in the main menu with

this.logo = this.add.sprite(this.world.CenterX, this.world.CenterY, 'logo');

Now the outcome looks like below... The Game is set to 800x600 and if I set the parameters manually like

this.add.sprite(300, 300, 'logo.png);

it works as it should. So somehow the world.center coordinates are screwed up I guess, any ideas? Well i'm sure most of you got an idea, cause this is probably a quite dumb question, so sorry for that :D




Link to comment
Share on other sites

First - it's case sensitive, so centerX will work, but CenterX won't (which you have in the second piece of code).

this.logo = this.add.sprite(this.world.centerX, this.world.centerY, 'logo');

Second - to have it properly centered, beside centering the position of the sprite you have to also position the anchor of the sprite itself:



Link to comment
Share on other sites

  • 2 weeks later...

Or, if you prefer (as I do), make a small util of this sort:


var CenterUtil = new function()
    this.centerXY = function(firstXY, firstWidthHeight, secondWidthHeight)
        return (firstXY+ firstWidthHeight* 0.5) - secondWidthHeight* 0.5;


this way you can center anything according to anything without having to change the pivot point. I prefer thinking and calculating the sprites where their anchor is at 0,0 - top left corner. This way you can also have it position a sprite on, let's say 25% of the width of another sprite.

this.sprite1.x = 645:
this.sprite1.y = 0;

this.sprite2.x = CenterUtil.centerXY(this.sprite1.x, this.sprite1.width * 0.25, this.sprite2.width);
this.sprite2.y = this.sprite1.y;

But be careful with scaling. First you scale the sprite and then you position it.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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