_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #495 from thecodingmachine/fixMenuFlicker

Browse Source 
FIX: menu flicker
This commit is contained in:
Kharhamel 2020-12-16 12:57:42 +01:00 committed by GitHub
commit 7f127e9353
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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>
<div id="gameMenu">
<div id="gameMenu" hidden>
<main>
<section>

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

@ -46,7 +46,7 @@
}
</style>
<form id="gameQuality">
<form id="gameQuality" hidden>
<section>
<h3>Game quality</h3>
<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() {
this.menuElement = this.add.dom(closedSideMenuX, 25).createFromCache(gameMenuKey);
this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
this.menuElement.setOrigin(0);
this.revealAfterInit(this.menuElement, 'gameMenu');
this.gameQualityMenuElement = this.add.dom(this.game.renderer.width / 2, -400).createFromCache(gameSettingsMenuKey);
this.gameQualityMenuElement.setOrigin(0.5);
this.gameQualityMenuElement = this.add.dom(300, -400).createFromCache(gameSettingsMenuKey);
this.revealAfterInit(this.gameQualityMenuElement, 'gameQuality');
this.input.keyboard.on('keyup-TAB', () => {
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() {
if (this.sideMenuOpened) return;
this.sideMenuOpened = true;
@ -111,7 +120,7 @@ export class MenuScene extends Phaser.Scene {
this.tweens.add({
targets: this.gameQualityMenuElement,
y: this.game.renderer.height / 2,
y: 100,
duration: 1000,
ease: 'Power3'
});