mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-21 01:36:02 +08:00
[ts] Port to 4.3 (WIP) - Fixing examples.
This commit is contained in:
Davide Tantillo
parent
2f23421112
commit
a06a34c881
@ -75,11 +75,11 @@
|
||||
// bone's parent bone coordinate system
|
||||
const parent = crosshair.parent;
|
||||
const parentPosition = new spine.Vector2(x, y);
|
||||
parent.worldToLocal(parentPosition)
|
||||
parent.pose.worldToLocal(parentPosition)
|
||||
|
||||
// Set the position on the bone (relative to its parent bone)
|
||||
crosshair.x = parentPosition.x;
|
||||
crosshair.y = parentPosition.y;
|
||||
crosshair.pose.x = parentPosition.x;
|
||||
crosshair.pose.y = parentPosition.y;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
|
||||
// Set the skin and the skeleton to the setup pose
|
||||
drawable.skeleton.setSkin(skin);
|
||||
drawable.skeleton.setSlotsToSetupPose();
|
||||
drawable.skeleton.setupPose();
|
||||
|
||||
const renderer = new spine.SkeletonRenderer(ck);
|
||||
let lastTime = performance.now();
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
const controlBones = [];
|
||||
for (var i = 0; i < controlBoneNames.length; i++) {
|
||||
const bone = stretchyman.skeleton.findBone(controlBoneNames[i]);
|
||||
const point = { x: bone.worldX, y: bone.worldY };
|
||||
const point = { x: bone.pose.worldX, y: bone.pose.worldY };
|
||||
stretchyman.skeletonToPhaserWorldCoordinates(point);
|
||||
|
||||
const control = this.add
|
||||
@ -69,8 +69,8 @@
|
||||
const bone = controlBone.getData("bone");
|
||||
const point = { x: controlBone.x, y: controlBone.y };
|
||||
stretchyman.phaserWorldCoordinatesToBone(point, bone);
|
||||
bone.x = point.x;
|
||||
bone.y = point.y;
|
||||
bone.pose.x = point.x;
|
||||
bone.pose.y = point.y;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
class BasicExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary("sack-data", "/assets/sack-pro.skel");
|
||||
this.load.spineAtlas("sack-atlas", "/assets/sack.atlas");
|
||||
this.load.spineAtlas("sack-atlas", "/assets/7-anticipation.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
const controlBones = [];
|
||||
for (var i = 0; i < controlBoneNames.length; i++) {
|
||||
const bone = stretchyman.skeleton.findBone(controlBoneNames[i]);
|
||||
const point = { x: bone.worldX, y: bone.worldY };
|
||||
const point = { x: bone.pose.worldX, y: bone.pose.worldY };
|
||||
stretchyman.skeletonToPhaserWorldCoordinates(point);
|
||||
|
||||
const control = this.add
|
||||
@ -69,8 +69,8 @@
|
||||
const bone = controlBone.getData("bone");
|
||||
const point = { x: controlBone.x, y: controlBone.y };
|
||||
stretchyman.phaserWorldCoordinatesToBone(point, bone);
|
||||
bone.x = point.x;
|
||||
bone.y = point.y;
|
||||
bone.pose.x = point.x;
|
||||
bone.pose.y = point.y;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
class BasicExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary("sack-data", "/assets/sack-pro.skel");
|
||||
this.load.spineAtlas("sack-atlas", "/assets/sack.atlas");
|
||||
this.load.spineAtlas("sack-atlas", "/assets/7-anticipation.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
|
||||
for (var i = 0; i < controlBoneNames.length; i++) {
|
||||
const bone = stretchyman.skeleton.findBone(controlBoneNames[i]);
|
||||
const point = { x: bone.worldX, y: bone.worldY };
|
||||
const point = { x: bone.pose.worldX, y: bone.pose.worldY };
|
||||
stretchyman.skeletonToPixiWorldCoordinates(point);
|
||||
|
||||
const control = new PIXI.Graphics()
|
||||
@ -98,8 +98,8 @@
|
||||
point.x = control.x;
|
||||
point.y = control.y;
|
||||
stretchyman.pixiWorldCoordinatesToBone(point, bone);
|
||||
bone.x = point.x;
|
||||
bone.y = point.y;
|
||||
bone.pose.x = point.x;
|
||||
bone.pose.y = point.y;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
skin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
|
||||
skin.addSkin(skeletonData.findSkin("eyelids/girly"));
|
||||
mixAndMatch.skeleton.setSkin(skin);
|
||||
mixAndMatch.skeleton.setSlotsToSetupPose();
|
||||
mixAndMatch.skeleton.setupPose();
|
||||
|
||||
// Center the spine object on screen.
|
||||
mixAndMatch.x = window.innerWidth / 2;
|
||||
|
||||
@ -79,11 +79,11 @@
|
||||
// and transform it to the crosshair bone's parent root bone
|
||||
// coordinate system via `worldToLocal()`. `position` is relative
|
||||
// to the crosshair bone's parent bone after this
|
||||
crosshairBone.parent.worldToLocal(position);
|
||||
crosshairBone.parent.pose.worldToLocal(position);
|
||||
|
||||
// Set the crosshair bone's position to the mouse position
|
||||
crosshairBone.x = position.x;
|
||||
crosshairBone.y = position.y;
|
||||
crosshairBone.pose.x = position.x;
|
||||
crosshairBone.pose.y = position.y;
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
// 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");
|
||||
PIXI.Assets.add("sackAtlas", "/assets/7-anticipation-pma.atlas");
|
||||
await PIXI.Assets.load(["sackData", "sackAtlas"]);
|
||||
|
||||
// Create the spine display object
|
||||
|
||||
@ -61,15 +61,15 @@
|
||||
};
|
||||
|
||||
const gui = new lil.GUI({});
|
||||
gui.add(myObject, 'parentScaleX').min(-3).max(3).step(0.1).name('parentScaleX').onChange(value => parentBone.scaleX = value);
|
||||
gui.add(myObject, 'parentScaleY').min(-3).max(3).step(0.1).name('parentScaleY').onChange(value => parentBone.scaleY = value);
|
||||
gui.add(myObject, 'parentRotation').min(-180).max(180).step(1).name('parentRotation').onChange(value => parentBone.rotation = value);
|
||||
gui.add(myObject, 'parent2ScaleX').min(-3).max(3).step(0.1).name('parent2ScaleX').onChange(value => parent2Bone.scaleX = value);
|
||||
gui.add(myObject, 'parent2ScaleY').min(-3).max(3).step(0.1).name('parent2ScaleY').onChange(value => parent2Bone.scaleY = value);
|
||||
gui.add(myObject, 'parent2Rotation').min(-180).max(180).step(1).name('parent2Rotation').onChange(value => parent2Bone.rotation = value);
|
||||
gui.add(myObject, 'scaleX').min(-3).max(3).step(0.1).name('scaleX').onChange(value => bone.scaleX = value);
|
||||
gui.add(myObject, 'scaleY').min(-3).max(3).step(0.1).name('scaleY').onChange(value => bone.scaleY = value);
|
||||
gui.add(myObject, 'rotation').min(-180).max(180).step(1).name('rotation').onChange(value => bone.rotation = value);
|
||||
gui.add(myObject, 'parentScaleX').min(-3).max(3).step(0.1).name('parentScaleX').onChange(value => parentBone.pose.scaleX = value);
|
||||
gui.add(myObject, 'parentScaleY').min(-3).max(3).step(0.1).name('parentScaleY').onChange(value => parentBone.pose.scaleY = value);
|
||||
gui.add(myObject, 'parentRotation').min(-180).max(180).step(1).name('parentRotation').onChange(value => parentBone.pose.rotation = value);
|
||||
gui.add(myObject, 'parent2ScaleX').min(-3).max(3).step(0.1).name('parent2ScaleX').onChange(value => parent2Bone.pose.scaleX = value);
|
||||
gui.add(myObject, 'parent2ScaleY').min(-3).max(3).step(0.1).name('parent2ScaleY').onChange(value => parent2Bone.pose.scaleY = value);
|
||||
gui.add(myObject, 'parent2Rotation').min(-180).max(180).step(1).name('parent2Rotation').onChange(value => parent2Bone.pose.rotation = value);
|
||||
gui.add(myObject, 'scaleX').min(-3).max(3).step(0.1).name('scaleX').onChange(value => bone.pose.scaleX = value);
|
||||
gui.add(myObject, 'scaleY').min(-3).max(3).step(0.1).name('scaleY').onChange(value => bone.pose.scaleY = value);
|
||||
gui.add(myObject, 'rotation').min(-180).max(180).step(1).name('rotation').onChange(value => bone.pose.rotation = value);
|
||||
|
||||
// add instructions
|
||||
const basicText = new PIXI.Text(
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
tooth1.x = -10;
|
||||
tooth1.y = -70;
|
||||
spineboy.addSlotObject(frontFist, toothContainer);
|
||||
frontFist.setAttachment(null);
|
||||
frontFist.pose.setAttachment(null);
|
||||
}, 1000);
|
||||
|
||||
// scaling the bone, will scale the pixi object too
|
||||
@ -127,7 +127,7 @@
|
||||
// for clipping attachments having slot objects
|
||||
setTimeout(() => {
|
||||
spineboy.state.setAnimation(0, "portal", true)
|
||||
const tooth3 = PIXI.Sprite.from('assets/raptor-jaw-tooth.png');
|
||||
const tooth3 = PIXI.Sprite.from('/assets/raptor-jaw-tooth.png');
|
||||
tooth3.scale.set(2);
|
||||
tooth3.x = -60;
|
||||
tooth3.y = 120;
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
|
||||
for (var i = 0; i < controlBoneNames.length; i++) {
|
||||
const bone = stretchyman.skeleton.findBone(controlBoneNames[i]);
|
||||
const point = { x: bone.worldX, y: bone.worldY };
|
||||
const point = { x: bone.pose.worldX, y: bone.pose.worldY };
|
||||
stretchyman.skeletonToPixiWorldCoordinates(point);
|
||||
|
||||
const control = new PIXI.Graphics()
|
||||
@ -99,8 +99,8 @@
|
||||
point.x = control.x;
|
||||
point.y = control.y;
|
||||
stretchyman.pixiWorldCoordinatesToBone(point, bone);
|
||||
bone.x = point.x;
|
||||
bone.y = point.y;
|
||||
bone.pose.x = point.x;
|
||||
bone.pose.y = point.y;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
skin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
|
||||
skin.addSkin(skeletonData.findSkin("eyelids/girly"));
|
||||
mixAndMatch.skeleton.setSkin(skin);
|
||||
mixAndMatch.skeleton.setSlotsToSetupPose();
|
||||
mixAndMatch.skeleton.setupPose();
|
||||
|
||||
// Center the spine object on screen.
|
||||
mixAndMatch.x = window.innerWidth / 2;
|
||||
|
||||
@ -46,7 +46,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);
|
||||
app.stage.hitArea = new PIXI.Rectangle(0, 0, app.canvas.width, app.canvas.height);
|
||||
|
||||
// Make the stage interactive and register pointer events
|
||||
app.stage.eventMode = "dynamic";
|
||||
@ -79,11 +79,11 @@
|
||||
// and transform it to the crosshair bone's parent root bone
|
||||
// coordinate system via `worldToLocal()`. `position` is relative
|
||||
// to the crosshair bone's parent bone after this
|
||||
crosshairBone.parent.worldToLocal(position);
|
||||
crosshairBone.parent.pose.worldToLocal(position);
|
||||
|
||||
// Set the crosshair bone's position to the mouse position
|
||||
crosshairBone.x = position.x;
|
||||
crosshairBone.y = position.y;
|
||||
crosshairBone.pose.x = position.x;
|
||||
crosshairBone.pose.y = position.y;
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
|
||||
PIXI.Assets.add({alias: "sackData", src: "/assets/sack-pro.skel"});
|
||||
PIXI.Assets.add({alias: "sackAtlas", src: "/assets/sack-pma.atlas"});
|
||||
PIXI.Assets.add({alias: "sackAtlas", src: "/assets/7-anticipation-pma.atlas"});
|
||||
await PIXI.Assets.load(["sackData", "sackAtlas"]);
|
||||
|
||||
// Create the spine display object
|
||||
|
||||
@ -60,15 +60,15 @@
|
||||
};
|
||||
|
||||
const gui = new lil.GUI({});
|
||||
gui.add(myObject, 'parentScaleX').min(-3).max(3).step(0.1).name('parentScaleX').onChange(value => parentBone.scaleX = value);
|
||||
gui.add(myObject, 'parentScaleY').min(-3).max(3).step(0.1).name('parentScaleY').onChange(value => parentBone.scaleY = value);
|
||||
gui.add(myObject, 'parentRotation').min(-180).max(180).step(1).name('parentRotation').onChange(value => parentBone.rotation = value);
|
||||
gui.add(myObject, 'parent2ScaleX').min(-3).max(3).step(0.1).name('parent2ScaleX').onChange(value => parent2Bone.scaleX = value);
|
||||
gui.add(myObject, 'parent2ScaleY').min(-3).max(3).step(0.1).name('parent2ScaleY').onChange(value => parent2Bone.scaleY = value);
|
||||
gui.add(myObject, 'parent2Rotation').min(-180).max(180).step(1).name('parent2Rotation').onChange(value => parent2Bone.rotation = value);
|
||||
gui.add(myObject, 'scaleX').min(-3).max(3).step(0.1).name('scaleX').onChange(value => bone.scaleX = value);
|
||||
gui.add(myObject, 'scaleY').min(-3).max(3).step(0.1).name('scaleY').onChange(value => bone.scaleY = value);
|
||||
gui.add(myObject, 'rotation').min(-180).max(180).step(1).name('rotation').onChange(value => bone.rotation = value);
|
||||
gui.add(myObject, 'parentScaleX').min(-3).max(3).step(0.1).name('parentScaleX').onChange(value => parentBone.pose.scaleX = value);
|
||||
gui.add(myObject, 'parentScaleY').min(-3).max(3).step(0.1).name('parentScaleY').onChange(value => parentBone.pose.scaleY = value);
|
||||
gui.add(myObject, 'parentRotation').min(-180).max(180).step(1).name('parentRotation').onChange(value => parentBone.pose.rotation = value);
|
||||
gui.add(myObject, 'parent2ScaleX').min(-3).max(3).step(0.1).name('parent2ScaleX').onChange(value => parent2Bone.pose.scaleX = value);
|
||||
gui.add(myObject, 'parent2ScaleY').min(-3).max(3).step(0.1).name('parent2ScaleY').onChange(value => parent2Bone.pose.scaleY = value);
|
||||
gui.add(myObject, 'parent2Rotation').min(-180).max(180).step(1).name('parent2Rotation').onChange(value => parent2Bone.pose.rotation = value);
|
||||
gui.add(myObject, 'scaleX').min(-3).max(3).step(0.1).name('scaleX').onChange(value => bone.pose.scaleX = value);
|
||||
gui.add(myObject, 'scaleY').min(-3).max(3).step(0.1).name('scaleY').onChange(value => bone.pose.scaleY = value);
|
||||
gui.add(myObject, 'rotation').min(-180).max(180).step(1).name('rotation').onChange(value => bone.pose.rotation = value);
|
||||
|
||||
// add instructions
|
||||
const basicText = new PIXI.Text({
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
tooth1.x = -10;
|
||||
tooth1.y = -70;
|
||||
spineboy.addSlotObject(frontFist, toothContainer);
|
||||
frontFist.setAttachment(null);
|
||||
frontFist.pose.setAttachment(null);
|
||||
}, 1000);
|
||||
|
||||
// scaling the bone, will scale the pixi object too
|
||||
|
||||
@ -36,8 +36,8 @@
|
||||
player.canvas.clientWidth,
|
||||
player.canvas.clientHeight
|
||||
);
|
||||
player.skeleton.getRootBone().x += mouse.x - last.x;
|
||||
player.skeleton.getRootBone().y += mouse.y - last.y;
|
||||
player.skeleton.getRootBone().pose.x += mouse.x - last.x;
|
||||
player.skeleton.getRootBone().pose.y += mouse.y - last.y;
|
||||
last.setFrom(mouse);
|
||||
},
|
||||
up: () => (player.paused = false),
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
|
||||
const tempVector = new spine.Vector2();
|
||||
const crosshairSlot = spineboy.skeleton.findSlot("crosshair");
|
||||
crosshairSlot.color.a = 0;
|
||||
crosshairSlot.pose.color.a = 0;
|
||||
const crosshairBone = crosshairSlot.bone;
|
||||
|
||||
let points = 0;
|
||||
@ -154,7 +154,7 @@
|
||||
|
||||
if (!Number.isNaN(parseInt(slot.data.name.replace("flower", ""))) || slot.data.name === "flower") {
|
||||
|
||||
slot.color.set(1, 0, 0, 1);
|
||||
slot.pose.color.set(1, 0, 0, 1);
|
||||
|
||||
flowers.push(slot);
|
||||
|
||||
@ -163,7 +163,7 @@
|
||||
|
||||
if (event !== "down") return;
|
||||
|
||||
if (slot.color.g === 0) return;
|
||||
if (slot.pose.color.g === 0) return;
|
||||
|
||||
spineboy.state.setAnimation(1, "shoot", false);
|
||||
ammo--;
|
||||
@ -177,14 +177,14 @@
|
||||
ammoSpan.innerText = `Ammo: ${ammo}`;
|
||||
killedSpan.innerText = `Saved: ${killed}`;
|
||||
|
||||
tempVector.x = slot.bone.x;
|
||||
tempVector.y = slot.bone.y;
|
||||
slot.bone.parentToWorld(tempVector);
|
||||
tempVector.x = slot.bone.applied.x;
|
||||
tempVector.y = slot.bone.applied.y;
|
||||
slot.bone.applied.parentToWorld(tempVector);
|
||||
|
||||
crosshairBone.x = (tempVector.x + (windmill.worldX - spineboy.worldX) - spineboy.skeleton.x) / spineboy.skeleton.scaleX;
|
||||
crosshairBone.y = (tempVector.y + (windmill.worldY - spineboy.worldY) - spineboy.skeleton.y) / spineboy.skeleton.scaleY;
|
||||
crosshairBone.pose.x = (tempVector.x + (windmill.worldX - spineboy.worldX) - spineboy.skeleton.x) / spineboy.skeleton.scaleX;
|
||||
crosshairBone.pose.y = (tempVectora.y + (windmill.worldY - spineboy.worldY) - spineboy.skeleton.y) / spineboy.skeleton.scaleY;
|
||||
|
||||
slot.color.set(1, 0, 0, 1);
|
||||
slot.pose.color.set(1, 0, 0, 1);
|
||||
});
|
||||
|
||||
}
|
||||
@ -204,14 +204,14 @@
|
||||
const containerGameMiddle = x + width / 2;
|
||||
const left = gameVectorTemp.x < containerGameMiddle;
|
||||
const ammoLocation = ammoLocations[left ? 1 : 0];
|
||||
(ammoLocation.darkColor ||= new spine.Color()).set(1, 0, 0, 1);
|
||||
(ammoLocation.pose.darkColor ||= new spine.Color()).set(1, 0, 0, 1);
|
||||
levelSpan.innerText = `Level: ${level} / 10`;
|
||||
};
|
||||
|
||||
if (time >= maxTime) {
|
||||
time = 0;
|
||||
const flower = random(flowers);
|
||||
flower.color.set(1, 1, 1, 1);
|
||||
flower.pose.color.set(1, 1, 1, 1);
|
||||
}
|
||||
|
||||
if (checkLoseCondition()) {
|
||||
@ -229,7 +229,7 @@
|
||||
}, 100);
|
||||
|
||||
const checkWinCondition = () => level === 10;
|
||||
const checkLoseCondition = () => flowers.every((flowerSlot) => flowerSlot.color.g !== 0);
|
||||
const checkLoseCondition = () => flowers.every((flowerSlot) => flowerSlot.pose.color.g !== 0);
|
||||
const endGame = (win, interval) => {
|
||||
clearInterval(interval);
|
||||
winPanel.style.display = "flex";
|
||||
@ -296,15 +296,16 @@
|
||||
}
|
||||
|
||||
ammoLocations.forEach(element => {
|
||||
const width = element.attachment.region.width * windmill.skeleton.scaleX;
|
||||
const height = element.attachment.region.height * windmill.skeleton.scaleY;
|
||||
const x = windmill.worldX + element.bone.worldX - width / 2;
|
||||
const y = windmill.worldY + element.bone.worldY - height / 2;
|
||||
const attachment = element.pose.attachment;
|
||||
const width = attachment.region.width * windmill.skeleton.scaleX;
|
||||
const height = attachment.region.height * windmill.skeleton.scaleY;
|
||||
const x = windmill.worldX + element.bone.applied.worldX - width / 2;
|
||||
const y = windmill.worldY + element.bone.applied.worldY - height / 2;
|
||||
|
||||
if (isIntersecting(spineboyPosition, { x, y, width, height })) {
|
||||
if (element.darkColor) {
|
||||
if (element.pose.darkColor) {
|
||||
ammo = 5;
|
||||
element.darkColor = null;
|
||||
element.pose.darkColor = null;
|
||||
ammoLocationActive = false;
|
||||
ammoSpan.innerText = `Ammo: ${ammo}`;
|
||||
}
|
||||
|
||||
@ -998,7 +998,7 @@ async function updateCelesteAnimations() {
|
||||
<div class="split-right">
|
||||
<spine-skeleton
|
||||
identifier="sack-debug"
|
||||
atlas="/assets/sack-pma.atlas"
|
||||
atlas="/assets/7-anticipation-pma.atlas"
|
||||
skeleton="/assets/sack-pro.skel"
|
||||
animation="cape-follow-example"
|
||||
debug
|
||||
@ -1018,7 +1018,7 @@ async function updateCelesteAnimations() {
|
||||
<script>escapeHTMLandInject(`
|
||||
<spine-skeleton
|
||||
identifier="sack-debug"
|
||||
atlas="/assets/sack-pma.atlas"
|
||||
atlas="/assets/7-anticipation-pma.atlas"
|
||||
skeleton="/assets/sack-pro.skel"
|
||||
animation="cape-follow-example"
|
||||
debug
|
||||
@ -1059,7 +1059,7 @@ async function updateCelesteAnimations() {
|
||||
animation="animation"
|
||||
raw-data='{
|
||||
"inline.atlas":"aW5saW5lLnBuZwpzaXplOjE2LDE2CmZpbHRlcjpMaW5lYXIsTGluZWFyCnBtYTp0cnVlCmRvdApib3VuZHM6MCwwLDEsMQo=",
|
||||
"inline.skel":"/B8S/IqaXgYHNC4yLjM5wkgAAMJIAABCyAAAQsgAAELIAAAAAQRkb3QCBXJvb3QAAAAAAAAAAAAAAAA/gAAAP4AAAAAAAAAAAAAAAAAAAAAABGRvdAAAAAAAAAAAAAAAAABCyAAAQsgAAAAAAAAAAAAAAAAAAAAAAQRkb3QB//////////8BAAAAAAABAAEBACWwfdcAAAAAP4AAAD+AAAA/gAAAP4AAAAAAAQphbmltYXRpb24BAQABAQMAAAAAAP////8/gAAA/wAA/wBAAAAA/////wAAAAAAAAAAAA==",
|
||||
"inline.skel":"p5UM+OJCDPwHMC4wLjAwwkgAAMJIAABCyAAAQsgAAELIAAABQfAAAAouL2ltYWdlcy8ILi9hdWRpbwEEZG90AgVyb290AAAAAAAAAAAAAAAAP4AAAD+AAAAAAAAAAAAAAAAAAAAAAJubm/8AAARkb3QAAAAAAAAAAAAAAAAAQsgAAELIAAAAAAAAAAAAAAAAAAAAAJubm/8AAAEEZG90Af//////////AQABAAEAAQEAJbB91wAAAAA/gAAAP4AAAD+AAAA/gAAAAAABCmFuaW1hdGlvbgEBAAEBAwAAAAAA/////z+AAAD/AAD/AEAAAAD/////AAAAAAAAAAAAAA==",
|
||||
"inline.png":"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRF////p8QbyAAAAApJREFUeJxjZAAAAAQAAiFkrWoAAAAASUVORK5CYII="
|
||||
}'
|
||||
></spine-skeleton>
|
||||
@ -2862,7 +2862,7 @@ let limitOwl = true;
|
||||
checkbox.addEventListener('change', () => limitOwl = checkbox.checked);
|
||||
|
||||
const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
|
||||
controlBone.parent.worldToLocal(tempVector.set(
|
||||
controlBone.parent.pose.worldToLocal(tempVector.set(
|
||||
widget.pointerWorldX,
|
||||
widget.pointerWorldY,
|
||||
));
|
||||
@ -2875,8 +2875,8 @@ const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
|
||||
y = y / widget.overlay.canvas.height * 30;
|
||||
}
|
||||
|
||||
controlBone.x = controlBone.data.x + mouseX(x);
|
||||
controlBone.y = controlBone.data.y + mouseY(y);
|
||||
controlBone.pose.x = controlBone.data.setup.x + mouseX(x);
|
||||
controlBone.pose.y = controlBone.data.setup.y + mouseY(y);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2959,11 +2959,11 @@ const darkPicker = document.getElementById("dark-picker");
|
||||
|
||||
const tempColor = new spine.Color();
|
||||
const slot = widget.skeleton.findSlot("head-base");
|
||||
slot.darkColor = new spine.Color(0, 0, 0, 1);
|
||||
slot.pose.darkColor = new spine.Color(0, 0, 0, 1);
|
||||
widget.addPointerSlotEventCallback(slot, (slot, event) => {
|
||||
if (event === "down") {
|
||||
slot.darkColor.setFromColor(spine.Color.fromString(darkPicker.value, tempColor));
|
||||
slot.color.setFromColor(spine.Color.fromString(colorPicker.value, tempColor));
|
||||
slot.pose.darkColor.setFromColor(spine.Color.fromString(darkPicker.value, tempColor));
|
||||
slot.pose.color.setFromColor(spine.Color.fromString(colorPicker.value, tempColor));
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
// Find the first bone within a radius of 20 pixels to the mouse position
|
||||
this.selectedBone = null;
|
||||
for (let bone of this.draggableBones) {
|
||||
if (mousePosition.distance(new spine.Vector3(bone.worldX, bone.worldY, 0)) < 20) {
|
||||
if (mousePosition.distance(new spine.Vector3(bone.pose.worldX, bone.pose.worldY, 0)) < 20) {
|
||||
this.selectedBone = bone;
|
||||
break;
|
||||
}
|
||||
@ -84,14 +84,14 @@
|
||||
// If the bone to be dragged has a parent, transform the mouse world position to
|
||||
// the parent bone's coordinate system, and set the bone's position accordingly.
|
||||
let position = new spine.Vector2(mousePosition.x, mousePosition.y);
|
||||
this.selectedBone.parent.worldToLocal(position);
|
||||
this.selectedBone.x = position.x;
|
||||
this.selectedBone.y = position.y;
|
||||
this.selectedBone.parent.pose.worldToLocal(position);
|
||||
this.selectedBone.pose.x = position.x;
|
||||
this.selectedBone.pose.y = position.y;
|
||||
} else {
|
||||
// If the dragged bone has no parent, it's the root bone and we can simply set its
|
||||
// position to the mouse world position.
|
||||
this.selectedBone.x = mousePosition.x;
|
||||
this.selectedBone.y = mousePosition.y;
|
||||
this.selectedBone.pose.x = mousePosition.x;
|
||||
this.selectedBone.pose.y = mousePosition.y;
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -115,7 +115,7 @@
|
||||
let boneColor = new spine.Color(1, 0, 0, 0.5);
|
||||
let selectedBoneColor = new spine.Color(0, 1, 0, 0.5);
|
||||
for (let bone of this.draggableBones) {
|
||||
renderer.circle(true, bone.worldX, bone.worldY, 20, bone == this.selectedBone ? selectedBoneColor : boneColor);
|
||||
renderer.circle(true, bone.pose.worldX, bone.pose.worldY, 20, bone == this.selectedBone ? selectedBoneColor : boneColor);
|
||||
}
|
||||
|
||||
renderer.end();
|
||||
|
||||
@ -60,11 +60,11 @@
|
||||
offsetX: 0, offsetY: 0,
|
||||
originalWidth: texture.getImage().width, originalHeight: texture.getImage().height
|
||||
};
|
||||
let headSlot = this.skeleton.findSlot("head");
|
||||
let newHeadAttachment = headSlot.getAttachment().copy();
|
||||
let headSlotPose = this.skeleton.findSlot("head").pose;
|
||||
let newHeadAttachment = headSlotPose.getAttachment().copy();
|
||||
newHeadAttachment.region = textureRegion;
|
||||
newHeadAttachment.updateRegion();
|
||||
headSlot.setAttachment(newHeadAttachment);
|
||||
headSlotPose.setAttachment(newHeadAttachment);
|
||||
}
|
||||
|
||||
update(canvas, delta) {
|
||||
|
||||
@ -282,7 +282,7 @@
|
||||
let skeleton = skeletons[activeSkeleton][format].skeleton;
|
||||
let skinName = $("#skinList option:selected").text();
|
||||
skeleton.setSkinByName(skinName);
|
||||
skeleton.setSlotsToSetupPose();
|
||||
skeleton.setupPose();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -25,14 +25,14 @@
|
||||
// Load the skeleton file.
|
||||
canvas.assetManager.loadBinary("/assets/sack-pro.skel");
|
||||
// Load the atlas and its pages.
|
||||
canvas.assetManager.loadTextureAtlas("/assets/sack-pma.atlas");
|
||||
canvas.assetManager.loadTextureAtlas("/assets/7-anticipation-pma.atlas");
|
||||
}
|
||||
|
||||
initialize(canvas) {
|
||||
let assetManager = canvas.assetManager;
|
||||
|
||||
// Create the texture atlas.
|
||||
var atlas = assetManager.require("/assets/sack-pma.atlas");
|
||||
var atlas = assetManager.require("/assets/7-anticipation-pma.atlas");
|
||||
|
||||
// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user