From ecbe9b02472d4cd8cfd0a38f188b9440208fb621 Mon Sep 17 00:00:00 2001 From: Mat Groves Date: Wed, 6 Nov 2024 16:23:01 +0000 Subject: [PATCH] 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 --- .gitignore | 1 + spine-ts/README.md | 9 +- spine-ts/build.sh | 1 + spine-ts/index.html | 25 + spine-ts/package-lock.json | 58 + spine-ts/package.json | 13 +- spine-ts/publish.sh | 1 + spine-ts/spine-pixi-v8/README.md | 3 + .../example/assets/celestial-circus-pma.atlas | 174 + .../example/assets/celestial-circus-pma.png | Bin 0 -> 818183 bytes .../example/assets/celestial-circus-pro.json | 3758 +++++++ .../example/assets/celestial-circus-pro.skel | Bin 0 -> 52572 bytes .../example/assets/celestial-circus.atlas | 173 + .../example/assets/celestial-circus.png | Bin 0 -> 808981 bytes .../example/assets/cloud-pot-pma.atlas | 86 + .../example/assets/cloud-pot-pma.png | Bin 0 -> 357857 bytes .../example/assets/cloud-pot.json | 842 ++ .../example/assets/cloud-pot.skel | Bin 0 -> 8397 bytes .../example/assets/coin-pma.atlas | 19 + .../spine-pixi-v8/example/assets/coin-pma.png | Bin 0 -> 312321 bytes .../example/assets/coin-pro.atlas | 25 + .../example/assets/coin-pro.json | 1 + .../spine-pixi-v8/example/assets/coin-pro.png | Bin 0 -> 240051 bytes .../example/assets/coin-pro.skel | Bin 0 -> 2790 bytes .../example/assets/dragon-ess.skel | Bin 0 -> 7248 bytes .../example/assets/dragon-pma.atlas | 117 + .../example/assets/dragon-pma.png | Bin 0 -> 313052 bytes .../example/assets/dragon-pma_2.png | Bin 0 -> 218108 bytes .../example/assets/dragon-pma_3.png | Bin 0 -> 209070 bytes .../example/assets/dragon-pma_4.png | Bin 0 -> 26054 bytes .../example/assets/dragon-pma_5.png | Bin 0 -> 14367 bytes .../example/assets/lil-gui.min.css | 1 + .../example/assets/lil-gui.umd.min.js | 8 + .../example/assets/mix-and-match-pma.atlas | 359 + .../example/assets/mix-and-match-pma.png | Bin 0 -> 377480 bytes .../example/assets/mix-and-match-pro.skel | Bin 0 -> 259912 bytes .../spine-pixi-v8/example/assets/pixi.min.js | 2017 ++++ .../example/assets/raptor-jaw-tooth.png | Bin 0 -> 8235 bytes .../example/assets/raptor-pma.atlas | 101 + .../example/assets/raptor-pma.png | Bin 0 -> 419093 bytes .../example/assets/raptor-pro.json | 9185 +++++++++++++++++ .../spine-pixi-v8/example/assets/raptor.atlas | 93 + .../spine-pixi-v8/example/assets/raptor.png | Bin 0 -> 423005 bytes .../example/assets/sack-pma.atlas | 11 + .../spine-pixi-v8/example/assets/sack-pma.png | Bin 0 -> 167014 bytes .../example/assets/sack-pro.json | 4940 +++++++++ .../example/assets/sack-pro.skel | Bin 0 -> 42777 bytes .../example/assets/snowglobe-pma.atlas | 210 + .../example/assets/snowglobe-pma.png | Bin 0 -> 688917 bytes .../example/assets/snowglobe-pma_2.png | Bin 0 -> 803281 bytes .../example/assets/snowglobe-pma_3.png | Bin 0 -> 409360 bytes .../example/assets/snowglobe-pma_4.png | Bin 0 -> 245339 bytes .../example/assets/snowglobe-pma_5.png | Bin 0 -> 401332 bytes .../example/assets/snowglobe-pro.json | 2911 ++++++ .../example/assets/snowglobe-pro.skel | Bin 0 -> 43213 bytes .../example/assets/spine_logo.png | Bin 0 -> 3495 bytes .../example/assets/spineboy-pma.atlas | 95 + .../example/assets/spineboy-pma.png | Bin 0 -> 244861 bytes .../example/assets/spineboy-pro.json | 8723 ++++++++++++++++ .../example/assets/spineboy-pro.skel | Bin 0 -> 64463 bytes .../example/assets/spineboy.atlas | 94 + .../spine-pixi-v8/example/assets/spineboy.png | Bin 0 -> 245321 bytes .../example/assets/stretchyman-pma.atlas | 19 + .../example/assets/stretchyman-pma.png | Bin 0 -> 91986 bytes .../example/assets/stretchyman-pro.skel | Bin 0 -> 24905 bytes spine-ts/spine-pixi-v8/example/coin.html | 71 + .../example/control-bones-example.html | 109 + spine-ts/spine-pixi-v8/example/dragon.html | 86 + .../spine-pixi-v8/example/events-example.html | 81 + spine-ts/spine-pixi-v8/example/index.html | 51 + .../spine-pixi-v8/example/manual-loading.html | 58 + .../example/mix-and-match-example.html | 68 + .../example/mouse-following.html | 91 + spine-ts/spine-pixi-v8/example/physics.html | 47 + spine-ts/spine-pixi-v8/example/physics2.html | 142 + spine-ts/spine-pixi-v8/example/physics3.html | 47 + spine-ts/spine-pixi-v8/example/physics4.html | 47 + .../spine-pixi-v8/example/simple-input.html | 98 + .../spine-pixi-v8/example/slot-objects.html | 141 + spine-ts/spine-pixi-v8/package.json | 39 + .../spine-pixi-v8/src/BatchableSpineSlot.ts | 138 + spine-ts/spine-pixi-v8/src/Spine.ts | 912 ++ .../spine-pixi-v8/src/SpineDebugRenderer.ts | 615 ++ spine-ts/spine-pixi-v8/src/SpinePipe.ts | 182 + spine-ts/spine-pixi-v8/src/SpineTexture.ts | 143 + .../spine-pixi-v8/src/assets/atlasLoader.ts | 158 + .../src/assets/skeletonLoader.ts | 81 + .../src/darktint/DarkTintBatchGeometry.ts | 63 + .../src/darktint/DarkTintBatcher.ts | 157 + .../src/darktint/DarkTintShader.ts | 45 + .../spine-pixi-v8/src/darktint/darkTintBit.ts | 49 + spine-ts/spine-pixi-v8/src/index.ts | 43 + spine-ts/spine-pixi-v8/src/require-shim.ts | 43 + spine-ts/spine-pixi-v8/tsconfig.json | 25 + spine-ts/spine-pixi/README.md | 2 +- .../example/control-bones-example.html | 4 +- .../spine-pixi/example/events-example.html | 4 +- spine-ts/spine-pixi/example/index.html | 2 +- .../spine-pixi/example/manual-loading.html | 2 +- .../example/mix-and-match-example.html | 10 +- .../spine-pixi/example/mouse-following.html | 4 +- spine-ts/spine-pixi/example/physics.html | 2 +- spine-ts/spine-pixi/example/physics2.html | 4 +- spine-ts/spine-pixi/example/physics3.html | 2 +- spine-ts/spine-pixi/example/physics4.html | 2 +- spine-ts/spine-pixi/example/simple-input.html | 14 +- spine-ts/spine-pixi/example/slot-objects.html | 2 +- spine-ts/spine-pixi/package.json | 2 +- spine-ts/spine-pixi/src/Spine.ts | 128 +- spine-ts/spine-pixi/src/SpineDebugRenderer.ts | 5 +- spine-ts/tsconfig.json | 3 + 111 files changed, 38050 insertions(+), 45 deletions(-) create mode 100644 spine-ts/spine-pixi-v8/README.md create mode 100644 spine-ts/spine-pixi-v8/example/assets/celestial-circus-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/celestial-circus-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/celestial-circus-pro.json create mode 100644 spine-ts/spine-pixi-v8/example/assets/celestial-circus-pro.skel create mode 100644 spine-ts/spine-pixi-v8/example/assets/celestial-circus.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/celestial-circus.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/cloud-pot-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/cloud-pot-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/cloud-pot.json create mode 100644 spine-ts/spine-pixi-v8/example/assets/cloud-pot.skel create mode 100644 spine-ts/spine-pixi-v8/example/assets/coin-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/coin-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/coin-pro.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/coin-pro.json create mode 100644 spine-ts/spine-pixi-v8/example/assets/coin-pro.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/coin-pro.skel create mode 100644 spine-ts/spine-pixi-v8/example/assets/dragon-ess.skel create mode 100644 spine-ts/spine-pixi-v8/example/assets/dragon-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/dragon-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/dragon-pma_2.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/dragon-pma_3.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/dragon-pma_4.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/dragon-pma_5.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/lil-gui.min.css create mode 100644 spine-ts/spine-pixi-v8/example/assets/lil-gui.umd.min.js create mode 100644 spine-ts/spine-pixi-v8/example/assets/mix-and-match-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/mix-and-match-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/mix-and-match-pro.skel create mode 100644 spine-ts/spine-pixi-v8/example/assets/pixi.min.js create mode 100644 spine-ts/spine-pixi-v8/example/assets/raptor-jaw-tooth.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/raptor-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/raptor-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/raptor-pro.json create mode 100644 spine-ts/spine-pixi-v8/example/assets/raptor.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/raptor.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/sack-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/sack-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/sack-pro.json create mode 100644 spine-ts/spine-pixi-v8/example/assets/sack-pro.skel create mode 100644 spine-ts/spine-pixi-v8/example/assets/snowglobe-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/snowglobe-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/snowglobe-pma_2.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/snowglobe-pma_3.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/snowglobe-pma_4.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/snowglobe-pma_5.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/snowglobe-pro.json create mode 100644 spine-ts/spine-pixi-v8/example/assets/snowglobe-pro.skel create mode 100644 spine-ts/spine-pixi-v8/example/assets/spine_logo.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/spineboy-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/spineboy-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/spineboy-pro.json create mode 100644 spine-ts/spine-pixi-v8/example/assets/spineboy-pro.skel create mode 100644 spine-ts/spine-pixi-v8/example/assets/spineboy.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/spineboy.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/stretchyman-pma.atlas create mode 100644 spine-ts/spine-pixi-v8/example/assets/stretchyman-pma.png create mode 100644 spine-ts/spine-pixi-v8/example/assets/stretchyman-pro.skel create mode 100644 spine-ts/spine-pixi-v8/example/coin.html create mode 100644 spine-ts/spine-pixi-v8/example/control-bones-example.html create mode 100644 spine-ts/spine-pixi-v8/example/dragon.html create mode 100644 spine-ts/spine-pixi-v8/example/events-example.html create mode 100644 spine-ts/spine-pixi-v8/example/index.html create mode 100644 spine-ts/spine-pixi-v8/example/manual-loading.html create mode 100644 spine-ts/spine-pixi-v8/example/mix-and-match-example.html create mode 100644 spine-ts/spine-pixi-v8/example/mouse-following.html create mode 100644 spine-ts/spine-pixi-v8/example/physics.html create mode 100644 spine-ts/spine-pixi-v8/example/physics2.html create mode 100644 spine-ts/spine-pixi-v8/example/physics3.html create mode 100644 spine-ts/spine-pixi-v8/example/physics4.html create mode 100644 spine-ts/spine-pixi-v8/example/simple-input.html create mode 100644 spine-ts/spine-pixi-v8/example/slot-objects.html create mode 100644 spine-ts/spine-pixi-v8/package.json create mode 100644 spine-ts/spine-pixi-v8/src/BatchableSpineSlot.ts create mode 100644 spine-ts/spine-pixi-v8/src/Spine.ts create mode 100644 spine-ts/spine-pixi-v8/src/SpineDebugRenderer.ts create mode 100644 spine-ts/spine-pixi-v8/src/SpinePipe.ts create mode 100644 spine-ts/spine-pixi-v8/src/SpineTexture.ts create mode 100644 spine-ts/spine-pixi-v8/src/assets/atlasLoader.ts create mode 100644 spine-ts/spine-pixi-v8/src/assets/skeletonLoader.ts create mode 100644 spine-ts/spine-pixi-v8/src/darktint/DarkTintBatchGeometry.ts create mode 100644 spine-ts/spine-pixi-v8/src/darktint/DarkTintBatcher.ts create mode 100644 spine-ts/spine-pixi-v8/src/darktint/DarkTintShader.ts create mode 100644 spine-ts/spine-pixi-v8/src/darktint/darkTintBit.ts create mode 100644 spine-ts/spine-pixi-v8/src/index.ts create mode 100644 spine-ts/spine-pixi-v8/src/require-shim.ts create mode 100644 spine-ts/spine-pixi-v8/tsconfig.json diff --git a/.gitignore b/.gitignore index fbe4e3ce4..7acee1699 100644 --- 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 index a87626aa4..1ffccd63d 100644 --- a/spine-ts/README.md +++ b/spine-ts/README.md @@ -10,7 +10,8 @@ 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. @@ -18,7 +19,7 @@ For documentation of the core API in `spine-core`, please refer to our [Spine Ru 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 ` + +// spine-pixi-v8 + ``` 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 index f0fae5b50..4ebdb1eec 100755 --- 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 index f5daeba5d..41dda9140 100644 --- a/spine-ts/index.html +++ b/spine-ts/index.html @@ -54,6 +54,31 @@
  • Physics IV
  • Slot Objects
    • +
  • Pixi V8
    • +
  • Phaser