game.world.centerX not in the center

[Archimedez]

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

 

Greetings

[end3r]

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:

this.logo.anchor.set(0.5);

 

[Igor Georgiev]

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.