Merge branch '4.1' into 4.2-beta

# Conflicts:
#	spine-flutter/CHANGELOG.md
#	spine-flutter/example/pubspec.lock
#	spine-flutter/pubspec.yaml

examples/export/runtimes.sh

@@ -389,8 +389,8 @@ cp -f ../mix-and-match/export/mix-and-match-pma.png "$ROOT/spine-ts/spine-phaser
 
 rm "$ROOT/spine-ts/spine-pixi/example/assets/"*
 cp -f ../raptor/export/raptor-pro.json "$ROOT/spine-ts/spine-pixi/example/assets/"
-cp -f ../raptor/export/raptor-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
-cp -f ../raptor/export/raptor-pma.png "$ROOT/spine-ts/spine-pixi/example/assets/"
+cp -f ../raptor/export/raptor.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
+cp -f ../raptor/export/raptor.png "$ROOT/spine-ts/spine-pixi/example/assets/"
 
 cp -f ../spineboy/export/spineboy-pro.skel "$ROOT/spine-ts/spine-pixi/example/assets/"
 cp -f ../spineboy/export/spineboy-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"

spine-flutter/CHANGELOG.md

@@ -1,3 +1,6 @@
+# 4.1.4
+* Fixes for WASM/web builds.
+
 # 4.2.13
 * Fixes for Impeller.
 

spine-flutter/compile-wasm.sh

@@ -7,9 +7,10 @@ mkdir -p lib/assets/
 # The entries for exported functions in Module.asm will be scrambled so
 # EmscriptenModule._fromJs() is unable to parse them and link them with original
 # names set on the module, e.g. Module._spine_get_major_version.
-emcc \
+echo "const module = {};" > pre.js
+em++ \
 	-Isrc/spine-cpp/include \
-	-O2 --closure 1 -fno-rtti -fno-exceptions -lc++abi -lc++ \
+	-O2 --closure 1 -fno-rtti -fno-exceptions \
 	-s STRICT=1 \
 	-s LLD_REPORT_UNDEFINED \
 	-s MODULARIZE=1 \
@@ -19,8 +20,10 @@ emcc \
 	-s EXPORT_ALL=1 \
 	-s EXPORTED_FUNCTIONS='["_malloc", "_free"]' \
 	--no-entry \
+	--extern-pre-js pre.js \
 	-s EXPORT_NAME=libspine_flutter \
 	src/spine_flutter.cpp `find src/spine-cpp/src -type f` \
 	-o lib/assets/libspine_flutter.js
 	ls -lah lib/assets
+rm pre.js
 popd

spine-flutter/lib/assets/libspine_flutter.js

@@ -1,3 +1,4 @@
+const module = {};
 
 var libspine_flutter = (() => {
   var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined;
@@ -23,12 +24,12 @@ function pa(b){var c=H.length;b>>>=0;if(2147483648<b)return!1;for(var d=1;4>=d;d
 var Y={g:void 0,get:function(){Y.g+=4;return J[Y.g-4>>2]},h:function(b){return b?E(H,b):""}};a.SYSCALLS=Y;function qa(b,c,d,e){for(var f=0,g=0;g<d;g++){var C=K[c>>2],na=K[c+4>>2];c+=8;for(var Q=0;Q<na;Q++)X(b,H[C+Q]);f+=na}K[e>>2]=f;return 0}a._fd_write=qa;var ra={__assert_fail:ka,abort:la,emscripten_memcpy_big:ma,emscripten_resize_heap:pa,fd_write:qa};
 (function(){function b(f){a.asm=f.exports;A=a.asm.memory;N();ca.unshift(a.asm.__wasm_call_ctors);O--;a.monitorRunDependencies&&a.monitorRunDependencies(O);0==O&&(null!==P&&(clearInterval(P),P=null),R&&(f=R,R=null,f()))}function c(f){b(f.instance)}function d(f){return ja().then(function(g){return WebAssembly.instantiate(g,e)}).then(function(g){return g}).then(f,function(g){x("failed to asynchronously prepare wasm: "+g);z(g)})}var e={env:ra,wasi_snapshot_preview1:ra};O++;a.monitorRunDependencies&&a.monitorRunDependencies(O);
 if(a.instantiateWasm)try{return a.instantiateWasm(e,b)}catch(f){x("Module.instantiateWasm callback failed with error: "+f),k(f)}(function(){return y||"function"!=typeof WebAssembly.instantiateStreaming||fa()||S.startsWith("file://")||p||"function"!=typeof fetch?d(c):fetch(S,{credentials:"same-origin"}).then(function(f){return WebAssembly.instantiateStreaming(f,e).then(c,function(g){x("wasm streaming compile failed: "+g);x("falling back to ArrayBuffer instantiation");return d(c)})})})().catch(k);return{}})();
-a.___wasm_call_ctors=function(){return(a.___wasm_call_ctors=a.asm.__wasm_call_ctors).apply(null,arguments)};a._malloc=function(){return(a._malloc=a.asm.malloc).apply(null,arguments)};a._free=function(){return(a._free=a.asm.free).apply(null,arguments)};a._spine_enable_debug_extension=function(){return(a._spine_enable_debug_extension=a.asm.spine_enable_debug_extension).apply(null,arguments)};a._spine_major_version=function(){return(a._spine_major_version=a.asm.spine_major_version).apply(null,arguments)};
-a._spine_minor_version=function(){return(a._spine_minor_version=a.asm.spine_minor_version).apply(null,arguments)};a._spine_report_leaks=function(){return(a._spine_report_leaks=a.asm.spine_report_leaks).apply(null,arguments)};a._spine_color_get_r=function(){return(a._spine_color_get_r=a.asm.spine_color_get_r).apply(null,arguments)};a._spine_color_get_g=function(){return(a._spine_color_get_g=a.asm.spine_color_get_g).apply(null,arguments)};
-a._spine_color_get_b=function(){return(a._spine_color_get_b=a.asm.spine_color_get_b).apply(null,arguments)};a._spine_color_get_a=function(){return(a._spine_color_get_a=a.asm.spine_color_get_a).apply(null,arguments)};a._spine_bounds_get_x=function(){return(a._spine_bounds_get_x=a.asm.spine_bounds_get_x).apply(null,arguments)};a._spine_bounds_get_y=function(){return(a._spine_bounds_get_y=a.asm.spine_bounds_get_y).apply(null,arguments)};
-a._spine_bounds_get_width=function(){return(a._spine_bounds_get_width=a.asm.spine_bounds_get_width).apply(null,arguments)};a._spine_bounds_get_height=function(){return(a._spine_bounds_get_height=a.asm.spine_bounds_get_height).apply(null,arguments)};a._spine_vector_get_x=function(){return(a._spine_vector_get_x=a.asm.spine_vector_get_x).apply(null,arguments)};a._spine_vector_get_y=function(){return(a._spine_vector_get_y=a.asm.spine_vector_get_y).apply(null,arguments)};
-a._spine_atlas_load=function(){return(a._spine_atlas_load=a.asm.spine_atlas_load).apply(null,arguments)};a._spine_atlas_get_num_image_paths=function(){return(a._spine_atlas_get_num_image_paths=a.asm.spine_atlas_get_num_image_paths).apply(null,arguments)};a._spine_atlas_get_image_path=function(){return(a._spine_atlas_get_image_path=a.asm.spine_atlas_get_image_path).apply(null,arguments)};a._spine_atlas_get_error=function(){return(a._spine_atlas_get_error=a.asm.spine_atlas_get_error).apply(null,arguments)};
-a._spine_atlas_dispose=function(){return(a._spine_atlas_dispose=a.asm.spine_atlas_dispose).apply(null,arguments)};a._spine_skeleton_data_load_json=function(){return(a._spine_skeleton_data_load_json=a.asm.spine_skeleton_data_load_json).apply(null,arguments)};a._spine_skeleton_data_load_binary=function(){return(a._spine_skeleton_data_load_binary=a.asm.spine_skeleton_data_load_binary).apply(null,arguments)};
+a.___wasm_call_ctors=function(){return(a.___wasm_call_ctors=a.asm.__wasm_call_ctors).apply(null,arguments)};a._spine_enable_debug_extension=function(){return(a._spine_enable_debug_extension=a.asm.spine_enable_debug_extension).apply(null,arguments)};a._spine_major_version=function(){return(a._spine_major_version=a.asm.spine_major_version).apply(null,arguments)};a._spine_minor_version=function(){return(a._spine_minor_version=a.asm.spine_minor_version).apply(null,arguments)};
+a._spine_report_leaks=function(){return(a._spine_report_leaks=a.asm.spine_report_leaks).apply(null,arguments)};a._spine_color_get_r=function(){return(a._spine_color_get_r=a.asm.spine_color_get_r).apply(null,arguments)};a._spine_color_get_g=function(){return(a._spine_color_get_g=a.asm.spine_color_get_g).apply(null,arguments)};a._spine_color_get_b=function(){return(a._spine_color_get_b=a.asm.spine_color_get_b).apply(null,arguments)};
+a._spine_color_get_a=function(){return(a._spine_color_get_a=a.asm.spine_color_get_a).apply(null,arguments)};a._spine_bounds_get_x=function(){return(a._spine_bounds_get_x=a.asm.spine_bounds_get_x).apply(null,arguments)};a._spine_bounds_get_y=function(){return(a._spine_bounds_get_y=a.asm.spine_bounds_get_y).apply(null,arguments)};a._spine_bounds_get_width=function(){return(a._spine_bounds_get_width=a.asm.spine_bounds_get_width).apply(null,arguments)};
+a._spine_bounds_get_height=function(){return(a._spine_bounds_get_height=a.asm.spine_bounds_get_height).apply(null,arguments)};a._spine_vector_get_x=function(){return(a._spine_vector_get_x=a.asm.spine_vector_get_x).apply(null,arguments)};a._spine_vector_get_y=function(){return(a._spine_vector_get_y=a.asm.spine_vector_get_y).apply(null,arguments)};a._spine_atlas_load=function(){return(a._spine_atlas_load=a.asm.spine_atlas_load).apply(null,arguments)};
+a._spine_atlas_get_num_image_paths=function(){return(a._spine_atlas_get_num_image_paths=a.asm.spine_atlas_get_num_image_paths).apply(null,arguments)};a._spine_atlas_get_image_path=function(){return(a._spine_atlas_get_image_path=a.asm.spine_atlas_get_image_path).apply(null,arguments)};a._spine_atlas_get_error=function(){return(a._spine_atlas_get_error=a.asm.spine_atlas_get_error).apply(null,arguments)};
+a._spine_atlas_dispose=function(){return(a._spine_atlas_dispose=a.asm.spine_atlas_dispose).apply(null,arguments)};a._free=function(){return(a._free=a.asm.free).apply(null,arguments)};a._spine_skeleton_data_load_json=function(){return(a._spine_skeleton_data_load_json=a.asm.spine_skeleton_data_load_json).apply(null,arguments)};a._spine_skeleton_data_load_binary=function(){return(a._spine_skeleton_data_load_binary=a.asm.spine_skeleton_data_load_binary).apply(null,arguments)};
 a._spine_skeleton_data_result_get_error=function(){return(a._spine_skeleton_data_result_get_error=a.asm.spine_skeleton_data_result_get_error).apply(null,arguments)};a._spine_skeleton_data_result_get_data=function(){return(a._spine_skeleton_data_result_get_data=a.asm.spine_skeleton_data_result_get_data).apply(null,arguments)};a._spine_skeleton_data_result_dispose=function(){return(a._spine_skeleton_data_result_dispose=a.asm.spine_skeleton_data_result_dispose).apply(null,arguments)};
 a._spine_skeleton_data_find_bone=function(){return(a._spine_skeleton_data_find_bone=a.asm.spine_skeleton_data_find_bone).apply(null,arguments)};a._spine_skeleton_data_find_slot=function(){return(a._spine_skeleton_data_find_slot=a.asm.spine_skeleton_data_find_slot).apply(null,arguments)};a._spine_skeleton_data_find_skin=function(){return(a._spine_skeleton_data_find_skin=a.asm.spine_skeleton_data_find_skin).apply(null,arguments)};
 a._spine_skeleton_data_find_event=function(){return(a._spine_skeleton_data_find_event=a.asm.spine_skeleton_data_find_event).apply(null,arguments)};a._spine_skeleton_data_find_animation=function(){return(a._spine_skeleton_data_find_animation=a.asm.spine_skeleton_data_find_animation).apply(null,arguments)};a._spine_skeleton_data_find_ik_constraint=function(){return(a._spine_skeleton_data_find_ik_constraint=a.asm.spine_skeleton_data_find_ik_constraint).apply(null,arguments)};
@@ -84,7 +85,7 @@ a._spine_skeleton_set_slots_to_setup_pose=function(){return(a._spine_skeleton_se
 a._spine_skeleton_set_skin_by_name=function(){return(a._spine_skeleton_set_skin_by_name=a.asm.spine_skeleton_set_skin_by_name).apply(null,arguments)};a._spine_skeleton_set_skin=function(){return(a._spine_skeleton_set_skin=a.asm.spine_skeleton_set_skin).apply(null,arguments)};a._spine_skeleton_get_attachment_by_name=function(){return(a._spine_skeleton_get_attachment_by_name=a.asm.spine_skeleton_get_attachment_by_name).apply(null,arguments)};
 a._spine_skeleton_get_attachment=function(){return(a._spine_skeleton_get_attachment=a.asm.spine_skeleton_get_attachment).apply(null,arguments)};a._spine_skeleton_set_attachment=function(){return(a._spine_skeleton_set_attachment=a.asm.spine_skeleton_set_attachment).apply(null,arguments)};a._spine_skeleton_find_ik_constraint=function(){return(a._spine_skeleton_find_ik_constraint=a.asm.spine_skeleton_find_ik_constraint).apply(null,arguments)};
 a._spine_skeleton_find_transform_constraint=function(){return(a._spine_skeleton_find_transform_constraint=a.asm.spine_skeleton_find_transform_constraint).apply(null,arguments)};a._spine_skeleton_find_path_constraint=function(){return(a._spine_skeleton_find_path_constraint=a.asm.spine_skeleton_find_path_constraint).apply(null,arguments)};a._spine_skeleton_get_bounds=function(){return(a._spine_skeleton_get_bounds=a.asm.spine_skeleton_get_bounds).apply(null,arguments)};
-a._spine_skeleton_get_root_bone=function(){return(a._spine_skeleton_get_root_bone=a.asm.spine_skeleton_get_root_bone).apply(null,arguments)};a._spine_skeleton_get_data=function(){return(a._spine_skeleton_get_data=a.asm.spine_skeleton_get_data).apply(null,arguments)};a._spine_skeleton_get_num_bones=function(){return(a._spine_skeleton_get_num_bones=a.asm.spine_skeleton_get_num_bones).apply(null,arguments)};
+a._malloc=function(){return(a._malloc=a.asm.malloc).apply(null,arguments)};a._spine_skeleton_get_root_bone=function(){return(a._spine_skeleton_get_root_bone=a.asm.spine_skeleton_get_root_bone).apply(null,arguments)};a._spine_skeleton_get_data=function(){return(a._spine_skeleton_get_data=a.asm.spine_skeleton_get_data).apply(null,arguments)};a._spine_skeleton_get_num_bones=function(){return(a._spine_skeleton_get_num_bones=a.asm.spine_skeleton_get_num_bones).apply(null,arguments)};
 a._spine_skeleton_get_bones=function(){return(a._spine_skeleton_get_bones=a.asm.spine_skeleton_get_bones).apply(null,arguments)};a._spine_skeleton_get_num_slots=function(){return(a._spine_skeleton_get_num_slots=a.asm.spine_skeleton_get_num_slots).apply(null,arguments)};a._spine_skeleton_get_slots=function(){return(a._spine_skeleton_get_slots=a.asm.spine_skeleton_get_slots).apply(null,arguments)};
 a._spine_skeleton_get_num_draw_order=function(){return(a._spine_skeleton_get_num_draw_order=a.asm.spine_skeleton_get_num_draw_order).apply(null,arguments)};a._spine_skeleton_get_draw_order=function(){return(a._spine_skeleton_get_draw_order=a.asm.spine_skeleton_get_draw_order).apply(null,arguments)};a._spine_skeleton_get_num_ik_constraints=function(){return(a._spine_skeleton_get_num_ik_constraints=a.asm.spine_skeleton_get_num_ik_constraints).apply(null,arguments)};
 a._spine_skeleton_get_ik_constraints=function(){return(a._spine_skeleton_get_ik_constraints=a.asm.spine_skeleton_get_ik_constraints).apply(null,arguments)};a._spine_skeleton_get_num_transform_constraints=function(){return(a._spine_skeleton_get_num_transform_constraints=a.asm.spine_skeleton_get_num_transform_constraints).apply(null,arguments)};

spine-ts/index.html

@@ -19,6 +19,7 @@
 		<li>Pixi</li>
 		<ul>
 			<li><a href="/spine-pixi/example/index.html">Basic example</a></li>
+			<li><a href="/spine-pixi/example/events-example.html">Events example</a></li>
 		</ul>
 		<li>Phaser</li>
 		<ul>

spine-ts/spine-pixi/example/events-example.html

@@ -0,0 +1,69 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
+  </head>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body,
+    html {
+      height: 100%;
+    }
+
+    canvas {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x2c3e50,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
+        PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        // Create the spine display object
+        const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
+          scale: 0.5,
+        });
+
+        // Set the default mix time to use when transitioning
+        // from one animation to the next.
+        spineboy.state.data.defaultMix = 0.2;
+
+        // Center the spine object on screen.
+        spineboy.x = window.innerWidth / 2;
+        spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "run", true);
+
+        // Set callbacks to receive animation state events
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+      })();
+    </script>
+  </body>
+</html>

spine-ts/spine-pixi/example/index.html

@@ -1,140 +1,67 @@
 <html>
-
-<head>
-	<meta charset="UTF-8">
-	<title>spine-pixi</title>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
-	<script src="../dist/iife/spine-pixi.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
-</head>
-<style>
-	* {
-		margin: 0;
-		padding: 0;
-	}
-
-	body,
-	html {
-		height: 100%
-	}
-
-	canvas {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-</style>
-
-<body>
-	<script>
-		(async function () {
-			var app = new PIXI.Application({
-				width: window.innerWidth,
-				height: window.innerHeight,
-				resolution: window.devicePixelRatio || 1,
-				autoDensity: true,
-				resizeTo: window,
-				backgroundColor: 0x2c3e50,
-				hello:true
-			});
-			document.body.appendChild(app.view);
-
-			// Feel free to mix and match the binary skeleton, the json skeleton, the rect atlas and the polypack atlas
-			// You only need one skeleton and one atlas, the rest is just to show how to load different formats
-			PIXI.Assets.add("spineboySkeletonJson", "./assets/spineboy-pro.json");
-			PIXI.Assets.add("spineboySkeletonBinary", "./assets/spineboy-pro.skel");
-			PIXI.Assets.add("spineboyAtlas", "./assets/spineboy.atlas");
-			PIXI.Assets.add("spineboyAtlasPolypack", "./assets/spineboy-polypack.atlas");
-
-			await PIXI.Assets.load([
-				"spineboySkeletonJson",
-				"spineboySkeletonBinary",
-				"spineboyAtlas",
-				"spineboyAtlasPolypack"
-			]);
-
-			// Create the spine display object
-			const spineBoy = spine.Spine.from("spineboySkeletonJson", "spineboyAtlas", { scale: 0.5 });
-
-			// .from(...) is a shortcut + cache for creating the skeleton data at a certain scale
-			// Here would be the "long way" of doing it (without cache):
-
-			// const skeletonAsset = Assets.get(skeletonAssetName);
-			// const atlasAsset = Assets.get(atlasAssetName);
-			// const attachmentLoader = new AtlasAttachmentLoader(atlasAsset);
-			// let parser; // You can skip this guessing step if you know the type of the skeleton asset
-			// if (skeletonAsset instanceof Uint8Array) {
-			// 	parser = new SkeletonBinary(attachmentLoader);
-			// } else {
-			// 	parser = new SkeletonJson(attachmentLoader);
-			// }
-			// parser.scale = options?.scale ?? 1;
-			// skeletonData = parser.readSkeletonData(skeletonAsset);
-			// onst spineBoy = new spine.Spine(skeletonData, options);
-
-
-			// Set the position
-			spineBoy.x = window.innerWidth / 2;
-			spineBoy.y = window.innerHeight * 0.9;
-
-			// start an animation. AutoUpdate is on by default, we don't need a manual rAF loop
-			spineBoy.state.setAnimation(0, "run", true);
-
-			// add to stage
-			app.stage.addChild(spineBoy);
-
-			// do we want debug? we can have debug!
-			const spinedebugger = new spine.SpineDebugRenderer();
-			spineBoy.debug = spinedebugger;
-
-			// End of spine setup. The rest is the tweakpane on the right to play with the spineboy
-
-			const pane = new Tweakpane.Pane({ title: 'spine pixi.js' });
-
-			// spineboy position on screen
-			pane.addInput(spineBoy, 'position', {
-				x: { min: 0, max: window.innerWidth },
-				y: { min: 0, max: window.innerHeight },
-			});
-
-			// Interesting example on how to get the pixi global position of a bone, and how to set a bone to a pixi global position
-			// spine's "global" position is local to the spine display object. It's not the same as pixi's global position
-			const aux = {aimPosition:spineBoy.toGlobal(spineBoy.getBonePosition("crosshair"))};
-			const aimControl = pane.addInput(aux, 'aimPosition', {
-				x: { min: 0, max: window.innerWidth },
-				y: { min: 0, max: window.innerHeight },
-			}).on("change", (e) => {
-				spineBoy.setBonePosition("crosshair", spineBoy.toLocal(e.value));
-			})
-			aimControl.hidden = true;
-
-			// anim changer
-			pane.addBlade({
-				view: 'list',
-				label: 'animation',
-				options: spineBoy.skeleton.data.animations.map(a => ({ text: a.name, value: a.name })),
-				value: 'run',
-			}).on("change", (e) => {
-				spineBoy.state.setAnimation(0, e.value, true);
-				aimControl.hidden = !(e.value == "aim")
-			})
-
-			// turn on or off debug draws
-			const debugFolder = pane.addFolder({
-				title: 'Debug options',
-			});
-
-			debugFolder.addInput(spinedebugger, 'drawMeshHull');
-			debugFolder.addInput(spinedebugger, 'drawMeshTriangles');
-			debugFolder.addInput(spinedebugger, 'drawBones');
-			debugFolder.addInput(spinedebugger, 'drawPaths');
-			debugFolder.addInput(spinedebugger, 'drawBoundingBoxes');
-			debugFolder.addInput(spinedebugger, 'drawClipping');
-			debugFolder.addInput(spinedebugger, 'drawRegionAttachments');
-			debugFolder.addInput(spinedebugger, 'drawEvents');
-
-		})();
-	</script>
-</body>
-
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
+  </head>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body,
+    html {
+      height: 100%;
+    }
+
+    canvas {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x2c3e50,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
+        PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        // Create the spine display object
+        const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
+          scale: 0.5,
+        });
+
+        // Set the default mix time to use when transitioning
+        // from one animation to the next.
+        spineboy.state.data.defaultMix = 0.2;
+
+        // Center the spine object on screen.
+        spineboy.x = window.innerWidth / 2;
+        spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "run", true);
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+      })();
+    </script>
+  </body>
+</html>

spine-ts/spine-pixi/example/manual-loading.html

@@ -0,0 +1,74 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
+  </head>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body,
+    html {
+      height: 100%;
+    }
+
+    canvas {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x2c3e50,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
+        PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        // Manually load the data and create a Spine display object from it using
+        // the Spine core API. This will not use the interal cache like Spine.from(),
+        // so you have to cache data yourself.
+        const atlas = PIXI.Assets.get("spineboyAtlas");
+        const attachmentLoader = new spine.AtlasAttachmentLoader(atlas);
+        const binaryLoader = new spine.SkeletonBinary(attachmentLoader);
+        binaryLoader.scale = 0.5;
+        const skeletonData = binaryLoader.readSkeletonData(
+          PIXI.Assets.get("spineboyData")
+        );
+        const spineboy = new spine.Spine(skeletonData);
+
+        // Set the default mix time to use when transitioning
+        // from one animation to the next.
+        spineboy.state.data.defaultMix = 0.2;
+
+        // Center the spine object on screen.
+        spineboy.x = window.innerWidth / 2;
+        spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "run", true);
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+      })();
+    </script>
+  </body>
+</html>

spine-ts/spine-pixi/src/Spine.ts

@@ -122,23 +122,8 @@ export class Spine extends Container {
 		this.state = new AnimationState(animData);
 		this.autoUpdate = options?.autoUpdate ?? true;
 		this.slotMeshFactory = options?.slotMeshFactory ?? ((): ISlotMesh => new SlotMesh());
-
-
-		/**
-		  * This is locked behind https://github.com/pixijs/pixijs/issues/8957
-		  * I don't want to make a custom event emitter and do `this.spineEvents.on` because that's just as "far" as `this.state.addListener`
-		  * So, until pixi fixes the custom event system, I'll stick to spine native events. - @miltoncandelero
-
-			this.spineListeners = {
-				complete: (trackEntry) => this.emit("complete", trackEntry),
-				dispose: (trackEntry) => this.emit("dispose", trackEntry),
-				end: (trackEntry) => this.emit("end", trackEntry),
-				event: (trackEntry, event) => this.emit("event", trackEntry, event),
-				interrupt: (trackEntry) => this.emit("interrupt", trackEntry),
-				start: (trackEntry) => this.emit("start", trackEntry),
-			};
-			this.state.addListener(this.spineListeners);
-		*/
+		this.skeleton.setToSetupPose();
+		this.skeleton.updateWorldTransform();
 	}
 
 	public update (deltaSeconds: number): void {