@samme Hi mate ! I’ve still been having that problem about orientation change and showing things in center. I thought it was fixed, but turns out I was wrong.
The problem is I can’t quite somehow reproduce that whole example that my project is in right now. Because of that, I can’t post that project here for everyone to see !
is there any chance that somehow in a private chat or something, i show you my project code and you might take a look? I’d reproduce the easy example but looks like i can’t .
Any chance?
I’m sure the community at large can help you. However if you really feel like nobody else could ever use the information that your asking about then you can pm them by going to their profile (if you have a high enough discourse level)
If all you want is a loading screen, this is my go to tutorial, and you can spice it up however you’d like to make it look nicer than just a box and some text.
This is exactly what i found myself and How i did it. The thing that I had a problem is when orientation changes, loading would appear at the very,very wrong place. Then I decided to use orientationchange, setScale, setAngle and many things so that after changing orientation, it would appear great.
The latest problem I figured out is that when user starts playing the game all is fine. loading shows at a perfect place and even if user rotates screen or something, loading still appears as I want. Problem appears if user clicks on nextround which i think causes preload to run again and that’s when loading appears at a wrong place again.
Can you show us your code?
showLoader gets called in preload of Phaser.
private setPortraitMode(){
//@ts-ignore
this.scale.displaySize.aspectRatio = GAME_HEIGHT / GAME_WIDTH;
this.scale.setGameSize(GAME_HEIGHT, GAME_WIDTH);
this.cameras.main.setAngle(90).setScroll(0, GAME_HEIGHT);
}
private setLandscapeMode(){
//@ts-ignore
this.scale.displaySize.aspectRatio = GAME_WIDTH / GAME_HEIGHT;
this.scale.setGameSize(GAME_WIDTH, GAME_HEIGHT);
this.cameras.main.setAngle(0).setScroll(0, 0);
}
/**
* shows the loader before the game assets are loaded.
* @return void
*/
protected showLoader(){
const width = this.cameras.main.centerX;
const height = this.cameras.main.centerY;
const progressBar = this.add.graphics();
const progressBox = this.add.graphics();
progressBox.fillStyle(0x222222, 0.8);
progressBox.fillRect(width- 300/2, height-15, 320, 50);
let percentText = this.make.text({
x: width,
y: height + 5,
text: '0%',
style: {
font: '18px monospace',
fill: '#ffffff'
}
});
let loadingText = this.make.text({
x: width,
y: height - 50,
text: 'Loading...',
style: {
font: '20px monospace',
fill: '#ffffff'
}
});
this.cameras.main.setOrigin(0, 0);
(this.scale.isLandscape) ? this.setLandscapeMode() : this.setPortraitMode()
this.game.scale.on('orientationchange', (e: string) => {
switch(e) {
case 'portrait-primary':
this.setPortraitMode()
break;
case 'landscape-primary':
this.setLandscapeMode()
break;
default:
}
})
percentText.setOrigin(0.5, 0.5);
loadingText.setOrigin(0.5, 0.5);
this.load.on('progress', (value: number) => {
progressBar.clear();
percentText.setText(Math.round(value * 100) + '%');
progressBar.fillStyle(0xffffff, 1);
progressBar.fillRect( width - 300/2, height - 15, 300 * value, 50);
});
this.load.on('complete', () => {
this.cameras.main.setOrigin(0.5)
percentText.destroy();
loadingText.destroy();
progressBar.destroy();
progressBox.destroy();
});
}