Skip to content

Commit

Permalink
Add PixiJS v8 support to spine (#2641)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>
  • Loading branch information
@GoodBoyDigital @davidetan
GoodBoyDigital and davidetan authored Nov 6, 2024
1 parent b610bd7 commit ecbe9b0
Show file tree
Hide file tree
Showing 111 changed files with 38,050 additions and 45 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 7 additions & 2 deletions spine-ts/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down Expand Up @@ -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/[email protected].*/dist/iife/spine-pixi.js"></script>
// spine-pixi-v8
<script src="https://unpkg.com/@esotericsoftware/[email protected].*/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.
Expand All @@ -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:
Expand Down
1 change: 1 addition & 0 deletions spine-ts/build.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 "[email protected]" "$TS_UPDATE_URL$BRANCH"
Expand Down
25 changes: 25 additions & 0 deletions spine-ts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
58 changes: 58 additions & 0 deletions spine-ts/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 8 additions & 5 deletions spine-ts/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -57,6 +59,7 @@
"spine-player",
"spine-threejs",
"spine-pixi",
"spine-pixi-v8",
"spine-canvaskit",
"spine-webgl"
],
Expand Down
1 change: 1 addition & 0 deletions spine-ts/publish.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions spine-ts/spine-pixi-v8/README.md
View file
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.
Loading

0 comments on commit ecbe9b0

Please sign in to comment.