From e7e8cca9b65a77fa01d213df5f4464e75143fe64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Davy=20H=C3=A9lard?= Date: Wed, 6 Dec 2023 20:49:49 +0100 Subject: [PATCH 1/5] Start games without loading screen if assets are ready before half the fade-in --- .../loadingscreen-pixi-renderer.ts | 20 ++++++++++++++++++- GDJS/Runtime/runtimegame.ts | 3 ++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts index 8f6c532f5a47..9da6f52710f5 100644 --- a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts +++ b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts @@ -38,13 +38,17 @@ namespace gdjs { _lastFrameTimeInMs: float = 0; _progressPercent: float = 0; + private _isWatermarkEnabled: boolean; + constructor( runtimeGamePixiRenderer: gdjs.RuntimeGamePixiRenderer, imageManager: gdjs.PixiImageManager, loadingScreenData: LoadingScreenData, + isWatermarkEnabled: boolean, isFirstScene: boolean ) { this._loadingScreenData = loadingScreenData; + this._isWatermarkEnabled = isWatermarkEnabled; this._isFirstLayout = isFirstScene; this._loadingScreenContainer = new PIXI.Container(); this._pixiRenderer = runtimeGamePixiRenderer.getPIXIRenderer(); @@ -272,8 +276,22 @@ namespace gdjs { totalElapsedTime; this.setPercent(100); + const fadeInDuration = Math.min( + this._loadingScreenData.showGDevelopSplash + ? this._loadingScreenData.logoAndProgressLogoFadeInDelay + + this._loadingScreenData.logoAndProgressFadeInDuration + : Number.POSITIVE_INFINITY, + this._loadingScreenData.backgroundImageResourceName || + this._loadingScreenData.backgroundColor + ? this._loadingScreenData.backgroundFadeInDuration + : Number.POSITIVE_INFINITY + ); + // Ensure we have shown the loading screen for at least minDuration. - if (remainingTime <= 0) { + if ( + remainingTime <= 0 || + (this._isWatermarkEnabled && totalElapsedTime < fadeInDuration / 2) + ) { this._state = LoadingScreenState.FINISHED; return Promise.resolve(); } diff --git a/GDJS/Runtime/runtimegame.ts b/GDJS/Runtime/runtimegame.ts index beae9eb5c6b6..c8caadd7fb9f 100644 --- a/GDJS/Runtime/runtimegame.ts +++ b/GDJS/Runtime/runtimegame.ts @@ -721,7 +721,8 @@ namespace gdjs { this.getRenderer(), this._resourcesLoader.getImageManager(), this._data.properties.loadingScreen, - isFirstScene + this._data.properties.watermark.showWatermark, + isFirstScene, ); const onProgress = async (count: integer, total: integer) => { From 58e7fac2853ca29deaa1168a15446520446df91d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Davy=20H=C3=A9lard?= Date: Wed, 6 Dec 2023 20:55:23 +0100 Subject: [PATCH 2/5] Simplify the condition. --- GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts index 9da6f52710f5..595cb45d7e7f 100644 --- a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts +++ b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts @@ -271,9 +271,7 @@ namespace gdjs { unload(): Promise { const totalElapsedTime = (performance.now() - this._startTimeInMs) / 1000; - const remainingTime = - (this._isFirstLayout ? this._loadingScreenData.minDuration : 0) - - totalElapsedTime; + const remainingTime = this._loadingScreenData.minDuration - totalElapsedTime; this.setPercent(100); const fadeInDuration = Math.min( @@ -290,6 +288,7 @@ namespace gdjs { // Ensure we have shown the loading screen for at least minDuration. if ( remainingTime <= 0 || + !this._isFirstLayout || (this._isWatermarkEnabled && totalElapsedTime < fadeInDuration / 2) ) { this._state = LoadingScreenState.FINISHED; From b137156420e5da111bbe418a72401c2f1146ab15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Davy=20H=C3=A9lard?= Date: Wed, 6 Dec 2023 21:06:25 +0100 Subject: [PATCH 3/5] Format. --- GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts | 3 ++- GDJS/Runtime/runtimegame.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts index 595cb45d7e7f..eddc9ac5b473 100644 --- a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts +++ b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts @@ -271,7 +271,8 @@ namespace gdjs { unload(): Promise { const totalElapsedTime = (performance.now() - this._startTimeInMs) / 1000; - const remainingTime = this._loadingScreenData.minDuration - totalElapsedTime; + const remainingTime = + this._loadingScreenData.minDuration - totalElapsedTime; this.setPercent(100); const fadeInDuration = Math.min( diff --git a/GDJS/Runtime/runtimegame.ts b/GDJS/Runtime/runtimegame.ts index c8caadd7fb9f..2e8801f461c8 100644 --- a/GDJS/Runtime/runtimegame.ts +++ b/GDJS/Runtime/runtimegame.ts @@ -722,7 +722,7 @@ namespace gdjs { this._resourcesLoader.getImageManager(), this._data.properties.loadingScreen, this._data.properties.watermark.showWatermark, - isFirstScene, + isFirstScene ); const onProgress = async (count: integer, total: integer) => { From 748edb8d9c3bc047797d5035812edfc613eaeae3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Davy=20H=C3=A9lard?= Date: Thu, 7 Dec 2023 14:21:45 +0100 Subject: [PATCH 4/5] Add comments. --- .../pixi-renderers/loadingscreen-pixi-renderer.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts index eddc9ac5b473..267b598aea40 100644 --- a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts +++ b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts @@ -275,6 +275,10 @@ namespace gdjs { this._loadingScreenData.minDuration - totalElapsedTime; this.setPercent(100); + /** + * The duration before something bright may appear on screen at 100% + * opacity. + */ const fadeInDuration = Math.min( this._loadingScreenData.showGDevelopSplash ? this._loadingScreenData.logoAndProgressLogoFadeInDelay + @@ -286,10 +290,15 @@ namespace gdjs { : Number.POSITIVE_INFINITY ); - // Ensure we have shown the loading screen for at least minDuration. if ( - remainingTime <= 0 || + // Intermediate loading screens can be skipped as soon as possible. !this._isFirstLayout || + // Ensure we have shown the loading screen for at least minDuration. + remainingTime <= 0 || + // Skip the 1st loading screen if nothing is too much visible to avoid + // flashing users eyes. + // This will likely only happen when the game is played a 2nd time + // and resources are already in cache. (this._isWatermarkEnabled && totalElapsedTime < fadeInDuration / 2) ) { this._state = LoadingScreenState.FINISHED; From 0693b82fdc318514ed97f1e164329375b3e09e89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Davy=20H=C3=A9lard?= Date: Thu, 7 Dec 2023 14:31:35 +0100 Subject: [PATCH 5/5] Simplify condition. --- .../loadingscreen-pixi-renderer.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts index 267b598aea40..c2d23879f759 100644 --- a/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts +++ b/GDJS/Runtime/pixi-renderers/loadingscreen-pixi-renderer.ts @@ -271,9 +271,6 @@ namespace gdjs { unload(): Promise { const totalElapsedTime = (performance.now() - this._startTimeInMs) / 1000; - const remainingTime = - this._loadingScreenData.minDuration - totalElapsedTime; - this.setPercent(100); /** * The duration before something bright may appear on screen at 100% @@ -293,17 +290,21 @@ namespace gdjs { if ( // Intermediate loading screens can be skipped as soon as possible. !this._isFirstLayout || - // Ensure we have shown the loading screen for at least minDuration. - remainingTime <= 0 || - // Skip the 1st loading screen if nothing is too much visible to avoid - // flashing users eyes. + // Skip the 1st loading screen if nothing is too much visible yet to + // avoid flashing users eyes. // This will likely only happen when the game is played a 2nd time // and resources are already in cache. - (this._isWatermarkEnabled && totalElapsedTime < fadeInDuration / 2) + (this._isWatermarkEnabled && totalElapsedTime < fadeInDuration / 2) || + // Otherwise, display the loading screen at least the minimal duration + // set in game settings. + totalElapsedTime > this._loadingScreenData.minDuration ) { this._state = LoadingScreenState.FINISHED; return Promise.resolve(); } + const remainingTime = + this._loadingScreenData.minDuration - totalElapsedTime; + this.setPercent(100); return new Promise((resolve) => setTimeout(() => { this._state = LoadingScreenState.FINISHED;