mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 14:24:53 +08:00
Move webcomponent to spine-widget folder.
This commit is contained in:
Davide Tantillo
parent
c0a2d292ea
commit
0af3e094fe
1
.gitignore
vendored
1
.gitignore
vendored
@ -144,6 +144,7 @@ spine-ts/spine-core/dist
|
||||
spine-ts/spine-canvas/dist
|
||||
spine-ts/spine-webgl/dist
|
||||
spine-ts/spine-player/dist
|
||||
spine-ts/spine-widget/dist
|
||||
spine-ts/spine-threejs/dist
|
||||
spine-ts/spine-phaser-v3/dist
|
||||
spine-ts/spine-phaser-v4/dist
|
||||
|
||||
@ -193,7 +193,13 @@
|
||||
<a href="/spine-threejs/example/shadows.html">Shadows</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>Widget (Webcomponent)</li>
|
||||
<ul>
|
||||
<li><a href="/spine-widget/example/tutorial.html">Example</a></li>
|
||||
<li><a href="/spine-widget/example/gui.html">GUI</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
],
|
||||
"scripts": {
|
||||
"prepublish": "npm run clean && npm run build",
|
||||
"clean": "npx rimraf spine-core/dist spine-canvas/dist spine-canvaskit/dist spine-webgl/dist spine-phaser-v3/dist spine-phaser-v4/dist spine-player/dist spine-threejs/dist spine-pixi-v7/dist spine-pixi-v8/dist",
|
||||
"build": "npm run clean && npm run build:modules && concurrently 'npm run build:core:iife' 'npm run build:core:esm' 'npm run build:canvas:iife' 'npm run build:canvas:esm' 'npm run build:canvaskit:iife' 'npm run build:canvaskit:esm' 'npm run build:webgl:iife' 'npm run build:webgl:esm' 'npm run build:phaser-v3:iife' 'npm run build:phaser-v4:iife' 'npm run build:phaser-v3:esm' 'npm run build:phaser-v4:esm' 'npm run build:player:iife' 'npm run build:player:esm' 'npm run build:player:css' 'npm run build:threejs:iife' 'npm run build:threejs:esm' 'npm run build:pixi-v7:iife' 'npm run build:pixi-v7:esm' 'npm run build:pixi-v8:iife' 'npm run build:pixi-v8:esm'",
|
||||
"clean": "npx rimraf spine-core/dist spine-canvas/dist spine-canvaskit/dist spine-webgl/dist spine-phaser-v3/dist spine-phaser-v4/dist spine-player/dist spine-threejs/dist spine-pixi-v7/dist spine-pixi-v8/dist spine-widget/dist",
|
||||
"build": "npm run clean && npm run build:modules && concurrently 'npm run build:core:iife' 'npm run build:core:esm' 'npm run build:canvas:iife' 'npm run build:canvas:esm' 'npm run build:canvaskit:iife' 'npm run build:canvaskit:esm' 'npm run build:webgl:iife' 'npm run build:webgl:esm' 'npm run build:phaser-v3:iife' 'npm run build:phaser-v4:iife' 'npm run build:phaser-v3:esm' 'npm run build:phaser-v4:esm' 'npm run build:player:iife' 'npm run build:player:esm' 'npm run build:player:css' 'npm run build:threejs:iife' 'npm run build:threejs:esm' 'npm run build:pixi-v7:iife' 'npm run build:pixi-v7:esm' 'npm run build:pixi-v8:iife' 'npm run build:pixi-v8:esm' 'npm run build:widget:iife' 'npm run build:widget:esm'",
|
||||
"postbuild": "npm run minify",
|
||||
"build:modules": "npx tsc -b -clean && npx tsc -b",
|
||||
"build:core:iife": "npx esbuild --bundle spine-core/src/index.ts --tsconfig=spine-core/tsconfig.json --sourcemap --outfile=spine-core/dist/iife/spine-core.js --format=iife --global-name=spine",
|
||||
@ -33,8 +33,10 @@
|
||||
"build:pixi-v7:esm": "npx esbuild --bundle spine-pixi-v7/src/index.ts --tsconfig=spine-pixi-v7/tsconfig.json --sourcemap --outfile=spine-pixi-v7/dist/esm/spine-pixi-v7.mjs --external:@pixi/* --format=esm --global-name=spine",
|
||||
"build:pixi-v8:iife": "npx esbuild --bundle spine-pixi-v8/src/index.ts --tsconfig=spine-pixi-v8/tsconfig.json --sourcemap --outfile=spine-pixi-v8/dist/iife/spine-pixi-v8.js --external:pixi.js --format=iife --global-name=spine",
|
||||
"build:pixi-v8:esm": "npx esbuild --bundle spine-pixi-v8/src/index.ts --tsconfig=spine-pixi-v8/tsconfig.json --sourcemap --outfile=spine-pixi-v8/dist/esm/spine-pixi-v8.mjs --external:pixi.js --format=esm --global-name=spine",
|
||||
"minify": "npx esbuild --minify spine-core/dist/iife/spine-core.js --outfile=spine-core/dist/iife/spine-core.min.js && npx esbuild --minify spine-core/dist/esm/spine-core.mjs --outfile=spine-core/dist/esm/spine-core.min.mjs && npx esbuild --minify spine-canvas/dist/iife/spine-canvas.js --outfile=spine-canvas/dist/iife/spine-canvas.min.js && npx esbuild --minify spine-canvas/dist/esm/spine-canvas.mjs --outfile=spine-canvas/dist/esm/spine-canvas.min.mjs && npx esbuild --minify spine-canvaskit/dist/iife/spine-canvaskit.js --outfile=spine-canvaskit/dist/iife/spine-canvaskit.min.js && npx esbuild --minify spine-canvaskit/dist/esm/spine-canvaskit.mjs --outfile=spine-canvaskit/dist/esm/spine-canvaskit.min.mjs && npx esbuild --minify spine-player/dist/iife/spine-player.js --outfile=spine-player/dist/iife/spine-player.min.js && npx esbuild --minify spine-player/dist/esm/spine-player.mjs --outfile=spine-player/dist/esm/spine-player.min.mjs && npx esbuild --minify spine-phaser-v3/dist/iife/spine-phaser-v3.js --outfile=spine-phaser-v3/dist/iife/spine-phaser-v3.min.js && npx esbuild --minify spine-phaser-v3/dist/esm/spine-phaser-v3.mjs --outfile=spine-phaser-v3/dist/esm/spine-phaser-v3.min.mjs && npx esbuild --minify spine-phaser-v4/dist/iife/spine-phaser-v4.js --outfile=spine-phaser-v4/dist/iife/spine-phaser-v4.min.js && npx esbuild --minify spine-phaser-v4/dist/esm/spine-phaser-v4.mjs --outfile=spine-phaser-v4/dist/esm/spine-phaser-v4.min.mjs && npx esbuild --minify spine-webgl/dist/iife/spine-webgl.js --outfile=spine-webgl/dist/iife/spine-webgl.min.js && npx esbuild --minify spine-webgl/dist/esm/spine-webgl.mjs --outfile=spine-webgl/dist/esm/spine-webgl.min.mjs && npx esbuild --minify spine-threejs/dist/iife/spine-threejs.js --outfile=spine-threejs/dist/iife/spine-threejs.min.js && npx esbuild --minify spine-threejs/dist/esm/spine-threejs.mjs --outfile=spine-threejs/dist/esm/spine-threejs.min.mjs && npx esbuild --minify spine-pixi-v7/dist/iife/spine-pixi-v7.js --outfile=spine-pixi-v7/dist/iife/spine-pixi-v7.min.js && npx esbuild --minify spine-pixi-v7/dist/esm/spine-pixi-v7.mjs --outfile=spine-pixi-v7/dist/esm/spine-pixi-v7.min.mjs && npx esbuild --minify spine-pixi-v8/dist/iife/spine-pixi-v8.js --outfile=spine-pixi-v8/dist/iife/spine-pixi-v8.min.js && npx esbuild --minify spine-pixi-v8/dist/esm/spine-pixi-v8.mjs --outfile=spine-pixi-v8/dist/esm/spine-pixi-v8.min.mjs",
|
||||
"dev": "concurrently 'npx live-server' 'npm run dev:canvas' 'npm run dev:canvaskit' 'npm run dev:webgl' 'npm run dev:phaser-v3' 'npm run dev:phaser-v4' 'npm run dev:player' 'npm run dev:threejs' 'npm run dev:pixi-v7' 'npm run dev:pixi-v8' 'npm run dev:modules'",
|
||||
"build:widget:iife": "npx esbuild --bundle spine-widget/src/index.ts --tsconfig=spine-widget/tsconfig.json --sourcemap --outfile=spine-widget/dist/iife/spine-widget.js --format=iife --global-name=spine",
|
||||
"build:widget:esm": "npx esbuild --bundle spine-widget/src/index.ts --tsconfig=spine-widget/tsconfig.json --sourcemap --outfile=spine-widget/dist/esm/spine-widget.mjs --format=esm --global-name=spine",
|
||||
"minify": "npx esbuild --minify spine-core/dist/iife/spine-core.js --outfile=spine-core/dist/iife/spine-core.min.js && npx esbuild --minify spine-core/dist/esm/spine-core.mjs --outfile=spine-core/dist/esm/spine-core.min.mjs && npx esbuild --minify spine-canvas/dist/iife/spine-canvas.js --outfile=spine-canvas/dist/iife/spine-canvas.min.js && npx esbuild --minify spine-canvas/dist/esm/spine-canvas.mjs --outfile=spine-canvas/dist/esm/spine-canvas.min.mjs && npx esbuild --minify spine-canvaskit/dist/iife/spine-canvaskit.js --outfile=spine-canvaskit/dist/iife/spine-canvaskit.min.js && npx esbuild --minify spine-canvaskit/dist/esm/spine-canvaskit.mjs --outfile=spine-canvaskit/dist/esm/spine-canvaskit.min.mjs && npx esbuild --minify spine-player/dist/iife/spine-player.js --outfile=spine-player/dist/iife/spine-player.min.js && npx esbuild --minify spine-player/dist/esm/spine-player.mjs --outfile=spine-player/dist/esm/spine-player.min.mjs && npx esbuild --minify spine-phaser-v3/dist/iife/spine-phaser-v3.js --outfile=spine-phaser-v3/dist/iife/spine-phaser-v3.min.js && npx esbuild --minify spine-phaser-v3/dist/esm/spine-phaser-v3.mjs --outfile=spine-phaser-v3/dist/esm/spine-phaser-v3.min.mjs && npx esbuild --minify spine-phaser-v4/dist/iife/spine-phaser-v4.js --outfile=spine-phaser-v4/dist/iife/spine-phaser-v4.min.js && npx esbuild --minify spine-phaser-v4/dist/esm/spine-phaser-v4.mjs --outfile=spine-phaser-v4/dist/esm/spine-phaser-v4.min.mjs && npx esbuild --minify spine-webgl/dist/iife/spine-webgl.js --outfile=spine-webgl/dist/iife/spine-webgl.min.js && npx esbuild --minify spine-webgl/dist/esm/spine-webgl.mjs --outfile=spine-webgl/dist/esm/spine-webgl.min.mjs && npx esbuild --minify spine-threejs/dist/iife/spine-threejs.js --outfile=spine-threejs/dist/iife/spine-threejs.min.js && npx esbuild --minify spine-threejs/dist/esm/spine-threejs.mjs --outfile=spine-threejs/dist/esm/spine-threejs.min.mjs && npx esbuild --minify spine-pixi-v7/dist/iife/spine-pixi-v7.js --outfile=spine-pixi-v7/dist/iife/spine-pixi-v7.min.js && npx esbuild --minify spine-pixi-v7/dist/esm/spine-pixi-v7.mjs --outfile=spine-pixi-v7/dist/esm/spine-pixi-v7.min.mjs && npx esbuild --minify spine-pixi-v8/dist/iife/spine-pixi-v8.js --outfile=spine-pixi-v8/dist/iife/spine-pixi-v8.min.js && npx esbuild --minify spine-pixi-v8/dist/esm/spine-pixi-v8.mjs --outfile=spine-pixi-v8/dist/esm/spine-pixi-v8.min.mjs && npx esbuild --minify spine-widget/dist/iife/spine-widget.js --outfile=spine-widget/dist/iife/spine-widget.min.js && npx esbuild --minify spine-widget/dist/esm/spine-widget.mjs --outfile=spine-widget/dist/esm/spine-widget.min.mjs",
|
||||
"dev": "concurrently 'npx live-server' 'npm run dev:canvas' 'npm run dev:canvaskit' 'npm run dev:webgl' 'npm run dev:phaser-v3' 'npm run dev:phaser-v4' 'npm run dev:player' 'npm run dev:threejs' 'npm run dev:pixi-v7' 'npm run dev:pixi-v8' 'npm run dev:widget' 'npm run dev:modules'",
|
||||
"dev:modules": "npm run build:modules -- --watch",
|
||||
"dev:canvas": "concurrently 'npm run build:canvas:iife -- --watch' 'npm run build:canvas:esm -- --watch'",
|
||||
"dev:canvaskit": "concurrently 'npm run build:canvaskit:iife -- --watch' 'npm run build:canvaskit:esm -- --watch'",
|
||||
@ -44,7 +46,8 @@
|
||||
"dev:player": "concurrently 'npm run build:player:iife -- --watch' 'npm run build:player:esm -- --watch' 'npm run build:player:css -- --watch'",
|
||||
"dev:threejs": "concurrently 'npm run build:threejs:iife -- --watch' 'npm run build:threejs:esm -- --watch'",
|
||||
"dev:pixi-v7": "concurrently 'npm run build:pixi-v7:iife -- --watch' 'npm run build:pixi-v7:esm -- --watch'",
|
||||
"dev:pixi-v8": "concurrently 'npm run build:pixi-v8:iife -- --watch' 'npm run build:pixi-v8:esm -- --watch'"
|
||||
"dev:pixi-v8": "concurrently 'npm run build:pixi-v8:iife -- --watch' 'npm run build:pixi-v8:esm -- --watch'",
|
||||
"dev:widget": "concurrently 'npm run build:widget:iife -- --watch' 'npm run build:widget:esm -- --watch'"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -75,7 +78,8 @@
|
||||
"spine-pixi-v7",
|
||||
"spine-pixi-v8",
|
||||
"spine-canvaskit",
|
||||
"spine-webgl"
|
||||
"spine-webgl",
|
||||
"spine-widget"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@types/offscreencanvas": "^2019.6.4",
|
||||
|
||||
@ -13,7 +13,6 @@ export * from "./ShapeRenderer.js";
|
||||
export * from "./SkeletonDebugRenderer.js";
|
||||
export * from "./SkeletonRenderer.js";
|
||||
export * from "./SpineCanvas.js";
|
||||
export * from "./SpineWebComponentWidget.js";
|
||||
export * from "./Vector3.js";
|
||||
export * from "./WebGL.js";
|
||||
export * from "@esotericsoftware/spine-core";
|
||||
26
spine-ts/spine-widget/LICENSE
Normal file
26
spine-ts/spine-widget/LICENSE
Normal file
@ -0,0 +1,26 @@
|
||||
Spine Runtimes License Agreement
|
||||
Last updated May 1, 2019. Replaces all prior versions.
|
||||
|
||||
Copyright (c) 2013-2019, Esoteric Software LLC
|
||||
|
||||
Integration of the Spine Runtimes into software or otherwise creating
|
||||
derivative works of the Spine Runtimes is permitted under the terms and
|
||||
conditions of Section 2 of the Spine Editor License Agreement:
|
||||
http://esotericsoftware.com/spine-editor-license
|
||||
|
||||
Otherwise, it is permitted to integrate the Spine Runtimes into software
|
||||
or otherwise create derivative works of the Spine Runtimes (collectively,
|
||||
"Products"), provided that each user of the Products must obtain their own
|
||||
Spine Editor license and redistribution of the Products in any form must
|
||||
include this license and copyright notice.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY EXPRESS
|
||||
OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
|
||||
OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
|
||||
NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY DIRECT, INDIRECT,
|
||||
INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
|
||||
BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS
|
||||
INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY
|
||||
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
|
||||
EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
3
spine-ts/spine-widget/README.md
Normal file
3
spine-ts/spine-widget/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# spine-ts Widget
|
||||
|
||||
Please see the [Spine Widget documentation](https://esotericsoftware.com/spine-widget) for more information.
|
||||
21
spine-ts/spine-widget/demos/additiveblending.html
Normal file
21
spine-ts/spine-widget/demos/additiveblending.html
Normal file
@ -0,0 +1,21 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>IK Constraints - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="additiveblending.js"></script>
|
||||
|
||||
<body style="margin: 0; padding: 0;">
|
||||
|
||||
<div style="margin: 0 auto;" class="aspect standalone"></div>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(additiveBlendingDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
151
spine-ts/spine-widget/demos/additiveblending.js
Normal file
151
spine-ts/spine-widget/demos/additiveblending.js
Normal file
@ -0,0 +1,151 @@
|
||||
var additiveBlendingDemo = function (canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
|
||||
var HANDLE_SIZE = 0.10;
|
||||
|
||||
var gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper;
|
||||
var target = null;
|
||||
var dragging = false;
|
||||
var handle = new spine.Vector2();
|
||||
var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
|
||||
var isPlaying = true;
|
||||
|
||||
var left, right, up, down;
|
||||
var cursor;
|
||||
|
||||
var clientMouseX = 0, clientMouseY = 0, mouseMoved;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function isMobileDevice() {
|
||||
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
|
||||
};
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas2.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
|
||||
cursor = document.getElementById("cursor");
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").owl);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
|
||||
state.setAnimation(0, "idle", true);
|
||||
state.setAnimation(1, "blink", true);
|
||||
left = state.setAnimation(2, "left", true);
|
||||
right = state.setAnimation(3, "right", true);
|
||||
up = state.setAnimation(4, "up", true);
|
||||
down = state.setAnimation(5, "down", true);
|
||||
left.mixBlend = spine.MixBlend.add;
|
||||
right.mixBlend = spine.MixBlend.add;
|
||||
up.mixBlend = spine.MixBlend.add;
|
||||
down.mixBlend = spine.MixBlend.add;
|
||||
left.alpha = 0;
|
||||
right.alpha = 0;
|
||||
up.alpha = 0;
|
||||
down.alpha = 0;
|
||||
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function calculateBlend(x, y, isPageCoords) {
|
||||
var canvasBounds = canvas.getBoundingClientRect();
|
||||
var centerX = canvasBounds.x + canvasBounds.width / 2;
|
||||
var centerY = canvasBounds.y + canvasBounds.height / 2;
|
||||
right.alpha = x < centerX ? 1 - x / centerX : 0;
|
||||
left.alpha = x > centerX ? (x - centerX) / (window.innerWidth - centerX) : 0;
|
||||
up.alpha = y < centerY ? 1 - y / centerY : 0;
|
||||
down.alpha = y > centerY ? (y - centerY) / (window.innerHeight - centerY) : 0;
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
if (!isMobileDevice()) {
|
||||
document.addEventListener("mousemove", function (event) {
|
||||
clientMouseX = event.clientX;
|
||||
clientMouseY = event.clientY;
|
||||
mouseMoved = true;
|
||||
}, false);
|
||||
} else {
|
||||
var input = new spine.Input(canvas);
|
||||
input.addListener({
|
||||
down: function (x, y) {
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
|
||||
if (temp.set(handle.x, handle.y, 0).distance(coords) < canvas.width * HANDLE_SIZE) {
|
||||
dragging = true;
|
||||
}
|
||||
},
|
||||
up: function (x, y) {
|
||||
dragging = false;
|
||||
},
|
||||
dragged: function (x, y) {
|
||||
if (dragging && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
|
||||
handle.x = coords.x;
|
||||
handle.y = coords.y;
|
||||
calculateBlend(x, y, false);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
if (!isMobileDevice() && mouseMoved) calculateBlend(clientMouseX, clientMouseY, true);
|
||||
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.4;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.4;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
|
||||
if (isMobileDevice()) {
|
||||
gl.lineWidth(2);
|
||||
renderer.circle(true, handle.x, handle.y, canvas.width * HANDLE_SIZE, COLOR_INNER);
|
||||
renderer.circle(false, handle.x, handle.y, canvas.width * HANDLE_SIZE, COLOR_OUTER);
|
||||
gl.lineWidth(1);
|
||||
}
|
||||
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
additiveBlendingDemo.assetManager = assetManager;
|
||||
additiveBlendingDemo.loadingComplete = loadingComplete;
|
||||
additiveBlendingDemo.render = render;
|
||||
};
|
||||
364
spine-ts/spine-widget/demos/assets/atlas1.atlas
Normal file
364
spine-ts/spine-widget/demos/assets/atlas1.atlas
Normal file
@ -0,0 +1,364 @@
|
||||
atlas1.png
|
||||
size:1024,1024
|
||||
filter:Linear,Linear
|
||||
pma:true
|
||||
alien/back-foot
|
||||
bounds:311,723,5,3
|
||||
alien/back-shin
|
||||
bounds:863,792,13,15
|
||||
rotate:90
|
||||
alien/back-thigh
|
||||
bounds:863,807,15,15
|
||||
alien/backarmor
|
||||
bounds:87,239,50,56
|
||||
alien/blown-up-neck
|
||||
bounds:438,365,47,32
|
||||
alien/body
|
||||
bounds:786,559,61,73
|
||||
rotate:90
|
||||
alien/burst01
|
||||
bounds:763,335,89,96
|
||||
rotate:90
|
||||
alien/burst02
|
||||
bounds:649,343,96,112
|
||||
rotate:90
|
||||
alien/burst03-bg
|
||||
bounds:881,759,171,140
|
||||
rotate:90
|
||||
alien/burst03-fg
|
||||
bounds:651,677,210,185
|
||||
alien/eye
|
||||
bounds:541,349,47,47
|
||||
alien/eye-highlight
|
||||
bounds:512,604,13,13
|
||||
alien/eye-pupil
|
||||
bounds:976,490,11,11
|
||||
alien/eye-stalk
|
||||
bounds:490,373,49,41
|
||||
alien/front-foot
|
||||
bounds:311,728,6,4
|
||||
alien/front-lower-arm
|
||||
bounds:609,807,34,39
|
||||
rotate:90
|
||||
alien/front-shin
|
||||
bounds:863,824,15,17
|
||||
alien/front-thigh
|
||||
bounds:275,299,17,17
|
||||
alien/front-upper-arm
|
||||
bounds:205,317,35,17
|
||||
rotate:90
|
||||
alien/head
|
||||
bounds:764,426,92,84
|
||||
alien/lower-back-arm
|
||||
bounds:323,336,31,28
|
||||
alien/metaljaw
|
||||
bounds:786,622,75,53
|
||||
alien/splat01
|
||||
bounds:863,601,159,156
|
||||
alien/splat01-fg
|
||||
bounds:861,517,126,82
|
||||
alien/splat02
|
||||
bounds:651,864,228,158
|
||||
alien/splat03
|
||||
bounds:383,833,224,105
|
||||
alien/upper-back-arm
|
||||
bounds:764,512,19,27
|
||||
dragon/L_front_leg
|
||||
bounds:142,612,21,14
|
||||
dragon/L_front_thigh
|
||||
bounds:142,628,21,18
|
||||
dragon/L_rear_leg
|
||||
bounds:970,320,52,44
|
||||
dragon/L_rear_thigh
|
||||
bounds:533,324,23,37
|
||||
rotate:90
|
||||
dragon/L_wing01
|
||||
bounds:233,393,48,64
|
||||
rotate:90
|
||||
dragon/L_wing02
|
||||
bounds:311,535,45,67
|
||||
rotate:90
|
||||
dragon/L_wing03
|
||||
bounds:257,488,47,52
|
||||
rotate:90
|
||||
dragon/L_wing04
|
||||
bounds:363,372,47,34
|
||||
dragon/L_wing05
|
||||
bounds:87,341,55,53
|
||||
rotate:90
|
||||
dragon/L_wing06
|
||||
bounds:2,349,48,83
|
||||
rotate:90
|
||||
dragon/L_wing07
|
||||
bounds:609,874,40,64
|
||||
dragon/L_wing08
|
||||
bounds:363,329,41,45
|
||||
rotate:90
|
||||
dragon/L_wing09
|
||||
bounds:87,297,51,42
|
||||
dragon/R_front_leg
|
||||
bounds:139,260,25,22
|
||||
dragon/R_front_thigh
|
||||
bounds:380,300,27,27
|
||||
dragon/R_rear_leg
|
||||
bounds:319,309,29,25
|
||||
dragon/R_rear_thigh
|
||||
bounds:483,305,23,37
|
||||
rotate:90
|
||||
dragon/R_wing01
|
||||
bounds:529,709,55,78
|
||||
rotate:90
|
||||
dragon/R_wing02
|
||||
bounds:529,604,51,76
|
||||
rotate:90
|
||||
dragon/R_wing03
|
||||
bounds:311,621,68,62
|
||||
dragon/R_wing04
|
||||
bounds:311,685,70,36
|
||||
dragon/R_wing05
|
||||
bounds:373,408,63,57
|
||||
dragon/R_wing06
|
||||
bounds:2,458,50,92
|
||||
rotate:90
|
||||
dragon/R_wing07
|
||||
bounds:311,483,50,66
|
||||
rotate:90
|
||||
dragon/R_wing08
|
||||
bounds:321,723,59,64
|
||||
dragon/R_wing09
|
||||
bounds:299,366,62,51
|
||||
dragon/back
|
||||
bounds:94,398,48,46
|
||||
rotate:90
|
||||
dragon/chest
|
||||
bounds:483,272,34,31
|
||||
dragon/chin
|
||||
bounds:101,509,54,37
|
||||
rotate:90
|
||||
dragon/front_toeA
|
||||
bounds:976,475,7,13
|
||||
dragon/front_toeB
|
||||
bounds:863,761,14,14
|
||||
dragon/head
|
||||
bounds:533,766,74,65
|
||||
dragon/rear-toe
|
||||
bounds:409,308,27,19
|
||||
dragon/tail01
|
||||
bounds:607,575,30,38
|
||||
rotate:90
|
||||
dragon/tail02
|
||||
bounds:412,376,24,30
|
||||
dragon/tail03
|
||||
bounds:199,297,18,23
|
||||
rotate:90
|
||||
dragon/tail04
|
||||
bounds:495,521,14,18
|
||||
dragon/tail05
|
||||
bounds:863,777,13,15
|
||||
rotate:90
|
||||
dragon/tail06
|
||||
bounds:412,357,24,17
|
||||
raptor/back-arm
|
||||
bounds:409,289,27,17
|
||||
raptor/back-bracer
|
||||
bounds:199,278,23,17
|
||||
raptor/back-hand
|
||||
bounds:142,588,22,20
|
||||
rotate:90
|
||||
raptor/back-knee
|
||||
bounds:609,843,29,40
|
||||
rotate:90
|
||||
raptor/back-thigh
|
||||
bounds:512,619,23,14
|
||||
rotate:90
|
||||
raptor/dust01
|
||||
bounds:224,318,29,22
|
||||
raptor/dust02
|
||||
bounds:410,329,26,26
|
||||
raptor/dust03
|
||||
bounds:863,843,19,16
|
||||
rotate:90
|
||||
raptor/eyes-open
|
||||
bounds:350,300,28,27
|
||||
raptor/front-arm
|
||||
bounds:67,318,29,18
|
||||
rotate:90
|
||||
raptor/front-bracer
|
||||
bounds:166,265,24,17
|
||||
raptor/front-hand
|
||||
bounds:224,293,25,23
|
||||
raptor/front-open-hand
|
||||
bounds:438,270,26,26
|
||||
raptor/front-thigh
|
||||
bounds:287,347,34,17
|
||||
raptor/gun
|
||||
bounds:307,419,64,62
|
||||
raptor/gun-nohand
|
||||
bounds:2,286,63,61
|
||||
raptor/head
|
||||
bounds:142,405,81,89
|
||||
rotate:90
|
||||
raptor/lower-leg
|
||||
bounds:96,448,44,59
|
||||
raptor/mouth-grind
|
||||
bounds:67,288,28,18
|
||||
rotate:90
|
||||
raptor/mouth-smile
|
||||
bounds:67,258,28,18
|
||||
rotate:90
|
||||
raptor/neck
|
||||
bounds:976,503,11,12
|
||||
raptor/raptor-arm-back
|
||||
bounds:257,537,49,52
|
||||
rotate:90
|
||||
raptor/raptor-body
|
||||
bounds:2,851,379,171
|
||||
raptor/raptor-front-arm
|
||||
bounds:224,342,49,61
|
||||
rotate:90
|
||||
raptor/raptor-front-leg
|
||||
bounds:165,734,115,154
|
||||
rotate:90
|
||||
raptor/raptor-hindleg-back
|
||||
bounds:381,541,101,129
|
||||
rotate:90
|
||||
raptor/raptor-horn
|
||||
bounds:495,466,109,48
|
||||
raptor/raptor-horn-back
|
||||
bounds:976,366,105,46
|
||||
rotate:90
|
||||
raptor/raptor-jaw
|
||||
bounds:512,516,92,86
|
||||
raptor/raptor-jaw-tooth
|
||||
bounds:255,318,22,29
|
||||
rotate:90
|
||||
raptor/raptor-mouth-inside
|
||||
bounds:142,648,21,25
|
||||
raptor/raptor-saddle-noshadow
|
||||
bounds:649,441,98,113
|
||||
rotate:90
|
||||
raptor/raptor-saddle-strap-front
|
||||
bounds:140,284,34,57
|
||||
rotate:90
|
||||
raptor/raptor-saddle-strap-rear
|
||||
bounds:438,331,32,44
|
||||
rotate:90
|
||||
raptor/raptor-saddle-w-shadow
|
||||
bounds:142,488,98,113
|
||||
rotate:90
|
||||
raptor/raptor-tail-shadow
|
||||
bounds:609,660,113,38
|
||||
rotate:90
|
||||
raptor/raptor-tongue
|
||||
bounds:609,607,51,38
|
||||
rotate:90
|
||||
raptor/stirrup-back
|
||||
bounds:142,675,26,21
|
||||
rotate:90
|
||||
raptor/stirrup-front
|
||||
bounds:287,318,27,30
|
||||
rotate:90
|
||||
raptor/stirrup-strap
|
||||
bounds:559,295,29,27
|
||||
raptor/torso
|
||||
bounds:438,433,32,55
|
||||
rotate:90
|
||||
raptor/visor
|
||||
bounds:529,657,78,50
|
||||
spineboy/crosshair
|
||||
bounds:599,352,48,48
|
||||
spineboy/eye-indifferent
|
||||
bounds:2,199,50,48
|
||||
spineboy/eye-surprised
|
||||
bounds:495,416,50,48
|
||||
spineboy/front-bracer
|
||||
bounds:438,298,31,43
|
||||
rotate:90
|
||||
spineboy/front-fist-closed
|
||||
bounds:487,330,41,44
|
||||
rotate:90
|
||||
spineboy/front-fist-open
|
||||
bounds:590,304,46,47
|
||||
rotate:90
|
||||
spineboy/front-foot
|
||||
bounds:311,582,68,37
|
||||
spineboy/front-shin
|
||||
bounds:379,467,44,99
|
||||
rotate:90
|
||||
spineboy/front-thigh
|
||||
bounds:321,789,26,60
|
||||
rotate:90
|
||||
spineboy/front-upper-arm
|
||||
bounds:970,289,29,52
|
||||
rotate:90
|
||||
spineboy/goggles
|
||||
bounds:881,932,141,90
|
||||
spineboy/gun
|
||||
bounds:861,405,113,110
|
||||
spineboy/head
|
||||
bounds:2,703,146,161
|
||||
rotate:90
|
||||
spineboy/hoverboard-board
|
||||
bounds:383,940,266,82
|
||||
spineboy/hoverboard-thruster
|
||||
bounds:522,290,32,35
|
||||
rotate:90
|
||||
spineboy/hoverglow-small
|
||||
bounds:383,790,148,41
|
||||
spineboy/mouth-grind
|
||||
bounds:438,399,50,32
|
||||
spineboy/mouth-oooo
|
||||
bounds:547,432,50,32
|
||||
spineboy/mouth-smile
|
||||
bounds:547,398,50,32
|
||||
spineboy/muzzle-glow
|
||||
bounds:861,296,107,107
|
||||
spineboy/muzzle-ring
|
||||
bounds:380,513,26,113
|
||||
rotate:90
|
||||
spineboy/muzzle01
|
||||
bounds:233,443,72,43
|
||||
spineboy/muzzle02
|
||||
bounds:786,512,73,45
|
||||
spineboy/muzzle03
|
||||
bounds:2,399,90,57
|
||||
spineboy/muzzle04
|
||||
bounds:142,354,80,49
|
||||
spineboy/muzzle05
|
||||
bounds:606,402,73,41
|
||||
rotate:90
|
||||
spineboy/neck
|
||||
bounds:251,297,19,22
|
||||
rotate:90
|
||||
spineboy/portal-bg
|
||||
bounds:383,644,144,144
|
||||
spineboy/portal-flare1
|
||||
bounds:321,817,60,32
|
||||
spineboy/portal-flare2
|
||||
bounds:989,537,62,33
|
||||
rotate:90
|
||||
spineboy/portal-flare3
|
||||
bounds:989,473,62,32
|
||||
rotate:90
|
||||
spineboy/portal-shade
|
||||
bounds:165,588,144,144
|
||||
spineboy/portal-streaks1
|
||||
bounds:2,565,136,138
|
||||
rotate:90
|
||||
spineboy/portsl-streaks2
|
||||
bounds:649,541,135,134
|
||||
spineboy/rear-bracer
|
||||
bounds:609,775,30,39
|
||||
rotate:90
|
||||
spineboy/rear-foot
|
||||
bounds:142,320,61,32
|
||||
spineboy/rear-shin
|
||||
bounds:606,477,41,96
|
||||
spineboy/rear-thigh
|
||||
bounds:2,249,35,56
|
||||
rotate:90
|
||||
spineboy/rear-upper-arm
|
||||
bounds:60,209,25,47
|
||||
spineboy/torso
|
||||
bounds:2,510,53,97
|
||||
rotate:90
|
||||
BIN
spine-ts/spine-widget/demos/assets/atlas1.png
Normal file
BIN
spine-ts/spine-widget/demos/assets/atlas1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 792 KiB |
449
spine-ts/spine-widget/demos/assets/atlas2.atlas
Normal file
449
spine-ts/spine-widget/demos/assets/atlas2.atlas
Normal file
@ -0,0 +1,449 @@
|
||||
atlas2.png
|
||||
size:1024,1024
|
||||
filter:Linear,Linear
|
||||
pma:true
|
||||
armorgirl/Layer 100
|
||||
bounds:991,253,31,40
|
||||
armorgirl/Layer 101
|
||||
bounds:847,410,53,24
|
||||
armorgirl/Layer 102
|
||||
bounds:986,583,60,33
|
||||
rotate:90
|
||||
armorgirl/Layer 103
|
||||
bounds:690,396,57,93
|
||||
armorgirl/Layer 104
|
||||
bounds:991,295,31,42
|
||||
armorgirl/Layer 106
|
||||
bounds:885,281,38,53
|
||||
rotate:90
|
||||
armorgirl/Layer 107
|
||||
bounds:327,122,70,127
|
||||
armorgirl/Layer 108
|
||||
bounds:749,335,92,94
|
||||
rotate:90
|
||||
armorgirl/Layer 109
|
||||
bounds:839,110,20,32
|
||||
rotate:90
|
||||
armorgirl/Layer 110
|
||||
bounds:388,20,84,29
|
||||
rotate:90
|
||||
armorgirl/Layer 111
|
||||
bounds:903,499,87,62
|
||||
armorgirl/Layer 112
|
||||
bounds:991,339,31,46
|
||||
armorgirl/Layer 113
|
||||
bounds:536,121,33,32
|
||||
rotate:90
|
||||
armorgirl/Layer 114
|
||||
bounds:920,157,20,26
|
||||
armorgirl/Layer 115
|
||||
bounds:873,617,26,25
|
||||
rotate:90
|
||||
armorgirl/Layer 116
|
||||
bounds:570,107,40,45
|
||||
rotate:90
|
||||
armorgirl/Layer 117
|
||||
bounds:942,99,23,31
|
||||
rotate:90
|
||||
armorgirl/Layer 118
|
||||
bounds:940,261,40,49
|
||||
rotate:90
|
||||
armorgirl/Layer 66
|
||||
bounds:444,257,118,84
|
||||
rotate:90
|
||||
armorgirl/Layer 68
|
||||
bounds:987,220,31,35
|
||||
rotate:90
|
||||
armorgirl/Layer 69
|
||||
bounds:419,2,40,59
|
||||
rotate:90
|
||||
armorgirl/Layer 70
|
||||
bounds:902,399,57,26
|
||||
armorgirl/Layer 72
|
||||
bounds:912,124,31,25
|
||||
rotate:90
|
||||
armorgirl/Layer 73
|
||||
bounds:201,8,43,90
|
||||
rotate:90
|
||||
armorgirl/Layer 74
|
||||
bounds:534,359,51,66
|
||||
armorgirl/Layer 75
|
||||
bounds:808,201,41,32
|
||||
armorgirl/Layer 76
|
||||
bounds:690,335,33,15
|
||||
armorgirl/Layer 77
|
||||
bounds:987,191,35,27
|
||||
armorgirl/Layer 78
|
||||
bounds:488,131,23,46
|
||||
rotate:90
|
||||
armorgirl/Layer 79
|
||||
bounds:399,128,17,82
|
||||
rotate:90
|
||||
armorgirl/Layer 80
|
||||
bounds:808,169,30,41
|
||||
rotate:90
|
||||
armorgirl/Layer 81
|
||||
bounds:588,491,8,9
|
||||
rotate:90
|
||||
armorgirl/Layer 82
|
||||
bounds:854,222,29,15
|
||||
armorgirl/Layer 84
|
||||
bounds:388,2,29,16
|
||||
armorgirl/Layer 85
|
||||
bounds:725,335,15,12
|
||||
rotate:90
|
||||
armorgirl/Layer 851
|
||||
bounds:388,463,15,12
|
||||
rotate:90
|
||||
armorgirl/Layer 86
|
||||
bounds:873,774,13,4
|
||||
rotate:90
|
||||
armorgirl/Layer 87
|
||||
bounds:940,309,9,10
|
||||
armorgirl/Layer 871
|
||||
bounds:717,210,9,10
|
||||
armorgirl/Layer 88
|
||||
bounds:715,681,7,6
|
||||
armorgirl/Layer 89
|
||||
bounds:951,388,9,8
|
||||
rotate:90
|
||||
armorgirl/Layer 90
|
||||
bounds:905,885,66,111
|
||||
rotate:90
|
||||
armorgirl/Layer 91
|
||||
bounds:854,258,20,29
|
||||
rotate:90
|
||||
armorgirl/Layer 92
|
||||
bounds:612,491,134,130
|
||||
armorgirl/Layer 93
|
||||
bounds:744,631,56,98
|
||||
rotate:90
|
||||
armorgirl/Layer 94
|
||||
bounds:505,60,17,23
|
||||
rotate:90
|
||||
armorgirl/Layer 95
|
||||
bounds:727,110,30,42
|
||||
armorgirl/Layer 96
|
||||
bounds:617,110,28,37
|
||||
armorgirl/Layer 97
|
||||
bounds:878,128,27,32
|
||||
rotate:90
|
||||
armorgirl/Layer 98
|
||||
bounds:673,89,17,20
|
||||
rotate:90
|
||||
armorgirl/Layer 99
|
||||
bounds:851,165,19,35
|
||||
rotate:90
|
||||
greengirl/Layer 17
|
||||
bounds:388,501,222,120
|
||||
greengirl/Layer 20
|
||||
bounds:198,645,190,377
|
||||
greengirl/Layer 21
|
||||
bounds:717,222,43,55
|
||||
greengirl/Layer 22
|
||||
bounds:920,185,18,38
|
||||
greengirl/Layer 23
|
||||
bounds:505,106,23,23
|
||||
greengirl/Layer 24
|
||||
bounds:800,111,20,37
|
||||
rotate:90
|
||||
greengirl/Layer 25
|
||||
bounds:854,239,17,29
|
||||
rotate:90
|
||||
greengirl/Layer 26
|
||||
bounds:991,98,19,26
|
||||
rotate:90
|
||||
greengirl/Layer 27
|
||||
bounds:530,101,18,25
|
||||
rotate:90
|
||||
greengirl/Layer 28
|
||||
bounds:130,9,18,30
|
||||
greengirl/Layer 29
|
||||
bounds:972,124,17,30
|
||||
greengirl/Layer 30
|
||||
bounds:728,154,17,33
|
||||
rotate:90
|
||||
greengirl/Layer 32
|
||||
bounds:763,164,19,43
|
||||
rotate:90
|
||||
greengirl/Layer 33
|
||||
bounds:530,257,16,31
|
||||
rotate:90
|
||||
greengirl/Layer 34
|
||||
bounds:873,109,17,33
|
||||
rotate:90
|
||||
greengirl/Layer 35
|
||||
bounds:991,119,16,30
|
||||
rotate:90
|
||||
greengirl/Layer 36
|
||||
bounds:991,137,20,31
|
||||
rotate:90
|
||||
greengirl/Layer 37
|
||||
bounds:759,111,22,39
|
||||
rotate:90
|
||||
greengirl/Layer 38
|
||||
bounds:332,251,110,100
|
||||
greengirl/Layer 39
|
||||
bounds:658,335,30,63
|
||||
greengirl/Layer 40
|
||||
bounds:992,521,60,30
|
||||
rotate:90
|
||||
greengirl/Layer 41
|
||||
bounds:844,617,70,27
|
||||
rotate:90
|
||||
greengirl/Layer 42
|
||||
bounds:712,279,56,54
|
||||
greengirl/Layer 43
|
||||
bounds:55,300,27,10
|
||||
greengirl/Layer 44
|
||||
bounds:739,341,9,8
|
||||
rotate:90
|
||||
greengirl/Layer 45
|
||||
bounds:908,102,32,20
|
||||
greengirl/Layer 46
|
||||
bounds:717,87,16,19
|
||||
greengirl/Layer 47
|
||||
bounds:388,480,19,13
|
||||
rotate:90
|
||||
greengirl/Layer 48
|
||||
bounds:888,157,31,30
|
||||
rotate:90
|
||||
greengirl/Layer 49
|
||||
bounds:902,427,70,79
|
||||
rotate:90
|
||||
greengirl/Layer 50
|
||||
bounds:690,352,57,42
|
||||
greengirl/Layer 51
|
||||
bounds:841,527,88,60
|
||||
rotate:90
|
||||
greengirl/Layer 52
|
||||
bounds:715,689,98,156
|
||||
rotate:90
|
||||
greengirl/Layer 53
|
||||
bounds:213,111,140,78
|
||||
rotate:90
|
||||
greengirl/Layer 54
|
||||
bounds:903,563,81,80
|
||||
greengirl/Layer 55
|
||||
bounds:992,499,20,30
|
||||
rotate:90
|
||||
orangegirl/Layer 14
|
||||
bounds:202,456,187,184
|
||||
rotate:90
|
||||
orangegirl/Layer 15
|
||||
bounds:588,400,89,100
|
||||
rotate:90
|
||||
orangegirl/Layer 16
|
||||
bounds:942,156,28,32
|
||||
rotate:90
|
||||
orangegirl/Layer 17
|
||||
bounds:505,79,20,25
|
||||
orangegirl/Layer 18
|
||||
bounds:975,103,19,14
|
||||
rotate:90
|
||||
orangegirl/Layer 19
|
||||
bounds:293,2,13,7
|
||||
orangegirl/Layer 20
|
||||
bounds:527,80,24,19
|
||||
orangegirl/Layer 21
|
||||
bounds:488,156,99,80
|
||||
rotate:90
|
||||
orangegirl/Layer 22
|
||||
bounds:419,44,50,82
|
||||
orangegirl/Layer 23
|
||||
bounds:847,436,53,89
|
||||
orangegirl/Layer 24
|
||||
bounds:55,312,35,33
|
||||
orangegirl/Layer 25
|
||||
bounds:640,200,60,29
|
||||
rotate:90
|
||||
orangegirl/Layer 26
|
||||
bounds:647,147,51,29
|
||||
rotate:90
|
||||
orangegirl/Layer 27
|
||||
bounds:530,275,56,82
|
||||
orangegirl/Layer 28
|
||||
bounds:570,149,41,75
|
||||
rotate:90
|
||||
orangegirl/Layer 29
|
||||
bounds:894,321,55,33
|
||||
orangegirl/Layer 30
|
||||
bounds:213,53,56,78
|
||||
rotate:90
|
||||
orangegirl/Layer 31
|
||||
bounds:710,789,88,167
|
||||
rotate:90
|
||||
orangegirl/Layer 32
|
||||
bounds:845,323,32,47
|
||||
rotate:90
|
||||
orangegirl/Layer 33
|
||||
bounds:879,766,111,143
|
||||
rotate:90
|
||||
orangegirl/Layer 34
|
||||
bounds:770,282,56,51
|
||||
orangegirl/Layer 35
|
||||
bounds:588,262,66,69
|
||||
rotate:90
|
||||
orangegirl/Layer 36
|
||||
bounds:748,527,91,102
|
||||
orangegirl/Layer 37
|
||||
bounds:92,41,56,172
|
||||
orangegirl/Layer 38
|
||||
bounds:2,2,38,85
|
||||
rotate:90
|
||||
orangegirl/Layer 39
|
||||
bounds:845,357,47,51
|
||||
orangegirl/Layer 40
|
||||
bounds:983,387,42,39
|
||||
rotate:90
|
||||
orangegirl/Layer 41
|
||||
bounds:202,370,84,199
|
||||
rotate:90
|
||||
orangegirl/Layer 42
|
||||
bounds:403,377,48,129
|
||||
rotate:90
|
||||
orangegirl/Layer 43
|
||||
bounds:961,386,20,39
|
||||
orangegirl/Layer 44
|
||||
bounds:150,68,61,145
|
||||
orangegirl/Layer 45
|
||||
bounds:150,2,64,49
|
||||
rotate:90
|
||||
orangegirl/Layer 46
|
||||
bounds:89,2,39,37
|
||||
orangegirl/Layer 47
|
||||
bounds:844,132,32,31
|
||||
orangegirl/Layer 48
|
||||
bounds:659,267,51,66
|
||||
orangegirl/Layer 49
|
||||
bounds:92,215,112,130
|
||||
owl/L_eye-closed
|
||||
bounds:940,216,45,43
|
||||
owl/L_eye-iris
|
||||
bounds:762,232,45,43
|
||||
rotate:90
|
||||
owl/L_eye-light
|
||||
bounds:201,55,11,10
|
||||
rotate:90
|
||||
owl/L_eye-pupil
|
||||
bounds:939,124,31,30
|
||||
owl/L_foot
|
||||
bounds:479,94,32,24
|
||||
rotate:90
|
||||
owl/L_wing
|
||||
bounds:894,356,41,55
|
||||
rotate:90
|
||||
owl/R_eye-closed
|
||||
bounds:763,185,45,43
|
||||
rotate:90
|
||||
owl/R_eye-iris
|
||||
bounds:807,235,45,43
|
||||
owl/R_eye-light
|
||||
bounds:828,323,11,10
|
||||
owl/R_eye-pupil
|
||||
bounds:976,159,31,30
|
||||
owl/R_foot
|
||||
bounds:479,60,32,24
|
||||
rotate:90
|
||||
owl/R_wing
|
||||
bounds:828,280,41,55
|
||||
rotate:90
|
||||
owl/beak
|
||||
bounds:530,59,19,21
|
||||
rotate:90
|
||||
owl/beak-down
|
||||
bounds:695,88,18,20
|
||||
rotate:90
|
||||
owl/body
|
||||
bounds:206,253,124,98
|
||||
owl/feather-1
|
||||
bounds:647,115,29,30
|
||||
owl/feather-2
|
||||
bounds:887,190,31,33
|
||||
owl/feather-3
|
||||
bounds:951,303,28,38
|
||||
rotate:90
|
||||
owl/head-base
|
||||
bounds:873,645,149,119
|
||||
owl/leaf-1
|
||||
bounds:951,333,38,51
|
||||
owl/leaf-2
|
||||
bounds:728,173,33,47
|
||||
owl/leaf-3
|
||||
bounds:983,431,66,39
|
||||
rotate:90
|
||||
owl/leaf-4
|
||||
bounds:885,225,45,25
|
||||
owl/leaf-5
|
||||
bounds:885,252,27,53
|
||||
rotate:90
|
||||
owl/leaf-6
|
||||
bounds:671,207,44,58
|
||||
owl/leaf-7
|
||||
bounds:763,135,27,43
|
||||
rotate:90
|
||||
owl/wood
|
||||
bounds:390,870,309,152
|
||||
stretchyman/back arm
|
||||
bounds:701,879,72,202
|
||||
rotate:90
|
||||
stretchyman/back leg
|
||||
bounds:390,768,100,318
|
||||
rotate:90
|
||||
stretchyman/body
|
||||
bounds:55,570,141,452
|
||||
stretchyman/front arm
|
||||
bounds:55,347,145,221
|
||||
stretchyman/head
|
||||
bounds:399,147,87,102
|
||||
tank/antenna
|
||||
bounds:471,50,6,76
|
||||
tank/cannon
|
||||
bounds:202,353,233,15
|
||||
tank/cannonConnector
|
||||
bounds:940,186,28,34
|
||||
rotate:90
|
||||
tank/ground
|
||||
bounds:2,42,256,88
|
||||
rotate:90
|
||||
tank/guntower
|
||||
bounds:403,427,183,72
|
||||
tank/machinegun
|
||||
bounds:327,106,83,14
|
||||
tank/machinegun-mount
|
||||
bounds:647,95,18,24
|
||||
rotate:90
|
||||
tank/rock
|
||||
bounds:293,106,145,32
|
||||
rotate:90
|
||||
tank/tankBottom
|
||||
bounds:701,953,321,69
|
||||
tank/tankBottom-shadow
|
||||
bounds:390,681,323,85
|
||||
tank/tankTop
|
||||
bounds:390,623,352,56
|
||||
tank/tread
|
||||
bounds:1009,165,24,8
|
||||
rotate:90
|
||||
tank/tread-inside
|
||||
bounds:894,401,6,7
|
||||
tank/wheel-big
|
||||
bounds:678,157,48,48
|
||||
tank/wheel-big-overlay
|
||||
bounds:678,108,47,47
|
||||
tank/wheel-mid
|
||||
bounds:851,186,34,34
|
||||
tank/wheel-mid-overlay
|
||||
bounds:808,133,34,34
|
||||
tank/wheel-small
|
||||
bounds:735,90,18,18
|
||||
transforms/wheel-big
|
||||
bounds:749,429,96,96
|
||||
transforms/wheel-big-overlay
|
||||
bounds:293,11,93,93
|
||||
transforms/wheel-mid
|
||||
bounds:570,192,68,68
|
||||
transforms/wheel-mid-overlay
|
||||
bounds:588,330,68,68
|
||||
vine/vine
|
||||
bounds:2,300,51,722
|
||||
BIN
spine-ts/spine-widget/demos/assets/atlas2.png
Normal file
BIN
spine-ts/spine-widget/demos/assets/atlas2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 965 KiB |
1
spine-ts/spine-widget/demos/assets/demos.json
Normal file
1
spine-ts/spine-widget/demos/assets/demos.json
Normal file
File diff suppressed because one or more lines are too long
1381
spine-ts/spine-widget/demos/assets/heroes.atlas
Normal file
1381
spine-ts/spine-widget/demos/assets/heroes.atlas
Normal file
File diff suppressed because it is too large
Load Diff
BIN
spine-ts/spine-widget/demos/assets/heroes.png
Normal file
BIN
spine-ts/spine-widget/demos/assets/heroes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 740 KiB |
26
spine-ts/spine-widget/demos/clipping.html
Normal file
26
spine-ts/spine-widget/demos/clipping.html
Normal file
@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Clipping - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="clipping.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="clipping-playbutton"></div>
|
||||
<div id="clipping-timeline" class="slider"></div>
|
||||
<input id="clipping-drawtriangles" type="checkbox"></input> Draw triangles
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(clippingDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
111
spine-ts/spine-widget/demos/clipping.js
Normal file
111
spine-ts/spine-widget/demos/clipping.js
Normal file
@ -0,0 +1,111 @@
|
||||
var clippingDemo = function (canvas, bgColor) {
|
||||
var gl, renderer, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper;
|
||||
var playButton, timeline, isPlaying = true, playTime = 0;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas1.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "portal", true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x + 200;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2 + 100;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#clipping-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeline = $("#clipping-timeline").data("slider");
|
||||
timeline.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percent;
|
||||
state.update(time - playTime);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawClipping = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
$("#clipping-drawtriangles").click(function () {
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawClipping = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = this.checked;
|
||||
})
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration)
|
||||
playTime -= animationDuration;
|
||||
timeline.set(playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
}
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.6;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.6;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
clippingDemo.assetManager = assetManager;
|
||||
clippingDemo.loadingComplete = loadingComplete;
|
||||
clippingDemo.render = render;
|
||||
};
|
||||
127
spine-ts/spine-widget/demos/demos.css
Normal file
127
spine-ts/spine-widget/demos/demos.css
Normal file
@ -0,0 +1,127 @@
|
||||
body, html {
|
||||
margin: 0;
|
||||
font-family: Tahoma;
|
||||
font-size: 11pt;
|
||||
}
|
||||
body {
|
||||
padding: 15px;
|
||||
}
|
||||
br {
|
||||
display: block;
|
||||
content: "";
|
||||
margin-top: 15px;
|
||||
}
|
||||
h2 {
|
||||
padding-top: 1em;
|
||||
}
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.aspect {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.standalone {
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
clear: both;
|
||||
}
|
||||
.demo-container {
|
||||
float: left;
|
||||
width: 58%;
|
||||
}
|
||||
.demo-text {
|
||||
float: left;
|
||||
width: 38%;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.timeline, .timeline td:nth-child(2) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.play {
|
||||
background: black;
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23F2F2F2%27%20d%3D%27M30.185%2C15.5L12.556%2C24.8V6.201L30.185%2C15.5z%27%2F%3E%3C%2Fsvg%3E");
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
}
|
||||
.pause {
|
||||
background: black;
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M26.94%2C6.978v17.045h-5.249V6.978H26.94z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M18.975%2C6.978v17.045h-5.249V6.978H18.975z%22%2F%3E%3C%2Fsvg%3E");
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
transform: translateZ(0);
|
||||
background: #222;
|
||||
display: inline-block;
|
||||
}
|
||||
.slider, .slider.filled span {
|
||||
height: 15px;
|
||||
border: 1px solid #c5c5c5;
|
||||
}
|
||||
.slider div {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 10px;
|
||||
height: 17px;
|
||||
background: white;
|
||||
border: #000 1px solid;
|
||||
border-radius: 2px;
|
||||
z-index: 10;
|
||||
}
|
||||
.slider.filled {
|
||||
border: 0;
|
||||
}
|
||||
.slider.filled div {
|
||||
top: -1px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.slider.filled span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #3ea9f5;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
z-index: 5;
|
||||
}
|
||||
.slider.filled span:last-child {
|
||||
background: #222;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
.overlay-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
.overlay-label {
|
||||
display: none;
|
||||
}
|
||||
389
spine-ts/spine-widget/demos/demos.html
Normal file
389
spine-ts/spine-widget/demos/demos.html
Normal file
@ -0,0 +1,389 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Spine: Demos</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
|
||||
<script src="utils.js"></script>
|
||||
<script src="spritesheets.js"></script>
|
||||
<script src="imagechanges.js"></script>
|
||||
<script src="transitions.js"></script>
|
||||
<script src="meshes.js"></script>
|
||||
<script src="skins.js"></script>
|
||||
<script src="hoverboard.js"></script>
|
||||
<script src="vine.js"></script>
|
||||
<script src="clipping.js"></script>
|
||||
<script src="stretchyman.js"></script>
|
||||
<script src="tank.js"></script>
|
||||
<script src="transforms.js"></script>
|
||||
<script src="additiveblending.js"></script>
|
||||
|
||||
<script src="demos.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="demos" class="demos-page">
|
||||
<div class="demo">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Spine-versus-sprites-sheets"><a href="#Spine-versus-sprite-sheets">Spine versus sprite sheets</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
<div id="spritesheets-overlay" class="overlay-hide">
|
||||
<div class="overlay-label" style="width:50%"><b>Spine</b><br><span class="hide-small">All animations, all frame rates<br></span><b>0.18 MB</b></div>
|
||||
<div class="overlay-label" style="left:50%;width:50%"><b>Sprite sheet</b><br><span class="hide-small">1 second of animation @ 30FPS<br></span><b>3.39 MB = 18x larger!</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:0px">
|
||||
<div class="control-label"><span>Animation speed</span></div>
|
||||
<div class="slidervalue" id="spritesheets-timeslider-label"> </div>
|
||||
<div class="slider filled" id="spritesheets-timeslider"></div>
|
||||
</div>
|
||||
<div class="control" style="margin:0">
|
||||
<div>
|
||||
<button id="spritesheets-roar" class="btn unit-50">Roar</button>
|
||||
<button id="spritesheets-jump" class="btn unit-50">Jump</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Spine-with-frame-based-animation"><a href="#Spine-with-frame-based-animation">Spine with frame-based animation</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout">
|
||||
<tr>
|
||||
<td>
|
||||
<div id="imagechanges-playbutton" class="pause"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="slider" id="imagechanges-timeline"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control">
|
||||
<label>Select a skeleton:</label>
|
||||
<div class="select-container">
|
||||
<select id="imagechanges-skeleton" size="2"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Transitions-and-layering"><a href="#Transitions-and-layering">Transitions and layering</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div id="transitions-overlay" class="overlay-hide">
|
||||
<div class="overlay-label" style="left:25%;"><b>Smooth</b></div>
|
||||
<div class="overlay-label" style="right:30%;"><b>Abrupt</b></div>
|
||||
</div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="margin:0">
|
||||
<div>
|
||||
<button id="transitions-die" class="btn unit-50">Die</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="padding-bottom:0px">
|
||||
<div class="control-label"><span>Animation speed</span></div>
|
||||
<div class="slidervalue" id="transitions-timeslider-label"> </div>
|
||||
<div class="slider filled" id="transitions-timeslider"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-mesh-deformations">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Mesh-deformations"><a href="#Mesh-deformations">Mesh deformation</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout">
|
||||
<tr>
|
||||
<td>
|
||||
<div id="meshes-playbutton" class="pause"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="slider" id="meshes-timeline"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:0">
|
||||
<label>Select a character:</label>
|
||||
<div class="select-container">
|
||||
<select id="meshes-skeleton" size="3"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="width:50%; display:inline-block; float:left; padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="meshes-drawbonescheckbox" name="check">
|
||||
<label for="meshes-drawbonescheckbox"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#meshes-drawbonescheckbox').click()">Show bones</span>
|
||||
</div>
|
||||
<div class="control" style="width:50%; display:inline-block; padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="meshes-drawmeshtrianglescheckbox" name="check">
|
||||
<label for="meshes-drawmeshtrianglescheckbox"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#meshes-drawmeshtrianglescheckbox').click()">Show triangles</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-skins">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Skins"><a href="#Skins">Skins</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control">
|
||||
<label>Select a skin:</label>
|
||||
<div class="select-container">
|
||||
<select id="skins-skin"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="margin:0">
|
||||
<div>
|
||||
<button id="skins-randomizeattachments" class="btn unit-50">Randomize</button>
|
||||
<button id="skins-swingsword" class="btn unit-50">Swing Sword</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="padding-bottom:6px; padding-top:10px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="skins-randomizeskins" name="check" checked="true">
|
||||
<label for="skins-randomizeskins"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#skins-randomizeskins').click()">Random skins</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-ik-constraint">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Inverse-kinematics"><a href="#Inverse-kinematics">Inverse kinematics</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="margin:0">
|
||||
<div>
|
||||
<button id="hoverboard-shoot" class="btn unit-50">Shoot</button>
|
||||
<button id="hoverboard-jump" class="btn unit-50">Jump</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="width:50%; display:inline-block; float:left; padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="hoverboard-aim" name="check">
|
||||
<label for="hoverboard-aim"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#hoverboard-aim').click()">Aim</span>
|
||||
</div>
|
||||
<div class="control" style="width:50%; display:inline-block; padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="hoverboard-drawbones" name="check">
|
||||
<label for="hoverboard-drawbones"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#hoverboard-drawbones').click()">Show bones</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-additive-blending">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Additive-blending"><a href="#Additive-blending">Additive Blending</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-path-constraint">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Path-constraints"><a href="#Path-constraints">Path constraints</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout">
|
||||
<tr>
|
||||
<td>
|
||||
<div id="vine-playbutton" class="pause"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="slider" id="vine-timeline"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="vine-drawbones" name="check">
|
||||
<label for="vine-drawbones"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#vine-drawbones').click()">Show bones & paths</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="stretchyman-drawbones" name="check">
|
||||
<label for="stretchyman-drawbones"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#stretchyman-drawbones').click()">Show bones & paths</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-clipping">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Clipping"><a href="#Clipping">Clipping</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout">
|
||||
<tr>
|
||||
<td>
|
||||
<div id="clipping-playbutton" class="pause"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="slider" id="clipping-timeline"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="clipping-drawtriangles" name="check">
|
||||
<label for="clipping-drawtriangles"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#clipping-drawtriangles').click()">Show triangles</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-transform-constraint">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Transform-constraints"><a href="#Transform-constraints">Transform constraints</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout">
|
||||
<tr>
|
||||
<td>
|
||||
<div id="tank-playbutton" class="pause"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="slider" id="tank-timeline"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="tank-drawbones" name="check">
|
||||
<label for="tank-drawbones" id="tank-drawbones-label"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#tank-drawbones').click()">Show bones & paths</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:0px">
|
||||
<div class="control-label"><span>Rotation offset</span></div>
|
||||
<div class="slidervalue" id="transforms-rotationoffset-label"> </div>
|
||||
<div class="slider filled" id="transforms-rotationoffset"></div>
|
||||
</div>
|
||||
<div class="control" style="padding-bottom:0px">
|
||||
<div class="control-label"><span>Translation mix</span></div>
|
||||
<div class="slidervalue" id="transforms-translationmix-label"> </div>
|
||||
<div class="slider filled" id="transforms-translationmix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
84
spine-ts/spine-widget/demos/demos.js
Normal file
84
spine-ts/spine-widget/demos/demos.js
Normal file
@ -0,0 +1,84 @@
|
||||
|
||||
$(function () {
|
||||
window.onerror = function (message, url, lineNo) {
|
||||
alert("Error: " + message + "\n" + "URL: " + url + "\nLine: " + lineNo);
|
||||
}
|
||||
|
||||
spineDemos.init();
|
||||
|
||||
var demos = [
|
||||
spritesheetsDemo,
|
||||
imageChangesDemo,
|
||||
transitionsDemo,
|
||||
meshesDemo,
|
||||
skinsDemo,
|
||||
hoverboardDemo,
|
||||
additiveBlendingDemo,
|
||||
vineDemo,
|
||||
stretchymanDemo,
|
||||
clippingDemo,
|
||||
tankDemo,
|
||||
transformsDemo
|
||||
];
|
||||
|
||||
var placeholders = document.getElementsByClassName("aspect");
|
||||
|
||||
for (var i = 0; i < demos.length; i++)
|
||||
spineDemos.addDemo(demos[i], placeholders[i]);
|
||||
|
||||
function resizeSliders () {
|
||||
$(".slider").each(function () {
|
||||
$(this).data("slider").resized();
|
||||
});
|
||||
}
|
||||
|
||||
function windowResized () {
|
||||
// Keep canvas from taking up whole screen.
|
||||
$(".aspect").each(function () {
|
||||
$(this).css("padding-bottom", Math.min(70.14, $(window).height() * 0.75 / $(this).width() * 100) + "%");
|
||||
});
|
||||
|
||||
// Swap controls when media query puts text below canvas.
|
||||
var below = $("#below").is(':visible');
|
||||
$(".demo .description").each(function () {
|
||||
var description = $(this);
|
||||
var controls = description.children(".controls");
|
||||
if (below || description.hasClass("fullsize"))
|
||||
description.prepend(controls);
|
||||
else
|
||||
description.append(controls);
|
||||
});
|
||||
|
||||
resizeSliders();
|
||||
}
|
||||
windowResized();
|
||||
$(window).resize(windowResized);
|
||||
|
||||
$(".resize").click(function () {
|
||||
var resizeButton = $(this);
|
||||
var container = resizeButton.parent();
|
||||
var parent = container.parent();
|
||||
var overlayLabels = parent.find(".overlay-label");
|
||||
var description = parent.children(".description");
|
||||
var controls = description.children(".controls");
|
||||
|
||||
container.toggleClass("fullsize");
|
||||
resizeButton.toggleClass("checked");
|
||||
|
||||
var offset = parseFloat(overlayLabels.css("bottom"));
|
||||
description.toggleClass("fullsize");
|
||||
if (description.hasClass("fullsize")) {
|
||||
overlayLabels.css("bottom", offset * 1.666);
|
||||
} else {
|
||||
resizeSliders();
|
||||
overlayLabels.css("bottom", offset / 1.666);
|
||||
}
|
||||
setTimeout(function() {
|
||||
windowResized();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
$(".checkbox-overlay").change(function () {
|
||||
$(this).closest(".demo").find(".overlay").toggleClass("overlay-hide");
|
||||
});
|
||||
});
|
||||
27
spine-ts/spine-widget/demos/hoverboard.html
Normal file
27
spine-ts/spine-widget/demos/hoverboard.html
Normal file
@ -0,0 +1,27 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>IK Constraints - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="hoverboard.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones<br>
|
||||
<input id="hoverboard-aim" type="checkbox"></input> Aim<br>
|
||||
<button id="hoverboard-shoot">Shoot</button>
|
||||
<button id="hoverboard-jump">Jump</button>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(hoverboardDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
148
spine-ts/spine-widget/demos/hoverboard.js
Normal file
148
spine-ts/spine-widget/demos/hoverboard.js
Normal file
@ -0,0 +1,148 @@
|
||||
var hoverboardDemo = function (canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
|
||||
|
||||
var gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper;
|
||||
var target = null;
|
||||
var hoverTargets = [];
|
||||
var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"];
|
||||
var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
|
||||
var isPlaying = true;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas1.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
input = new spine.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "hoverboard", true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
for (var i = 0; i < controlBones.length; i++)
|
||||
hoverTargets.push(null);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
var checkbox = $("#hoverboard-drawbones");
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
checkbox.change(function () {
|
||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
});
|
||||
|
||||
var aimTrack = 1;
|
||||
var shootAimTrack = 2;
|
||||
var shootTrack = 3;
|
||||
|
||||
$("#hoverboard-aim").change(function () {
|
||||
if (!this.checked)
|
||||
state.setEmptyAnimation(aimTrack, 0.2);
|
||||
else {
|
||||
state.setEmptyAnimation(aimTrack, 0);
|
||||
state.addAnimation(aimTrack, "aim", true, 0).mixDuration = 0.2;
|
||||
}
|
||||
});
|
||||
|
||||
$("#hoverboard-shoot").click(function () {
|
||||
state.setAnimation(shootAimTrack, "aim", true);
|
||||
state.setAnimation(shootTrack, "shoot", false).listener = {
|
||||
complete: function (trackIndex) {
|
||||
state.setEmptyAnimation(shootAimTrack, 0.2);
|
||||
state.clearTrack(shootTrack);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
$("#hoverboard-jump").click(function () {
|
||||
state.setAnimation(aimTrack, "jump", false);
|
||||
state.addEmptyAnimation(aimTrack, 0.5, 0);
|
||||
if ($("#hoverboard-aim").prop("checked"))
|
||||
state.addAnimation(aimTrack, "aim", true, 0.4).mixDuration = 0.2;
|
||||
});
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
input.addListener({
|
||||
down: function (x, y) {
|
||||
isPlaying = false;
|
||||
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
|
||||
},
|
||||
up: function (x, y) {
|
||||
if (target && target.data.name == "crosshair") $("#hoverboard-shoot").click();
|
||||
target = null;
|
||||
},
|
||||
dragged: function (x, y) {
|
||||
spineDemos.dragged(canvas, renderer, target, x, y);
|
||||
},
|
||||
moved: function (x, y) {
|
||||
spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.2;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.2;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
||||
gl.lineWidth(2);
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
|
||||
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
|
||||
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
|
||||
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
|
||||
}
|
||||
renderer.end();
|
||||
gl.lineWidth(1);
|
||||
}
|
||||
|
||||
init();
|
||||
hoverboardDemo.assetManager = assetManager;
|
||||
hoverboardDemo.loadingComplete = loadingComplete;
|
||||
hoverboardDemo.render = render;
|
||||
};
|
||||
26
spine-ts/spine-widget/demos/imagechanges.html
Normal file
26
spine-ts/spine-widget/demos/imagechanges.html
Normal file
@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Frame-by-frame - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="imagechanges.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="imagechanges-timeline" class="slider"></div>
|
||||
<input id="imagechanges-playbutton" type="button" value="Pause"></input><br>
|
||||
<select id="imagechanges-skeleton" size="2"></select>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(imageChangesDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
187
spine-ts/spine-widget/demos/imagechanges.js
Normal file
187
spine-ts/spine-widget/demos/imagechanges.js
Normal file
@ -0,0 +1,187 @@
|
||||
var imageChangesDemo = function (canvas, bgColor) {
|
||||
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, bounds;
|
||||
var timeKeeper;
|
||||
var skeletons = {};
|
||||
var activeSkeleton = "Alien";
|
||||
var playButton, timeLine, isPlaying = true;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas1.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
|
||||
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#imagechanges-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#imagechanges-timeline").data("slider");
|
||||
timeLine.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percent;
|
||||
active.state.update(time - active.playTime);
|
||||
active.state.apply(active.skeleton);
|
||||
active.skeleton.updateWorldTransform(spine.Physics.update);
|
||||
active.playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
var list = $("#imagechanges-skeleton");
|
||||
for (var skeletonName in skeletons) {
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", skeletonName).text(skeletonName);
|
||||
if (skeletonName === activeSkeleton) option.attr("selected", "selected");
|
||||
list.append(option);
|
||||
}
|
||||
list.change(function () {
|
||||
activeSkeleton = $("#imagechanges-skeleton option:selected").text();
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
timeLine.set(active.playTime / animationDuration);
|
||||
})
|
||||
}
|
||||
|
||||
function loadSkeleton(name, animation, sequenceSlots) {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json")[name]);
|
||||
var skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName("default");
|
||||
|
||||
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
|
||||
var anim = skeletonData.findAnimation(animation);
|
||||
state.setAnimation(0, animation, true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
var offset = new spine.Vector2();
|
||||
var size = new spine.Vector2();
|
||||
skeleton.getBounds(offset, size, []);
|
||||
|
||||
var regions = [];
|
||||
for (var i = 0; i < sequenceSlots.length; i++) {
|
||||
var slot = skeleton.findSlot(sequenceSlots[i]);
|
||||
sequenceSlots[i] = slot;
|
||||
var index = slot.data.index;
|
||||
for (var name in skeleton.skin.attachments[index])
|
||||
regions.push(skeleton.skin.attachments[index][name]);
|
||||
}
|
||||
|
||||
return {
|
||||
skeleton: skeleton,
|
||||
state: state,
|
||||
playTime: 0,
|
||||
bounds: {
|
||||
offset: offset,
|
||||
size: size
|
||||
},
|
||||
slots: sequenceSlots,
|
||||
regions: regions
|
||||
};
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
var active = skeletons[activeSkeleton];
|
||||
var skeleton = active.skeleton;
|
||||
var state = active.state;
|
||||
var offset = active.bounds.offset;
|
||||
var size = active.bounds.size;
|
||||
|
||||
var x = offset.x + size.x + 100, offsetY = offset.y, zoom = 1;
|
||||
if (activeSkeleton === "Alien") {
|
||||
renderer.camera.position.x = offset.x + size.x + 400;
|
||||
renderer.camera.position.y = offset.y + size.y / 2 + 450;
|
||||
x += 400;
|
||||
zoom = 0.31;
|
||||
} else {
|
||||
renderer.camera.position.x = offset.x + size.x;
|
||||
renderer.camera.position.y = offset.y + size.y / 2;
|
||||
x += 100;
|
||||
}
|
||||
renderer.camera.viewportWidth = size.x * 2.4 / zoom;
|
||||
renderer.camera.viewportHeight = size.y * 1.4 / zoom;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
active.playTime += delta;
|
||||
while (active.playTime >= animationDuration) {
|
||||
active.playTime -= animationDuration;
|
||||
}
|
||||
timeLine.set(active.playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
}
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
|
||||
var y = offsetY;
|
||||
var slotsWidth = 0, slotsHeight = 0;
|
||||
var slotSize = size.y / 3;
|
||||
var maxSlotWidth = 0;
|
||||
var j = 0;
|
||||
for (var i = 0, n = active.regions.length; i < n; i++) {
|
||||
var region = active.regions[i].region;
|
||||
var scale = Math.min(slotSize / region.height, slotSize / region.width) / zoom;
|
||||
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
|
||||
|
||||
for (var ii = 0; ii < active.slots.length; ii++) {
|
||||
var slot = active.slots[ii];
|
||||
if (slot.attachment && slot.attachment.name === region.name) {
|
||||
renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
maxSlotWidth = Math.max(maxSlotWidth, region.width * scale);
|
||||
y += slotSize / zoom + 2;
|
||||
j++;
|
||||
if (j == 3) {
|
||||
x += maxSlotWidth + 10;
|
||||
maxSlotWidth = 0;
|
||||
y = offsetY;
|
||||
j = 0;
|
||||
}
|
||||
}
|
||||
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
imageChangesDemo.assetManager = assetManager;
|
||||
imageChangesDemo.loadingComplete = loadingComplete;
|
||||
imageChangesDemo.render = render;
|
||||
};
|
||||
28
spine-ts/spine-widget/demos/meshes.html
Normal file
28
spine-ts/spine-widget/demos/meshes.html
Normal file
@ -0,0 +1,28 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Meshes - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="meshes.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="meshes-timeline" class="slider"></div>
|
||||
<input id="meshes-playbutton" type="button" value="Pause"></input><br>
|
||||
<select id="meshes-skeleton" size="3"></select><br>
|
||||
<input type="checkbox" id="meshes-drawbonescheckbox" style="color: #fff;"></input> Draw bones<br>
|
||||
<input type="checkbox" id="meshes-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles<br>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(meshesDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
149
spine-ts/spine-widget/demos/meshes.js
Normal file
149
spine-ts/spine-widget/demos/meshes.js
Normal file
@ -0,0 +1,149 @@
|
||||
var meshesDemo = function (canvas, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, bounds;
|
||||
var timeKeeper;
|
||||
var skeletons = {};
|
||||
var activeSkeleton = "Orange Girl";
|
||||
var playButton, timeline, isPlaying = true;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas2.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
timeKeeper.update();
|
||||
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
|
||||
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
|
||||
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#meshes-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeline = $("#meshes-timeline").data("slider");
|
||||
timeline.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percent;
|
||||
active.state.update(time - active.playTime);
|
||||
active.state.apply(active.skeleton);
|
||||
active.skeleton.updateWorldTransform(spine.Physics.update);
|
||||
active.playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
var list = $("#meshes-skeleton");
|
||||
for (var skeletonName in skeletons) {
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", skeletonName).text(skeletonName);
|
||||
if (skeletonName === activeSkeleton) option.attr("selected", "selected");
|
||||
list.append(option);
|
||||
}
|
||||
list.change(function () {
|
||||
activeSkeleton = $("#meshes-skeleton option:selected").text();
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
timeline.set(active.playTime / animationDuration);
|
||||
})
|
||||
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
$("#meshes-drawbonescheckbox").click(function () {
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
})
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
$("#meshes-drawmeshtrianglescheckbox").click(function () {
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
|
||||
})
|
||||
}
|
||||
|
||||
function loadSkeleton(name, animation, sequenceSlots) {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json")[name]);
|
||||
var skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName("default");
|
||||
|
||||
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
|
||||
state.setAnimation(0, animation, true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
var offset = new spine.Vector2();
|
||||
var size = new spine.Vector2();
|
||||
skeleton.getBounds(offset, size, []);
|
||||
|
||||
return {
|
||||
skeleton: skeleton,
|
||||
state: state,
|
||||
playTime: 0,
|
||||
bounds: {
|
||||
offset: offset,
|
||||
size: size
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
var active = skeletons[activeSkeleton];
|
||||
var skeleton = active.skeleton;
|
||||
var state = active.state;
|
||||
var offset = active.bounds.offset;
|
||||
var size = active.bounds.size;
|
||||
|
||||
renderer.camera.position.x = offset.x + size.x / 2;
|
||||
renderer.camera.position.y = offset.y + size.y / 2 + 20;
|
||||
renderer.camera.viewportWidth = size.x * 1.1;
|
||||
renderer.camera.viewportHeight = size.y * 1.1;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
active.playTime += delta;
|
||||
while (active.playTime >= animationDuration)
|
||||
active.playTime -= animationDuration;
|
||||
timeline.set(active.playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
}
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
meshesDemo.assetManager = assetManager;
|
||||
meshesDemo.loadingComplete = loadingComplete;
|
||||
meshesDemo.render = render;
|
||||
};
|
||||
27
spine-ts/spine-widget/demos/skins.html
Normal file
27
spine-ts/spine-widget/demos/skins.html
Normal file
@ -0,0 +1,27 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Skins - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="skins.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<select id="skins-skin"></select><br>
|
||||
<button id="skins-randomizeattachments">Random Attachments</button>
|
||||
<button id="skins-swingsword">Swing Sword</button><br>
|
||||
<input id="skins-randomizeskins" type="checkbox" checked=true></input> Randomize skin
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(skinsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
204
spine-ts/spine-widget/demos/skins.js
Normal file
204
spine-ts/spine-widget/demos/skins.js
Normal file
@ -0,0 +1,204 @@
|
||||
var skinsDemo = function (canvas, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, offset, bounds;
|
||||
var timeKeeper;
|
||||
var playButton, timeLine, isPlaying = true, playTime = 0;
|
||||
var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("heroes.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
input = new spine.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("heroes.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").heroes);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName("Assassin");
|
||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||
stateData.defaultMix = 0.2;
|
||||
stateData.setMix("roll", "run", 0);
|
||||
stateData.setMix("jump", "run2", 0);
|
||||
state = new spine.AnimationState(stateData);
|
||||
setupAnimations(state);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
input.addListener({
|
||||
down: function (x, y) {
|
||||
swingSword();
|
||||
},
|
||||
up: function (x, y) { },
|
||||
dragged: function (x, y) { },
|
||||
moved: function (x, y) { }
|
||||
});
|
||||
}
|
||||
|
||||
function setupAnimations(state) {
|
||||
state.addAnimation(0, "idle", true, 1);
|
||||
state.addAnimation(0, "walk", true, 2);
|
||||
state.addAnimation(0, "run", true, 4);
|
||||
state.addAnimation(0, "roll", false, 3);
|
||||
state.addAnimation(0, "run", true, 0);
|
||||
state.addAnimation(0, "run2", true, 1.5);
|
||||
state.addAnimation(0, "jump", false, 3);
|
||||
state.addAnimation(0, "run2", true, 0);
|
||||
state.addAnimation(0, "run", true, 1);
|
||||
state.addAnimation(0, "idle", true, 3);
|
||||
state.addAnimation(0, "idleTired", true, 0.5);
|
||||
state.addAnimation(0, "idle", true, 2);
|
||||
state.addAnimation(0, "walk2", true, 1);
|
||||
state.addAnimation(0, "block", true, 3);
|
||||
state.addAnimation(0, "punch1", false, 1.5);
|
||||
state.addAnimation(0, "block", true, 0);
|
||||
state.addAnimation(0, "punch1", false, 1.5);
|
||||
state.addAnimation(0, "punch2", false, 0);
|
||||
state.addAnimation(0, "block", true, 0);
|
||||
state.addAnimation(0, "hitBig", false, 1.5);
|
||||
state.addAnimation(0, "floorIdle", true, 0);
|
||||
state.addAnimation(0, "floorGetUp", false, 1.5);
|
||||
state.addAnimation(0, "idle", true, 0);
|
||||
state.addAnimation(0, "meleeSwing1-fullBody", false, 1.5);
|
||||
state.addAnimation(0, "idle", true, 0);
|
||||
state.addAnimation(0, "meleeSwing2-fullBody", false, 1.5);
|
||||
state.addAnimation(0, "idle", true, 0);
|
||||
state.addAnimation(0, "idleTired", true, 0.5);
|
||||
state.addAnimation(0, "crouchIdle", true, 1.5);
|
||||
state.addAnimation(0, "crouchWalk", true, 2);
|
||||
state.addAnimation(0, "crouchIdle", true, 2.5).listener = {
|
||||
start: function (trackIndex) {
|
||||
setupAnimations(state);
|
||||
}
|
||||
};
|
||||
|
||||
state.setAnimation(1, "empty", false, 0);
|
||||
state.setAnimation(1, "hideSword", false, 2);
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
var list = $("#skins-skin");
|
||||
for (var skin in skeleton.data.skins) {
|
||||
skin = skeleton.data.skins[skin];
|
||||
if (skin.name == "default") continue;
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", skin.name).text(skin.name);
|
||||
if (skin.name === "Assassin") {
|
||||
option.attr("selected", "selected");
|
||||
skeleton.setSkinByName("Assassin");
|
||||
}
|
||||
list.append(option);
|
||||
}
|
||||
list.change(function () {
|
||||
activeSkin = $("#skins-skin option:selected").text();
|
||||
skeleton.setSkinByName(activeSkin);
|
||||
skeleton.setSlotsToSetupPose();
|
||||
randomizeSkins.checked = false;
|
||||
});
|
||||
|
||||
$("#skins-randomizeattachments").click(randomizeAttachments);
|
||||
$("#skins-swingsword").click(swingSword);
|
||||
randomizeSkins = document.getElementById("skins-randomizeskins");
|
||||
}
|
||||
|
||||
function setSkin(skin) {
|
||||
var slot = skeleton.findSlot("item_near");
|
||||
var weapon = slot.getAttachment();
|
||||
skeleton.setSkin(skin);
|
||||
skeleton.setSlotsToSetupPose();
|
||||
slot.setAttachment(weapon);
|
||||
}
|
||||
|
||||
function swingSword() {
|
||||
state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
|
||||
}
|
||||
|
||||
function randomizeSkin() {
|
||||
var result;
|
||||
var count = 0;
|
||||
for (var skin in skeleton.data.skins) {
|
||||
if (skeleton.data.skins[skin].name === "default") continue;
|
||||
if (Math.random() < 1 / ++count) {
|
||||
result = skeleton.data.skins[skin];
|
||||
}
|
||||
}
|
||||
setSkin(result);
|
||||
$("#skins-skin option").filter(function () {
|
||||
return ($(this).text() == result.name);
|
||||
}).prop("selected", true);
|
||||
}
|
||||
|
||||
function randomizeAttachments() {
|
||||
var skins = [];
|
||||
for (var skin in skeleton.data.skins) {
|
||||
skin = skeleton.data.skins[skin];
|
||||
if (skin.name === "default") continue;
|
||||
skins.push(skin);
|
||||
}
|
||||
|
||||
var newSkin = new spine.Skin("random-skin");
|
||||
for (var slot = 0; slot < skeleton.slots.length; slot++) {
|
||||
var skin = skins[(Math.random() * skins.length - 1) | 0];
|
||||
var attachments = skin.attachments[slot];
|
||||
for (var attachmentName in attachments) {
|
||||
newSkin.setAttachment(slot, attachmentName, attachments[attachmentName]);
|
||||
}
|
||||
}
|
||||
setSkin(newSkin);
|
||||
randomizeSkins.checked = false;
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (randomizeSkins.checked) {
|
||||
var now = Date.now() / 1000;
|
||||
if (now - lastSkinChange > 2) {
|
||||
randomizeSkin();
|
||||
lastSkinChange = now;
|
||||
}
|
||||
}
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x * 1.5 - 125;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
renderer.camera.viewportWidth = bounds.x * 3;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.2;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
var texture = assetManager.get("heroes.png");
|
||||
var width = bounds.x * 1.25;
|
||||
var scale = width / texture.getImage().width;
|
||||
var height = scale * texture.getImage().height;
|
||||
renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
skinsDemo.assetManager = assetManager;
|
||||
skinsDemo.loadingComplete = loadingComplete;
|
||||
skinsDemo.render = render;
|
||||
};
|
||||
27
spine-ts/spine-widget/demos/spritesheets.html
Normal file
27
spine-ts/spine-widget/demos/spritesheets.html
Normal file
@ -0,0 +1,27 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Spine vs Sprite Sheets - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="spritesheets.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<button id="spritesheets-roar">Roar</button>
|
||||
<button id="spritesheets-jump">Jump</button><br>
|
||||
Time multiplier
|
||||
<div id="spritesheets-timeslider" class="slider filled"></div>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(spritesheetsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
141
spine-ts/spine-widget/demos/spritesheets.js
Normal file
141
spine-ts/spine-widget/demos/spritesheets.js
Normal file
@ -0,0 +1,141 @@
|
||||
var spritesheetsDemo = function (canvas, bgColor) {
|
||||
var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8);
|
||||
var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, animationState, offset, bounds;
|
||||
var skeletonSeq, walkAnim, walkLastTime = 0, walkLastTimePrecise = 0;
|
||||
var skeletonAtlas;
|
||||
var viewportWidth, viewportHeight;
|
||||
var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
|
||||
var timeKeeper, input;
|
||||
var playTime = 0, framePlaytime = 0, clickAnim = 0;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas1.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
input = new spine.Input(canvas);
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").raptor);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||
stateData.defaultMix = 0.5;
|
||||
stateData.setMix("jump", "walk", 0.3);
|
||||
animationState = new spine.AnimationState(stateData);
|
||||
animationState.setAnimation(0, "walk", true);
|
||||
animationState.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
skeleton.x -= 60;
|
||||
|
||||
skeletonSeq = new spine.Skeleton(skeletonData);
|
||||
walkAnim = skeletonSeq.data.findAnimation("walk");
|
||||
walkAnim.apply(skeletonSeq, 0, 0, true, null, 1, true, false);
|
||||
skeletonSeq.x += bounds.x + 150;
|
||||
|
||||
viewportWidth = ((700 + bounds.x) - offset.x);
|
||||
viewportHeight = ((0 + bounds.y) - offset.y);
|
||||
resize();
|
||||
setupUI();
|
||||
setupInput();
|
||||
|
||||
$("#spritesheets-overlay").removeClass("overlay-hide");
|
||||
$("#spritesheets-overlay").addClass("overlay");
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
timeSlider = $("#spritesheets-timeslider").data("slider");
|
||||
timeSlider.set(0.5);
|
||||
timeSliderLabel = $("#spritesheets-timeslider-label")[0];
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
input.addListener({
|
||||
down: function (x, y) {
|
||||
setAnimation((clickAnim++ % 2 == 0) ? "roar" : "jump");
|
||||
},
|
||||
up: function (x, y) { },
|
||||
moved: function (x, y) { },
|
||||
dragged: function (x, y) { }
|
||||
});
|
||||
$("#spritesheets-roar").click(function () {
|
||||
setAnimation("roar");
|
||||
});
|
||||
$("#spritesheets-jump").click(function () {
|
||||
setAnimation("jump");
|
||||
});
|
||||
}
|
||||
|
||||
function setAnimation(name) {
|
||||
animationState.setAnimation(0, name, false);
|
||||
animationState.addAnimation(0, "walk", true, 0);
|
||||
}
|
||||
|
||||
function resize() {
|
||||
renderer.camera.position.x = offset.x + viewportWidth / 2 - 25;
|
||||
renderer.camera.position.y = offset.y + viewportHeight / 2 - 100;
|
||||
renderer.camera.viewportWidth = viewportWidth * 1.2;
|
||||
renderer.camera.viewportHeight = viewportHeight * 1.2;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
resize();
|
||||
|
||||
delta *= timeSlider.get();
|
||||
if (timeSliderLabel) {
|
||||
var oldValue = timeSliderLabel.textContent;
|
||||
var newValue = Math.round(timeSlider.get() * 100) + "%";
|
||||
if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
|
||||
}
|
||||
|
||||
var animationDuration = animationState.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration) {
|
||||
playTime -= animationDuration;
|
||||
}
|
||||
|
||||
walkLastTimePrecise += delta;
|
||||
while (walkLastTimePrecise - walkLastTime > 1 / FPS) {
|
||||
var newWalkTime = walkLastTime + 1 / FPS;
|
||||
walkAnim.apply(skeletonSeq, walkLastTime, newWalkTime, true, null, 1, spine.MixBlend.setup, spine.MixDirection.mixIn);
|
||||
walkLastTime = newWalkTime;
|
||||
}
|
||||
skeletonSeq.updateWorldTransform(spine.Physics.update);
|
||||
|
||||
animationState.update(delta);
|
||||
var current = animationState.getCurrent(0);
|
||||
if (current.animation.name == "walk") current.trackTime = walkLastTimePrecise;
|
||||
animationState.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
var frame = frames[currFrame];
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeleton(skeletonSeq, true);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
spritesheetsDemo.assetManager = assetManager;
|
||||
spritesheetsDemo.loadingComplete = loadingComplete;
|
||||
spritesheetsDemo.render = render;
|
||||
};
|
||||
24
spine-ts/spine-widget/demos/stretchyman.html
Normal file
24
spine-ts/spine-widget/demos/stretchyman.html
Normal file
@ -0,0 +1,24 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Strechyman - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="stretchyman.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<input id="stretchyman-drawbones" type="checkbox"></input> Display bones
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(stretchymanDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
157
spine-ts/spine-widget/demos/stretchyman.js
Normal file
157
spine-ts/spine-widget/demos/stretchyman.js
Normal file
@ -0,0 +1,157 @@
|
||||
var stretchymanDemo = function (canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, bounds, state;
|
||||
var timeKeeper;
|
||||
var target = null;
|
||||
var hoverTargets = [];
|
||||
var controlBones = [
|
||||
"back leg controller",
|
||||
"front leg controller",
|
||||
"back arm controller",
|
||||
"front arm controller",
|
||||
"head controller",
|
||||
"hip controller"
|
||||
];
|
||||
var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
|
||||
var kneePos = new spine.Vector2();
|
||||
var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas2.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
input = new spine.Input(canvas);
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").stretchyman);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "idle", true);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
var checkbox = $("#stretchyman-drawbones");
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
checkbox.change(function () {
|
||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
input.addListener({
|
||||
down: function (x, y) {
|
||||
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
|
||||
},
|
||||
up: function (x, y) {
|
||||
target = null;
|
||||
},
|
||||
dragged: function (x, y) {
|
||||
spineDemos.dragged(canvas, renderer, target, x, y);
|
||||
if (target && target.data.name === "head controller") {
|
||||
var hipControl = skeleton.findBone("hip controller");
|
||||
target.x = spine.MathUtils.clamp(target.x, -65, 65);
|
||||
target.y = Math.max(260, target.y);
|
||||
}
|
||||
},
|
||||
moved: function (x, y) {
|
||||
spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function center(middleBone, hipBone, footBone, amount, dir) {
|
||||
temp.set(footBone.worldX + skeleton.x, footBone.worldY + skeleton.y, 0)
|
||||
.sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0));
|
||||
var dist = Math.sqrt(temp.x * temp.x + temp.y * temp.y);
|
||||
temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0);
|
||||
temp.scale(0.5).add(temp3);
|
||||
middleBone.parent.worldToLocal(kneePos.set(temp.x, temp.y));
|
||||
middleBone.x = kneePos.x;
|
||||
middleBone.y = kneePos.y;
|
||||
middleBone.children[0].y = (22 + Math.max(0, amount - dist * 0.3)) * dir;
|
||||
}
|
||||
|
||||
function rotate(handBone, elbowBone) {
|
||||
// can do all this in world space cause handBone is essentially in world space
|
||||
var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize();
|
||||
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180;
|
||||
if (v.y < 0) angle = 360 - angle;
|
||||
handBone.rotation = angle;
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
center(skeleton.findBone("back leg middle"), skeleton.findBone("back leg 1"), skeleton.findBone("back leg controller"), 65, 1);
|
||||
center(skeleton.findBone("front leg middle"), skeleton.findBone("front leg 1"), skeleton.findBone("front leg controller"), 65, 1);
|
||||
center(skeleton.findBone("front arm middle"), skeleton.findBone("front arm 1"), skeleton.findBone("front arm controller"), 90, -1);
|
||||
center(skeleton.findBone("back arm middle"), skeleton.findBone("back arm 1"), skeleton.findBone("back arm controller"), 90, -1);
|
||||
rotate(skeleton.findBone("front arm controller"), skeleton.findBone("front arm elbow"));
|
||||
rotate(skeleton.findBone("back arm controller"), skeleton.findBone("back arm elbow"));
|
||||
var headControl = skeleton.findBone("head controller"), hipControl = skeleton.findBone("hip controller")
|
||||
var head = skeleton.findBone("head");
|
||||
var angle = Math.atan2(headControl.worldY - hipControl.worldY, headControl.worldX - hipControl.worldX) * spine.MathUtils.radDeg;
|
||||
angle = (angle - 90) * 2.5;
|
||||
head.rotation = head.data.rotation + Math.min(90, Math.abs(angle)) * Math.sign(angle);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.2;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.5;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
||||
gl.lineWidth(2);
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
|
||||
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
|
||||
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
|
||||
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
|
||||
}
|
||||
renderer.end();
|
||||
gl.lineWidth(1);
|
||||
}
|
||||
|
||||
init();
|
||||
stretchymanDemo.assetManager = assetManager;
|
||||
stretchymanDemo.loadingComplete = loadingComplete;
|
||||
stretchymanDemo.render = render;
|
||||
};
|
||||
26
spine-ts/spine-widget/demos/tank.html
Normal file
26
spine-ts/spine-widget/demos/tank.html
Normal file
@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tank - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="tank.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="tank-timeline" class="slider"></div>
|
||||
<input id="tank-playbutton" type="button" value="Pause"></input><br>
|
||||
<input id="tank-drawbones" type="checkbox"></input> Display bones
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(tankDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
112
spine-ts/spine-widget/demos/tank.js
Normal file
112
spine-ts/spine-widget/demos/tank.js
Normal file
@ -0,0 +1,112 @@
|
||||
var tankDemo = function (canvas, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, offset, bounds;
|
||||
var timeKeeper;
|
||||
var playButton, timeLine, isPlaying = true, playTime = 0;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas2.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").tank);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "drive", true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
offset.x = -1204.22;
|
||||
bounds.x = 1914.52;
|
||||
bounds.y = 965.78;
|
||||
// skeleton.getBounds(offset, bounds);
|
||||
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#tank-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#tank-timeline").data("slider");
|
||||
timeLine.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percent;
|
||||
state.update(time - playTime);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
$("#tank-drawbones").change(function () {
|
||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration)
|
||||
playTime -= animationDuration;
|
||||
timeLine.set(playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
}
|
||||
|
||||
offset.x = skeleton.findBone("tankRoot").worldX;
|
||||
offset.y = skeleton.findBone("tankRoot").worldY;
|
||||
|
||||
renderer.camera.position.x = offset.x - 300;
|
||||
renderer.camera.position.y = bounds.y - 505;
|
||||
renderer.camera.viewportWidth = bounds.x * 1.2;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.2;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, true);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
tankDemo.assetManager = assetManager;
|
||||
tankDemo.loadingComplete = loadingComplete;
|
||||
tankDemo.render = render;
|
||||
};
|
||||
27
spine-ts/spine-widget/demos/transforms.html
Normal file
27
spine-ts/spine-widget/demos/transforms.html
Normal file
@ -0,0 +1,27 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Transform Constraints - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="transforms.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
Rotation offset
|
||||
<div id="transforms-rotationoffset" class="slider filled"></div><br>
|
||||
Translation mix
|
||||
<div id="transforms-translationmix" class="slider filled"></div>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(transformsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
145
spine-ts/spine-widget/demos/transforms.js
Normal file
145
spine-ts/spine-widget/demos/transforms.js
Normal file
@ -0,0 +1,145 @@
|
||||
var transformsDemo = function (canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper;
|
||||
var rotateHandle;
|
||||
var target = null;
|
||||
var hoverTargets = [null, null, null];
|
||||
var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
|
||||
var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2();
|
||||
var lastRotation = 0;
|
||||
var mix, lastOffset = 0, lastMix = 0.5;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas2.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
input = new spine.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").transforms);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
rotateHandle = skeleton.findBone("rotate-handle");
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
var rotationOffset = $("#transforms-rotationoffset").data("slider");
|
||||
rotationOffset.changed = function (percent) {
|
||||
var val = percent * 360 - 180;
|
||||
var delta = val - lastOffset;
|
||||
lastOffset = val;
|
||||
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
|
||||
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
|
||||
$("#transforms-rotationoffset-label").text(Math.round(val) + "°");
|
||||
};
|
||||
$("#transforms-rotationoffset-label").text("0°");
|
||||
|
||||
var translationMix = $("#transforms-translationmix").data("slider");
|
||||
translationMix.set(0.5);
|
||||
translationMix.changed = function (percent) {
|
||||
var val = percent;
|
||||
var delta = val - lastMix;
|
||||
lastMix = val;
|
||||
var constraint = skeleton.findTransformConstraint("wheel1");
|
||||
constraint.mixX += delta;
|
||||
constraint.mixY += delta;
|
||||
$("#transforms-translationmix-label").text(Math.round(val * 100) + "%");
|
||||
};
|
||||
$("#transforms-translationmix-label").text("50%");
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
var getRotation = function (x, y) {
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
|
||||
var wheel1 = skeleton.findBone("wheel1overlay");
|
||||
var v = coords.sub(new spine.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
|
||||
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
|
||||
if (v.y < 0) angle = 360 - angle;
|
||||
return angle;
|
||||
}
|
||||
input.addListener({
|
||||
down: function (x, y) {
|
||||
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
|
||||
if (target === rotateHandle) lastRotation = getRotation(x, y);
|
||||
},
|
||||
up: function (x, y) {
|
||||
target = null;
|
||||
},
|
||||
dragged: function (x, y) {
|
||||
if (target === rotateHandle) {
|
||||
var rotation = getRotation(x, y);
|
||||
var delta = rotation - lastRotation;
|
||||
skeleton.findBone("wheel1").rotation += delta;
|
||||
lastRotation = rotation;
|
||||
} else
|
||||
spineDemos.dragged(canvas, renderer, target, x, y);
|
||||
},
|
||||
moved: function (x, y) {
|
||||
spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.6;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.2;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
|
||||
gl.lineWidth(2);
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
|
||||
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
|
||||
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
|
||||
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
|
||||
}
|
||||
gl.lineWidth(1);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
transformsDemo.assetManager = assetManager;
|
||||
transformsDemo.loadingComplete = loadingComplete;
|
||||
transformsDemo.render = render;
|
||||
};
|
||||
26
spine-ts/spine-widget/demos/transitions.html
Normal file
26
spine-ts/spine-widget/demos/transitions.html
Normal file
@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Transitions - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="transitions.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
Time multiplier
|
||||
<div id="transitions-timeslider" class="slider filled"></div><br>
|
||||
<button id="transitions-die">Die</button>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(transitionsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
129
spine-ts/spine-widget/demos/transitions.js
Normal file
129
spine-ts/spine-widget/demos/transitions.js
Normal file
@ -0,0 +1,129 @@
|
||||
var transitionsDemo = function (canvas, loadingComplete, bgColor) {
|
||||
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, skeletonNoMix, state, stateNoMix, bounds;
|
||||
var timeSlider, timeSliderLabel;
|
||||
var timeKeeper;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas1.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
input = new spine.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
|
||||
timeSlider = $("#transitions-timeslider").data("slider");
|
||||
timeSlider.set(0.5);
|
||||
timeSliderLabel = $("#transitions-timeslider-label")[0];
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
skeleton = loadSkeleton("spineboy");
|
||||
skeletonNoMix = new spine.Skeleton(skeleton.data);
|
||||
state = createState(0.25);
|
||||
state.multipleMixing = true;
|
||||
setAnimations(state, 0, 0);
|
||||
stateNoMix = createState(0);
|
||||
setAnimations(stateNoMix, -0.25, 0);
|
||||
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
|
||||
skeleton.getBounds(bounds.offset, bounds.size, []);
|
||||
setupInput();
|
||||
$("#transitions-overlay").removeClass("overlay-hide");
|
||||
$("#transitions-overlay").addClass("overlay");
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
$("#transitions-die").click(function () {
|
||||
var entry = state.setAnimation(0, "death", false);
|
||||
setAnimations(state, 0, true, 0);
|
||||
entry.next.mixDuration = 0.1;
|
||||
|
||||
var entry = stateNoMix.setAnimation(0, "death", false);
|
||||
setAnimations(stateNoMix, -0.25, -0.25 + -0.1);
|
||||
});
|
||||
}
|
||||
|
||||
function createState(mix) {
|
||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||
stateData.defaultMix = mix;
|
||||
var state = new spine.AnimationState(stateData);
|
||||
return state;
|
||||
}
|
||||
|
||||
function setAnimations(state, delay, first) {
|
||||
state.addAnimation(0, "idle", true, first);
|
||||
state.addAnimation(0, "walk", true, 0.6);
|
||||
state.addAnimation(0, "jump", false, 1);
|
||||
state.addAnimation(0, "run", true, delay);
|
||||
state.addAnimation(0, "walk", true, 1.2);
|
||||
state.addAnimation(0, "run", true, 0.5);
|
||||
state.addAnimation(0, "jump", false, 1);
|
||||
state.addAnimation(0, "run", true, delay);
|
||||
state.addAnimation(0, "jump", true, 0.5);
|
||||
state.addAnimation(0, "walk", true, delay).listener = {
|
||||
start: function (trackIndex) {
|
||||
setAnimations(state, delay, 0.6);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function loadSkeleton(name) {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json")[name]);
|
||||
var skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName("default");
|
||||
return skeleton;
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta * timeSlider.get();
|
||||
if (timeSliderLabel) {
|
||||
var oldValue = timeSliderLabel.textContent;
|
||||
var newValue = Math.round(timeSlider.get() * 100) + "%";
|
||||
if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
|
||||
}
|
||||
|
||||
var offset = bounds.offset;
|
||||
var size = bounds.size;
|
||||
|
||||
renderer.camera.position.x = offset.x + size.x - 50;
|
||||
renderer.camera.position.y = offset.y + size.y / 2 - 40;
|
||||
renderer.camera.viewportWidth = size.x * 2;
|
||||
renderer.camera.viewportHeight = size.y * 2;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
skeleton.x = -200;
|
||||
skeleton.y = -100;
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
|
||||
stateNoMix.update(delta);
|
||||
stateNoMix.apply(skeletonNoMix);
|
||||
skeletonNoMix.updateWorldTransform(spine.Physics.update);
|
||||
skeletonNoMix.x = size.x + 45;
|
||||
skeletonNoMix.y = -100;
|
||||
renderer.drawSkeleton(skeletonNoMix, true);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
transitionsDemo.assetManager = assetManager;
|
||||
transitionsDemo.loadingComplete = loadingComplete;
|
||||
transitionsDemo.render = render;
|
||||
};
|
||||
207
spine-ts/spine-widget/demos/utils.js
Normal file
207
spine-ts/spine-widget/demos/utils.js
Normal file
@ -0,0 +1,207 @@
|
||||
var spineDemos = {
|
||||
HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.25),
|
||||
HOVER_COLOR_OUTER: new spine.Color(1, 1, 1, 1),
|
||||
NON_HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.5),
|
||||
NON_HOVER_COLOR_OUTER: new spine.Color(1, 0, 0, 0.8),
|
||||
demos: [],
|
||||
loopRunning: false,
|
||||
canvases: [],
|
||||
downloader: new spine.Downloader(),
|
||||
path: "assets/"
|
||||
};
|
||||
|
||||
window.onerror = function (msg, url, lineNo, columnNo, error) {
|
||||
var string = msg.toLowerCase();
|
||||
var substring = "script error";
|
||||
if (string.indexOf(substring) > -1)
|
||||
alert('Script Error: See Browser Console for Detail');
|
||||
else {
|
||||
var message = [
|
||||
'Message: ' + msg,
|
||||
'URL: ' + url,
|
||||
'Line: ' + lineNo,
|
||||
'Column: ' + columnNo,
|
||||
'Error object: ' + JSON.stringify(error)
|
||||
].join(' - ');
|
||||
|
||||
alert(message);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
(function () {
|
||||
var timeKeeper = new spine.TimeKeeper();
|
||||
function loop() {
|
||||
timeKeeper.update();
|
||||
if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
|
||||
requestAnimationFrame(loop);
|
||||
var demos = spineDemos.demos;
|
||||
for (var i = 0; i < demos.length; i++) {
|
||||
var demo = demos[i];
|
||||
checkElementVisible(demo);
|
||||
renderDemo(demo);
|
||||
}
|
||||
}
|
||||
|
||||
function renderDemo(demo) {
|
||||
if (demo.visible) {
|
||||
var canvas = demo.canvas;
|
||||
if (canvas.parentElement != demo.placeholder) {
|
||||
$(canvas).detach();
|
||||
demo.placeholder.appendChild(canvas);
|
||||
}
|
||||
let complete = demo.assetManager.isLoadingComplete();
|
||||
if (complete) {
|
||||
if (!demo.loaded) {
|
||||
demo.loaded = true;
|
||||
demo.loadingComplete();
|
||||
}
|
||||
if (spineDemos.log) console.log("Rendering: " + canvas.id);
|
||||
demo.render();
|
||||
}
|
||||
demo.loadingScreen.draw(complete);
|
||||
}
|
||||
}
|
||||
|
||||
function checkElementVisible(demo) {
|
||||
const rect = demo.placeholder.getBoundingClientRect();
|
||||
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
|
||||
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
|
||||
const vertInView = (rect.top <= windowHeight * 1.1) && ((rect.top + rect.height) >= windowHeight * -0.1);
|
||||
const horInView = (rect.left <= windowWidth * 1.1) && ((rect.left + rect.width) >= windowWidth * -0.1);
|
||||
|
||||
demo.visible = (vertInView && horInView);
|
||||
}
|
||||
|
||||
function createCanvases(numCanvases) {
|
||||
for (var i = 0; i < numCanvases; i++) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 1; canvas.height = 1;
|
||||
canvas.context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
|
||||
canvas.id = "canvas-" + i;
|
||||
spineDemos.canvases.push(canvas);
|
||||
}
|
||||
}
|
||||
|
||||
spineDemos.init = function () {
|
||||
var numCanvases = 5;
|
||||
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
||||
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1;
|
||||
if (isFirefox && isAndroid) numCanvases = 2;
|
||||
createCanvases(numCanvases);
|
||||
loadSliders();
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
spineDemos.addDemo = function (demo, placeholder) {
|
||||
var canvas = spineDemos.canvases[spineDemos.demos.length % spineDemos.canvases.length];
|
||||
demo(canvas);
|
||||
demo.placeholder = placeholder;
|
||||
demo.canvas = canvas;
|
||||
demo.visible = false;
|
||||
var renderer = new spine.SceneRenderer(canvas, canvas.context.gl);
|
||||
demo.loadingScreen = new spine.LoadingScreen(renderer);
|
||||
$(window).on('DOMContentLoaded load resize scroll', function () {
|
||||
checkElementVisible(demo);
|
||||
renderDemo(demo);
|
||||
});
|
||||
checkElementVisible(demo);
|
||||
spineDemos.demos.push(demo);
|
||||
}
|
||||
|
||||
var coords = new spine.Vector3();
|
||||
var mouse = new spine.Vector3();
|
||||
spineDemos.closest = function (canvas, renderer, skeleton, controlBones, hoverTargets, x, y) {
|
||||
mouse.set(x, canvas.clientHeight - y, 0)
|
||||
var bestDistance = 24, index = 0;
|
||||
var best;
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
hoverTargets[i] = null;
|
||||
let bone = skeleton.findBone(controlBones[i]);
|
||||
let distance = renderer.camera.worldToScreen(
|
||||
coords.set(bone.worldX, bone.worldY, 0),
|
||||
canvas.clientWidth, canvas.clientHeight).distance(mouse);
|
||||
if (distance < bestDistance) {
|
||||
bestDistance = distance;
|
||||
best = bone;
|
||||
index = i;
|
||||
}
|
||||
}
|
||||
if (best) hoverTargets[index] = best;
|
||||
return best;
|
||||
};
|
||||
|
||||
var position = new spine.Vector3();
|
||||
spineDemos.dragged = function (canvas, renderer, target, x, y) {
|
||||
if (target) {
|
||||
x = spine.MathUtils.clamp(x, 0, canvas.clientWidth)
|
||||
y = spine.MathUtils.clamp(y, 0, canvas.clientHeight);
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
|
||||
if (target.parent !== null) {
|
||||
target.parent.worldToLocal(position.set(coords.x, coords.y));
|
||||
target.x = position.x;
|
||||
target.y = position.y;
|
||||
} else {
|
||||
target.x = coords.x;
|
||||
target.y = coords.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadSliders = function () {
|
||||
$(window).resize(function () {
|
||||
$(".slider").each(function () {
|
||||
$(this).data("slider").resized();
|
||||
});
|
||||
});
|
||||
$(".slider").each(function () {
|
||||
var div = $(this), handle = $("<div/>").appendTo(div);
|
||||
var bg1, bg2;
|
||||
if (div.hasClass("filled")) {
|
||||
bg1 = $("<span/>").appendTo(div)[0].style;
|
||||
bg2 = $("<span/>").appendTo(div)[0].style;
|
||||
}
|
||||
var hw = handle.width(), value = 0, object, lastX;
|
||||
handle = handle[0].style;
|
||||
positionHandle(0);
|
||||
function positionHandle(percent) {
|
||||
var w = div.width();
|
||||
var x = Math.round((w - hw - 3) * percent + 1);
|
||||
if (x != lastX) {
|
||||
lastX = x;
|
||||
handle.transform = "translateX(" + x + "px)";
|
||||
if (bg1) {
|
||||
var w1 = x + hw / 2;
|
||||
bg1.width = w1 + "px";
|
||||
bg2.width = (w - w1) + "px";
|
||||
bg2.left = w1 + "px";
|
||||
}
|
||||
}
|
||||
value = percent;
|
||||
}
|
||||
function mouseEvent(e) {
|
||||
var x = e.pageX;
|
||||
if (!x && e.originalEvent.touches) x = e.originalEvent.touches[0].pageX;
|
||||
var percent = Math.max(0, Math.min(1, (x - div.offset().left - hw / 2) / (div.width() - hw - 2)));
|
||||
positionHandle(percent);
|
||||
if (object.changed) object.changed(percent);
|
||||
}
|
||||
function clearEvents() {
|
||||
$(document).off("mouseup.slider mousemove.slider touchmove.slider touchend.slider");
|
||||
}
|
||||
div.on("mousedown touchstart", function (e) {
|
||||
mouseEvent(e);
|
||||
e.preventDefault(); // Disable text selection.
|
||||
$(document).on("mousemove.slider touchmove.slider", mouseEvent).on("mouseup.slider touchend.slider", clearEvents);
|
||||
});
|
||||
div.data("slider", object = {
|
||||
set: positionHandle,
|
||||
get: function () { return value; },
|
||||
resized: function () {
|
||||
lastX = null;
|
||||
positionHandle(value);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
26
spine-ts/spine-widget/demos/vine.html
Normal file
26
spine-ts/spine-widget/demos/vine.html
Normal file
@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Path Constraints - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../dist/iife/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="vine.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="vine-timeline" class="slider"></div>
|
||||
<input id="vine-playbutton" type="button" value="Pause"></input><br>
|
||||
<input id="vine-drawbones" type="checkbox"></input> Display bones & path
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(vineDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
148
spine-ts/spine-widget/demos/vine.js
Normal file
148
spine-ts/spine-widget/demos/vine.js
Normal file
@ -0,0 +1,148 @@
|
||||
var vineDemo = function (canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper;
|
||||
var target = null;
|
||||
var hoverTargets = [null, null, null, null, null, null];
|
||||
var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"];
|
||||
var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2();
|
||||
var playButton, timeLine, isPlaying = true, playTime = 0;
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init() {
|
||||
gl = canvas.context.gl;
|
||||
renderer = new spine.SceneRenderer(canvas, gl);
|
||||
input = new spine.Input(canvas);
|
||||
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
|
||||
assetManager.loadTextureAtlas("atlas2.atlas");
|
||||
assetManager.loadJson("demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete() {
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").vine);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "animation", true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#vine-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#vine-timeline").data("slider");
|
||||
timeLine.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
time = animationDuration * percent;
|
||||
state.update(time - playTime);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
var checkbox = $("#vine-drawbones");
|
||||
checkbox.change(function () {
|
||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
input.addListener({
|
||||
down: function (x, y) {
|
||||
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
|
||||
},
|
||||
up: function (x, y) {
|
||||
target = null;
|
||||
},
|
||||
dragged: function (x, y) {
|
||||
spineDemos.dragged(canvas, renderer, target, x, y);
|
||||
},
|
||||
moved: function (x, y) {
|
||||
spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function render() {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration) {
|
||||
playTime -= animationDuration;
|
||||
}
|
||||
timeLine.set(playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
}
|
||||
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.2;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.2;
|
||||
renderer.resize(spine.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton);
|
||||
gl.lineWidth(2);
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
|
||||
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
|
||||
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
|
||||
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
|
||||
}
|
||||
gl.lineWidth(1);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
init();
|
||||
vineDemo.assetManager = assetManager;
|
||||
vineDemo.loadingComplete = loadingComplete;
|
||||
vineDemo.render = render;
|
||||
};
|
||||
174
spine-ts/spine-widget/example/assets/celestial-circus-pma.atlas
Normal file
174
spine-ts/spine-widget/example/assets/celestial-circus-pma.atlas
Normal file
@ -0,0 +1,174 @@
|
||||
celestial-circus-pma.png
|
||||
size: 1024, 1024
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.4
|
||||
arm-back-down
|
||||
bounds: 324, 401, 38, 82
|
||||
rotate: 90
|
||||
arm-back-up
|
||||
bounds: 290, 44, 83, 116
|
||||
rotate: 90
|
||||
arm-front-down
|
||||
bounds: 706, 2, 36, 78
|
||||
rotate: 90
|
||||
arm-front-up
|
||||
bounds: 860, 138, 77, 116
|
||||
bench
|
||||
bounds: 725, 256, 189, 48
|
||||
body-bottom
|
||||
bounds: 879, 868, 154, 124
|
||||
rotate: 90
|
||||
body-top
|
||||
bounds: 725, 128, 126, 133
|
||||
rotate: 90
|
||||
chest
|
||||
bounds: 408, 26, 104, 93
|
||||
cloud-back
|
||||
bounds: 752, 378, 202, 165
|
||||
cloud-front
|
||||
bounds: 2, 2, 325, 196
|
||||
rotate: 90
|
||||
collar
|
||||
bounds: 786, 13, 47, 26
|
||||
ear
|
||||
bounds: 1002, 643, 20, 28
|
||||
eye-back-shadow
|
||||
bounds: 428, 395, 14, 10
|
||||
eye-front-shadow
|
||||
bounds: 704, 529, 24, 14
|
||||
eye-reflex-back
|
||||
bounds: 860, 128, 8, 7
|
||||
rotate: 90
|
||||
eye-reflex-front
|
||||
bounds: 726, 386, 10, 7
|
||||
eye-white-back
|
||||
bounds: 835, 23, 13, 16
|
||||
eye-white-front
|
||||
bounds: 1005, 1000, 22, 17
|
||||
rotate: 90
|
||||
eyelashes-down-back
|
||||
bounds: 232, 329, 11, 6
|
||||
rotate: 90
|
||||
eyelashes-down-front
|
||||
bounds: 913, 851, 15, 6
|
||||
rotate: 90
|
||||
eyelashes-top-back
|
||||
bounds: 408, 395, 18, 10
|
||||
eyelashes-top-front
|
||||
bounds: 702, 179, 30, 16
|
||||
rotate: 90
|
||||
face
|
||||
bounds: 514, 26, 93, 102
|
||||
rotate: 90
|
||||
feathers-back
|
||||
bounds: 954, 625, 46, 46
|
||||
feathers-front
|
||||
bounds: 706, 40, 72, 86
|
||||
fringe-middle-back
|
||||
bounds: 200, 6, 33, 52
|
||||
rotate: 90
|
||||
fringe-middle-front
|
||||
bounds: 878, 76, 60, 50
|
||||
rotate: 90
|
||||
fringe-side-back
|
||||
bounds: 780, 41, 27, 94
|
||||
rotate: 90
|
||||
fringe-side-front
|
||||
bounds: 939, 161, 26, 93
|
||||
glove-bottom-back
|
||||
bounds: 954, 572, 51, 41
|
||||
rotate: 90
|
||||
glove-bottom-front
|
||||
bounds: 916, 256, 47, 48
|
||||
hair-back-1
|
||||
bounds: 444, 395, 132, 306
|
||||
rotate: 90
|
||||
hair-back-2
|
||||
bounds: 438, 211, 80, 285
|
||||
rotate: 90
|
||||
hair-back-3
|
||||
bounds: 719, 306, 70, 268
|
||||
rotate: 90
|
||||
hair-back-4
|
||||
bounds: 438, 121, 88, 262
|
||||
rotate: 90
|
||||
hair-back-5
|
||||
bounds: 438, 293, 88, 279
|
||||
rotate: 90
|
||||
hair-back-6
|
||||
bounds: 200, 41, 88, 286
|
||||
hair-hat-shadow
|
||||
bounds: 232, 398, 90, 41
|
||||
hand-back
|
||||
bounds: 954, 673, 60, 47
|
||||
rotate: 90
|
||||
hand-front
|
||||
bounds: 967, 172, 53, 60
|
||||
hat-back
|
||||
bounds: 954, 802, 64, 45
|
||||
rotate: 90
|
||||
hat-front
|
||||
bounds: 780, 70, 96, 56
|
||||
head-back
|
||||
bounds: 618, 17, 102, 86
|
||||
rotate: 90
|
||||
jabot
|
||||
bounds: 967, 234, 70, 55
|
||||
rotate: 90
|
||||
leg-back
|
||||
bounds: 232, 441, 210, 333
|
||||
leg-front
|
||||
bounds: 444, 529, 258, 320
|
||||
logo-brooch
|
||||
bounds: 954, 545, 16, 25
|
||||
mouth
|
||||
bounds: 408, 121, 22, 6
|
||||
neck
|
||||
bounds: 232, 342, 39, 56
|
||||
rotate: 90
|
||||
nose
|
||||
bounds: 742, 529, 6, 7
|
||||
rotate: 90
|
||||
nose-highlight
|
||||
bounds: 719, 300, 4, 4
|
||||
nose-shadow
|
||||
bounds: 869, 128, 7, 8
|
||||
pupil-back
|
||||
bounds: 730, 529, 10, 14
|
||||
pupil-front
|
||||
bounds: 254, 21, 12, 18
|
||||
rope-back
|
||||
bounds: 232, 383, 10, 492
|
||||
rotate: 90
|
||||
rope-front
|
||||
bounds: 232, 383, 10, 492
|
||||
rotate: 90
|
||||
rope-front-bottom
|
||||
bounds: 954, 735, 42, 65
|
||||
skirt
|
||||
bounds: 2, 776, 440, 246
|
||||
sock-bow
|
||||
bounds: 408, 407, 33, 32
|
||||
spine-logo-body
|
||||
bounds: 879, 853, 13, 32
|
||||
rotate: 90
|
||||
star-big
|
||||
bounds: 939, 141, 18, 24
|
||||
rotate: 90
|
||||
star-medium
|
||||
bounds: 742, 537, 6, 8
|
||||
rotate: 90
|
||||
star-small
|
||||
bounds: 719, 378, 3, 4
|
||||
rotate: 90
|
||||
underskirt
|
||||
bounds: 2, 329, 445, 228
|
||||
rotate: 90
|
||||
underskirt-back
|
||||
bounds: 444, 851, 433, 171
|
||||
wing-back
|
||||
bounds: 290, 129, 146, 252
|
||||
wing-front
|
||||
bounds: 704, 545, 304, 248
|
||||
rotate: 90
|
||||
BIN
spine-ts/spine-widget/example/assets/celestial-circus-pma.png
Normal file
BIN
spine-ts/spine-widget/example/assets/celestial-circus-pma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 799 KiB |
3758
spine-ts/spine-widget/example/assets/celestial-circus-pro.json
Normal file
3758
spine-ts/spine-widget/example/assets/celestial-circus-pro.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
spine-ts/spine-widget/example/assets/celestial-circus-pro.skel
Normal file
BIN
spine-ts/spine-widget/example/assets/celestial-circus-pro.skel
Normal file
Binary file not shown.
173
spine-ts/spine-widget/example/assets/celestial-circus.atlas
Normal file
173
spine-ts/spine-widget/example/assets/celestial-circus.atlas
Normal file
@ -0,0 +1,173 @@
|
||||
celestial-circus.png
|
||||
size: 1024, 1024
|
||||
filter: Linear, Linear
|
||||
scale: 0.4
|
||||
arm-back-down
|
||||
bounds: 324, 401, 38, 82
|
||||
rotate: 90
|
||||
arm-back-up
|
||||
bounds: 290, 44, 83, 116
|
||||
rotate: 90
|
||||
arm-front-down
|
||||
bounds: 706, 2, 36, 78
|
||||
rotate: 90
|
||||
arm-front-up
|
||||
bounds: 860, 138, 77, 116
|
||||
bench
|
||||
bounds: 725, 256, 189, 48
|
||||
body-bottom
|
||||
bounds: 879, 868, 154, 124
|
||||
rotate: 90
|
||||
body-top
|
||||
bounds: 725, 128, 126, 133
|
||||
rotate: 90
|
||||
chest
|
||||
bounds: 408, 26, 104, 93
|
||||
cloud-back
|
||||
bounds: 752, 378, 202, 165
|
||||
cloud-front
|
||||
bounds: 2, 2, 325, 196
|
||||
rotate: 90
|
||||
collar
|
||||
bounds: 786, 13, 47, 26
|
||||
ear
|
||||
bounds: 1002, 643, 20, 28
|
||||
eye-back-shadow
|
||||
bounds: 428, 395, 14, 10
|
||||
eye-front-shadow
|
||||
bounds: 704, 529, 24, 14
|
||||
eye-reflex-back
|
||||
bounds: 860, 128, 8, 7
|
||||
rotate: 90
|
||||
eye-reflex-front
|
||||
bounds: 726, 386, 10, 7
|
||||
eye-white-back
|
||||
bounds: 835, 23, 13, 16
|
||||
eye-white-front
|
||||
bounds: 1005, 1000, 22, 17
|
||||
rotate: 90
|
||||
eyelashes-down-back
|
||||
bounds: 232, 329, 11, 6
|
||||
rotate: 90
|
||||
eyelashes-down-front
|
||||
bounds: 913, 851, 15, 6
|
||||
rotate: 90
|
||||
eyelashes-top-back
|
||||
bounds: 408, 395, 18, 10
|
||||
eyelashes-top-front
|
||||
bounds: 702, 179, 30, 16
|
||||
rotate: 90
|
||||
face
|
||||
bounds: 514, 26, 93, 102
|
||||
rotate: 90
|
||||
feathers-back
|
||||
bounds: 954, 625, 46, 46
|
||||
feathers-front
|
||||
bounds: 706, 40, 72, 86
|
||||
fringe-middle-back
|
||||
bounds: 200, 6, 33, 52
|
||||
rotate: 90
|
||||
fringe-middle-front
|
||||
bounds: 878, 76, 60, 50
|
||||
rotate: 90
|
||||
fringe-side-back
|
||||
bounds: 780, 41, 27, 94
|
||||
rotate: 90
|
||||
fringe-side-front
|
||||
bounds: 939, 161, 26, 93
|
||||
glove-bottom-back
|
||||
bounds: 954, 572, 51, 41
|
||||
rotate: 90
|
||||
glove-bottom-front
|
||||
bounds: 916, 256, 47, 48
|
||||
hair-back-1
|
||||
bounds: 444, 395, 132, 306
|
||||
rotate: 90
|
||||
hair-back-2
|
||||
bounds: 438, 211, 80, 285
|
||||
rotate: 90
|
||||
hair-back-3
|
||||
bounds: 719, 306, 70, 268
|
||||
rotate: 90
|
||||
hair-back-4
|
||||
bounds: 438, 121, 88, 262
|
||||
rotate: 90
|
||||
hair-back-5
|
||||
bounds: 438, 293, 88, 279
|
||||
rotate: 90
|
||||
hair-back-6
|
||||
bounds: 200, 41, 88, 286
|
||||
hair-hat-shadow
|
||||
bounds: 232, 398, 90, 41
|
||||
hand-back
|
||||
bounds: 954, 673, 60, 47
|
||||
rotate: 90
|
||||
hand-front
|
||||
bounds: 967, 172, 53, 60
|
||||
hat-back
|
||||
bounds: 954, 802, 64, 45
|
||||
rotate: 90
|
||||
hat-front
|
||||
bounds: 780, 70, 96, 56
|
||||
head-back
|
||||
bounds: 618, 17, 102, 86
|
||||
rotate: 90
|
||||
jabot
|
||||
bounds: 967, 234, 70, 55
|
||||
rotate: 90
|
||||
leg-back
|
||||
bounds: 232, 441, 210, 333
|
||||
leg-front
|
||||
bounds: 444, 529, 258, 320
|
||||
logo-brooch
|
||||
bounds: 954, 545, 16, 25
|
||||
mouth
|
||||
bounds: 408, 121, 22, 6
|
||||
neck
|
||||
bounds: 232, 342, 39, 56
|
||||
rotate: 90
|
||||
nose
|
||||
bounds: 742, 529, 6, 7
|
||||
rotate: 90
|
||||
nose-highlight
|
||||
bounds: 719, 300, 4, 4
|
||||
nose-shadow
|
||||
bounds: 869, 128, 7, 8
|
||||
pupil-back
|
||||
bounds: 730, 529, 10, 14
|
||||
pupil-front
|
||||
bounds: 254, 21, 12, 18
|
||||
rope-back
|
||||
bounds: 232, 383, 10, 492
|
||||
rotate: 90
|
||||
rope-front
|
||||
bounds: 232, 383, 10, 492
|
||||
rotate: 90
|
||||
rope-front-bottom
|
||||
bounds: 954, 735, 42, 65
|
||||
skirt
|
||||
bounds: 2, 776, 440, 246
|
||||
sock-bow
|
||||
bounds: 408, 407, 33, 32
|
||||
spine-logo-body
|
||||
bounds: 879, 853, 13, 32
|
||||
rotate: 90
|
||||
star-big
|
||||
bounds: 939, 141, 18, 24
|
||||
rotate: 90
|
||||
star-medium
|
||||
bounds: 742, 537, 6, 8
|
||||
rotate: 90
|
||||
star-small
|
||||
bounds: 719, 378, 3, 4
|
||||
rotate: 90
|
||||
underskirt
|
||||
bounds: 2, 329, 445, 228
|
||||
rotate: 90
|
||||
underskirt-back
|
||||
bounds: 444, 851, 433, 171
|
||||
wing-back
|
||||
bounds: 290, 129, 146, 252
|
||||
wing-front
|
||||
bounds: 704, 545, 304, 248
|
||||
rotate: 90
|
||||
BIN
spine-ts/spine-widget/example/assets/celestial-circus.png
Normal file
BIN
spine-ts/spine-widget/example/assets/celestial-circus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 790 KiB |
BIN
spine-ts/spine-widget/example/assets/checker.png
Normal file
BIN
spine-ts/spine-widget/example/assets/checker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 B |
435
spine-ts/spine-widget/example/assets/chibi-stickers-pma.atlas
Normal file
435
spine-ts/spine-widget/example/assets/chibi-stickers-pma.atlas
Normal file
@ -0,0 +1,435 @@
|
||||
chibi-stickers-pma.png
|
||||
size: 512, 128
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
common/angry-mark
|
||||
bounds: 278, 85, 42, 41
|
||||
common/big-purple-fear
|
||||
bounds: 2, 54, 134, 72
|
||||
common/big-tear
|
||||
bounds: 138, 93, 33, 82
|
||||
rotate: 90
|
||||
common/eye-3
|
||||
bounds: 226, 25, 15, 26
|
||||
common/eye-closed-happy
|
||||
bounds: 267, 7, 25, 9
|
||||
rotate: 90
|
||||
common/eye-dafault
|
||||
bounds: 203, 20, 22, 21
|
||||
rotate: 90
|
||||
common/eye-equal
|
||||
bounds: 308, 43, 25, 15
|
||||
common/eye-fire
|
||||
bounds: 278, 57, 26, 28
|
||||
rotate: 90
|
||||
common/eye-half-open
|
||||
bounds: 138, 2, 26, 16
|
||||
common/eye-heart
|
||||
bounds: 308, 60, 26, 23
|
||||
common/eye-reverse-v
|
||||
bounds: 166, 2, 26, 16
|
||||
common/eye-sideway-v
|
||||
bounds: 336, 60, 21, 23
|
||||
common/eye-slant-close
|
||||
bounds: 194, 2, 23, 16
|
||||
common/eye-small-dot
|
||||
bounds: 119, 2, 15, 15
|
||||
common/eye-sparkle
|
||||
bounds: 372, 97, 30, 29
|
||||
common/eye-star
|
||||
bounds: 404, 99, 29, 27
|
||||
common/eye-twirl
|
||||
bounds: 226, 2, 21, 23
|
||||
rotate: 90
|
||||
common/eye-u
|
||||
bounds: 2, 2, 24, 17
|
||||
common/eye-x
|
||||
bounds: 176, 20, 25, 22
|
||||
common/lamp
|
||||
bounds: 138, 44, 47, 65
|
||||
rotate: 90
|
||||
common/mouth-3
|
||||
bounds: 89, 2, 15, 28
|
||||
rotate: 90
|
||||
common/mouth-bracket
|
||||
bounds: 322, 85, 34, 11
|
||||
common/mouth-doubt
|
||||
bounds: 243, 34, 26, 15
|
||||
common/mouth-fangs
|
||||
bounds: 205, 52, 39, 14
|
||||
rotate: 90
|
||||
common/mouth-line
|
||||
bounds: 435, 96, 36, 7
|
||||
common/mouth-neutral
|
||||
bounds: 245, 51, 27, 12
|
||||
common/mouth-o-tall
|
||||
bounds: 221, 53, 22, 33
|
||||
common/mouth-open-smile
|
||||
bounds: 138, 20, 36, 22
|
||||
common/mouth-rectangle
|
||||
bounds: 435, 105, 35, 21
|
||||
common/mouth-reverse-v
|
||||
bounds: 473, 95, 27, 10
|
||||
common/mouth-s
|
||||
bounds: 28, 8, 41, 11
|
||||
common/mouth-smile-little
|
||||
bounds: 117, 19, 33, 19
|
||||
rotate: 90
|
||||
common/mouth-toungue-sticking-out
|
||||
bounds: 245, 65, 31, 21
|
||||
common/mouth-u
|
||||
bounds: 472, 107, 36, 19
|
||||
common/mouth-v
|
||||
bounds: 251, 5, 27, 14
|
||||
rotate: 90
|
||||
common/mouth-x
|
||||
bounds: 335, 38, 21, 20
|
||||
common/purple-fear-lines
|
||||
bounds: 322, 98, 48, 28
|
||||
common/shadow
|
||||
bounds: 2, 21, 113, 31
|
||||
common/small-dash
|
||||
bounds: 404, 88, 9, 20
|
||||
rotate: 90
|
||||
common/small-drop-line
|
||||
bounds: 71, 2, 16, 17
|
||||
common/small-purple-fear
|
||||
bounds: 222, 88, 54, 38
|
||||
common/tear
|
||||
bounds: 274, 36, 20, 19
|
||||
|
||||
chibi-stickers-pma_2.png
|
||||
size: 1024, 256
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
erikari/arm
|
||||
bounds: 981, 164, 28, 90
|
||||
erikari/arm-shoulder-decoration
|
||||
bounds: 790, 149, 32, 43
|
||||
erikari/back-hair
|
||||
bounds: 258, 113, 158, 141
|
||||
erikari/back-hair-long
|
||||
bounds: 2, 34, 220, 254
|
||||
rotate: 90
|
||||
erikari/blush
|
||||
bounds: 981, 133, 29, 18
|
||||
rotate: 90
|
||||
erikari/body
|
||||
bounds: 584, 115, 70, 98
|
||||
erikari/bracelet
|
||||
bounds: 1011, 221, 33, 11
|
||||
rotate: 90
|
||||
erikari/collar
|
||||
bounds: 390, 48, 61, 62
|
||||
erikari/ear
|
||||
bounds: 258, 2, 34, 42
|
||||
erikari/eyebrow
|
||||
bounds: 453, 98, 20, 12
|
||||
erikari/hair-front
|
||||
bounds: 258, 46, 130, 65
|
||||
erikari/hair-side
|
||||
bounds: 656, 149, 43, 132
|
||||
rotate: 90
|
||||
erikari/hat-border
|
||||
bounds: 418, 215, 254, 39
|
||||
erikari/hat-top
|
||||
bounds: 674, 194, 160, 60
|
||||
erikari/head-base
|
||||
bounds: 836, 129, 143, 125
|
||||
erikari/leg
|
||||
bounds: 2, 4, 28, 101
|
||||
rotate: 90
|
||||
erikari/leg-decoration
|
||||
bounds: 770, 134, 36, 13
|
||||
erikari/skirt
|
||||
bounds: 418, 112, 164, 101
|
||||
erikari/strawberries-decoration
|
||||
bounds: 656, 91, 112, 56
|
||||
|
||||
chibi-stickers-pma_3.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
harri/arm
|
||||
bounds: 147, 21, 28, 90
|
||||
rotate: 90
|
||||
harri/back-hair
|
||||
bounds: 2, 107, 158, 141
|
||||
harri/back-hair-long
|
||||
bounds: 147, 51, 40, 80
|
||||
rotate: 90
|
||||
harri/beard
|
||||
bounds: 2, 2, 10, 11
|
||||
harri/blush
|
||||
bounds: 265, 103, 29, 18
|
||||
harri/body
|
||||
bounds: 307, 94, 70, 98
|
||||
rotate: 90
|
||||
harri/body-decoration
|
||||
bounds: 407, 97, 70, 67
|
||||
harri/ear
|
||||
bounds: 229, 57, 34, 42
|
||||
rotate: 90
|
||||
harri/eyebrow
|
||||
bounds: 494, 226, 22, 12
|
||||
rotate: 90
|
||||
harri/hair-front
|
||||
bounds: 2, 15, 143, 90
|
||||
harri/head-base
|
||||
bounds: 162, 123, 143, 125
|
||||
harri/leg
|
||||
bounds: 162, 93, 28, 101
|
||||
rotate: 90
|
||||
harri/sword
|
||||
bounds: 307, 166, 185, 82
|
||||
|
||||
chibi-stickers-pma_4.png
|
||||
size: 1024, 256
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
luke/arm
|
||||
bounds: 930, 224, 28, 90
|
||||
rotate: 90
|
||||
luke/arm-shoulder-decoration
|
||||
bounds: 581, 112, 31, 27
|
||||
rotate: 90
|
||||
luke/back-hair
|
||||
bounds: 173, 111, 158, 141
|
||||
luke/blush
|
||||
bounds: 151, 68, 29, 18
|
||||
rotate: 90
|
||||
luke/body
|
||||
bounds: 700, 123, 70, 98
|
||||
rotate: 90
|
||||
luke/eyebrow
|
||||
bounds: 2, 2, 27, 12
|
||||
luke/face-cover
|
||||
bounds: 2, 99, 169, 153
|
||||
luke/glasses-shadow
|
||||
bounds: 2, 16, 147, 81
|
||||
luke/hair-decoration
|
||||
bounds: 478, 145, 130, 107
|
||||
luke/hair-front
|
||||
bounds: 700, 195, 122, 57
|
||||
luke/head-base
|
||||
bounds: 333, 127, 143, 125
|
||||
luke/leg
|
||||
bounds: 478, 115, 28, 101
|
||||
rotate: 90
|
||||
luke/shield
|
||||
bounds: 610, 148, 88, 104
|
||||
luke/skirt
|
||||
bounds: 930, 191, 81, 31
|
||||
luke/sword
|
||||
bounds: 824, 181, 104, 71
|
||||
|
||||
chibi-stickers-pma_5.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
mario/arm
|
||||
bounds: 244, 2, 28, 90
|
||||
mario/back-hair
|
||||
bounds: 2, 101, 168, 148
|
||||
mario/back-hair-long
|
||||
bounds: 151, 6, 86, 91
|
||||
rotate: 90
|
||||
mario/beard
|
||||
bounds: 2, 6, 147, 93
|
||||
mario/blush
|
||||
bounds: 492, 220, 29, 18
|
||||
rotate: 90
|
||||
mario/body
|
||||
bounds: 317, 111, 70, 98
|
||||
rotate: 90
|
||||
mario/ear
|
||||
bounds: 456, 207, 34, 42
|
||||
mario/eyebrow
|
||||
bounds: 417, 164, 32, 17
|
||||
mario/hair-front
|
||||
bounds: 317, 183, 137, 66
|
||||
mario/head-base
|
||||
bounds: 172, 124, 143, 125
|
||||
mario/leg
|
||||
bounds: 172, 94, 28, 101
|
||||
rotate: 90
|
||||
|
||||
chibi-stickers-pma_6.png
|
||||
size: 1024, 256
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
misaki/arm
|
||||
bounds: 609, 95, 28, 90
|
||||
misaki/back-hair
|
||||
bounds: 194, 105, 158, 141
|
||||
misaki/back-hair-long
|
||||
bounds: 2, 51, 190, 195
|
||||
misaki/belt
|
||||
bounds: 741, 190, 76, 26
|
||||
misaki/blush
|
||||
bounds: 844, 228, 29, 18
|
||||
misaki/body
|
||||
bounds: 641, 176, 70, 98
|
||||
rotate: 90
|
||||
misaki/ear
|
||||
bounds: 144, 7, 34, 42
|
||||
misaki/eyebrow
|
||||
bounds: 194, 54, 30, 12
|
||||
misaki/glasses
|
||||
bounds: 194, 68, 141, 35
|
||||
misaki/glasses-side
|
||||
bounds: 354, 111, 8, 23
|
||||
rotate: 90
|
||||
misaki/hair-front
|
||||
bounds: 499, 187, 140, 59
|
||||
misaki/hair-side
|
||||
bounds: 2, 2, 47, 140
|
||||
rotate: 90
|
||||
misaki/head-base
|
||||
bounds: 354, 121, 143, 125
|
||||
misaki/leg
|
||||
bounds: 741, 218, 28, 101
|
||||
rotate: 90
|
||||
misaki/skirt
|
||||
bounds: 499, 95, 108, 90
|
||||
|
||||
chibi-stickers-pma_7.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
nate/arm
|
||||
bounds: 151, 65, 28, 90
|
||||
rotate: 90
|
||||
nate/back-hair
|
||||
bounds: 2, 109, 158, 141
|
||||
nate/beard
|
||||
bounds: 2, 39, 147, 68
|
||||
nate/blush
|
||||
bounds: 407, 165, 29, 18
|
||||
nate/body
|
||||
bounds: 307, 113, 70, 98
|
||||
rotate: 90
|
||||
nate/ear
|
||||
bounds: 451, 208, 34, 42
|
||||
nate/eyebrow
|
||||
bounds: 265, 111, 27, 12
|
||||
nate/glasses
|
||||
bounds: 2, 2, 141, 35
|
||||
nate/glasses-side
|
||||
bounds: 151, 47, 8, 16
|
||||
nate/hair-front
|
||||
bounds: 307, 185, 142, 65
|
||||
nate/head-base
|
||||
bounds: 162, 125, 143, 125
|
||||
nate/leg
|
||||
bounds: 162, 95, 28, 101
|
||||
rotate: 90
|
||||
|
||||
chibi-stickers-pma_8.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
sinisa/arm
|
||||
bounds: 147, 52, 28, 90
|
||||
rotate: 90
|
||||
sinisa/back-hair
|
||||
bounds: 2, 96, 158, 141
|
||||
sinisa/beard
|
||||
bounds: 307, 192, 139, 45
|
||||
sinisa/blush
|
||||
bounds: 147, 32, 29, 18
|
||||
sinisa/body
|
||||
bounds: 307, 120, 70, 98
|
||||
rotate: 90
|
||||
sinisa/body-decoration
|
||||
bounds: 265, 83, 27, 27
|
||||
sinisa/ear
|
||||
bounds: 448, 195, 34, 42
|
||||
sinisa/eyebrow
|
||||
bounds: 407, 171, 38, 19
|
||||
sinisa/hair-front
|
||||
bounds: 2, 2, 143, 92
|
||||
sinisa/head-base
|
||||
bounds: 162, 112, 143, 125
|
||||
sinisa/leg
|
||||
bounds: 162, 82, 28, 101
|
||||
rotate: 90
|
||||
|
||||
chibi-stickers-pma_9.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
soeren/arm
|
||||
bounds: 254, 47, 28, 90
|
||||
soeren/back-hair
|
||||
bounds: 2, 111, 150, 141
|
||||
soeren/beard
|
||||
bounds: 2, 41, 145, 68
|
||||
soeren/blush
|
||||
bounds: 284, 119, 29, 18
|
||||
soeren/body
|
||||
bounds: 154, 67, 70, 98
|
||||
rotate: 90
|
||||
soeren/ear
|
||||
bounds: 200, 23, 34, 42
|
||||
soeren/eyebrow
|
||||
bounds: 460, 137, 27, 12
|
||||
soeren/glasses
|
||||
bounds: 2, 2, 152, 37
|
||||
soeren/glasses-side
|
||||
bounds: 490, 245, 7, 20
|
||||
rotate: 90
|
||||
soeren/glove
|
||||
bounds: 156, 12, 42, 53
|
||||
soeren/hair-front
|
||||
bounds: 154, 139, 159, 113
|
||||
soeren/head-base
|
||||
bounds: 315, 127, 143, 125
|
||||
soeren/leg
|
||||
bounds: 460, 151, 28, 101
|
||||
|
||||
chibi-stickers-pma_10.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
spineboy/arm
|
||||
bounds: 407, 97, 28, 90
|
||||
rotate: 90
|
||||
spineboy/arm-decoration
|
||||
bounds: 307, 127, 32, 29
|
||||
spineboy/arm-shoulder-decoration
|
||||
bounds: 451, 72, 23, 23
|
||||
spineboy/back-hair
|
||||
bounds: 2, 106, 158, 141
|
||||
spineboy/blush
|
||||
bounds: 2, 2, 29, 18
|
||||
spineboy/body
|
||||
bounds: 307, 55, 70, 98
|
||||
rotate: 90
|
||||
spineboy/ear
|
||||
bounds: 407, 61, 34, 42
|
||||
rotate: 90
|
||||
spineboy/eyebrow
|
||||
bounds: 143, 77, 27, 12
|
||||
rotate: 90
|
||||
spineboy/glasses
|
||||
bounds: 162, 158, 179, 89
|
||||
spineboy/glasses-shadow
|
||||
bounds: 2, 22, 139, 82
|
||||
spineboy/hair-front
|
||||
bounds: 343, 127, 145, 120
|
||||
spineboy/head-base
|
||||
bounds: 162, 31, 143, 125
|
||||
spineboy/leg
|
||||
bounds: 307, 24, 29, 101
|
||||
rotate: 90
|
||||
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_10.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_2.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_3.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_4.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_5.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_6.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_7.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_8.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_9.png
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers-pma_9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
425
spine-ts/spine-widget/example/assets/chibi-stickers.atlas
Normal file
425
spine-ts/spine-widget/example/assets/chibi-stickers.atlas
Normal file
@ -0,0 +1,425 @@
|
||||
chibi-stickers.png
|
||||
size: 512, 128
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
common/angry-mark
|
||||
bounds: 278, 85, 42, 41
|
||||
common/big-purple-fear
|
||||
bounds: 2, 54, 134, 72
|
||||
common/big-tear
|
||||
bounds: 138, 93, 33, 82
|
||||
rotate: 90
|
||||
common/eye-3
|
||||
bounds: 226, 25, 15, 26
|
||||
common/eye-closed-happy
|
||||
bounds: 267, 7, 25, 9
|
||||
rotate: 90
|
||||
common/eye-dafault
|
||||
bounds: 203, 20, 22, 21
|
||||
rotate: 90
|
||||
common/eye-equal
|
||||
bounds: 308, 43, 25, 15
|
||||
common/eye-fire
|
||||
bounds: 278, 57, 26, 28
|
||||
rotate: 90
|
||||
common/eye-half-open
|
||||
bounds: 138, 2, 26, 16
|
||||
common/eye-heart
|
||||
bounds: 308, 60, 26, 23
|
||||
common/eye-reverse-v
|
||||
bounds: 166, 2, 26, 16
|
||||
common/eye-sideway-v
|
||||
bounds: 336, 60, 21, 23
|
||||
common/eye-slant-close
|
||||
bounds: 194, 2, 23, 16
|
||||
common/eye-small-dot
|
||||
bounds: 119, 2, 15, 15
|
||||
common/eye-sparkle
|
||||
bounds: 372, 97, 30, 29
|
||||
common/eye-star
|
||||
bounds: 404, 99, 29, 27
|
||||
common/eye-twirl
|
||||
bounds: 226, 2, 21, 23
|
||||
rotate: 90
|
||||
common/eye-u
|
||||
bounds: 2, 2, 24, 17
|
||||
common/eye-x
|
||||
bounds: 176, 20, 25, 22
|
||||
common/lamp
|
||||
bounds: 138, 44, 47, 65
|
||||
rotate: 90
|
||||
common/mouth-3
|
||||
bounds: 89, 2, 15, 28
|
||||
rotate: 90
|
||||
common/mouth-bracket
|
||||
bounds: 322, 85, 34, 11
|
||||
common/mouth-doubt
|
||||
bounds: 243, 34, 26, 15
|
||||
common/mouth-fangs
|
||||
bounds: 205, 52, 39, 14
|
||||
rotate: 90
|
||||
common/mouth-line
|
||||
bounds: 435, 96, 36, 7
|
||||
common/mouth-neutral
|
||||
bounds: 245, 51, 27, 12
|
||||
common/mouth-o-tall
|
||||
bounds: 221, 53, 22, 33
|
||||
common/mouth-open-smile
|
||||
bounds: 138, 20, 36, 22
|
||||
common/mouth-rectangle
|
||||
bounds: 435, 105, 35, 21
|
||||
common/mouth-reverse-v
|
||||
bounds: 473, 95, 27, 10
|
||||
common/mouth-s
|
||||
bounds: 28, 8, 41, 11
|
||||
common/mouth-smile-little
|
||||
bounds: 117, 19, 33, 19
|
||||
rotate: 90
|
||||
common/mouth-toungue-sticking-out
|
||||
bounds: 245, 65, 31, 21
|
||||
common/mouth-u
|
||||
bounds: 472, 107, 36, 19
|
||||
common/mouth-v
|
||||
bounds: 251, 5, 27, 14
|
||||
rotate: 90
|
||||
common/mouth-x
|
||||
bounds: 335, 38, 21, 20
|
||||
common/purple-fear-lines
|
||||
bounds: 322, 98, 48, 28
|
||||
common/shadow
|
||||
bounds: 2, 21, 113, 31
|
||||
common/small-dash
|
||||
bounds: 404, 88, 9, 20
|
||||
rotate: 90
|
||||
common/small-drop-line
|
||||
bounds: 71, 2, 16, 17
|
||||
common/small-purple-fear
|
||||
bounds: 222, 88, 54, 38
|
||||
common/tear
|
||||
bounds: 274, 36, 20, 19
|
||||
|
||||
chibi-stickers_2.png
|
||||
size: 1024, 256
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
erikari/arm
|
||||
bounds: 981, 164, 28, 90
|
||||
erikari/arm-shoulder-decoration
|
||||
bounds: 790, 149, 32, 43
|
||||
erikari/back-hair
|
||||
bounds: 258, 113, 158, 141
|
||||
erikari/back-hair-long
|
||||
bounds: 2, 34, 220, 254
|
||||
rotate: 90
|
||||
erikari/blush
|
||||
bounds: 981, 133, 29, 18
|
||||
rotate: 90
|
||||
erikari/body
|
||||
bounds: 584, 115, 70, 98
|
||||
erikari/bracelet
|
||||
bounds: 1011, 221, 33, 11
|
||||
rotate: 90
|
||||
erikari/collar
|
||||
bounds: 390, 48, 61, 62
|
||||
erikari/ear
|
||||
bounds: 258, 2, 34, 42
|
||||
erikari/eyebrow
|
||||
bounds: 453, 98, 20, 12
|
||||
erikari/hair-front
|
||||
bounds: 258, 46, 130, 65
|
||||
erikari/hair-side
|
||||
bounds: 656, 149, 43, 132
|
||||
rotate: 90
|
||||
erikari/hat-border
|
||||
bounds: 418, 215, 254, 39
|
||||
erikari/hat-top
|
||||
bounds: 674, 194, 160, 60
|
||||
erikari/head-base
|
||||
bounds: 836, 129, 143, 125
|
||||
erikari/leg
|
||||
bounds: 2, 4, 28, 101
|
||||
rotate: 90
|
||||
erikari/leg-decoration
|
||||
bounds: 770, 134, 36, 13
|
||||
erikari/skirt
|
||||
bounds: 418, 112, 164, 101
|
||||
erikari/strawberries-decoration
|
||||
bounds: 656, 91, 112, 56
|
||||
|
||||
chibi-stickers_3.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
harri/arm
|
||||
bounds: 147, 21, 28, 90
|
||||
rotate: 90
|
||||
harri/back-hair
|
||||
bounds: 2, 107, 158, 141
|
||||
harri/back-hair-long
|
||||
bounds: 147, 51, 40, 80
|
||||
rotate: 90
|
||||
harri/beard
|
||||
bounds: 2, 2, 10, 11
|
||||
harri/blush
|
||||
bounds: 265, 103, 29, 18
|
||||
harri/body
|
||||
bounds: 307, 94, 70, 98
|
||||
rotate: 90
|
||||
harri/body-decoration
|
||||
bounds: 407, 97, 70, 67
|
||||
harri/ear
|
||||
bounds: 229, 57, 34, 42
|
||||
rotate: 90
|
||||
harri/eyebrow
|
||||
bounds: 494, 226, 22, 12
|
||||
rotate: 90
|
||||
harri/hair-front
|
||||
bounds: 2, 15, 143, 90
|
||||
harri/head-base
|
||||
bounds: 162, 123, 143, 125
|
||||
harri/leg
|
||||
bounds: 162, 93, 28, 101
|
||||
rotate: 90
|
||||
harri/sword
|
||||
bounds: 307, 166, 185, 82
|
||||
|
||||
chibi-stickers_4.png
|
||||
size: 1024, 256
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
luke/arm
|
||||
bounds: 930, 224, 28, 90
|
||||
rotate: 90
|
||||
luke/arm-shoulder-decoration
|
||||
bounds: 581, 112, 31, 27
|
||||
rotate: 90
|
||||
luke/back-hair
|
||||
bounds: 173, 111, 158, 141
|
||||
luke/blush
|
||||
bounds: 151, 68, 29, 18
|
||||
rotate: 90
|
||||
luke/body
|
||||
bounds: 700, 123, 70, 98
|
||||
rotate: 90
|
||||
luke/eyebrow
|
||||
bounds: 2, 2, 27, 12
|
||||
luke/face-cover
|
||||
bounds: 2, 99, 169, 153
|
||||
luke/glasses-shadow
|
||||
bounds: 2, 16, 147, 81
|
||||
luke/hair-decoration
|
||||
bounds: 478, 145, 130, 107
|
||||
luke/hair-front
|
||||
bounds: 700, 195, 122, 57
|
||||
luke/head-base
|
||||
bounds: 333, 127, 143, 125
|
||||
luke/leg
|
||||
bounds: 478, 115, 28, 101
|
||||
rotate: 90
|
||||
luke/shield
|
||||
bounds: 610, 148, 88, 104
|
||||
luke/skirt
|
||||
bounds: 930, 191, 81, 31
|
||||
luke/sword
|
||||
bounds: 824, 181, 104, 71
|
||||
|
||||
chibi-stickers_5.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
mario/arm
|
||||
bounds: 244, 2, 28, 90
|
||||
mario/back-hair
|
||||
bounds: 2, 101, 168, 148
|
||||
mario/back-hair-long
|
||||
bounds: 151, 6, 86, 91
|
||||
rotate: 90
|
||||
mario/beard
|
||||
bounds: 2, 6, 147, 93
|
||||
mario/blush
|
||||
bounds: 492, 220, 29, 18
|
||||
rotate: 90
|
||||
mario/body
|
||||
bounds: 317, 111, 70, 98
|
||||
rotate: 90
|
||||
mario/ear
|
||||
bounds: 456, 207, 34, 42
|
||||
mario/eyebrow
|
||||
bounds: 417, 164, 32, 17
|
||||
mario/hair-front
|
||||
bounds: 317, 183, 137, 66
|
||||
mario/head-base
|
||||
bounds: 172, 124, 143, 125
|
||||
mario/leg
|
||||
bounds: 172, 94, 28, 101
|
||||
rotate: 90
|
||||
|
||||
chibi-stickers_6.png
|
||||
size: 1024, 256
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
misaki/arm
|
||||
bounds: 609, 95, 28, 90
|
||||
misaki/back-hair
|
||||
bounds: 194, 105, 158, 141
|
||||
misaki/back-hair-long
|
||||
bounds: 2, 51, 190, 195
|
||||
misaki/belt
|
||||
bounds: 741, 190, 76, 26
|
||||
misaki/blush
|
||||
bounds: 844, 228, 29, 18
|
||||
misaki/body
|
||||
bounds: 641, 176, 70, 98
|
||||
rotate: 90
|
||||
misaki/ear
|
||||
bounds: 144, 7, 34, 42
|
||||
misaki/eyebrow
|
||||
bounds: 194, 54, 30, 12
|
||||
misaki/glasses
|
||||
bounds: 194, 68, 141, 35
|
||||
misaki/glasses-side
|
||||
bounds: 354, 111, 8, 23
|
||||
rotate: 90
|
||||
misaki/hair-front
|
||||
bounds: 499, 187, 140, 59
|
||||
misaki/hair-side
|
||||
bounds: 2, 2, 47, 140
|
||||
rotate: 90
|
||||
misaki/head-base
|
||||
bounds: 354, 121, 143, 125
|
||||
misaki/leg
|
||||
bounds: 741, 218, 28, 101
|
||||
rotate: 90
|
||||
misaki/skirt
|
||||
bounds: 499, 95, 108, 90
|
||||
|
||||
chibi-stickers_7.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
nate/arm
|
||||
bounds: 151, 65, 28, 90
|
||||
rotate: 90
|
||||
nate/back-hair
|
||||
bounds: 2, 109, 158, 141
|
||||
nate/beard
|
||||
bounds: 2, 39, 147, 68
|
||||
nate/blush
|
||||
bounds: 407, 165, 29, 18
|
||||
nate/body
|
||||
bounds: 307, 113, 70, 98
|
||||
rotate: 90
|
||||
nate/ear
|
||||
bounds: 451, 208, 34, 42
|
||||
nate/eyebrow
|
||||
bounds: 265, 111, 27, 12
|
||||
nate/glasses
|
||||
bounds: 2, 2, 141, 35
|
||||
nate/glasses-side
|
||||
bounds: 151, 47, 8, 16
|
||||
nate/hair-front
|
||||
bounds: 307, 185, 142, 65
|
||||
nate/head-base
|
||||
bounds: 162, 125, 143, 125
|
||||
nate/leg
|
||||
bounds: 162, 95, 28, 101
|
||||
rotate: 90
|
||||
|
||||
chibi-stickers_8.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
sinisa/arm
|
||||
bounds: 147, 52, 28, 90
|
||||
rotate: 90
|
||||
sinisa/back-hair
|
||||
bounds: 2, 96, 158, 141
|
||||
sinisa/beard
|
||||
bounds: 307, 192, 139, 45
|
||||
sinisa/blush
|
||||
bounds: 147, 32, 29, 18
|
||||
sinisa/body
|
||||
bounds: 307, 120, 70, 98
|
||||
rotate: 90
|
||||
sinisa/body-decoration
|
||||
bounds: 265, 83, 27, 27
|
||||
sinisa/ear
|
||||
bounds: 448, 195, 34, 42
|
||||
sinisa/eyebrow
|
||||
bounds: 407, 171, 38, 19
|
||||
sinisa/hair-front
|
||||
bounds: 2, 2, 143, 92
|
||||
sinisa/head-base
|
||||
bounds: 162, 112, 143, 125
|
||||
sinisa/leg
|
||||
bounds: 162, 82, 28, 101
|
||||
rotate: 90
|
||||
|
||||
chibi-stickers_9.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
soeren/arm
|
||||
bounds: 254, 47, 28, 90
|
||||
soeren/back-hair
|
||||
bounds: 2, 111, 150, 141
|
||||
soeren/beard
|
||||
bounds: 2, 41, 145, 68
|
||||
soeren/blush
|
||||
bounds: 284, 119, 29, 18
|
||||
soeren/body
|
||||
bounds: 154, 67, 70, 98
|
||||
rotate: 90
|
||||
soeren/ear
|
||||
bounds: 200, 23, 34, 42
|
||||
soeren/eyebrow
|
||||
bounds: 460, 137, 27, 12
|
||||
soeren/glasses
|
||||
bounds: 2, 2, 152, 37
|
||||
soeren/glasses-side
|
||||
bounds: 490, 245, 7, 20
|
||||
rotate: 90
|
||||
soeren/glove
|
||||
bounds: 156, 12, 42, 53
|
||||
soeren/hair-front
|
||||
bounds: 154, 139, 159, 113
|
||||
soeren/head-base
|
||||
bounds: 315, 127, 143, 125
|
||||
soeren/leg
|
||||
bounds: 460, 151, 28, 101
|
||||
|
||||
chibi-stickers_10.png
|
||||
size: 512, 256
|
||||
filter: Linear, Linear
|
||||
scale: 0.5
|
||||
spineboy/arm
|
||||
bounds: 407, 97, 28, 90
|
||||
rotate: 90
|
||||
spineboy/arm-decoration
|
||||
bounds: 307, 127, 32, 29
|
||||
spineboy/arm-shoulder-decoration
|
||||
bounds: 451, 72, 23, 23
|
||||
spineboy/back-hair
|
||||
bounds: 2, 106, 158, 141
|
||||
spineboy/blush
|
||||
bounds: 2, 2, 29, 18
|
||||
spineboy/body
|
||||
bounds: 307, 55, 70, 98
|
||||
rotate: 90
|
||||
spineboy/ear
|
||||
bounds: 407, 61, 34, 42
|
||||
rotate: 90
|
||||
spineboy/eyebrow
|
||||
bounds: 143, 77, 27, 12
|
||||
rotate: 90
|
||||
spineboy/glasses
|
||||
bounds: 162, 158, 179, 89
|
||||
spineboy/glasses-shadow
|
||||
bounds: 2, 22, 139, 82
|
||||
spineboy/hair-front
|
||||
bounds: 343, 127, 145, 120
|
||||
spineboy/head-base
|
||||
bounds: 162, 31, 143, 125
|
||||
spineboy/leg
|
||||
bounds: 307, 24, 29, 101
|
||||
rotate: 90
|
||||
7597
spine-ts/spine-widget/example/assets/chibi-stickers.json
Normal file
7597
spine-ts/spine-widget/example/assets/chibi-stickers.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
spine-ts/spine-widget/example/assets/chibi-stickers.skel
Normal file
BIN
spine-ts/spine-widget/example/assets/chibi-stickers.skel
Normal file
Binary file not shown.
86
spine-ts/spine-widget/example/assets/cloud-pot-pma.atlas
Normal file
86
spine-ts/spine-widget/example/assets/cloud-pot-pma.atlas
Normal file
@ -0,0 +1,86 @@
|
||||
cloud-pot-pma.png
|
||||
size: 1024, 512
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
scale: 0.5
|
||||
cloud-base-1
|
||||
bounds: 2, 300, 233, 210
|
||||
cloud-base-10
|
||||
bounds: 214, 113, 97, 101
|
||||
cloud-base-2
|
||||
bounds: 2, 90, 210, 208
|
||||
cloud-base-3
|
||||
bounds: 237, 346, 175, 164
|
||||
cloud-base-4
|
||||
bounds: 414, 347, 176, 163
|
||||
cloud-base-5
|
||||
bounds: 313, 89, 145, 125
|
||||
cloud-base-6
|
||||
bounds: 744, 374, 161, 136
|
||||
cloud-base-7
|
||||
bounds: 592, 361, 150, 149
|
||||
cloud-base-8
|
||||
bounds: 237, 216, 154, 128
|
||||
cloud-base-9
|
||||
bounds: 907, 402, 107, 108
|
||||
cloud-cheeks
|
||||
bounds: 2, 9, 218, 79
|
||||
cloud-eyes-closed
|
||||
bounds: 744, 350, 132, 22
|
||||
cloud-eyes-open
|
||||
bounds: 592, 333, 133, 26
|
||||
cloud-eyes-reflex
|
||||
bounds: 393, 224, 120, 17
|
||||
rotate: 90
|
||||
cloud-mouth-closed
|
||||
bounds: 907, 374, 49, 16
|
||||
cloud-mouth-open
|
||||
bounds: 222, 15, 59, 35
|
||||
leaf-big
|
||||
bounds: 214, 218, 20, 49
|
||||
leaf-small
|
||||
bounds: 958, 373, 17, 30
|
||||
rotate: 90
|
||||
petal-1
|
||||
bounds: 283, 2, 26, 18
|
||||
petal-2
|
||||
bounds: 283, 22, 28, 17
|
||||
rotate: 90
|
||||
petal-3
|
||||
bounds: 214, 269, 29, 21
|
||||
rotate: 90
|
||||
pot-base
|
||||
bounds: 222, 52, 76, 59
|
||||
pot-eyes-closed
|
||||
bounds: 878, 363, 46, 9
|
||||
pot-eyes-open
|
||||
bounds: 222, 2, 40, 11
|
||||
pot-mouth-open
|
||||
bounds: 990, 374, 14, 16
|
||||
pot-mouth-pouty
|
||||
bounds: 300, 93, 18, 10
|
||||
rotate: 90
|
||||
pot-mouth-smile
|
||||
bounds: 300, 77, 14, 10
|
||||
rotate: 90
|
||||
pot-mouth-smile-big
|
||||
bounds: 878, 352, 20, 9
|
||||
rain-blue
|
||||
bounds: 926, 360, 12, 18
|
||||
rotate: 90
|
||||
rain-color
|
||||
bounds: 264, 4, 9, 17
|
||||
rotate: 90
|
||||
rain-green
|
||||
bounds: 900, 349, 12, 18
|
||||
rotate: 90
|
||||
rain-white
|
||||
bounds: 727, 337, 12, 22
|
||||
rain-white-reflex
|
||||
bounds: 2, 2, 5, 10
|
||||
rotate: 90
|
||||
stem
|
||||
bounds: 907, 392, 8, 105
|
||||
rotate: 90
|
||||
stem-end
|
||||
bounds: 300, 62, 13, 13
|
||||
BIN
spine-ts/spine-widget/example/assets/cloud-pot-pma.png
Normal file
BIN
spine-ts/spine-widget/example/assets/cloud-pot-pma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
842
spine-ts/spine-widget/example/assets/cloud-pot.json
Normal file
842
spine-ts/spine-widget/example/assets/cloud-pot.json
Normal file
@ -0,0 +1,842 @@
|
||||
{
|
||||
"skeleton": {
|
||||
"hash": "CKnF82un6n8",
|
||||
"spine": "4.2.22",
|
||||
"x": -345,
|
||||
"y": -272846.84,
|
||||
"width": 756,
|
||||
"height": 273927.84,
|
||||
"images": "./images/",
|
||||
"audio": ""
|
||||
},
|
||||
"bones": [
|
||||
{ "name": "root" },
|
||||
{ "name": "pot-control", "parent": "root", "x": 5, "y": 42, "color": "8828ffff", "icon": "arrowsB" },
|
||||
{ "name": "cloud", "parent": "pot-control", "x": 26.5, "y": 772, "color": "1ee8c0ff", "icon": "circle" },
|
||||
{ "name": "cloud-base-1", "parent": "cloud", "x": -4, "y": 57, "color": "b0d5eaff" },
|
||||
{ "name": "cloud-base-2", "parent": "cloud-base-1", "x": 148.5, "y": -18.5, "color": "b0d5eaff" },
|
||||
{ "name": "cloud-base-3", "parent": "cloud-base-1", "x": -182, "y": -87.5, "color": "b0d5eaff" },
|
||||
{ "name": "cloud-base-4", "parent": "cloud", "x": -31.5, "y": -77, "color": "b0d5eaff" },
|
||||
{ "name": "cloud-base-5", "parent": "cloud-base-4", "x": 177.5, "y": 8, "color": "b0d5eaff" },
|
||||
{ "name": "cloud-base-6", "parent": "cloud-base-1", "x": -150.5, "y": 40, "color": "b0d5eaff" },
|
||||
{ "name": "cloud-base-7", "parent": "cloud-base-1", "x": 8.5, "y": 36.5, "color": "b0d5eaff" },
|
||||
{ "name": "cloud-base-8", "parent": "cloud-base-2", "x": 3.5, "y": 68.5, "color": "b0d5eaff" },
|
||||
{ "name": "cloud-base-9", "parent": "cloud-base-3", "x": -83.5, "y": 30.5, "color": "b0d5eaff" },
|
||||
{ "name": "cloud-base-10", "parent": "cloud-base-5", "x": 137, "y": 54.5, "color": "b0d5eaff" },
|
||||
{ "name": "rain-blue", "parent": "cloud", "x": 102.49, "y": -26, "color": "2360e3ff", "icon": "diamond" },
|
||||
{ "name": "rain-color", "parent": "cloud", "x": -39.42, "y": -26, "color": "2360e3ff", "icon": "diamond" },
|
||||
{ "name": "rain-green", "parent": "cloud", "x": 35.08, "y": -26, "color": "2360e3ff", "icon": "diamond" },
|
||||
{ "name": "rain-white", "parent": "cloud", "x": -103.92, "y": -26, "color": "2360e3ff", "icon": "diamond" },
|
||||
{ "name": "pot", "parent": "pot-control", "x": -5, "y": -42, "color": "8828ffff" },
|
||||
{ "name": "pot-face", "parent": "pot", "x": -1.06, "y": 28.16, "color": "f38383ff", "icon": "gear" },
|
||||
{
|
||||
"name": "leaf-big",
|
||||
"parent": "pot",
|
||||
"length": 46.73,
|
||||
"rotation": 119.24,
|
||||
"x": 4.04,
|
||||
"y": 95.05,
|
||||
"color": "abe323ff"
|
||||
},
|
||||
{ "name": "leaf-big-tip", "parent": "leaf-big", "length": 46.73, "x": 46.73, "color": "abe323ff" },
|
||||
{
|
||||
"name": "leaf-small",
|
||||
"parent": "pot",
|
||||
"length": 51.32,
|
||||
"rotation": 50.93,
|
||||
"x": 10.16,
|
||||
"y": 96.81,
|
||||
"color": "abe323ff"
|
||||
},
|
||||
{
|
||||
"name": "stem",
|
||||
"parent": "pot",
|
||||
"length": 104.76,
|
||||
"rotation": 90,
|
||||
"x": 7.24,
|
||||
"y": 92.61,
|
||||
"color": "abe323ff"
|
||||
},
|
||||
{ "name": "stem2", "parent": "stem", "length": 69.84, "x": 104.76, "color": "abe323ff" },
|
||||
{ "name": "stem3", "parent": "stem2", "length": 34.92, "x": 69.84, "color": "abe323ff" },
|
||||
{
|
||||
"name": "petal-3",
|
||||
"parent": "stem3",
|
||||
"length": 37.74,
|
||||
"rotation": 1.03,
|
||||
"x": 30.73,
|
||||
"y": 0.64,
|
||||
"color": "2381e3ff"
|
||||
},
|
||||
{
|
||||
"name": "petal-1",
|
||||
"parent": "stem3",
|
||||
"length": 40.11,
|
||||
"rotation": 70.18,
|
||||
"x": 34.13,
|
||||
"y": 3.02,
|
||||
"color": "2381e3ff"
|
||||
},
|
||||
{
|
||||
"name": "petal-2",
|
||||
"parent": "stem3",
|
||||
"length": 48.62,
|
||||
"rotation": -80.34,
|
||||
"x": 32.09,
|
||||
"y": -4.46,
|
||||
"color": "2381e3ff"
|
||||
},
|
||||
{ "name": "cloud-face", "parent": "cloud", "y": 14.93, "color": "9e82ffff", "icon": "arrowsB" }
|
||||
],
|
||||
"slots": [
|
||||
{ "name": "rain/rain-green", "bone": "rain-green", "attachment": "rain-green" },
|
||||
{ "name": "rain/rain-blue", "bone": "rain-blue", "attachment": "rain-blue" },
|
||||
{ "name": "rain/rain-color", "bone": "rain-color", "attachment": "rain-color" },
|
||||
{ "name": "rain/rain-white", "bone": "rain-white", "attachment": "rain-white" },
|
||||
{ "name": "rain/rain-white-reflex", "bone": "rain-white", "attachment": "rain-white-reflex" },
|
||||
{ "name": "flower/petal-1", "bone": "petal-1", "attachment": "petal-1" },
|
||||
{ "name": "flower/petal-2", "bone": "petal-2", "attachment": "petal-2" },
|
||||
{ "name": "flower/petal-3", "bone": "petal-3", "attachment": "petal-3" },
|
||||
{ "name": "flower/stem", "bone": "stem", "attachment": "stem" },
|
||||
{ "name": "flower/leaf-big", "bone": "leaf-big", "attachment": "leaf-big" },
|
||||
{ "name": "flower/leaf-small", "bone": "leaf-small", "attachment": "leaf-small" },
|
||||
{ "name": "flower/stem-end", "bone": "stem3", "attachment": "stem-end" },
|
||||
{ "name": "pot/pot-base", "bone": "pot", "attachment": "pot-base" },
|
||||
{ "name": "pot/pot-mouth", "bone": "pot-face", "attachment": "pot-mouth-smile-big" },
|
||||
{ "name": "pot/pot-eyes", "bone": "pot-face", "attachment": "pot-eyes-open" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-1", "bone": "cloud-base-1", "attachment": "cloud-base-1" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-2", "bone": "cloud-base-2", "attachment": "cloud-base-2" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-3", "bone": "cloud-base-3", "attachment": "cloud-base-3" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-4", "bone": "cloud-base-4", "attachment": "cloud-base-4" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-5", "bone": "cloud-base-5", "attachment": "cloud-base-5" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-6", "bone": "cloud-base-6", "attachment": "cloud-base-6" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-7", "bone": "cloud-base-7", "attachment": "cloud-base-7" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-8", "bone": "cloud-base-8", "attachment": "cloud-base-8" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-9", "bone": "cloud-base-9", "attachment": "cloud-base-9" },
|
||||
{ "name": "cloud/cloud-base/cloud-base-10", "bone": "cloud-base-10", "attachment": "cloud-base-10" },
|
||||
{ "name": "cloud/cloud-cheeks", "bone": "cloud-face", "attachment": "cloud-cheeks" },
|
||||
{ "name": "cloud/cloud-eyes", "bone": "cloud-face", "attachment": "cloud-eyes-open" },
|
||||
{ "name": "cloud/cloud-eyes-reflex", "bone": "cloud-face", "attachment": "cloud-eyes-reflex" },
|
||||
{ "name": "cloud/cloud-mouth", "bone": "cloud-face", "attachment": "cloud-mouth-closed" }
|
||||
],
|
||||
"physics": [
|
||||
{
|
||||
"name": "cloud",
|
||||
"order": 25,
|
||||
"bone": "cloud",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"inertia": 0.5,
|
||||
"strength": 172.8,
|
||||
"damping": 0.8571,
|
||||
"mass": 3
|
||||
},
|
||||
{
|
||||
"name": "cloud-face",
|
||||
"order": 24,
|
||||
"bone": "cloud-face",
|
||||
"x": 0.1923,
|
||||
"y": 0.141,
|
||||
"limit": 500,
|
||||
"inertia": 0.5,
|
||||
"damping": 0.15
|
||||
},
|
||||
{
|
||||
"name": "pot-face",
|
||||
"order": 23,
|
||||
"bone": "pot-face",
|
||||
"x": 0.1667,
|
||||
"y": 0.1026,
|
||||
"limit": 500,
|
||||
"inertia": 0.5,
|
||||
"strength": 137.3,
|
||||
"damping": 0.6078
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-1",
|
||||
"order": 4,
|
||||
"bone": "cloud-base-1",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 500,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-2",
|
||||
"order": 5,
|
||||
"bone": "cloud-base-2",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 300,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-3",
|
||||
"order": 6,
|
||||
"bone": "cloud-base-3",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 300,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-4",
|
||||
"order": 7,
|
||||
"bone": "cloud-base-4",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 500,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-5",
|
||||
"order": 8,
|
||||
"bone": "cloud-base-5",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 300,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-6",
|
||||
"order": 9,
|
||||
"bone": "cloud-base-6",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 300,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-7",
|
||||
"order": 10,
|
||||
"bone": "cloud-base-7",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 300,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-8",
|
||||
"order": 11,
|
||||
"bone": "cloud-base-8",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 300,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-9",
|
||||
"order": 12,
|
||||
"bone": "cloud-base-9",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 300,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "cloud-base/cloud-base-10",
|
||||
"order": 13,
|
||||
"bone": "cloud-base-10",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"limit": 300,
|
||||
"inertia": 0.3741,
|
||||
"strength": 134.7,
|
||||
"damping": 0.8163,
|
||||
"mass": 2.8
|
||||
},
|
||||
{
|
||||
"name": "plant/leaf-big",
|
||||
"order": 14,
|
||||
"bone": "leaf-big",
|
||||
"rotate": 0.7532,
|
||||
"shearX": 0.2468,
|
||||
"limit": 500,
|
||||
"inertia": 0.5,
|
||||
"strength": 160.5,
|
||||
"damping": 0.8367,
|
||||
"mass": 4
|
||||
},
|
||||
{
|
||||
"name": "plant/leaf-big-tip",
|
||||
"order": 22,
|
||||
"bone": "leaf-big-tip",
|
||||
"rotate": 1,
|
||||
"limit": 500,
|
||||
"inertia": 0.5,
|
||||
"strength": 160.5,
|
||||
"damping": 0.8367,
|
||||
"mass": 4
|
||||
},
|
||||
{
|
||||
"name": "plant/leaf-small",
|
||||
"order": 15,
|
||||
"bone": "leaf-small",
|
||||
"rotate": 0.6026,
|
||||
"limit": 500,
|
||||
"inertia": 0.5,
|
||||
"strength": 160.5,
|
||||
"damping": 0.8367,
|
||||
"mass": 4
|
||||
},
|
||||
{
|
||||
"name": "plant/petal-1",
|
||||
"order": 19,
|
||||
"bone": "petal-1",
|
||||
"rotate": 1,
|
||||
"limit": 500,
|
||||
"inertia": 0.5,
|
||||
"strength": 164.6,
|
||||
"damping": 0.6531,
|
||||
"mass": 2.6
|
||||
},
|
||||
{
|
||||
"name": "plant/petal-2",
|
||||
"order": 21,
|
||||
"bone": "petal-2",
|
||||
"rotate": 1,
|
||||
"limit": 500,
|
||||
"inertia": 0.5,
|
||||
"strength": 164.6,
|
||||
"damping": 0.6531,
|
||||
"mass": 2.6
|
||||
},
|
||||
{
|
||||
"name": "plant/petal-3",
|
||||
"order": 20,
|
||||
"bone": "petal-3",
|
||||
"rotate": 1,
|
||||
"limit": 500,
|
||||
"inertia": 0.5,
|
||||
"strength": 164.6,
|
||||
"damping": 0.7823,
|
||||
"mass": 3.83
|
||||
},
|
||||
{
|
||||
"name": "plant/stem",
|
||||
"order": 16,
|
||||
"bone": "stem",
|
||||
"rotate": 0.8205,
|
||||
"limit": 700,
|
||||
"inertia": 0.5,
|
||||
"strength": 152.4,
|
||||
"damping": 0.9388,
|
||||
"mass": 2.6
|
||||
},
|
||||
{
|
||||
"name": "plant/stem2",
|
||||
"order": 17,
|
||||
"bone": "stem2",
|
||||
"rotate": 0.8205,
|
||||
"limit": 700,
|
||||
"inertia": 0.5,
|
||||
"strength": 152.4,
|
||||
"damping": 0.9388,
|
||||
"mass": 2.6
|
||||
},
|
||||
{
|
||||
"name": "plant/stem3",
|
||||
"order": 18,
|
||||
"bone": "stem3",
|
||||
"rotate": 0.8205,
|
||||
"limit": 700,
|
||||
"inertia": 0.5,
|
||||
"strength": 152.4,
|
||||
"damping": 0.9388,
|
||||
"mass": 2.6
|
||||
},
|
||||
{
|
||||
"name": "rain/rain-blue",
|
||||
"order": 3,
|
||||
"bone": "rain-blue",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"strength": 0,
|
||||
"gravity": 70
|
||||
},
|
||||
{
|
||||
"name": "rain/rain-color",
|
||||
"order": 2,
|
||||
"bone": "rain-color",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"strength": 0,
|
||||
"gravity": 70
|
||||
},
|
||||
{
|
||||
"name": "rain/rain-green",
|
||||
"order": 1,
|
||||
"bone": "rain-green",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"strength": 0,
|
||||
"gravity": 70
|
||||
},
|
||||
{ "name": "rain/rain-white", "bone": "rain-white", "x": 1, "y": 1, "strength": 0, "gravity": 70 }
|
||||
],
|
||||
"skins": [
|
||||
{
|
||||
"name": "default",
|
||||
"attachments": {
|
||||
"cloud/cloud-base/cloud-base-1": {
|
||||
"cloud-base-1": { "width": 465, "height": 420 }
|
||||
},
|
||||
"cloud/cloud-base/cloud-base-2": {
|
||||
"cloud-base-2": { "width": 420, "height": 415 }
|
||||
},
|
||||
"cloud/cloud-base/cloud-base-3": {
|
||||
"cloud-base-3": { "width": 349, "height": 327 }
|
||||
},
|
||||
"cloud/cloud-base/cloud-base-4": {
|
||||
"cloud-base-4": { "width": 352, "height": 326 }
|
||||
},
|
||||
"cloud/cloud-base/cloud-base-5": {
|
||||
"cloud-base-5": { "width": 289, "height": 250 }
|
||||
},
|
||||
"cloud/cloud-base/cloud-base-6": {
|
||||
"cloud-base-6": { "width": 322, "height": 272 }
|
||||
},
|
||||
"cloud/cloud-base/cloud-base-7": {
|
||||
"cloud-base-7": { "width": 300, "height": 297 }
|
||||
},
|
||||
"cloud/cloud-base/cloud-base-8": {
|
||||
"cloud-base-8": { "width": 307, "height": 256 }
|
||||
},
|
||||
"cloud/cloud-base/cloud-base-9": {
|
||||
"cloud-base-9": { "width": 214, "height": 216 }
|
||||
},
|
||||
"cloud/cloud-base/cloud-base-10": {
|
||||
"cloud-base-10": { "width": 193, "height": 201 }
|
||||
},
|
||||
"cloud/cloud-cheeks": {
|
||||
"cloud-cheeks": { "x": -19, "y": -53.93, "width": 435, "height": 158 }
|
||||
},
|
||||
"cloud/cloud-eyes": {
|
||||
"cloud-eyes-closed": { "x": -10, "y": -5.43, "width": 263, "height": 43 },
|
||||
"cloud-eyes-open": { "x": -8, "y": -4.43, "width": 265, "height": 51 }
|
||||
},
|
||||
"cloud/cloud-eyes-reflex": {
|
||||
"cloud-eyes-reflex": { "x": -10, "y": 2.07, "width": 239, "height": 34 }
|
||||
},
|
||||
"cloud/cloud-mouth": {
|
||||
"cloud-mouth-closed": { "y": -14.93, "width": 97, "height": 32 },
|
||||
"cloud-mouth-open": { "x": -0.5, "y": -27.93, "width": 118, "height": 70 }
|
||||
},
|
||||
"flower/leaf-big": {
|
||||
"leaf-big": {
|
||||
"type": "mesh",
|
||||
"uvs": [ 1, 1, 0, 1, 0, 0.75, 0, 0.5, 0, 0.25, 0, 0, 1, 0, 1, 0.25, 1, 0.5, 1, 0.75 ],
|
||||
"triangles": [ 8, 3, 7, 3, 4, 7, 7, 4, 6, 4, 5, 6, 0, 1, 9, 1, 2, 9, 9, 2, 8, 2, 3, 8 ],
|
||||
"vertices": [ 1, 19, -5.05, -21.72, 1, 1, 19, -5.05, 18.28, 1, 2, 19, 19.45, 18.28, 0.75483, 20, -27.28, 18.28, 0.24517, 2, 19, 43.95, 18.28, 0.50538, 20, -2.78, 18.28, 0.49462, 2, 19, 68.45, 18.28, 0.25278, 20, 21.72, 18.28, 0.74722, 1, 20, 46.22, 18.28, 1, 1, 20, 46.22, -21.72, 1, 2, 19, 68.45, -21.72, 0.24458, 20, 21.72, -21.72, 0.75542, 2, 19, 43.95, -21.72, 0.4937, 20, -2.78, -21.72, 0.5063, 2, 19, 19.45, -21.72, 0.74651, 20, -27.28, -21.72, 0.25349 ],
|
||||
"hull": 10,
|
||||
"edges": [ 0, 2, 2, 4, 4, 6, 6, 8, 8, 10, 10, 12, 12, 14, 14, 16, 16, 18, 18, 0 ],
|
||||
"width": 40,
|
||||
"height": 98
|
||||
}
|
||||
},
|
||||
"flower/leaf-small": {
|
||||
"leaf-small": { "x": 25.02, "y": 0.4, "rotation": -91.36, "width": 34, "height": 59 }
|
||||
},
|
||||
"flower/petal-1": {
|
||||
"petal-1": { "x": 18.88, "y": -4.54, "rotation": -160.18, "width": 52, "height": 36 }
|
||||
},
|
||||
"flower/petal-2": {
|
||||
"petal-2": { "x": 21.96, "y": 2.06, "rotation": -9.66, "width": 56, "height": 34 }
|
||||
},
|
||||
"flower/petal-3": {
|
||||
"petal-3": { "x": 16.97, "y": -5.71, "rotation": -91.03, "width": 58, "height": 42 }
|
||||
},
|
||||
"flower/stem": {
|
||||
"stem": {
|
||||
"type": "mesh",
|
||||
"uvs": [ 1, 1, 0, 1, 0, 0.90909, 0, 0.81818, 0, 0.72727, 0, 0.63636, 0, 0.54545, 0, 0.45455, 0, 0.36364, 0, 0.27273, 0, 0.18182, 0, 0.09091, 0, 0, 1, 0, 1, 0.09091, 1, 0.18182, 1, 0.27273, 1, 0.36364, 1, 0.45455, 1, 0.54545, 1, 0.63636, 1, 0.72727, 1, 0.81818, 1, 0.90909 ],
|
||||
"triangles": [ 15, 10, 14, 10, 11, 14, 14, 11, 13, 11, 12, 13, 18, 7, 17, 7, 8, 17, 17, 8, 16, 8, 9, 16, 16, 9, 15, 9, 10, 15, 0, 1, 23, 1, 2, 23, 23, 2, 22, 2, 3, 22, 22, 3, 21, 3, 4, 21, 21, 4, 20, 4, 5, 20, 20, 5, 19, 5, 6, 19, 19, 6, 18, 6, 7, 18 ],
|
||||
"vertices": [ 1, 22, -3.61, -6.76, 1, 1, 22, -3.61, 9.24, 1, 3, 22, 15.49, 9.24, 0.97258, 23, -89.27, 9.24, 0.02734, 24, -159.11, 9.24, 8.0E-5, 3, 22, 34.58, 9.24, 0.92758, 23, -70.18, 9.24, 0.07175, 24, -140.02, 9.24, 6.7E-4, 3, 22, 53.67, 9.24, 0.851, 23, -51.09, 9.24, 0.14565, 24, -120.93, 9.24, 0.00335, 3, 22, 72.76, 9.24, 0.73702, 23, -32, 9.24, 0.25075, 24, -101.84, 9.24, 0.01223, 3, 22, 91.85, 9.24, 0.59184, 23, -12.91, 9.24, 0.37282, 24, -82.74, 9.24, 0.03534, 3, 22, 110.94, 9.24, 0.43333, 23, 6.18, 9.24, 0.482, 24, -63.65, 9.24, 0.08467, 3, 22, 130.03, 9.24, 0.28467, 23, 25.27, 9.24, 0.54153, 24, -44.56, 9.24, 0.1738, 3, 22, 149.12, 9.24, 0.16502, 23, 44.37, 9.24, 0.52188, 24, -25.47, 9.24, 0.3131, 3, 22, 168.21, 9.24, 0.08234, 23, 63.46, 9.24, 0.4129, 24, -6.38, 9.24, 0.50477, 3, 22, 187.3, 9.24, 0.03198, 23, 82.55, 9.24, 0.228, 24, 12.71, 9.24, 0.74001, 1, 24, 31.8, 9.24, 1, 1, 24, 31.8, -6.76, 1, 3, 22, 187.3, -6.76, 0.02989, 23, 82.55, -6.76, 0.23389, 24, 12.71, -6.76, 0.73622, 3, 22, 168.21, -6.76, 0.07799, 23, 63.46, -6.76, 0.42357, 24, -6.38, -6.76, 0.49844, 3, 22, 149.12, -6.76, 0.1584, 23, 44.37, -6.76, 0.53549, 24, -25.47, -6.76, 0.30611, 3, 22, 130.03, -6.76, 0.27629, 23, 25.27, -6.76, 0.55594, 24, -44.56, -6.76, 0.16777, 3, 22, 110.94, -6.76, 0.42428, 23, 6.18, -6.76, 0.49529, 24, -63.65, -6.76, 0.08044, 3, 22, 91.85, -6.76, 0.58346, 23, -12.91, -6.76, 0.38366, 24, -82.74, -6.76, 0.03289, 3, 22, 72.76, -6.76, 0.73038, 23, -32, -6.76, 0.25856, 24, -101.84, -6.76, 0.01107, 3, 22, 53.67, -6.76, 0.84652, 23, -51.09, -6.76, 0.15057, 24, -120.93, -6.76, 0.00291, 3, 22, 34.58, -6.76, 0.92506, 23, -70.18, -6.76, 0.0744, 24, -140.02, -6.76, 5.4E-4, 3, 22, 15.49, -6.76, 0.97151, 23, -89.27, -6.76, 0.02843, 24, -159.11, -6.76, 6.0E-5 ],
|
||||
"hull": 24,
|
||||
"edges": [ 0, 2, 2, 4, 4, 6, 6, 8, 8, 10, 10, 12, 12, 14, 14, 16, 16, 18, 18, 20, 20, 22, 22, 24, 24, 26, 26, 28, 28, 30, 30, 32, 32, 34, 34, 36, 36, 38, 38, 40, 40, 42, 42, 44, 44, 46, 46, 0 ],
|
||||
"width": 16,
|
||||
"height": 210
|
||||
}
|
||||
},
|
||||
"flower/stem-end": {
|
||||
"stem-end": { "x": 25.8, "y": -0.26, "rotation": -90, "width": 25, "height": 26 }
|
||||
},
|
||||
"pot/pot-base": {
|
||||
"pot-base": { "x": 5, "y": 42, "width": 152, "height": 118 }
|
||||
},
|
||||
"pot/pot-eyes": {
|
||||
"pot-eyes-closed": { "x": -0.94, "y": 2.34, "width": 92, "height": 17 },
|
||||
"pot-eyes-open": { "x": 0.06, "y": 3.84, "width": 80, "height": 22 }
|
||||
},
|
||||
"pot/pot-mouth": {
|
||||
"pot-mouth-open": { "x": -1.44, "y": -13.66, "width": 27, "height": 31 },
|
||||
"pot-mouth-pouty": { "x": 0.56, "y": -12.66, "width": 35, "height": 19 },
|
||||
"pot-mouth-smile": { "x": 0.56, "y": -12.16, "width": 27, "height": 20 },
|
||||
"pot-mouth-smile-big": { "x": 1.56, "y": -9.16, "width": 39, "height": 18 }
|
||||
},
|
||||
"rain/rain-blue": {
|
||||
"rain-blue": { "width": 23, "height": 36 }
|
||||
},
|
||||
"rain/rain-color": {
|
||||
"rain-color": { "width": 18, "height": 34 }
|
||||
},
|
||||
"rain/rain-green": {
|
||||
"rain-green": { "width": 23, "height": 36 }
|
||||
},
|
||||
"rain/rain-white": {
|
||||
"rain-white": { "width": 23, "height": 44 }
|
||||
},
|
||||
"rain/rain-white-reflex": {
|
||||
"rain-white-reflex": { "x": -0.5, "y": 3.5, "width": 10, "height": 19 }
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"animations": {
|
||||
"playing-in-the-rain": {
|
||||
"slots": {
|
||||
"cloud/cloud-eyes": {
|
||||
"attachment": [
|
||||
{ "time": 0.2, "name": "cloud-eyes-closed" },
|
||||
{ "time": 0.9, "name": "cloud-eyes-open" },
|
||||
{ "time": 1.7667, "name": "cloud-eyes-closed" },
|
||||
{ "time": 1.9333, "name": "cloud-eyes-open" },
|
||||
{ "time": 2.4333, "name": "cloud-eyes-closed" },
|
||||
{ "time": 2.6, "name": "cloud-eyes-open" },
|
||||
{ "time": 3.9333, "name": "cloud-eyes-closed" },
|
||||
{ "time": 4.1, "name": "cloud-eyes-open" }
|
||||
]
|
||||
},
|
||||
"cloud/cloud-mouth": {
|
||||
"attachment": [
|
||||
{ "time": 0.2, "name": "cloud-mouth-open" },
|
||||
{ "time": 0.9, "name": "cloud-mouth-closed" }
|
||||
]
|
||||
},
|
||||
"pot/pot-eyes": {
|
||||
"attachment": [
|
||||
{ "time": 0.1333, "name": "pot-eyes-closed" },
|
||||
{ "time": 0.3, "name": "pot-eyes-open" },
|
||||
{ "time": 1.0667, "name": "pot-eyes-closed" },
|
||||
{ "time": 1.5, "name": "pot-eyes-open" },
|
||||
{ "time": 3.0333, "name": "pot-eyes-closed" },
|
||||
{ "time": 3.2333, "name": "pot-eyes-open" },
|
||||
{ "time": 3.4667, "name": "pot-eyes-closed" },
|
||||
{ "time": 3.6667, "name": "pot-eyes-open" }
|
||||
]
|
||||
},
|
||||
"pot/pot-mouth": {
|
||||
"attachment": [
|
||||
{ "time": 0.1333, "name": "pot-mouth-open" },
|
||||
{ "time": 0.3, "name": "pot-mouth-smile-big" },
|
||||
{ "time": 1.0667, "name": "pot-mouth-pouty" },
|
||||
{ "time": 2.4, "name": "pot-mouth-smile" },
|
||||
{ "time": 3.0333, "name": "pot-mouth-smile-big" }
|
||||
]
|
||||
}
|
||||
},
|
||||
"bones": {
|
||||
"pot": {
|
||||
"rotate": [
|
||||
{ "time": 1.1 },
|
||||
{ "time": 1.2, "value": -12.76 },
|
||||
{ "time": 1.5333, "curve": "stepped" },
|
||||
{ "time": 3.7667 },
|
||||
{ "time": 3.9, "value": 8.28 },
|
||||
{ "time": 4.2333, "value": -4.34 },
|
||||
{ "time": 4.4333 }
|
||||
],
|
||||
"scale": [
|
||||
{},
|
||||
{ "time": 0.2, "y": 0.752 },
|
||||
{ "time": 0.4, "x": 0.845, "y": 1.068 },
|
||||
{ "time": 0.6333 }
|
||||
]
|
||||
},
|
||||
"pot-control": {
|
||||
"translatex": [
|
||||
{
|
||||
"time": 1.0667,
|
||||
"curve": [ 1.222, -203.48, 1.378, -610.44 ]
|
||||
},
|
||||
{ "time": 1.5333, "value": -610.44, "curve": "stepped" },
|
||||
{
|
||||
"time": 2.2333,
|
||||
"value": -610.44,
|
||||
"curve": [ 2.389, -610.44, 2.544, -478.45 ]
|
||||
},
|
||||
{ "time": 2.7, "value": -478.45, "curve": "stepped" },
|
||||
{
|
||||
"time": 3.8333,
|
||||
"value": -478.45,
|
||||
"curve": [ 3.971, -478.45, 4.095, -135.56 ]
|
||||
},
|
||||
{ "time": 4.2333 }
|
||||
],
|
||||
"translatey": [
|
||||
{
|
||||
"time": 1.0333,
|
||||
"curve": [ 1.089, 10.56, 1.144, 44.34 ]
|
||||
},
|
||||
{
|
||||
"time": 1.2,
|
||||
"value": 44.34,
|
||||
"curve": [ 1.256, 44.34, 1.311, 0 ]
|
||||
},
|
||||
{ "time": 1.3667, "curve": "stepped" },
|
||||
{
|
||||
"time": 2.2333,
|
||||
"curve": [ 2.408, 0, 2.392, 44.34 ]
|
||||
},
|
||||
{
|
||||
"time": 2.4333,
|
||||
"value": 44.34,
|
||||
"curve": [ 2.455, 44.34, 2.51, 0 ]
|
||||
},
|
||||
{ "time": 2.6, "curve": "stepped" },
|
||||
{
|
||||
"time": 3.8,
|
||||
"curve": [ 3.841, 14.78, 3.893, 44.34 ]
|
||||
},
|
||||
{
|
||||
"time": 3.9333,
|
||||
"value": 44.34,
|
||||
"curve": [ 4.023, 44.34, 4.111, 14.78 ]
|
||||
},
|
||||
{ "time": 4.2 }
|
||||
]
|
||||
},
|
||||
"cloud-base-1": {
|
||||
"rotate": [
|
||||
{
|
||||
"curve": [ 0.144, -9.36, 0.289, -17.29 ]
|
||||
},
|
||||
{
|
||||
"time": 0.4333,
|
||||
"value": -17.29,
|
||||
"curve": [ 0.5, -17.29, 0.567, -4.32 ]
|
||||
},
|
||||
{ "time": 0.6333 }
|
||||
],
|
||||
"scale": [
|
||||
{
|
||||
"curve": [ 0.089, 1, 0.178, 1.064, 0.089, 1, 0.178, 1.064 ]
|
||||
},
|
||||
{
|
||||
"time": 0.2667,
|
||||
"x": 1.064,
|
||||
"y": 1.064,
|
||||
"curve": [ 0.411, 1.064, 0.556, 1.021, 0.411, 1.064, 0.556, 1.021 ]
|
||||
},
|
||||
{ "time": 0.7 }
|
||||
]
|
||||
},
|
||||
"cloud-base-4": {
|
||||
"rotate": [
|
||||
{
|
||||
"curve": [ 0.1, 5.55, 0.2, 14.81 ]
|
||||
},
|
||||
{
|
||||
"time": 0.3,
|
||||
"value": 14.81,
|
||||
"curve": [ 0.467, 14.81, 0.633, 9.25 ]
|
||||
},
|
||||
{ "time": 0.8 }
|
||||
],
|
||||
"scale": [
|
||||
{
|
||||
"curve": [ 0.089, 1, 0.178, 1.064, 0.089, 1, 0.178, 1.064 ]
|
||||
},
|
||||
{
|
||||
"time": 0.2667,
|
||||
"x": 1.064,
|
||||
"y": 1.064,
|
||||
"curve": [ 0.411, 1.064, 0.556, 1.021, 0.411, 1.064, 0.556, 1.021 ]
|
||||
},
|
||||
{ "time": 0.7 }
|
||||
]
|
||||
},
|
||||
"cloud": {
|
||||
"translate": [
|
||||
{ "time": 0.2333 },
|
||||
{ "time": 0.3333, "y": 30.43 },
|
||||
{ "time": 0.4667 },
|
||||
{ "time": 0.5667, "y": 30.43 },
|
||||
{ "time": 0.6667 },
|
||||
{ "time": 0.7667, "y": 30.43 },
|
||||
{ "time": 0.9333 }
|
||||
]
|
||||
}
|
||||
},
|
||||
"physics": {
|
||||
"rain/rain-blue": {
|
||||
"reset": [
|
||||
{ "time": 0.4667 },
|
||||
{ "time": 0.9333 },
|
||||
{ "time": 1.4 },
|
||||
{ "time": 1.8667 },
|
||||
{ "time": 2.3333 },
|
||||
{ "time": 2.8 },
|
||||
{ "time": 3.2667 },
|
||||
{ "time": 3.7333 },
|
||||
{ "time": 4.2 },
|
||||
{ "time": 4.6667 }
|
||||
]
|
||||
},
|
||||
"rain/rain-color": {
|
||||
"reset": [
|
||||
{ "time": 0.3 },
|
||||
{ "time": 0.7667 },
|
||||
{ "time": 1.2333 },
|
||||
{ "time": 1.7 },
|
||||
{ "time": 2.1667 },
|
||||
{ "time": 2.6333 },
|
||||
{ "time": 3.1 },
|
||||
{ "time": 3.5667 },
|
||||
{ "time": 4.0333 },
|
||||
{ "time": 4.5 }
|
||||
]
|
||||
},
|
||||
"rain/rain-green": {
|
||||
"reset": [
|
||||
{ "time": 0.1333 },
|
||||
{ "time": 0.6 },
|
||||
{ "time": 1.0667 },
|
||||
{ "time": 1.5333 },
|
||||
{ "time": 2 },
|
||||
{ "time": 2.4667 },
|
||||
{ "time": 2.9333 },
|
||||
{ "time": 3.4 },
|
||||
{ "time": 3.8667 },
|
||||
{ "time": 4.3333 }
|
||||
]
|
||||
},
|
||||
"rain/rain-white": {
|
||||
"reset": [
|
||||
{},
|
||||
{ "time": 0.4667 },
|
||||
{ "time": 0.9333 },
|
||||
{ "time": 1.4 },
|
||||
{ "time": 1.8667 },
|
||||
{ "time": 2.3333 },
|
||||
{ "time": 2.8 },
|
||||
{ "time": 3.2667 },
|
||||
{ "time": 3.7333 },
|
||||
{ "time": 4.2 }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"pot-moving-followed-by-rain": {
|
||||
"bones": {
|
||||
"pot-control": {
|
||||
"translate": [
|
||||
{},
|
||||
{ "time": 0.5667, "x": -389.34, "curve": "stepped" },
|
||||
{ "time": 1.1667, "x": -389.34 },
|
||||
{ "time": 2.2, "x": 463.88, "curve": "stepped" },
|
||||
{ "time": 2.4667, "x": 463.88 },
|
||||
{ "time": 3 }
|
||||
]
|
||||
}
|
||||
},
|
||||
"physics": {
|
||||
"rain/rain-blue": {
|
||||
"reset": [
|
||||
{ "time": 0.4667 },
|
||||
{ "time": 0.9333 },
|
||||
{ "time": 1.4 },
|
||||
{ "time": 1.8667 },
|
||||
{ "time": 2.3333 },
|
||||
{ "time": 2.8 },
|
||||
{ "time": 3.2667 }
|
||||
]
|
||||
},
|
||||
"rain/rain-color": {
|
||||
"reset": [
|
||||
{ "time": 0.3 },
|
||||
{ "time": 0.7667 },
|
||||
{ "time": 1.2333 },
|
||||
{ "time": 1.7 },
|
||||
{ "time": 2.1667 },
|
||||
{ "time": 2.6333 },
|
||||
{ "time": 3.1 }
|
||||
]
|
||||
},
|
||||
"rain/rain-green": {
|
||||
"reset": [
|
||||
{ "time": 0.1333 },
|
||||
{ "time": 0.6 },
|
||||
{ "time": 1.0667 },
|
||||
{ "time": 1.5333 },
|
||||
{ "time": 2 },
|
||||
{ "time": 2.4667 },
|
||||
{ "time": 2.9333 }
|
||||
]
|
||||
},
|
||||
"rain/rain-white": {
|
||||
"reset": [
|
||||
{},
|
||||
{ "time": 0.4667 },
|
||||
{ "time": 0.9333 },
|
||||
{ "time": 1.4 },
|
||||
{ "time": 1.8667 },
|
||||
{ "time": 2.3333 },
|
||||
{ "time": 2.8 }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"rain": {
|
||||
"physics": {
|
||||
"rain/rain-blue": {
|
||||
"reset": [
|
||||
{ "time": 0.4667 }
|
||||
]
|
||||
},
|
||||
"rain/rain-color": {
|
||||
"reset": [
|
||||
{ "time": 0.3 }
|
||||
]
|
||||
},
|
||||
"rain/rain-green": {
|
||||
"reset": [
|
||||
{ "time": 0.1333 }
|
||||
]
|
||||
},
|
||||
"rain/rain-white": {
|
||||
"reset": [
|
||||
{}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
spine-ts/spine-widget/example/assets/cloud-pot.skel
Normal file
BIN
spine-ts/spine-widget/example/assets/cloud-pot.skel
Normal file
Binary file not shown.
19
spine-ts/spine-widget/example/assets/coin-pma.atlas
Normal file
19
spine-ts/spine-widget/example/assets/coin-pma.atlas
Normal file
@ -0,0 +1,19 @@
|
||||
coin-pma.png
|
||||
size: 1024, 1024
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
coin-front-logo
|
||||
bounds: 2, 609, 305, 302
|
||||
coin-front-shine-logo
|
||||
bounds: 309, 629, 282, 282
|
||||
coin-front-shine-spineboy
|
||||
bounds: 2, 21, 282, 282
|
||||
coin-front-spineboy
|
||||
bounds: 2, 305, 305, 302
|
||||
coin-side-round
|
||||
bounds: 309, 345, 144, 282
|
||||
coin-side-straight
|
||||
bounds: 2, 2, 17, 282
|
||||
rotate: 90
|
||||
shine
|
||||
bounds: 593, 666, 72, 245
|
||||
BIN
spine-ts/spine-widget/example/assets/coin-pma.png
Normal file
BIN
spine-ts/spine-widget/example/assets/coin-pma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 305 KiB |
259
spine-ts/spine-widget/example/assets/coin-pro.json
Normal file
259
spine-ts/spine-widget/example/assets/coin-pro.json
Normal file
@ -0,0 +1,259 @@
|
||||
{
|
||||
"skeleton": {
|
||||
"hash": "fKr+fe4rKEk",
|
||||
"spine": "4.2.22",
|
||||
"x": -152.5,
|
||||
"y": -151,
|
||||
"width": 305,
|
||||
"height": 302,
|
||||
"images": "./images/",
|
||||
"audio": ""
|
||||
},
|
||||
"bones": [
|
||||
{ "name": "root" },
|
||||
{ "name": "coin-front", "parent": "root" },
|
||||
{ "name": "clipping", "parent": "coin-front" },
|
||||
{ "name": "coin-sides", "parent": "root" },
|
||||
{ "name": "coin-side-round", "parent": "coin-sides" },
|
||||
{ "name": "coin-side-straight", "parent": "coin-sides" },
|
||||
{ "name": "shine", "parent": "root", "x": 243.14 }
|
||||
],
|
||||
"slots": [
|
||||
{ "name": "coin-side", "bone": "coin-side-straight", "color": "ffdb2fff", "attachment": "coin-side-straight" },
|
||||
{ "name": "coin-side-round", "bone": "coin-side-round", "color": "ffdb2fff", "attachment": "coin-side-round" },
|
||||
{ "name": "coin-front-texture", "bone": "coin-front", "color": "868686ff", "attachment": "coin-front-logo" },
|
||||
{ "name": "coin-front-shine", "bone": "coin-front", "color": "888888ff", "dark": "000000", "attachment": "coin-front-shine-logo", "blend": "additive" },
|
||||
{ "name": "clipping", "bone": "clipping", "attachment": "clipping" },
|
||||
{ "name": "shine", "bone": "shine", "color": "ffffff60", "attachment": "shine", "blend": "additive" }
|
||||
],
|
||||
"skins": [
|
||||
{
|
||||
"name": "default",
|
||||
"attachments": {
|
||||
"clipping": {
|
||||
"clipping": {
|
||||
"type": "clipping",
|
||||
"end": "clipping",
|
||||
"vertexCount": 39,
|
||||
"vertices": [ 0.1, 140.26, -26.4, 138.14, -50.51, 131.25, -75.42, 119.06, -98.21, 101.04, -115.44, 82.22, -127.63, 62.08, -136.11, 39.03, -140.08, 19.68, -141.41, -0.19, -140.08, -22.98, -134.78, -45.5, -125.24, -66.44, -113.32, -84.19, -98.21, -101.95, -80.46, -116.52, -61.38, -127.39, -38.92, -134.81, -18.22, -139.27, -0.14, -140.58, 24.23, -138.48, 45.45, -132.46, 67.98, -122.5, 86.58, -110.19, 102.56, -95.25, 115.4, -78.75, 125.36, -61.72, 134, -42.33, 138.46, -22.15, 139.24, -0.15, 138.46, 20.29, 133.48, 39.94, 127.19, 58.54, 117.5, 76.1, 104.4, 92.86, 88.42, 108.32, 69.03, 121.42, 50.43, 130.85, 26.32, 137.4 ],
|
||||
"color": "ce3a3aff"
|
||||
}
|
||||
},
|
||||
"coin-front-shine": {
|
||||
"coin-front-shine-logo": { "width": 282, "height": 282 },
|
||||
"coin-front-shine-spineboy": { "width": 282, "height": 282 }
|
||||
},
|
||||
"coin-front-texture": {
|
||||
"coin-front-logo": { "width": 305, "height": 302 },
|
||||
"coin-front-spineboy": { "width": 305, "height": 302 }
|
||||
},
|
||||
"coin-side": {
|
||||
"coin-side-straight": { "x": 0.5, "width": 17, "height": 282 }
|
||||
},
|
||||
"coin-side-round": {
|
||||
"coin-side-round": { "x": -69.43, "width": 144, "height": 282 }
|
||||
},
|
||||
"shine": {
|
||||
"shine": { "y": 0.5, "scaleX": 1.6004, "scaleY": 1.6004, "width": 72, "height": 245 }
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"animations": {
|
||||
"animation": {
|
||||
"slots": {
|
||||
"coin-front-shine": {
|
||||
"rgba2": [
|
||||
{ "light": "7d7d7dff", "dark": "000000" },
|
||||
{ "time": 0.2667, "light": "000000ff", "dark": "7e7e7e" },
|
||||
{ "time": 0.664, "light": "000000ff", "dark": "000000" },
|
||||
{ "time": 1.0333, "light": "7f7f7fff", "dark": "000000" },
|
||||
{ "time": 1.3333, "light": "404040ff", "dark": "000000" },
|
||||
{ "time": 1.6, "light": "000000ff", "dark": "7e7e7e" },
|
||||
{ "time": 2.0022, "light": "000000ff", "dark": "000000" },
|
||||
{ "time": 2.4, "light": "7f7f7fff", "dark": "000000" },
|
||||
{ "time": 2.6667, "light": "7d7d7dff", "dark": "000000" }
|
||||
],
|
||||
"attachment": [
|
||||
{ "time": 0.6667, "name": "coin-front-shine-spineboy" },
|
||||
{ "time": 2, "name": "coin-front-shine-logo" }
|
||||
]
|
||||
},
|
||||
"coin-front-texture": {
|
||||
"rgba": [
|
||||
{ "color": "858585ff" },
|
||||
{ "time": 0.4, "color": "ffffffff" },
|
||||
{
|
||||
"time": 0.6696,
|
||||
"color": "858585ff",
|
||||
"curve": [ 0.725, 0.59, 0.892, 1, 0.725, 0.59, 0.892, 1, 0.725, 0.59, 0.892, 1, 0.725, 1, 0.892, 1 ]
|
||||
},
|
||||
{ "time": 0.9667, "color": "ffffffff" },
|
||||
{ "time": 1.3318, "color": "858585ff", "curve": "stepped" },
|
||||
{ "time": 1.3333, "color": "858585ff" },
|
||||
{ "time": 1.7333, "color": "ffffffff" },
|
||||
{ "time": 1.9982, "color": "858585ff", "curve": "stepped" },
|
||||
{ "time": 2.0022, "color": "858585ff" },
|
||||
{ "time": 2.3, "color": "ffffffff" },
|
||||
{ "time": 2.6667, "color": "858585ff" }
|
||||
],
|
||||
"attachment": [
|
||||
{ "time": 0.6667, "name": "coin-front-spineboy" },
|
||||
{ "time": 2, "name": "coin-front-logo" }
|
||||
]
|
||||
}
|
||||
},
|
||||
"bones": {
|
||||
"coin-front": {
|
||||
"translate": [
|
||||
{},
|
||||
{ "time": 0.664, "x": 8.3, "curve": "stepped" },
|
||||
{
|
||||
"time": 0.6696,
|
||||
"x": -8.3,
|
||||
"curve": [ 0.794, -7.08, 1.167, 0, 0.794, 0, 1.167, 0 ]
|
||||
},
|
||||
{ "time": 1.3333 },
|
||||
{ "time": 1.9982, "x": 8.3, "curve": "stepped" },
|
||||
{ "time": 2.0022, "x": -8.3 },
|
||||
{ "time": 2.6667 }
|
||||
],
|
||||
"scale": [
|
||||
{
|
||||
"curve": [ 0.164, 1, 0.484, 0.091, 0.164, 1, 0.484, 1 ]
|
||||
},
|
||||
{ "time": 0.664, "x": 0, "curve": "stepped" },
|
||||
{
|
||||
"time": 0.6696,
|
||||
"x": 0.003,
|
||||
"curve": [ 0.786, 0.153, 1.167, 1, 0.786, 1, 1.167, 1 ]
|
||||
},
|
||||
{
|
||||
"time": 1.3333,
|
||||
"curve": [ 1.442, 0.992, 1.858, 0.098, 1.442, 1, 1.858, 1 ]
|
||||
},
|
||||
{ "time": 1.9982, "x": 0.003, "curve": "stepped" },
|
||||
{
|
||||
"time": 2.0022,
|
||||
"x": 0.003,
|
||||
"curve": [ 2.123, 0.151, 2.501, 1, 2.123, 1, 2.501, 1 ]
|
||||
},
|
||||
{ "time": 2.6667 }
|
||||
]
|
||||
},
|
||||
"coin-side-round": {
|
||||
"translate": [
|
||||
{},
|
||||
{ "time": 0.664, "x": -6.75, "curve": "stepped" },
|
||||
{
|
||||
"time": 0.6696,
|
||||
"x": 7.03,
|
||||
"curve": [ 0.794, 5.99, 1.167, 0, 0.794, 0, 1.167, 0 ]
|
||||
},
|
||||
{ "time": 1.3333 },
|
||||
{ "time": 1.9982, "x": -6.75, "curve": "stepped" },
|
||||
{ "time": 2.0022, "x": 7.03 },
|
||||
{ "time": 2.6667 }
|
||||
],
|
||||
"scale": [
|
||||
{
|
||||
"curve": [ 0.085, 1, 0.207, 0.789, 0.085, 1, 0.207, 1 ]
|
||||
},
|
||||
{
|
||||
"time": 0.3333,
|
||||
"x": 0.555,
|
||||
"curve": [ 0.449, 0.347, 0.567, 0.122, 0.449, 1, 0.567, 1 ]
|
||||
},
|
||||
{ "time": 0.664, "x": 0.014, "curve": "stepped" },
|
||||
{
|
||||
"time": 0.6696,
|
||||
"x": -0.028,
|
||||
"curve": [ 0.723, -0.126, 0.865, -0.367, 0.723, 1, 0.865, 1 ]
|
||||
},
|
||||
{
|
||||
"time": 1,
|
||||
"x": -0.609,
|
||||
"curve": [ 1.053, -0.778, 1.29, -0.997, 1.053, 1, 1.29, 1 ]
|
||||
},
|
||||
{ "time": 1.3318, "x": -1, "curve": "stepped" },
|
||||
{
|
||||
"time": 1.3333,
|
||||
"curve": [ 1.384, 0.997, 1.439, 0.94, 1.384, 1, 1.439, 1 ]
|
||||
},
|
||||
{
|
||||
"time": 1.5,
|
||||
"x": 0.852,
|
||||
"curve": [ 1.564, 0.748, 1.703, 0.509, 1.564, 1, 1.703, 1 ]
|
||||
},
|
||||
{
|
||||
"time": 1.8,
|
||||
"x": 0.315,
|
||||
"curve": [ 1.873, 0.13, 1.987, 0.015, 1.873, 1, 1.987, 1 ]
|
||||
},
|
||||
{ "time": 1.9982, "x": 0.014, "curve": "stepped" },
|
||||
{
|
||||
"time": 2.0022,
|
||||
"x": -0.028,
|
||||
"curve": [ 2.039, -0.072, 2.123, -0.239, 2.039, 1, 2.123, 1 ]
|
||||
},
|
||||
{
|
||||
"time": 2.2018,
|
||||
"x": -0.365,
|
||||
"curve": [ 2.269, -0.513, 2.337, -0.635, 2.269, 1, 2.337, 1 ]
|
||||
},
|
||||
{
|
||||
"time": 2.4,
|
||||
"x": -0.731,
|
||||
"curve": [ 2.503, -0.871, 2.596, -0.961, 2.503, 1, 2.596, 1 ]
|
||||
},
|
||||
{
|
||||
"time": 2.6592,
|
||||
"x": -1,
|
||||
"curve": [ 2.661, -1, 2.665, 1, 2.661, 1, 2.665, 1 ]
|
||||
},
|
||||
{ "time": 2.6667 }
|
||||
]
|
||||
},
|
||||
"shine": {
|
||||
"translate": [
|
||||
{
|
||||
"curve": [ 0.167, 0, 0.5, -473.39, 0.167, 0, 0.5, 0 ]
|
||||
},
|
||||
{
|
||||
"time": 0.6667,
|
||||
"x": -473.39,
|
||||
"curve": [ 0.833, -473.39, 1.167, -33.16, 0.833, 0, 1.167, 0 ]
|
||||
},
|
||||
{
|
||||
"time": 1.3333,
|
||||
"x": -33.16,
|
||||
"curve": [ 1.5, -33.16, 1.833, -473.39, 1.5, 0, 1.833, 0 ]
|
||||
},
|
||||
{
|
||||
"time": 2,
|
||||
"x": -473.39,
|
||||
"curve": [ 2.167, -473.39, 2.5, 0, 2.167, 0, 2.5, 0 ]
|
||||
},
|
||||
{ "time": 2.6667 }
|
||||
]
|
||||
}
|
||||
},
|
||||
"drawOrder": [
|
||||
{
|
||||
"time": 0.6667,
|
||||
"offsets": [
|
||||
{ "slot": "coin-side", "offset": 2 }
|
||||
]
|
||||
},
|
||||
{ "time": 0.6696 },
|
||||
{
|
||||
"time": 1.9982,
|
||||
"offsets": [
|
||||
{ "slot": "coin-side", "offset": 2 }
|
||||
]
|
||||
},
|
||||
{ "time": 2.0022 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
spine-ts/spine-widget/example/assets/coin-pro.skel
Normal file
BIN
spine-ts/spine-widget/example/assets/coin-pro.skel
Normal file
Binary file not shown.
1079
spine-ts/spine-widget/example/assets/dragon-ess.json
Normal file
1079
spine-ts/spine-widget/example/assets/dragon-ess.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
spine-ts/spine-widget/example/assets/dragon-ess.skel
Normal file
BIN
spine-ts/spine-widget/example/assets/dragon-ess.skel
Normal file
Binary file not shown.
117
spine-ts/spine-widget/example/assets/dragon-pma.atlas
Normal file
117
spine-ts/spine-widget/example/assets/dragon-pma.atlas
Normal file
@ -0,0 +1,117 @@
|
||||
dragon-pma.png
|
||||
size: 1024, 1024
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
front-toe-a
|
||||
bounds: 797, 381, 29, 50
|
||||
front-toe-b
|
||||
bounds: 942, 118, 56, 57
|
||||
head
|
||||
bounds: 647, 81, 296, 260
|
||||
rotate: 90
|
||||
left-front-leg
|
||||
bounds: 942, 250, 84, 57
|
||||
rotate: 90
|
||||
left-front-thigh
|
||||
bounds: 852, 7, 84, 72
|
||||
left-wing01
|
||||
bounds: 736, 433, 264, 589
|
||||
right-rear-toe
|
||||
bounds: 647, 2, 109, 77
|
||||
right-wing01
|
||||
bounds: 2, 379, 365, 643
|
||||
right-wing02
|
||||
bounds: 369, 379, 365, 643
|
||||
right-wing03
|
||||
bounds: 2, 12, 365, 643
|
||||
rotate: 90
|
||||
tail03
|
||||
bounds: 758, 6, 73, 92
|
||||
rotate: 90
|
||||
tail04
|
||||
bounds: 942, 177, 56, 71
|
||||
tail05
|
||||
bounds: 736, 379, 52, 59
|
||||
rotate: 90
|
||||
tail06
|
||||
bounds: 942, 336, 95, 68
|
||||
rotate: 90
|
||||
thiagobrayner
|
||||
bounds: 909, 81, 350, 31
|
||||
rotate: 90
|
||||
|
||||
dragon-pma_2.png
|
||||
size: 1024, 1024
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
back
|
||||
bounds: 795, 32, 190, 185
|
||||
chin
|
||||
bounds: 647, 157, 214, 146
|
||||
rotate: 90
|
||||
left-rear-leg
|
||||
bounds: 795, 219, 206, 177
|
||||
rotate: 90
|
||||
left-wing02
|
||||
bounds: 736, 427, 264, 589
|
||||
right-wing04
|
||||
bounds: 2, 373, 365, 643
|
||||
right-wing05
|
||||
bounds: 369, 373, 365, 643
|
||||
right-wing06
|
||||
bounds: 2, 6, 365, 643
|
||||
rotate: 90
|
||||
tail01
|
||||
bounds: 647, 2, 120, 153
|
||||
|
||||
dragon-pma_3.png
|
||||
size: 1024, 1024
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
chest
|
||||
bounds: 740, 299, 136, 122
|
||||
left-rear-thigh
|
||||
bounds: 647, 218, 91, 149
|
||||
left-wing03
|
||||
bounds: 736, 423, 264, 589
|
||||
right-front-leg
|
||||
bounds: 850, 196, 101, 89
|
||||
rotate: 90
|
||||
right-front-thigh
|
||||
bounds: 740, 189, 108, 108
|
||||
right-rear-leg
|
||||
bounds: 878, 321, 116, 100
|
||||
right-rear-thigh
|
||||
bounds: 647, 67, 91, 149
|
||||
right-wing07
|
||||
bounds: 2, 369, 365, 643
|
||||
right-wing08
|
||||
bounds: 369, 369, 365, 643
|
||||
right-wing09
|
||||
bounds: 2, 2, 365, 643
|
||||
rotate: 90
|
||||
tail02
|
||||
bounds: 740, 67, 95, 120
|
||||
|
||||
dragon-pma_4.png
|
||||
size: 1024, 1024
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
left-wing04
|
||||
bounds: 2, 268, 264, 589
|
||||
left-wing05
|
||||
bounds: 268, 268, 264, 589
|
||||
left-wing06
|
||||
bounds: 534, 268, 264, 589
|
||||
left-wing07
|
||||
bounds: 2, 2, 264, 589
|
||||
rotate: 90
|
||||
|
||||
dragon-pma_5.png
|
||||
size: 1024, 1024
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
left-wing08
|
||||
bounds: 2, 2, 264, 589
|
||||
left-wing09
|
||||
bounds: 268, 2, 264, 589
|
||||
BIN
spine-ts/spine-widget/example/assets/dragon-pma.png
Normal file
BIN
spine-ts/spine-widget/example/assets/dragon-pma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
BIN
spine-ts/spine-widget/example/assets/dragon-pma_2.png
Normal file
BIN
spine-ts/spine-widget/example/assets/dragon-pma_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
spine-ts/spine-widget/example/assets/dragon-pma_3.png
Normal file
BIN
spine-ts/spine-widget/example/assets/dragon-pma_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
spine-ts/spine-widget/example/assets/dragon-pma_4.png
Normal file
BIN
spine-ts/spine-widget/example/assets/dragon-pma_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
spine-ts/spine-widget/example/assets/dragon-pma_5.png
Normal file
BIN
spine-ts/spine-widget/example/assets/dragon-pma_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
spine-ts/spine-widget/example/assets/food/box.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
spine-ts/spine-widget/example/assets/food/bread.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/bread.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
spine-ts/spine-widget/example/assets/food/carrot-body.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/carrot-body.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
222
spine-ts/spine-widget/example/assets/food/food-app-pro.atlas
Normal file
222
spine-ts/spine-widget/example/assets/food/food-app-pro.atlas
Normal file
@ -0,0 +1,222 @@
|
||||
food-app-pro.png
|
||||
size:2047,812
|
||||
filter:Linear,Linear
|
||||
pma:true
|
||||
scale:0.25
|
||||
blob-delivery
|
||||
bounds:567,422,561,388
|
||||
blob-list
|
||||
bounds:54,375,511,435
|
||||
blob-pan
|
||||
bounds:1130,387,510,423
|
||||
blob-ready
|
||||
bounds:567,13,494,407
|
||||
bottle-base
|
||||
bounds:153,203,98,170
|
||||
bottle-cork
|
||||
bounds:1517,237,55,43
|
||||
bottle-liquid-base
|
||||
bounds:2,116,91,143
|
||||
bottle-liquid-top
|
||||
bounds:1947,479,68,21
|
||||
bottle-reflection-middle
|
||||
bounds:1746,565,16,11
|
||||
bottle-reflection-top
|
||||
bounds:31,696,13,9
|
||||
bottle-top-open
|
||||
bounds:1936,606,40,10
|
||||
bottle-wrap
|
||||
bounds:95,62,99,66
|
||||
box
|
||||
bounds:1821,123,133,132
|
||||
rotate:90
|
||||
bread
|
||||
bounds:1689,59,81,68
|
||||
bread-bottom
|
||||
bounds:1396,282,180,103
|
||||
bread-top
|
||||
bounds:1829,360,187,112
|
||||
bubble-base-b
|
||||
bounds:446,147,119,119
|
||||
bubble-base-c
|
||||
bounds:253,149,119,119
|
||||
bubble-base-m
|
||||
bounds:1396,161,119,119
|
||||
bubble-base-t
|
||||
bounds:1063,161,119,119
|
||||
bubble-big
|
||||
bounds:1805,599,13,12
|
||||
bubble-small
|
||||
bounds:2008,619,9,9
|
||||
bubble-tail-b
|
||||
bounds:429,345,29,28
|
||||
bubble-tail-c
|
||||
bounds:2018,442,28,27
|
||||
rotate:90
|
||||
bubble-tail-m
|
||||
bounds:2018,472,27,28
|
||||
bubble-tail-t
|
||||
bounds:1097,392,28,29
|
||||
rotate:90
|
||||
building
|
||||
bounds:2,261,149,112
|
||||
building2
|
||||
bounds:1849,258,149,100
|
||||
burger-case-base
|
||||
bounds:1760,474,229,142
|
||||
burger-case-front
|
||||
bounds:1508,115,230,123
|
||||
bush
|
||||
bounds:1063,89,111,70
|
||||
bush-small
|
||||
bounds:486,21,75,53
|
||||
carrot-body
|
||||
bounds:1988,554,50,62
|
||||
carrot-green
|
||||
bounds:2000,324,42,34
|
||||
cheese
|
||||
bounds:1642,366,185,115
|
||||
circle
|
||||
bounds:1642,613,197,197
|
||||
offsets:1,2,200,200
|
||||
cloud
|
||||
bounds:1576,92,111,70
|
||||
flame-orange-1
|
||||
bounds:1746,537,12,11
|
||||
flame-orange-2
|
||||
bounds:31,707,16,16
|
||||
flame-orange-3
|
||||
bounds:31,725,16,20
|
||||
flame-orange-4
|
||||
bounds:1972,589,12,15
|
||||
flame-orange-5
|
||||
bounds:1746,550,11,13
|
||||
flame-red-1
|
||||
bounds:2018,412,25,28
|
||||
flame-red-2
|
||||
bounds:2,385,40,42
|
||||
flame-red-3
|
||||
bounds:2,429,39,45
|
||||
flame-red-4
|
||||
bounds:2008,733,31,37
|
||||
flame-red-5
|
||||
bounds:2008,660,30,34
|
||||
food-piece-1
|
||||
bounds:2000,300,23,22
|
||||
food-piece-2
|
||||
bounds:2008,696,32,35
|
||||
food-piece-3
|
||||
bounds:2018,388,27,22
|
||||
food-piece-4
|
||||
bounds:1578,366,23,19
|
||||
food-piece-5
|
||||
bounds:2,476,46,43
|
||||
food-piece-6
|
||||
bounds:2008,772,37,38
|
||||
food-piece-7
|
||||
bounds:1789,597,14,14
|
||||
fries-1
|
||||
bounds:1515,28,59,87
|
||||
fries-10
|
||||
bounds:374,135,68,129
|
||||
fries-11
|
||||
bounds:1363,96,63,126
|
||||
rotate:90
|
||||
fries-12
|
||||
bounds:2,571,49,121
|
||||
fries-13
|
||||
bounds:161,15,37,100
|
||||
rotate:90
|
||||
fries-2
|
||||
bounds:196,54,46,114
|
||||
rotate:90
|
||||
fries-3
|
||||
bounds:1880,22,39,101
|
||||
rotate:90
|
||||
fries-4
|
||||
bounds:1256,93,76,105
|
||||
rotate:90
|
||||
fries-5
|
||||
bounds:1184,149,70,131
|
||||
fries-6
|
||||
bounds:1955,126,57,130
|
||||
fries-7
|
||||
bounds:95,130,71,115
|
||||
rotate:90
|
||||
fries-8
|
||||
bounds:1176,47,72,100
|
||||
fries-9
|
||||
bounds:1256,171,72,115
|
||||
rotate:90
|
||||
fries-case-back
|
||||
bounds:1259,245,135,140
|
||||
fries-case-front
|
||||
bounds:1578,240,132,124
|
||||
fries-case-side
|
||||
bounds:1811,25,67,104
|
||||
house-distant
|
||||
bounds:2,50,83,64
|
||||
house-front
|
||||
bounds:1642,497,102,114
|
||||
lamp-post
|
||||
bounds:2,694,27,116
|
||||
list-base
|
||||
bounds:1841,618,192,165
|
||||
rotate:90
|
||||
list-writing
|
||||
bounds:1712,239,135,119
|
||||
magnifier-holder
|
||||
bounds:410,19,55,74
|
||||
rotate:90
|
||||
magnifier-reflection
|
||||
bounds:1063,393,32,27
|
||||
magnifier-round
|
||||
bounds:466,278,88,95
|
||||
mushroom
|
||||
bounds:1983,2,60,59
|
||||
mushroom-1
|
||||
bounds:1250,32,82,59
|
||||
mushroom-2
|
||||
bounds:312,12,77,51
|
||||
mushroom-3
|
||||
bounds:1576,33,78,57
|
||||
offsets:0,0,78,61
|
||||
mushroom-4
|
||||
bounds:1899,63,88,61
|
||||
offsets:0,1,88,62
|
||||
olive
|
||||
bounds:2008,630,33,28
|
||||
olive-pick
|
||||
bounds:31,747,8,63
|
||||
pan-front
|
||||
bounds:196,43,212,104
|
||||
pan-handle
|
||||
bounds:407,76,123,57
|
||||
pan-handle-knot
|
||||
bounds:2018,363,23,23
|
||||
pan-inside
|
||||
bounds:253,265,211,108
|
||||
salad
|
||||
bounds:1063,282,194,103
|
||||
sparkle-1
|
||||
bounds:2,521,45,48
|
||||
sparkle-2
|
||||
bounds:1990,502,50,50
|
||||
tomato-1
|
||||
bounds:1656,4,72,53
|
||||
tomato-2
|
||||
bounds:1656,4,72,53
|
||||
tomato-3
|
||||
bounds:87,7,72,53
|
||||
tomato-body
|
||||
bounds:1363,27,76,67
|
||||
tomato-green
|
||||
bounds:1746,578,41,33
|
||||
tree-top
|
||||
bounds:1741,129,68,108
|
||||
tree-trunk
|
||||
bounds:41,752,11,58
|
||||
wing-back
|
||||
bounds:1441,32,69,62
|
||||
wing-front
|
||||
bounds:1063,29,73,58
|
||||
BIN
spine-ts/spine-widget/example/assets/food/food-app-pro.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/food-app-pro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
BIN
spine-ts/spine-widget/example/assets/food/food-piece-1.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/food-piece-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
spine-ts/spine-widget/example/assets/food/food-piece-2.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/food-piece-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
spine-ts/spine-widget/example/assets/food/food-piece-3.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/food-piece-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
spine-ts/spine-widget/example/assets/food/food-piece-4.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/food-piece-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
spine-ts/spine-widget/example/assets/food/food-piece-5.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/food-piece-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
spine-ts/spine-widget/example/assets/food/food-piece-6.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/food-piece-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
spine-ts/spine-widget/example/assets/food/food-piece-7.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/food-piece-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
spine-ts/spine-widget/example/assets/food/mushroom.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/mushroom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
BIN
spine-ts/spine-widget/example/assets/food/tomato-body.png
Normal file
BIN
spine-ts/spine-widget/example/assets/food/tomato-body.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
102
spine-ts/spine-widget/example/assets/goblins-pma.atlas
Normal file
102
spine-ts/spine-widget/example/assets/goblins-pma.atlas
Normal file
@ -0,0 +1,102 @@
|
||||
goblins-pma.png
|
||||
size: 1024, 128
|
||||
filter: Linear, Linear
|
||||
pma: true
|
||||
dagger
|
||||
bounds: 372, 100, 26, 108
|
||||
rotate: 90
|
||||
goblin/eyes-closed
|
||||
bounds: 2, 7, 34, 12
|
||||
goblin/head
|
||||
bounds: 107, 36, 103, 66
|
||||
goblin/left-arm
|
||||
bounds: 901, 56, 37, 35
|
||||
goblin/left-foot
|
||||
bounds: 929, 95, 65, 31
|
||||
goblin/left-hand
|
||||
bounds: 452, 2, 36, 41
|
||||
goblin/left-lower-leg
|
||||
bounds: 713, 93, 33, 70
|
||||
rotate: 90
|
||||
goblin/left-shoulder
|
||||
bounds: 610, 44, 29, 44
|
||||
goblin/left-upper-leg
|
||||
bounds: 638, 93, 33, 73
|
||||
rotate: 90
|
||||
goblin/neck
|
||||
bounds: 490, 2, 36, 41
|
||||
goblin/pelvis
|
||||
bounds: 482, 45, 62, 43
|
||||
goblin/right-arm
|
||||
bounds: 690, 2, 23, 50
|
||||
rotate: 90
|
||||
goblin/right-foot
|
||||
bounds: 771, 58, 63, 33
|
||||
goblin/right-hand
|
||||
bounds: 940, 56, 36, 37
|
||||
goblin/right-lower-leg
|
||||
bounds: 482, 90, 36, 76
|
||||
rotate: 90
|
||||
goblin/right-shoulder
|
||||
bounds: 602, 3, 39, 45
|
||||
rotate: 90
|
||||
goblin/right-upper-leg
|
||||
bounds: 641, 57, 34, 63
|
||||
rotate: 90
|
||||
goblin/torso
|
||||
bounds: 212, 34, 68, 96
|
||||
rotate: 90
|
||||
goblin/undie-straps
|
||||
bounds: 380, 5, 55, 19
|
||||
goblin/undies
|
||||
bounds: 174, 5, 36, 29
|
||||
goblingirl/eyes-closed
|
||||
bounds: 269, 11, 37, 21
|
||||
goblingirl/head
|
||||
bounds: 2, 21, 103, 81
|
||||
goblingirl/left-arm
|
||||
bounds: 978, 56, 37, 35
|
||||
rotate: 90
|
||||
goblingirl/left-foot
|
||||
bounds: 107, 3, 65, 31
|
||||
goblingirl/left-hand
|
||||
bounds: 565, 2, 35, 40
|
||||
goblingirl/left-lower-leg
|
||||
bounds: 785, 93, 33, 70
|
||||
rotate: 90
|
||||
goblingirl/left-shoulder
|
||||
bounds: 690, 27, 28, 46
|
||||
rotate: 90
|
||||
goblingirl/left-upper-leg
|
||||
bounds: 857, 93, 33, 70
|
||||
rotate: 90
|
||||
goblingirl/neck
|
||||
bounds: 528, 2, 35, 41
|
||||
goblingirl/pelvis
|
||||
bounds: 546, 45, 62, 43
|
||||
goblingirl/right-arm
|
||||
bounds: 452, 48, 28, 50
|
||||
goblingirl/right-foot
|
||||
bounds: 836, 58, 63, 33
|
||||
goblingirl/right-hand
|
||||
bounds: 771, 20, 36, 37
|
||||
rotate: 90
|
||||
goblingirl/right-lower-leg
|
||||
bounds: 560, 90, 36, 76
|
||||
rotate: 90
|
||||
goblingirl/right-shoulder
|
||||
bounds: 649, 10, 39, 45
|
||||
goblingirl/right-upper-leg
|
||||
bounds: 706, 57, 34, 63
|
||||
rotate: 90
|
||||
goblingirl/torso
|
||||
bounds: 310, 2, 68, 96
|
||||
goblingirl/undie-straps
|
||||
bounds: 212, 13, 55, 19
|
||||
goblingirl/undies
|
||||
bounds: 810, 27, 36, 29
|
||||
shield
|
||||
bounds: 380, 26, 70, 72
|
||||
spear
|
||||
bounds: 2, 104, 22, 368
|
||||
rotate: 90
|
||||
BIN
spine-ts/spine-widget/example/assets/goblins-pma.png
Normal file
BIN
spine-ts/spine-widget/example/assets/goblins-pma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
1232
spine-ts/spine-widget/example/assets/goblins-pro.json
Normal file
1232
spine-ts/spine-widget/example/assets/goblins-pro.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
spine-ts/spine-widget/example/assets/goblins-pro.skel
Normal file
BIN
spine-ts/spine-widget/example/assets/goblins-pro.skel
Normal file
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user