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

Commit

Permalink
chore: optimisation and fix for clipping and blend modes (#11)
Browse files Browse the repository at this point in the history 
Co-authored-by: Mat Groves <[email protected]>
Co-authored-by: Zyie <[email protected]>
  • Loading branch information
@GoodBoyDigital @Zyie
GoodBoyDigital and Zyie authored Jun 6, 2024
1 parent 9865bae commit a75213c
Show file tree
Hide file tree
Showing 13 changed files with 675 additions and 442 deletions.
Binary file added examples/assets/spine_logo.png
View file
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
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
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
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
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
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
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
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

0 comments on commit a75213c

Please sign in to comment.