_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> </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'
}); });