Merge pull request #1335 from melonjs/fix/loading-screen-race

Fix loading screen logo persisting after preload completes

Author: obiot

packages/examples/src/examples/spine/ExampleSpine.tsx

@@ -92,7 +92,7 @@ const CharacterSelector = () => {
 		<div
 			style={{
 				position: "absolute",
-				top: 150,
+				top: 200,
 				left: 16,
 				zIndex: 1000,
 			}}

packages/melonjs/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [18.2.1] (melonJS 2)
+
+### Fixed
+- Loader: fix race condition where the default loading screen logo sprite could persist after preloading completes, caused by the async logo image loading finishing after the state transition or `game.world.reset()`
+
 ## [18.2.0] (melonJS 2)
 
 ### Added

packages/melonjs/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "melonjs",
-	"version": "18.2.0",
+	"version": "18.2.1",
 	"description": "melonJS Game Engine",
 	"homepage": "http://www.melonjs.org/",
 	"type": "module",

packages/melonjs/src/loader/loadingscreen.js

@@ -4,6 +4,7 @@ import Sprite from "./../renderable/sprite.js";
 import Stage from "./../state/stage.js";
 import {
 	eventEmitter,
+	LOADER_COMPLETE,
 	LOADER_PROGRESS,
 	VIEWPORT_ONRESIZE,
 } from "../system/event.ts";
@@ -94,6 +95,11 @@ class DefaultLoadingScreen extends Stage {
 	 */
 	logoSprite = null;
 
+	/**
+	 * @ignore
+	 */
+	#boundCleanup = null;
+
 	/**
 	 * call when the loader is resetted
 	 * @ignore
@@ -113,8 +119,17 @@ class DefaultLoadingScreen extends Stage {
 		);
 		game.world.addChild(this.progressBar, 1);
 
+		// clean up loading screen children when the preloader completes,
+		// whether or not a state.change() follows
+		this.#boundCleanup = this.#cleanup.bind(this);
+		eventEmitter.addListenerOnce(LOADER_COMPLETE, this.#boundCleanup);
+
 		// load the melonJS logo
 		load({ name: "melonjs_logo", type: "image", src: logo_url }, () => {
+			// guard against the logo loading after preload completed
+			if (this.#boundCleanup === null) {
+				return;
+			}
 			// melonJS logo
 			this.logoSprite = new Sprite(renderer.width / 2, renderer.height / 2, {
 				image: "melonjs_logo",
@@ -126,11 +141,12 @@ class DefaultLoadingScreen extends Stage {
 	}
 
 	/**
-	 * Called by engine before deleting the object
+	 * Remove loading screen children and unload the logo
 	 * @ignore
 	 */
-	onDestroyEvent() {
-		// remove children added during loading
+	#cleanup() {
+		this.#boundCleanup = null;
+
 		if (this.progressBar) {
 			game.world.removeChild(this.progressBar);
 			this.progressBar = null;
@@ -143,6 +159,19 @@ class DefaultLoadingScreen extends Stage {
 		// unload the logo image
 		unload({ name: "melonjs_logo", type: "image" });
 	}
+
+	/**
+	 * Called by engine before deleting the object
+	 * @ignore
+	 */
+	onDestroyEvent() {
+		// remove the listener in case state.change() is called
+		// before the preloader fires LOADER_COMPLETE
+		if (this.#boundCleanup) {
+			eventEmitter.removeListener(LOADER_COMPLETE, this.#boundCleanup);
+		}
+		this.#cleanup();
+	}
 }
 
 export default DefaultLoadingScreen;

packages/spine-plugin/README.md

@@ -30,7 +30,7 @@ A [Spine](http://en.esotericsoftware.com/spine-in-depth) 4.2 runtime integration
 ## Installation
 -------------------------------------------------------------------------------
 This plugin is already bundled with the required Spine [4.x runtime](package.json#dependencies), so there is no need to install it separately.
->Note: this plugin requires melonJS version 18.2.0 or higher.
+>Note: this plugin requires melonJS version 18.2.1 or higher.
 
 To install the plugin using npm:
 
@@ -119,7 +119,7 @@ me.loader.preload(DataManifest, async function() {
 
 | @melonjs/spine-plugin | melonJS | spine-runtime |
 |---|---|---|
-| v2.0.x | v18.2.x (or higher) | v4.2.x |
+| v2.0.x | v18.2.1 (or higher) | v4.2.x |
 | v1.5.x | v15.12.x — v18.0.x | v4.1, v4.2-beta |
 
 ## Questions, need help ?

packages/spine-plugin/package.json

@@ -47,7 +47,7 @@
 		"CHANGELOG.md"
 	],
 	"peerDependencies": {
-		"melonjs": ">=18.2.0"
+		"melonjs": ">=18.2.1"
 	},
 	"dependencies": {
 		"@esotericsoftware/spine-canvas": "^4.2.108",