So I am trying to center my text for my title screen in order to create a clickable menu & be able to control the overall X / Y position of the entire menu yet keeping it centered & adding X / Y offsets to it as well. What am I doing wrong here?
Specifically, line{s} 152 & 153 :
class TitleScene extends Phaser.Scene {
constructor ( ) {
super ({
key : 'title',
});
}
centerX ( ) {
return ( this.sys.game.config.width / 2 );
}
centerY ( ) {
return ( this.sys.game.config.height / 2 );
}
preload ( ) {
this.hero = this.add.sprite (
this.centerX ( ), this.centerY ( ), 'hero'
);
}
init ( ) {
}
create ( ) {
this.__textStyle = [ ];
this.__MenuItem = [ ];
this.__MenuOption = [ ];
this.__MenuItemX = [
];
this.__MenuItemY = [
];
this.__MenuX = [
0, 0,
];
this.__MenuY = [
10, 10,
];
this.__MenuItemXOffset = [
0, 0,
];
this.__MenuItemYOffset = [
10, 100,
];
this.__WINDOW_WIDTH = ( ( window.innerWidth ) );
this.__WINDOW_HEIGHT = ( ( window.innerHeight ) );
this.__WINDOW_HALF_WIDTH = ( this.__WINDOW_WIDTH / 2 );
this.__WINDOW_HALF_HEIGHT = ( this.__WINDOW_HEIGHT / 2 );
this.__MenuOption [ 0 ] = 'Press Start';
this.__MenuOption [ 1 ] = 'Quit Game';
for ( this.__i = 0; this.__i <= 1; this.__i++ ) {
if ( this.__i === 0 ) {
this.__textStyle [ this.__i ] = {
font : "64px Arial Narrow",
fill : "#fff",
align : "center",
backgroundColor : "transparent",
wordWrap : {
width : this.hero.width * 4,
useAdvancedWrap : true,
}
};
}
if ( this.__i === 1 ) {
this.__textStyle [ this.__i ] = {
font : "64px Arial Narrow",
fill : "#fff",
align : "center",
backgroundColor : "transparent",
wordWrap : {
width : this.hero.width * 4,
useAdvancedWrap : true,
}
};
}
this.__MenuItem [ this.__i ] = this.add.text (
0, 0, this.__MenuOption [ this.__i ],
this.__textStyle [ this.__i ]
);
}
}
update ( ) {
// this.__text.x = Math.floor ( this.hero.x + this.hero.width / 2 );
// this.__text.y = Math.floor ( this.hero.y + this.hero.height / 2 );
for ( this.__i = 0; this.__i <= 1; this.__i++ ) {
this.__MenuItemX [ this.__i ] = ( this.__MenuX [ this.__i ] );
this.__MenuItemY [ this.__i ] = ( this.__MenuY [ this.__i ] );
// CAN BE :: {
// this.__MenuItem [ this.__i ].width
// OR
// this.__MenuItem [ 0 ].width
// }
this.__MENU_ITEM_WIDTH = ( this.__MenuItem [ 0 ].width );
this.__MENU_ITEM_HEIGHT = ( this.__MenuItem [ this.__i ].height );
this.__MENU_ITEM_HALF_WIDTH = ( this.__MENU_ITEM_WIDTH / 2 );
this.__MENU_ITEM_HALF_HEIGHT = ( this.__MENU_ITEM_HEIGHT / 2 );
this.__TextX1 = ( this.__WINDOW_HALF_WIDTH );
this.__TextX2 = ( this.__MENU_ITEM_HALF_WIDTH );
this.__TextY1 = ( this.__WINDOW_HALF_HEIGHT );
this.__TextY2 = ( this.__MENU_ITEM_HALF_HEIGHT );
this.__MenuItem [ this.__i ].x = ( ( this.__MenuItemX [ this.__i ] ) + ( this.__TextX1 - this.__TextX2 ) + ( this.__MenuItemXOffset [ this.__i ] ) );
this.__MenuItem [ this.__i ].y = ( ( this.__MenuItemY [ this.__i ] ) + ( this.__TextY1 - this.__TextY2 ) + ( this.__MenuItemYOffset [ this.__i ] ) );
// ( this.__MenuItemY1Offset [ this.__i ] ) +
// ( this.__TextY1 - this.__TextY2 ) +
// ( this.__MenuItemY2Offset [ this.__i ] )
console.log (
' { ' + this.__i + ' { ' +
this.__MenuItem [ this.__i ].x + ', ' +
this.__MenuItem [ this.__i ].y + ' } ' +
' } '
);
}
}
}
Any help is greatly appreciated!