lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

FIX: menu flicker

Browse source
This commit is contained in:
kharhamel 2020-12-16 12:23:34 +01:00
parent de9d6756b4
commit f5e77ad749
3 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
front/dist/resources/html/gameMenu.html vendored
View file

@ -9,7 +9,7 @@
} }
</style> </style>
<div id="gameMenu"> <div id="gameMenu" hidden>
<main> <main>
<section> <section>

2
front/dist/resources/html/gameQualityMenu.html vendored
View file

@ -46,7 +46,7 @@
} }
</style> </style>
<form id="gameQuality"> <form id="gameQuality" hidden>
<section> <section>
<h3>Game quality</h3> <h3>Game quality</h3>
<p class="cautiousText">(Editing this settings will restart the game)</p> <p class="cautiousText">(Editing this settings will restart the game)</p>

17
front/src/Phaser/Menu/MenuScene.ts
View file

@ -38,11 +38,12 @@ export class MenuScene extends Phaser.Scene {
} }
create() { create() {
this.menuElement = this.add.dom(closedSideMenuX, 25).createFromCache(gameMenuKey); this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
this.menuElement.setOrigin(0); this.menuElement.setOrigin(0);
this.revealAfterInit(this.menuElement, 'gameMenu');
this.gameQualityMenuElement = this.add.dom(this.game.renderer.width / 2, -400).createFromCache(gameSettingsMenuKey); this.gameQualityMenuElement = this.add.dom(300, -400).createFromCache(gameSettingsMenuKey);
this.gameQualityMenuElement.setOrigin(0.5); this.revealAfterInit(this.gameQualityMenuElement, 'gameQuality');
this.input.keyboard.on('keyup-TAB', () => { this.input.keyboard.on('keyup-TAB', () => {
this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu(); this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
@ -54,6 +55,14 @@ export class MenuScene extends Phaser.Scene {
}); });
} }
private revealAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
//Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
//To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
setTimeout(() => {
(menuElement.getChildByID(rootDomId) as HTMLElement).hidden = false;
}, 250);
}
openSideMenu() { openSideMenu() {
if (this.sideMenuOpened) return; if (this.sideMenuOpened) return;
this.sideMenuOpened = true; this.sideMenuOpened = true;
@ -111,7 +120,7 @@ export class MenuScene extends Phaser.Scene {
this.tweens.add({ this.tweens.add({
targets: this.gameQualityMenuElement, targets: this.gameQualityMenuElement,
y: this.game.renderer.height / 2, y: 100,
duration: 1000, duration: 1000,
ease: 'Power3' ease: 'Power3'
}); });