Skip to content
This repository has been archived by the owner on Nov 20, 2024. It is now read-only.

chore: optimisation and fix for clipping and blend modes #11

Merged
merged 5 commits into from
Jun 6, 2024
Merged

chore: optimisation and fix for clipping and blend modes #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9918800
- optimise spine to run better. 33% faster ish!
GoodBoyDigital Jun 5, 2024
5ba8bb6
lint
GoodBoyDigital Jun 5, 2024
ae46a8a
tidy up
GoodBoyDigital Jun 5, 2024
754f38c
final tidy up
GoodBoyDigital Jun 6, 2024
8f4d510
chore: update to esoteric api naming (#12)
Zyie Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added examples/assets/spine_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions examples/events-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
<script src="../dist/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="./index.css">
Expand Down Expand Up @@ -35,8 +35,8 @@
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");
PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);

// Create the Spine display object
Expand Down
2 changes: 1 addition & 1 deletion examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.0.0-rc.2/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
<script src="../dist/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="./index.css">
Expand Down
6 changes: 3 additions & 3 deletions examples/manual-loading.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
<script src="../dist/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="./index.css">
Expand All @@ -24,8 +24,8 @@
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");
PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);

// Manually load the data and create a Spine display object from it using
Expand Down
6 changes: 3 additions & 3 deletions examples/mix-and-match-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
<script src="../dist/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="./index.css">
Expand All @@ -24,8 +24,8 @@
document.body.appendChild(app.view);

// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
PIXI.Assets.add("mixAndMatchData", "./assets/mix-and-match-pro.skel");
PIXI.Assets.add("mixAndMatchAtlas", "./assets/mix-and-match-pma.atlas");
PIXI.Assets.add({alias: "mixAndMatchData", src: "./assets/mix-and-match-pro.skel" });
PIXI.Assets.add({alias: "mixAndMatchAtlas", src: "./assets/mix-and-match-pma.atlas" });
await PIXI.Assets.load(["mixAndMatchData", "mixAndMatchAtlas"]);

// Create the Spine display object
Expand Down
9 changes: 5 additions & 4 deletions examples/mouse-following.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<title>Spine Pixi Example</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
<script src="../dist/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="./index.css">
Expand All @@ -24,8 +24,8 @@
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");
PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);

// Create the spine display object
Expand All @@ -47,6 +47,7 @@

// Add the display object to the stage.
app.stage.addChild(spineboy);
app.stage.hitArea = new PIXI.Rectangle(0, 0, app.view.width, app.view.height);

// Make the stage interactive and register pointer events
app.stage.eventMode = "dynamic";
Expand All @@ -57,7 +58,7 @@
setBonePosition(e);
});

app.stage.on("pointermove", (e) => {
app.stage.on("globalpointermove", (e) => {
if (isDragging) setBonePosition(e);
});

Expand Down
58 changes: 47 additions & 11 deletions examples/simple-input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
<script src="../dist/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="./index.css">
Expand All @@ -24,8 +24,8 @@
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");
PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);

// Create the spine display object
Expand All @@ -35,28 +35,64 @@

// Set the default animation and the
// default mix for transitioning between animations.
spineboy.state.setAnimation(0, "run", true);
spineboy.state.setAnimation(0, "hoverboard", true);
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;

// Make it so that you can interact with Spineboy.
// Also, handle the case that you click or tap on the screen.
// The callback function definition can be seen below.
// Handle the case that you click/tap the screen.
spineboy.eventMode = 'static';
spineboy.on('pointerdown', onClick);

// Add the display object to the stage.
app.stage.addChild(spineboy);

// Add variables for movement, speed.
let moveLeft = false;
let moveRight = false;
const speed = 5;

// Handle the case that the keyboard keys specified below are pressed.
function onKeyDown(key) {
if (key.code === "ArrowLeft" || key.code === "KeyA") {
moveLeft = true;
spineboy.skeleton.scaleX = -1;
} else if (key.code === "ArrowRight" || key.code === "KeyD") {
moveRight = true;
spineboy.skeleton.scaleX = 1;
}
}

// Handle when the keys are released, if they were pressed.
function onKeyUp(key) {
if (key.code === "ArrowLeft" || key.code === "KeyA") {
moveLeft = false;
} else if (key.code === "ArrowRight" || key.code === "KeyD") {
moveRight = false;
}
}

// This callback function handles what happens
// when you click or tap on the screen.
// Handle if you click/tap the screen.
function onClick() {
spineboy.state.addAnimation(0, "jump", false, 0);
spineboy.state.addAnimation(0, "idle", true, 0);
spineboy.state.setAnimation(1, "shoot", false, 0);
}

// Add event listeners so that the window will correctly handle input.
window.addEventListener("keydown", onKeyDown);
window.addEventListener("keyup", onKeyUp);

// Update the application to move Spineboy if input is detected.
app.ticker.add(() => {
if (moveLeft) {
spineboy.x -= speed;
}
if (moveRight) {
spineboy.x += speed;
}
});
})();
</script>
</body>
Expand Down
125 changes: 125 additions & 0 deletions examples/slot-objects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<html>
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
<script src="../dist/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="./index.css">
</head>

<body>
<script>
(async function () {
var app = new PIXI.Application();
await app.init({
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({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
PIXI.Assets.add({alias: "spine_logo", src: "./assets/spine_logo.png" });
await PIXI.Assets.load(["spineboyData", "spineboyAtlas", "spine_logo"]);

// Create the spine display object
const spineboy = spine.Spine.from({skeleton: "spineboyData", atlas: "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, "walk", true);

// Add the display object to the stage.
app.stage.addChild(spineboy);

const logo1 = PIXI.Sprite.from('spine_logo');
const logo2 = PIXI.Sprite.from('spine_logo');
const logo3 = PIXI.Sprite.from('spine_logo');
const logo4 = PIXI.Sprite.from('spine_logo');
const text = new PIXI.Text('Spine Text');

// putting logo1 on top of the gun
spineboy.addSlotObject("gun", logo1);

// putting logo2 on top of the hand using slot directly and remove the attachment hand
let frontFist;
setTimeout(() => {
frontFist = spineboy.skeleton.findSlot("front-fist");
spineboy.addSlotObject(frontFist, logo2);
frontFist.setAttachment(null);
}, 2000)

// scaling the bone, will scale the pixi object too
setTimeout(() => {
frontFist.bone.scaleX = .5
frontFist.bone.scaleY = .5
}, 3000)

// adding a pixi text in a slot using slot index
let mouth;
setTimeout(() => {
mouth = spineboy.skeleton.findSlot("mouth");
spineboy.addSlotObject(mouth, text);
}, 4000)

// adding one display object to an already "occupied" slot will remove the old one,
// and move the given one to the slot
setTimeout(() => {
spineboy.addSlotObject(mouth, logo1);
}, 5000)

// adding multiple DisplayObjects to a slot using a Container to control their offset, size, ...
setTimeout(() => {
const container = new PIXI.Container();
container.addChild(logo3, logo4);
logo3.y = 20;
logo3.scale.set(.5);
logo4.scale.set(.5);
logo4.tint = 0xFF5500;
spineboy.addSlotObject("gun", container);
}, 6000)

// removing the container won't automatically destroy the displayObject contained, so take care of them
setTimeout(() => {
const container = new PIXI.Container();
spineboy.removeSlotObject("gun");
logo3.destroy();
logo4.destroy();
}, 7000)

// removing a specific slot object, that is not in that slot do nothing
setTimeout(() => {
const container = new PIXI.Container();
spineboy.removeSlotObject(frontFist, text);
text.destroy();
}, 8000)

// removing a specific slot object
setTimeout(() => {
const container = new PIXI.Container();
spineboy.removeSlotObject(frontFist, logo2);
logo2.destroy();
}, 9000)

// resetting the slot with the original attachment
setTimeout(() => {
frontFist.setToSetupPose();
}, 10000)
})();
</script>
</body>
</html>
Loading
Loading