Add PixiJS v8 support to spine (#2641)

* add v8 support to spine! * Renamed examples folder for consistency. * Gitignore dist. * Tsconfig. * Package json. * Modification due to strictNullChecks=true. * Run tsfmt. * Use clipper.clipTriangles not deprecated version. * Aligned example to spine-pixi (v7). * Fix clipping dark tint wrong param. * Removed useless clipper. * Push texture issue repro example * fix attachment.uvs by copying them * SlotObject alpha connected to skeleton and slot alpha. * add topology for future v8 release * Dark tint rendered is enabled if at least one slot has dark tint, or by configuration. Fixed clipping while using dark tint. * Optimized clipping by using clipTrianglesUnpacked. * Repro example for clipping issue. * Aligned constructor and from signature of spine-pixi(-v7) to v8. Deprecated old signatures. * Removed useless function. * Fixed clipping issue flagging attachment as dirty if indices change. * Clipping attachments clip slot object through Pixi Graphics masks. * Add autoUpdate in SpineFromOptions * Added javadoc to pixiv8 * Updated pixi7 examples to use SpineFromOptions interface * Aligned atlas loader to use texturePreference for bundles. * Add pool to manage slot objects masks * Fixed minor issues with SpineDebugRenderer * Aligned spine-pixi-v8 with latest spine-core * Updated build and publish script --------- Co-authored-by: Davide Tantillo <iamdjj@gmail.com>
EsotericSoftware · Nov 6, 2024 · ecbe9b0 · ecbe9b0
1 parent b610bd7
commit ecbe9b0
Show file tree

Hide file tree

Showing 111 changed files with 38,050 additions and 45 deletions.
diff --git a/.gitignore b/.gitignore
@@ -146,6 +146,7 @@ spine-ts/spine-webgl/dist
 spine-ts/spine-player/dist
 spine-ts/spine-threejs/dist
 spine-ts/spine-pixi/dist
+spine-ts/spine-pixi-v8/dist
 spine-libgdx/gradle
 spine-libgdx/gradlew
 spine-libgdx/gradlew.bat

diff --git a/spine-ts/README.md b/spine-ts/README.md
@@ -10,15 +10,16 @@ up into multiple modules:
 1. `spine-threejs/`, a self-contained [THREE.JS](https://threejs.org/) backend, built on the core classes.
 1. `spine-player/`, a self-contained player to easily display Spine animations on your website, built on the core classes and WebGL backend.
 1. `spine-phaser/`, a [Phaser](https://phaser.io/) backend, built on the core classes.
-1. `spine-pixi/`, a [PixiJS](https://pixijs.com/) backend, built on the core classes.
+1. `spine-pixi/`, a [PixiJS v7](https://pixijs.com/) backend, built on the core classes.
+1. `spine-pixi-v8/`, a [PixiJS v8](https://pixijs.com/) backend, built on the core classes.
 
 In most cases, the `spine-player` module is best suited for your needs. Please refer to the [Spine Web Player documentation](https://esotericsoftware.com/spine-player) for more information.
 
 For documentation of the core API in `spine-core`, please refer to our [Spine Runtimes Guide](http://esotericsoftware.com/spine-runtimes-guide).
 
 For documentation of `spine-phaser`, please refer to our [spine-phaser Guide](https://esotericsoftware.com/spine-phaser).
 
-For documentation of `spine-pixi`, please refer to our [spine-pixi Guide](https://esotericsoftware.com/spine-pixi).
+For documentation of `spine-pixi` and `spine-pixi`, please refer to our [spine-pixi Guide](https://esotericsoftware.com/spine-pixi).
 
 For documentation of `spine-canvaskit`, please refer to our [spine-canvaskit Guide](https://esotericsoftware.com/spine-canvaskit).
 
@@ -79,6 +80,9 @@ You can include a module in your project via a `<script>` tag from the [unpkg](h
 
 // spine-pixi
 <script src="https://unpkg.com/@esotericsoftware/spine-pixi@4.2.*/dist/iife/spine-pixi.js"></script>
+
+// spine-pixi-v8
+<script src="https://unpkg.com/@esotericsoftware/spine-pixi-v8@4.2.*/dist/iife/spine-pixi-v8.js"></script>
 ```
 
 We also provide `js.map` source maps. They will be automatically fetched from unpkg when debugging code of a spine-module in Chrome, Firefox, or Safari, mapping the JavaScript code back to its original TypeScript sources.
@@ -98,6 +102,7 @@ npm install @esotericsoftware/spine-player
 npm install @esotericsoftware/spine-threejs
 npm install @esotericsoftware/spine-phaser
 npm install @esotericsoftware/spine-pixi
+npm install @esotericsoftware/spine-pixi-v8
 ```
 
 spine-ts modules are provided in the [ECMAScript format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), which can be consumed natively by all modern browsers, or bundled by tools like [webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), [Parcel](https://parceljs.org/), or [esbuild](https://esbuild.github.io/). You can import functions and classes from a spine-ts module in your JavaScript or TypeScript code using the `import` syntax to get access to all exported constants, functions, and classes of a module:

diff --git a/spine-ts/build.sh b/spine-ts/build.sh
@@ -21,6 +21,7 @@ then
 		spine-player/dist/iife/* \
 		spine-threejs/dist/iife/* \
 		spine-pixi/dist/iife/* \
+		spine-pixi-v8/dist/iife/* \
 		spine-phaser/dist/iife/* \
 		spine-player/css/spine-player.css
 	curl -f -F "file=@spine-ts.zip" "$TS_UPDATE_URL$BRANCH"

diff --git a/spine-ts/index.html b/spine-ts/index.html
@@ -54,6 +54,31 @@ <h1>spine-ts Examples</h1>
         <li><a href="/spine-pixi/example/physics4.html">Physics IV</a></li>
         <li><a href="/spine-pixi/example/slot-objects.html">Slot Objects</a></li>
       </ul>
+      <li>Pixi V8</li>
+      <ul>
+        <li><a href="/spine-pixi-v8/example/index.html">Basic example</a></li>
+        <li><a href="/spine-pixi-v8/example/manual-loading.html">Manual Loading</a></li>
+        <li>
+          <a href="/spine-pixi-v8/example/events-example.html">Events example</a>
+        </li>
+        <li>
+          <a href="/spine-pixi-v8/example/mix-and-match-example.html">Mix and match example</a>
+        </li>
+        <li>
+          <a href="/spine-pixi-v8/example/simple-input.html">Simple input</a>
+        </li>
+        <li>
+          <a href="/spine-pixi-v8/example/mouse-following.html">Mouse following</a>
+        </li>
+        <li>
+          <a href="/spine-pixi-v8/example/control-bones-example.html">Control bones example</a>
+        </li>
+        <li><a href="/spine-pixi-v8/example/physics.html">Physics</a></li>
+        <li><a href="/spine-pixi-v8/example/physics2.html">Physics II</a></li>
+        <li><a href="/spine-pixi-v8/example/physics3.html">Physics III</a></li>
+        <li><a href="/spine-pixi-v8/example/physics4.html">Physics IV</a></li>
+        <li><a href="/spine-pixi-v8/example/slot-objects.html">Slot Objects</a></li>
+      </ul>
       <li>Phaser</li>
       <ul>
         <li>

diff --git a/spine-ts/package-lock.json b/spine-ts/package-lock.json
diff --git a/spine-ts/package.json b/spine-ts/package.json
@@ -8,8 +8,8 @@
   ],
   "scripts": {
     "prepublish": "npm run clean && npm run build",
-    "clean": "npx rimraf spine-core/dist spine-canvas/dist spine-canvaskit/dist spine-webgl/dist spine-phaser/dist spine-player/dist spine-threejs/dist spine-pixi/dist",
-    "build": "npm run clean && npm run build:modules && concurrently \"npm run build:core\" \"npm run build:canvas\" \"npm run build:canvaskit\" \"npm run build:webgl\" \"npm run build:phaser\" \"npm run build:player\" \"npm run build:threejs\" \"npm run build:pixi\"",
+    "clean": "npx rimraf spine-core/dist spine-canvas/dist spine-canvaskit/dist spine-webgl/dist spine-phaser/dist spine-player/dist spine-threejs/dist spine-pixi/dist spine-pixi-v8/dist",
+    "build": "npm run clean && npm run build:modules && concurrently \"npm run build:core\" \"npm run build:canvas\" \"npm run build:canvaskit\" \"npm run build:webgl\" \"npm run build:phaser\" \"npm run build:player\" \"npm run build:threejs\" \"npm run build:pixi\" \"npm run build:pixi-v8\"",
     "postbuild": "npm run minify",
     "build:modules": "npx tsc -b -clean && npx tsc -b",
     "build:core": "npx esbuild --bundle spine-core/src/index.ts --tsconfig=spine-core/tsconfig.json  --sourcemap --outfile=spine-core/dist/iife/spine-core.js --format=iife --global-name=spine",
@@ -20,16 +20,18 @@
     "build:phaser": "npx esbuild  --bundle spine-phaser/src/index.ts  --tsconfig=spine-phaser/tsconfig.json   --sourcemap --outfile=spine-phaser/dist/iife/spine-phaser.js   --external:Phaser --alias:phaser=Phaser --format=iife --global-name=spine",
     "build:threejs": "npx esbuild --bundle spine-threejs/src/index.ts --tsconfig=spine-threejs/tsconfig.json  --sourcemap --outfile=spine-threejs/dist/iife/spine-threejs.js --external:three --format=iife --global-name=spine",
     "build:pixi": "npx esbuild --bundle spine-pixi/src/index.ts --tsconfig=spine-pixi/tsconfig.json  --sourcemap --outfile=spine-pixi/dist/iife/spine-pixi.js --external:@pixi/* --format=iife --global-name=spine",
-    "minify": "npx esbuild --minify spine-core/dist/iife/spine-core.js --outfile=spine-core/dist/iife/spine-core.min.js && npx esbuild --minify spine-canvas/dist/iife/spine-canvas.js --outfile=spine-canvas/dist/iife/spine-canvas.min.js && npx esbuild --minify spine-canvaskit/dist/iife/spine-canvaskit.js --outfile=spine-canvaskit/dist/iife/spine-canvaskit.min.js && npx esbuild --minify spine-player/dist/iife/spine-player.js --outfile=spine-player/dist/iife/spine-player.min.js && npx esbuild --minify spine-phaser/dist/iife/spine-phaser.js --outfile=spine-phaser/dist/iife/spine-phaser.min.js && npx esbuild --minify spine-webgl/dist/iife/spine-webgl.js --outfile=spine-webgl/dist/iife/spine-webgl.min.js && npx esbuild --minify spine-threejs/dist/iife/spine-threejs.js --outfile=spine-threejs/dist/iife/spine-threejs.min.js && npx esbuild --minify spine-pixi/dist/iife/spine-pixi.js --outfile=spine-pixi/dist/iife/spine-pixi.min.js",
-    "dev": "concurrently \"npx live-server\" \"npm run dev:canvas\" \"npm run dev:canvaskit\" \"npm run dev:webgl\" \"npm run dev:phaser\" \"npm run dev:player\" \"npm run dev:threejs\" \"npm run dev:pixi\" \"npm run dev:modules\"",
+    "build:pixi-v8": "npx esbuild --bundle spine-pixi-v8/src/index.ts --tsconfig=spine-pixi-v8/tsconfig.json  --sourcemap --outfile=spine-pixi-v8/dist/iife/spine-pixi-v8.js --external:pixi.js --format=iife --global-name=spine",
+    "minify": "npx esbuild --minify spine-core/dist/iife/spine-core.js --outfile=spine-core/dist/iife/spine-core.min.js && npx esbuild --minify spine-canvas/dist/iife/spine-canvas.js --outfile=spine-canvas/dist/iife/spine-canvas.min.js && npx esbuild --minify spine-canvaskit/dist/iife/spine-canvaskit.js --outfile=spine-canvaskit/dist/iife/spine-canvaskit.min.js && npx esbuild --minify spine-player/dist/iife/spine-player.js --outfile=spine-player/dist/iife/spine-player.min.js && npx esbuild --minify spine-phaser/dist/iife/spine-phaser.js --outfile=spine-phaser/dist/iife/spine-phaser.min.js && npx esbuild --minify spine-webgl/dist/iife/spine-webgl.js --outfile=spine-webgl/dist/iife/spine-webgl.min.js && npx esbuild --minify spine-threejs/dist/iife/spine-threejs.js --outfile=spine-threejs/dist/iife/spine-threejs.min.js && npx esbuild --minify spine-pixi/dist/iife/spine-pixi.js --outfile=spine-pixi/dist/iife/spine-pixi.min.js && npx esbuild --minify spine-pixi-v8/dist/iife/spine-pixi-v8.js --outfile=spine-pixi-v8/dist/iife/spine-pixi-v8.min.js",
+    "dev": "concurrently \"npx live-server\" \"npm run dev:canvas\" \"npm run dev:canvaskit\" \"npm run dev:webgl\" \"npm run dev:phaser\" \"npm run dev:player\" \"npm run dev:threejs\" \"npm run dev:pixi\" \"npm run dev:pixi-v8\" \"npm run dev:modules\"",
     "dev:modules": "npm run build:modules -- --watch",
     "dev:canvas": "npm run build:canvas -- --watch",
     "dev:canvaskit": "npm run build:canvaskit -- --watch",
     "dev:webgl": "npm run build:webgl -- --watch",
     "dev:phaser": "npm run build:phaser -- --watch",
     "dev:player": "npm run build:player -- --watch",
     "dev:threejs": "npm run build:threejs -- --watch",
-    "dev:pixi": "npm run build:pixi -- --watch"
+    "dev:pixi": "npm run build:pixi -- --watch",
+    "dev:pixi-v8": "npm run build:pixi-v8 -- --watch"
   },
   "repository": {
     "type": "git",
@@ -57,6 +59,7 @@
     "spine-player",
     "spine-threejs",
     "spine-pixi",
+    "spine-pixi-v8",
     "spine-canvaskit",
     "spine-webgl"
   ],

diff --git a/spine-ts/publish.sh b/spine-ts/publish.sh
@@ -17,6 +17,7 @@ sed -i '' "s/$currentVersion/$newVersion/" spine-canvaskit/package.json
 sed -i '' "s/$currentVersion/$newVersion/" spine-core/package.json
 sed -i '' "s/$currentVersion/$newVersion/" spine-phaser/package.json
 sed -i '' "s/$currentVersion/$newVersion/" spine-pixi/package.json
+sed -i '' "s/$currentVersion/$newVersion/" spine-pixi-v8/package.json
 sed -i '' "s/$currentVersion/$newVersion/" spine-player/package.json
 sed -i '' "s/$currentVersion/$newVersion/" spine-threejs/package.json
 sed -i '' "s/$currentVersion/$newVersion/" spine-webgl/package.json

diff --git a/spine-ts/spine-pixi-v8/README.md b/spine-ts/spine-pixi-v8/README.md
@@ -0,0 +1,3 @@
+# spine-ts Pixi.js v8
+
+Please see the top-level [README.md](../README.md) for more information.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# spine-ts Pixi.js v8

		Please see the top-level [README.md](../README.md) for more information.