Mat Groves ecbe9b0247
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>
2024-11-06 17:23:01 +01:00

47 lines
1.6 KiB
HTML

<html>
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.2/dist/pixi.min.js"></script>
<script src="../dist/iife/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="../../index.css">
</head>
<body>
<script>
(async function () {
var app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
resizeTo: window,
backgroundColor: 0x333333,
hello: true,
});
document.body.appendChild(app.view);
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
PIXI.Assets.add("sackData", "./assets/sack-pro.skel");
PIXI.Assets.add("sackAtlas", "./assets/sack-pma.atlas");
await PIXI.Assets.load(["sackData", "sackAtlas"]);
// Create the spine display object
const sack = spine.Spine.from({skeleton: "sackData", atlas: "sackAtlas",
scale: 0.2,
});
// Center the spine object on screen.
sack.x = window.innerWidth / 2;
sack.y = window.innerHeight / 2 + sack.getBounds().height / 2;
// Set animation "cape-follow-example" on track 0, looped.
sack.state.setAnimation(0, "cape-follow-example", true);
// Add the display object to the stage.
app.stage.addChild(sack);
})();
</script>
</body>
</html>