|
|
@@ -0,0 +1,147 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
|
|
|
+ <script src="../dist/iife/spine-phaser-v3.js"></script>
|
|
|
+ <link rel="stylesheet" href="../../index.css" />
|
|
|
+ <title>Spine Phaser Example</title>
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body class="p-4 flex flex-col items-center">
|
|
|
+ <h1>Move origin</h1>
|
|
|
+ <h2>Demonstrate moving origin of Spine Gameobject, behaves like a sprite</h2>
|
|
|
+ </body>
|
|
|
+ <script>
|
|
|
+ let cursors;
|
|
|
+ let spineboy;
|
|
|
+ const levelWidth = 800;
|
|
|
+ const levelHeight = 600;
|
|
|
+
|
|
|
+ class BasicExample extends Phaser.Scene {
|
|
|
+ preload() {
|
|
|
+ this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
|
|
+ this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
|
|
+ this.load.image("block", "block.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ create() {
|
|
|
+ const graphics = this.add.graphics();
|
|
|
+ const width = levelWidth / 5;
|
|
|
+ const height = levelHeight / 4;
|
|
|
+ let cells = [];
|
|
|
+ for (let i = 0; i < levelWidth / width; i++) {
|
|
|
+ for (let j = 0; j < levelHeight / height; j++) {
|
|
|
+ const x = i * width;
|
|
|
+ const y = j * height;
|
|
|
+ cells.push({ x, y });
|
|
|
+ graphics.lineStyle(1, 0x00ff00, .5);
|
|
|
+ graphics.strokeRect(x, y, width, height);
|
|
|
+
|
|
|
+ graphics.beginPath();
|
|
|
+ graphics.moveTo(x, y);
|
|
|
+ graphics.lineTo(x + width, y + height);
|
|
|
+ graphics.moveTo(x + width, y);
|
|
|
+ graphics.lineTo(x, y + height);
|
|
|
+ graphics.closePath();
|
|
|
+
|
|
|
+ graphics.strokePath();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ let animations = undefined;
|
|
|
+ let prevWidth = 0;
|
|
|
+ let prevHeight = 0;
|
|
|
+ cells.forEach(({ x, y }, i) => {
|
|
|
+ let gameobject;
|
|
|
+ let animation;
|
|
|
+ if (i % 2 === 1) {
|
|
|
+ gameobject = this.add.image(x, y, "block");
|
|
|
+ gameobject.displayWidth = prevWidth;
|
|
|
+ gameobject.displayHeight = prevHeight;
|
|
|
+ } else {
|
|
|
+ animation = animations ? animations[i % animations.length].name : "aim";
|
|
|
+ gameobject = this.add.spine(x, y, "spineboy-data", "spineboy-atlas", new spine.SkinsAndAnimationBoundsProvider(animation, undefined, undefined, true));
|
|
|
+ if (!animations) animations = gameobject.skeleton.data.animations;
|
|
|
+ gameobject.animationState.setAnimation(0, animation, true);
|
|
|
+
|
|
|
+ let ratio = gameobject.width / gameobject.height;
|
|
|
+ if (ratio > 1) {
|
|
|
+ gameobject.displayHeight = height / ratio;
|
|
|
+ gameobject.displayWidth = width;
|
|
|
+ } else {
|
|
|
+ gameobject.displayWidth = ratio * height;
|
|
|
+ gameobject.displayHeight = height;
|
|
|
+ }
|
|
|
+ prevWidth = gameobject.displayWidth;
|
|
|
+ prevHeight = gameobject.displayHeight;
|
|
|
+ }
|
|
|
+
|
|
|
+ // moving origin at the center of the cell, we're still able to align spineboy and keep gameobject bounds align with the drawn skeleton
|
|
|
+ const origin = 1 / (cells.length / 2 - 1) * Math.floor(i / 2)
|
|
|
+
|
|
|
+ gameobject.setOrigin(origin)
|
|
|
+ gameobject.x += width / 2 - gameobject.displayWidth * (0.5 - origin);
|
|
|
+ gameobject.y += height / 2 - gameobject.displayHeight * (0.5 - origin);
|
|
|
+
|
|
|
+ const graphics = this.add.graphics();
|
|
|
+ const rect = new Phaser.Geom.Rectangle(
|
|
|
+ gameobject.x - gameobject.displayOriginX * gameobject.scaleX,
|
|
|
+ gameobject.y - gameobject.displayOriginY * gameobject.scaleY,
|
|
|
+ gameobject.width * gameobject.scaleX,
|
|
|
+ gameobject.height * gameobject.scaleY,
|
|
|
+ );
|
|
|
+
|
|
|
+ const defaultGraphicsElements = () => {
|
|
|
+ graphics.clear();
|
|
|
+ graphics.lineStyle(7, 0x0000ff, .75);
|
|
|
+ graphics.strokeRectShape(rect);
|
|
|
+ graphics.fillStyle(0xffff00, 10);
|
|
|
+ graphics.fillCircle(gameobject.x, gameobject.y, 10);
|
|
|
+
|
|
|
+ graphics.fillStyle(0xff5500, 1);
|
|
|
+ graphics.fillCircle(gameobject.x - gameobject.displayOriginX * gameobject.scaleX, gameobject.y - gameobject.displayOriginY * gameobject.scaleY, 5);
|
|
|
+
|
|
|
+ graphics.lineStyle(3, 0xffffff, 1);
|
|
|
+ graphics.lineBetween(gameobject.x, gameobject.y, gameobject.x + gameobject.displayOriginX * gameobject.scaleX, gameobject.y + gameobject.displayOriginY * gameobject.scaleY);
|
|
|
+ }
|
|
|
+ defaultGraphicsElements();
|
|
|
+
|
|
|
+ // interactions bounds are aligned with gameobject bounds
|
|
|
+ gameobject.setInteractive();
|
|
|
+ this.input.enableDebug(gameobject, 0xff00ff);
|
|
|
+ gameobject.on("pointerover", () => {
|
|
|
+ defaultGraphicsElements();
|
|
|
+ graphics.fillStyle(0x00ff00, .25);
|
|
|
+ graphics.fillRectShape(rect);
|
|
|
+ graphics.fillStyle(0xff5500, 1);
|
|
|
+ });
|
|
|
+ gameobject.on("pointerout", () => defaultGraphicsElements());
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ new Phaser.Game({
|
|
|
+ type: Phaser.AUTO,
|
|
|
+ width: levelWidth,
|
|
|
+ height: levelHeight,
|
|
|
+ type: Phaser.WEBGL,
|
|
|
+ scene: [BasicExample],
|
|
|
+ plugins: {
|
|
|
+ scene: [
|
|
|
+ {
|
|
|
+ key: "spine.SpinePlugin",
|
|
|
+ plugin: spine.SpinePlugin,
|
|
|
+ mapping: "spine",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</html>
|
Davide Tantillo
