mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-06 23:34:53 +08:00
[ts] Added playback controls to demos
This commit is contained in:
badlogic
parent
93dd99a4a4
commit
830a2ad040
9
spine-ts/build/spine-all.d.ts
vendored
9
spine-ts/build/spine-all.d.ts
vendored
@ -1,11 +1,12 @@
|
||||
declare module spine {
|
||||
class AssetManager implements Disposable {
|
||||
private pathPrefix;
|
||||
private textureLoader;
|
||||
private assets;
|
||||
private errors;
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any);
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
get(path: string): any;
|
||||
@ -21,7 +22,7 @@ declare module spine {
|
||||
}
|
||||
declare module spine.canvas {
|
||||
class AssetManager extends spine.AssetManager {
|
||||
constructor();
|
||||
constructor(pathPrefix?: string);
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -916,7 +917,7 @@ declare module spine {
|
||||
}
|
||||
declare module spine.threejs {
|
||||
class AssetManager extends spine.AssetManager {
|
||||
constructor();
|
||||
constructor(pathPrefix?: string);
|
||||
}
|
||||
}
|
||||
declare module spine.threejs {
|
||||
@ -960,7 +961,7 @@ declare module spine.threejs {
|
||||
}
|
||||
declare module spine.webgl {
|
||||
class AssetManager extends spine.AssetManager {
|
||||
constructor(gl: WebGLRenderingContext);
|
||||
constructor(gl: WebGLRenderingContext, pathPrefix?: string);
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var AssetManager = (function () {
|
||||
function AssetManager(textureLoader) {
|
||||
function AssetManager(textureLoader, pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
this.assets = {};
|
||||
this.errors = {};
|
||||
this.toLoad = 0;
|
||||
this.loaded = 0;
|
||||
this.textureLoader = textureLoader;
|
||||
this.pathPrefix = pathPrefix;
|
||||
}
|
||||
AssetManager.prototype.loadText = function (path, success, error) {
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function () {
|
||||
@ -37,6 +40,7 @@ var spine;
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var img = new Image();
|
||||
img.src = path;
|
||||
@ -57,9 +61,11 @@ var spine;
|
||||
};
|
||||
};
|
||||
AssetManager.prototype.get = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
return this.assets[path];
|
||||
};
|
||||
AssetManager.prototype.remove = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
var asset = this.assets[path];
|
||||
if (asset.dispose)
|
||||
asset.dispose();
|
||||
@ -106,8 +112,9 @@ var spine;
|
||||
(function (canvas) {
|
||||
var AssetManager = (function (_super) {
|
||||
__extends(AssetManager, _super);
|
||||
function AssetManager() {
|
||||
_super.call(this, function (image) { return new spine.canvas.CanvasTexture(image); });
|
||||
function AssetManager(pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
_super.call(this, function (image) { return new spine.canvas.CanvasTexture(image); }, pathPrefix);
|
||||
}
|
||||
return AssetManager;
|
||||
}(spine.AssetManager));
|
||||
@ -4583,10 +4590,11 @@ var spine;
|
||||
(function (threejs) {
|
||||
var AssetManager = (function (_super) {
|
||||
__extends(AssetManager, _super);
|
||||
function AssetManager() {
|
||||
function AssetManager(pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
_super.call(this, function (image) {
|
||||
return new threejs.ThreeJsTexture(image);
|
||||
});
|
||||
}, pathPrefix);
|
||||
}
|
||||
return AssetManager;
|
||||
}(spine.AssetManager));
|
||||
@ -4828,10 +4836,11 @@ var spine;
|
||||
(function (webgl) {
|
||||
var AssetManager = (function (_super) {
|
||||
__extends(AssetManager, _super);
|
||||
function AssetManager(gl) {
|
||||
function AssetManager(gl, pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
_super.call(this, function (image) {
|
||||
return new spine.webgl.GLTexture(gl, image);
|
||||
});
|
||||
}, pathPrefix);
|
||||
}
|
||||
return AssetManager;
|
||||
}(spine.AssetManager));
|
||||
|
||||
File diff suppressed because one or more lines are too long
3
spine-ts/build/spine-core.d.ts
vendored
3
spine-ts/build/spine-core.d.ts
vendored
@ -236,12 +236,13 @@ declare module spine {
|
||||
}
|
||||
declare module spine {
|
||||
class AssetManager implements Disposable {
|
||||
private pathPrefix;
|
||||
private textureLoader;
|
||||
private assets;
|
||||
private errors;
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any);
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
get(path: string): any;
|
||||
|
||||
@ -989,17 +989,20 @@ var spine;
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var AssetManager = (function () {
|
||||
function AssetManager(textureLoader) {
|
||||
function AssetManager(textureLoader, pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
this.assets = {};
|
||||
this.errors = {};
|
||||
this.toLoad = 0;
|
||||
this.loaded = 0;
|
||||
this.textureLoader = textureLoader;
|
||||
this.pathPrefix = pathPrefix;
|
||||
}
|
||||
AssetManager.prototype.loadText = function (path, success, error) {
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function () {
|
||||
@ -1025,6 +1028,7 @@ var spine;
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var img = new Image();
|
||||
img.src = path;
|
||||
@ -1045,9 +1049,11 @@ var spine;
|
||||
};
|
||||
};
|
||||
AssetManager.prototype.get = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
return this.assets[path];
|
||||
};
|
||||
AssetManager.prototype.remove = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
var asset = this.assets[path];
|
||||
if (asset.dispose)
|
||||
asset.dispose();
|
||||
|
||||
File diff suppressed because one or more lines are too long
5
spine-ts/build/spine-threejs.d.ts
vendored
5
spine-ts/build/spine-threejs.d.ts
vendored
@ -236,12 +236,13 @@ declare module spine {
|
||||
}
|
||||
declare module spine {
|
||||
class AssetManager implements Disposable {
|
||||
private pathPrefix;
|
||||
private textureLoader;
|
||||
private assets;
|
||||
private errors;
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any);
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
get(path: string): any;
|
||||
@ -890,7 +891,7 @@ declare module spine {
|
||||
}
|
||||
declare module spine.threejs {
|
||||
class AssetManager extends spine.AssetManager {
|
||||
constructor();
|
||||
constructor(pathPrefix?: string);
|
||||
}
|
||||
}
|
||||
declare module spine.threejs {
|
||||
|
||||
@ -989,17 +989,20 @@ var spine;
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var AssetManager = (function () {
|
||||
function AssetManager(textureLoader) {
|
||||
function AssetManager(textureLoader, pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
this.assets = {};
|
||||
this.errors = {};
|
||||
this.toLoad = 0;
|
||||
this.loaded = 0;
|
||||
this.textureLoader = textureLoader;
|
||||
this.pathPrefix = pathPrefix;
|
||||
}
|
||||
AssetManager.prototype.loadText = function (path, success, error) {
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function () {
|
||||
@ -1025,6 +1028,7 @@ var spine;
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var img = new Image();
|
||||
img.src = path;
|
||||
@ -1045,9 +1049,11 @@ var spine;
|
||||
};
|
||||
};
|
||||
AssetManager.prototype.get = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
return this.assets[path];
|
||||
};
|
||||
AssetManager.prototype.remove = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
var asset = this.assets[path];
|
||||
if (asset.dispose)
|
||||
asset.dispose();
|
||||
@ -4407,10 +4413,11 @@ var spine;
|
||||
(function (threejs) {
|
||||
var AssetManager = (function (_super) {
|
||||
__extends(AssetManager, _super);
|
||||
function AssetManager() {
|
||||
function AssetManager(pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
_super.call(this, function (image) {
|
||||
return new threejs.ThreeJsTexture(image);
|
||||
});
|
||||
}, pathPrefix);
|
||||
}
|
||||
return AssetManager;
|
||||
}(spine.AssetManager));
|
||||
|
||||
File diff suppressed because one or more lines are too long
5
spine-ts/build/spine-webgl.d.ts
vendored
5
spine-ts/build/spine-webgl.d.ts
vendored
@ -236,12 +236,13 @@ declare module spine {
|
||||
}
|
||||
declare module spine {
|
||||
class AssetManager implements Disposable {
|
||||
private pathPrefix;
|
||||
private textureLoader;
|
||||
private assets;
|
||||
private errors;
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any);
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
get(path: string): any;
|
||||
@ -890,7 +891,7 @@ declare module spine {
|
||||
}
|
||||
declare module spine.webgl {
|
||||
class AssetManager extends spine.AssetManager {
|
||||
constructor(gl: WebGLRenderingContext);
|
||||
constructor(gl: WebGLRenderingContext, pathPrefix?: string);
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
|
||||
@ -989,17 +989,20 @@ var spine;
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var AssetManager = (function () {
|
||||
function AssetManager(textureLoader) {
|
||||
function AssetManager(textureLoader, pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
this.assets = {};
|
||||
this.errors = {};
|
||||
this.toLoad = 0;
|
||||
this.loaded = 0;
|
||||
this.textureLoader = textureLoader;
|
||||
this.pathPrefix = pathPrefix;
|
||||
}
|
||||
AssetManager.prototype.loadText = function (path, success, error) {
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function () {
|
||||
@ -1025,6 +1028,7 @@ var spine;
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var img = new Image();
|
||||
img.src = path;
|
||||
@ -1045,9 +1049,11 @@ var spine;
|
||||
};
|
||||
};
|
||||
AssetManager.prototype.get = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
return this.assets[path];
|
||||
};
|
||||
AssetManager.prototype.remove = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
var asset = this.assets[path];
|
||||
if (asset.dispose)
|
||||
asset.dispose();
|
||||
@ -4407,10 +4413,11 @@ var spine;
|
||||
(function (webgl) {
|
||||
var AssetManager = (function (_super) {
|
||||
__extends(AssetManager, _super);
|
||||
function AssetManager(gl) {
|
||||
function AssetManager(gl, pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
_super.call(this, function (image) {
|
||||
return new spine.webgl.GLTexture(gl, image);
|
||||
});
|
||||
}, pathPrefix);
|
||||
}
|
||||
return AssetManager;
|
||||
}(spine.AssetManager));
|
||||
|
||||
File diff suppressed because one or more lines are too long
5
spine-ts/build/spine-widget.d.ts
vendored
5
spine-ts/build/spine-widget.d.ts
vendored
@ -236,12 +236,13 @@ declare module spine {
|
||||
}
|
||||
declare module spine {
|
||||
class AssetManager implements Disposable {
|
||||
private pathPrefix;
|
||||
private textureLoader;
|
||||
private assets;
|
||||
private errors;
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any);
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
get(path: string): any;
|
||||
@ -890,7 +891,7 @@ declare module spine {
|
||||
}
|
||||
declare module spine.webgl {
|
||||
class AssetManager extends spine.AssetManager {
|
||||
constructor(gl: WebGLRenderingContext);
|
||||
constructor(gl: WebGLRenderingContext, pathPrefix?: string);
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
|
||||
@ -989,17 +989,20 @@ var spine;
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var AssetManager = (function () {
|
||||
function AssetManager(textureLoader) {
|
||||
function AssetManager(textureLoader, pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
this.assets = {};
|
||||
this.errors = {};
|
||||
this.toLoad = 0;
|
||||
this.loaded = 0;
|
||||
this.textureLoader = textureLoader;
|
||||
this.pathPrefix = pathPrefix;
|
||||
}
|
||||
AssetManager.prototype.loadText = function (path, success, error) {
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function () {
|
||||
@ -1025,6 +1028,7 @@ var spine;
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
var img = new Image();
|
||||
img.src = path;
|
||||
@ -1045,9 +1049,11 @@ var spine;
|
||||
};
|
||||
};
|
||||
AssetManager.prototype.get = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
return this.assets[path];
|
||||
};
|
||||
AssetManager.prototype.remove = function (path) {
|
||||
path = this.pathPrefix + path;
|
||||
var asset = this.assets[path];
|
||||
if (asset.dispose)
|
||||
asset.dispose();
|
||||
@ -4407,10 +4413,11 @@ var spine;
|
||||
(function (webgl) {
|
||||
var AssetManager = (function (_super) {
|
||||
__extends(AssetManager, _super);
|
||||
function AssetManager(gl) {
|
||||
function AssetManager(gl, pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
_super.call(this, function (image) {
|
||||
return new spine.webgl.GLTexture(gl, image);
|
||||
});
|
||||
}, pathPrefix);
|
||||
}
|
||||
return AssetManager;
|
||||
}(spine.AssetManager));
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -33,8 +33,8 @@
|
||||
|
||||
module spine.canvas {
|
||||
export class AssetManager extends spine.AssetManager {
|
||||
constructor () {
|
||||
super((image: HTMLImageElement) => { return new spine.canvas.CanvasTexture(image); });
|
||||
constructor (pathPrefix: string = "") {
|
||||
super((image: HTMLImageElement) => { return new spine.canvas.CanvasTexture(image); }, pathPrefix);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -31,20 +31,23 @@
|
||||
|
||||
module spine {
|
||||
export class AssetManager implements Disposable {
|
||||
private pathPrefix: string;
|
||||
private textureLoader: (image: HTMLImageElement) => any;
|
||||
private assets: Map<any> = {};
|
||||
private errors: Map<string> = {};
|
||||
private toLoad = 0;
|
||||
private loaded = 0;
|
||||
|
||||
constructor (textureLoader: (image: HTMLImageElement) => any) {
|
||||
constructor (textureLoader: (image: HTMLImageElement) => any, pathPrefix: string = "") {
|
||||
this.textureLoader = textureLoader;
|
||||
this.pathPrefix = pathPrefix;
|
||||
}
|
||||
|
||||
loadText(path: string,
|
||||
success: (path: string, text: string) => void = null,
|
||||
error: (path: string, error: string) => void = null
|
||||
) {
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
let request = new XMLHttpRequest();
|
||||
request.onreadystatechange = () => {
|
||||
@ -68,6 +71,7 @@ module spine {
|
||||
success: (path: string, image: HTMLImageElement) => void = null,
|
||||
error: (path: string, error: string) => void = null
|
||||
) {
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
let img = new Image();
|
||||
img.src = path;
|
||||
@ -87,10 +91,12 @@ module spine {
|
||||
}
|
||||
|
||||
get (path: string) {
|
||||
path = this.pathPrefix + path;
|
||||
return this.assets[path];
|
||||
}
|
||||
|
||||
remove (path: string) {
|
||||
path = this.pathPrefix + path;
|
||||
let asset = this.assets[path];
|
||||
if ((<any>asset).dispose) (<any>asset).dispose();
|
||||
this.assets[path] = null;
|
||||
|
||||
@ -31,10 +31,10 @@
|
||||
|
||||
module spine.threejs {
|
||||
export class AssetManager extends spine.AssetManager {
|
||||
constructor () {
|
||||
constructor (pathPrefix: string = "") {
|
||||
super((image: HTMLImageElement) => {
|
||||
return new ThreeJsTexture(image);
|
||||
});
|
||||
}, pathPrefix);
|
||||
}
|
||||
}
|
||||
}
|
||||
16
spine-ts/webgl/demos/animationmixing.html
Normal file
16
spine-ts/webgl/demos/animationmixing.html
Normal file
@ -0,0 +1,16 @@
|
||||
<html>
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
body, html { height: 100% }
|
||||
canvas { position: absolute; width: 100% ;height: 100%; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="mixingdemo-canvas"></canvas>
|
||||
<center><div id="info" style="color: #f00; position: fixed; top: 0; width: 100%"></div></center>
|
||||
<script src="mixing.js"></script>
|
||||
<script>
|
||||
ikConstraintDemo();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
98
spine-ts/webgl/demos/animationmixing.js
Normal file
98
spine-ts/webgl/demos/animationmixing.js
Normal file
@ -0,0 +1,98 @@
|
||||
var ikConstraintDemo = function(pathPrefix) {
|
||||
var CIRCLE_INNER_COLOR = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var CIRCLE_OUTER_COLOR = new spine.Color(0.8, 0, 0, 0.8);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, bounds;
|
||||
var lastFrameTime = Date.now() / 1000;
|
||||
var target = null;
|
||||
var boneName = "hip";
|
||||
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("mixingdemo-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
|
||||
input = new spine.webgl.Input(canvas);
|
||||
input.addListener({
|
||||
down: function(x, y) {
|
||||
var bone = skeleton.findBone(boneName);
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
|
||||
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 20) {
|
||||
target = bone;
|
||||
}
|
||||
},
|
||||
up: function(x, y) {
|
||||
target = null;
|
||||
},
|
||||
moved: function(x, y) {
|
||||
if (target != null) {
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
|
||||
if (target.parent !== null) {
|
||||
target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
|
||||
target.x = temp2.x;
|
||||
target.y = temp2.y;
|
||||
} else {
|
||||
target.x = coords.x - skeleton.x;
|
||||
target.y = coords.y - skeleton.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
assetManager.loadTexture("assets/spineboy.png");
|
||||
assetManager.loadText("assets/spineboy-mesh.json");
|
||||
assetManager.loadText("assets/spineboy.atlas");
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
if (assetManager.isLoadingComplete()) {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get("assets/spineboy.atlas"), function(path) {
|
||||
return assetManager.get("assets/" + path);
|
||||
});
|
||||
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/spineboy-mesh.json"));
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform();
|
||||
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;
|
||||
|
||||
requestAnimationFrame(render);
|
||||
} else requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function render () {
|
||||
var now = Date.now() / 1000;
|
||||
var delta = now - lastFrameTime;
|
||||
lastFrameTime = now;
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.2;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.2;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(0.2, 0.2, 0.2, 1);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton);
|
||||
var bone = skeleton.findBone(boneName);
|
||||
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, CIRCLE_INNER_COLOR);
|
||||
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, CIRCLE_OUTER_COLOR);
|
||||
renderer.end();
|
||||
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
init();
|
||||
};
|
||||
153
spine-ts/webgl/demos/assets/alien.atlas
Normal file
153
spine-ts/webgl/demos/assets/alien.atlas
Normal file
@ -0,0 +1,153 @@
|
||||
|
||||
alien.png
|
||||
size: 1024,512
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
back_foot
|
||||
rotate: true
|
||||
xy: 1016, 366
|
||||
size: 8, 6
|
||||
orig: 8, 6
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
back_shin
|
||||
rotate: false
|
||||
xy: 28, 2
|
||||
size: 21, 24
|
||||
orig: 21, 24
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
back_thigh
|
||||
rotate: false
|
||||
xy: 2, 2
|
||||
size: 24, 24
|
||||
orig: 24, 24
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
backarmor
|
||||
rotate: false
|
||||
xy: 933, 295
|
||||
size: 81, 91
|
||||
orig: 81, 91
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
blown_up_nck
|
||||
rotate: false
|
||||
xy: 2, 28
|
||||
size: 77, 52
|
||||
orig: 77, 52
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
body
|
||||
rotate: true
|
||||
xy: 781, 167
|
||||
size: 98, 118
|
||||
orig: 98, 118
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
burst01
|
||||
rotate: false
|
||||
xy: 788, 355
|
||||
size: 143, 155
|
||||
orig: 143, 155
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
burst02
|
||||
rotate: false
|
||||
xy: 630, 329
|
||||
size: 156, 181
|
||||
orig: 156, 181
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front_foot
|
||||
rotate: true
|
||||
xy: 1016, 376
|
||||
size: 10, 6
|
||||
orig: 10, 6
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front_lower_arm
|
||||
rotate: true
|
||||
xy: 81, 25
|
||||
size: 55, 63
|
||||
orig: 55, 63
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front_shin
|
||||
rotate: true
|
||||
xy: 287, 55
|
||||
size: 25, 28
|
||||
orig: 25, 28
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front_thigh
|
||||
rotate: false
|
||||
xy: 258, 53
|
||||
size: 27, 27
|
||||
orig: 27, 27
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front_upper_arm
|
||||
rotate: false
|
||||
xy: 199, 52
|
||||
size: 57, 28
|
||||
orig: 57, 28
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
head
|
||||
rotate: false
|
||||
xy: 630, 191
|
||||
size: 149, 136
|
||||
orig: 149, 136
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
jaw
|
||||
rotate: true
|
||||
xy: 933, 388
|
||||
size: 122, 86
|
||||
orig: 122, 86
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
lower_back_arm
|
||||
rotate: false
|
||||
xy: 146, 34
|
||||
size: 51, 46
|
||||
orig: 51, 46
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
metaljaw
|
||||
rotate: false
|
||||
xy: 788, 267
|
||||
size: 122, 86
|
||||
orig: 122, 86
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
splat01
|
||||
rotate: false
|
||||
xy: 371, 258
|
||||
size: 257, 252
|
||||
orig: 257, 252
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
splat02
|
||||
rotate: false
|
||||
xy: 2, 254
|
||||
size: 367, 256
|
||||
orig: 367, 256
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
splat03
|
||||
rotate: false
|
||||
xy: 2, 82
|
||||
size: 362, 170
|
||||
orig: 362, 170
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
upper_back_arm
|
||||
rotate: true
|
||||
xy: 146, 2
|
||||
size: 30, 43
|
||||
orig: 30, 43
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
1501
spine-ts/webgl/demos/assets/alien.json
Normal file
1501
spine-ts/webgl/demos/assets/alien.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
spine-ts/webgl/demos/assets/alien.png
Normal file
BIN
spine-ts/webgl/demos/assets/alien.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
279
spine-ts/webgl/demos/assets/dragon.atlas
Normal file
279
spine-ts/webgl/demos/assets/dragon.atlas
Normal file
@ -0,0 +1,279 @@
|
||||
|
||||
dragon.png
|
||||
size: 1024,1024
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
L_front_leg
|
||||
rotate: false
|
||||
xy: 870, 881
|
||||
size: 42, 29
|
||||
orig: 42, 29
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_front_thigh
|
||||
rotate: false
|
||||
xy: 258, 761
|
||||
size: 42, 36
|
||||
orig: 42, 36
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_rear_leg
|
||||
rotate: false
|
||||
xy: 765, 859
|
||||
size: 103, 89
|
||||
orig: 103, 89
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_rear_thigh
|
||||
rotate: false
|
||||
xy: 156, 116
|
||||
size: 46, 75
|
||||
orig: 46, 75
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing01
|
||||
rotate: false
|
||||
xy: 100, 687
|
||||
size: 96, 128
|
||||
orig: 96, 128
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing02
|
||||
rotate: false
|
||||
xy: 2, 88
|
||||
size: 90, 135
|
||||
orig: 90, 135
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing03
|
||||
rotate: false
|
||||
xy: 114, 451
|
||||
size: 93, 104
|
||||
orig: 93, 104
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing04
|
||||
rotate: false
|
||||
xy: 104, 193
|
||||
size: 94, 68
|
||||
orig: 94, 68
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing05
|
||||
rotate: false
|
||||
xy: 907, 915
|
||||
size: 109, 107
|
||||
orig: 109, 107
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing06
|
||||
rotate: false
|
||||
xy: 2, 671
|
||||
size: 96, 166
|
||||
orig: 96, 166
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing07
|
||||
rotate: false
|
||||
xy: 114, 557
|
||||
size: 80, 128
|
||||
orig: 80, 128
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing08
|
||||
rotate: false
|
||||
xy: 104, 263
|
||||
size: 82, 91
|
||||
orig: 82, 91
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing09
|
||||
rotate: false
|
||||
xy: 2, 2
|
||||
size: 102, 84
|
||||
orig: 102, 84
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_front_leg
|
||||
rotate: false
|
||||
xy: 696, 873
|
||||
size: 51, 45
|
||||
orig: 51, 45
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_front_thigh
|
||||
rotate: false
|
||||
xy: 331, 842
|
||||
size: 54, 54
|
||||
orig: 54, 54
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_rear_leg
|
||||
rotate: false
|
||||
xy: 198, 763
|
||||
size: 58, 50
|
||||
orig: 58, 50
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_rear_thigh
|
||||
rotate: false
|
||||
xy: 213, 815
|
||||
size: 46, 75
|
||||
orig: 46, 75
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing01
|
||||
rotate: false
|
||||
xy: 2, 514
|
||||
size: 110, 155
|
||||
orig: 110, 155
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing02
|
||||
rotate: false
|
||||
xy: 2, 359
|
||||
size: 102, 153
|
||||
orig: 102, 153
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing03
|
||||
rotate: false
|
||||
xy: 254, 898
|
||||
size: 136, 124
|
||||
orig: 136, 124
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing04
|
||||
rotate: false
|
||||
xy: 765, 950
|
||||
size: 140, 72
|
||||
orig: 140, 72
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing05
|
||||
rotate: false
|
||||
xy: 392, 907
|
||||
size: 126, 115
|
||||
orig: 126, 115
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing06
|
||||
rotate: false
|
||||
xy: 2, 839
|
||||
size: 100, 183
|
||||
orig: 100, 183
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing07
|
||||
rotate: false
|
||||
xy: 2, 225
|
||||
size: 100, 132
|
||||
orig: 100, 132
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing08
|
||||
rotate: false
|
||||
xy: 520, 895
|
||||
size: 117, 127
|
||||
orig: 117, 127
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing09
|
||||
rotate: false
|
||||
xy: 639, 920
|
||||
size: 124, 102
|
||||
orig: 124, 102
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
back
|
||||
rotate: false
|
||||
xy: 106, 356
|
||||
size: 95, 93
|
||||
orig: 95, 93
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
chest
|
||||
rotate: false
|
||||
xy: 261, 835
|
||||
size: 68, 61
|
||||
orig: 68, 61
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
chin
|
||||
rotate: false
|
||||
xy: 104, 817
|
||||
size: 107, 73
|
||||
orig: 107, 73
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front_toeA
|
||||
rotate: false
|
||||
xy: 311, 808
|
||||
size: 15, 25
|
||||
orig: 15, 25
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front_toeB
|
||||
rotate: false
|
||||
xy: 914, 884
|
||||
size: 28, 29
|
||||
orig: 28, 29
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
head
|
||||
rotate: false
|
||||
xy: 104, 892
|
||||
size: 148, 130
|
||||
orig: 148, 130
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
rear-toe
|
||||
rotate: false
|
||||
xy: 639, 879
|
||||
size: 55, 39
|
||||
orig: 55, 39
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tail01
|
||||
rotate: false
|
||||
xy: 94, 114
|
||||
size: 60, 77
|
||||
orig: 60, 77
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tail02
|
||||
rotate: false
|
||||
xy: 198, 701
|
||||
size: 48, 60
|
||||
orig: 48, 60
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tail03
|
||||
rotate: false
|
||||
xy: 248, 713
|
||||
size: 37, 46
|
||||
orig: 37, 46
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tail04
|
||||
rotate: false
|
||||
xy: 870, 912
|
||||
size: 28, 36
|
||||
orig: 28, 36
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tail05
|
||||
rotate: false
|
||||
xy: 944, 883
|
||||
size: 26, 30
|
||||
orig: 26, 30
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tail06
|
||||
rotate: false
|
||||
xy: 261, 799
|
||||
size: 48, 34
|
||||
orig: 48, 34
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
780
spine-ts/webgl/demos/assets/dragon.json
Normal file
780
spine-ts/webgl/demos/assets/dragon.json
Normal file
@ -0,0 +1,780 @@
|
||||
{
|
||||
"skeleton": { "hash": "nl+4Zc3R/zjLJ5nRvx8tYdSz3Qg", "spine": "3.4.02", "width": 660.39, "height": 499.66, "images": "./images/" },
|
||||
"bones": [
|
||||
{ "name": "root", "y": -176.12 },
|
||||
{ "name": "COG", "parent": "root", "y": 176.12 },
|
||||
{ "name": "chest", "parent": "COG", "length": 31.24, "rotation": 161.7, "x": 52.52, "y": 15.34 },
|
||||
{ "name": "L_front_thigh", "parent": "chest", "length": 67.42, "rotation": 138.94, "x": -45.58, "y": 7.92 },
|
||||
{ "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "rotation": 43.36, "x": 67.42, "y": 0.02 },
|
||||
{ "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "rotation": -98, "x": 45.53, "y": 2.43 },
|
||||
{ "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "rotation": -55.26, "x": 51.57, "y": -0.12 },
|
||||
{ "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "rotation": -11.13, "x": 54.19, "y": 0.6, "scaleX": 1.134 },
|
||||
{ "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "rotation": 19.42, "x": 50.6, "y": 7.08, "scaleX": 1.134 },
|
||||
{ "name": "back", "parent": "COG", "length": 115.37, "rotation": 151.83, "x": 16.03, "y": 27.94 },
|
||||
{ "name": "R_rear_thigh", "parent": "back", "length": 123.46, "rotation": 104.87, "x": 65.31, "y": 59.89 },
|
||||
{ "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "rotation": 28.35, "x": -8.59, "y": 30.18 },
|
||||
{ "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "rotation": -122.41, "x": 96.04, "y": -0.97 },
|
||||
{ "name": "L_wing", "parent": "chest", "length": 301.12, "rotation": -75.51, "x": -7.24, "y": -24.65 },
|
||||
{ "name": "R_front_thigh", "parent": "chest", "length": 81.63, "rotation": 67.96, "x": -10.89, "y": 28.25 },
|
||||
{ "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "rotation": 92.7, "x": 83.04, "y": -0.3 },
|
||||
{ "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "rotation": 8.59, "x": 70.03, "y": 5.31 },
|
||||
{ "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "rotation": -35.02, "x": 66.52, "y": 0.33 },
|
||||
{ "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "rotation": -74.67, "x": 62.1, "y": -0.79 },
|
||||
{ "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "rotation": -129.04, "x": 123.46, "y": -0.26 },
|
||||
{ "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "rotation": 141.98, "x": 90.06, "y": 2.12 },
|
||||
{ "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "rotation": 125.32, "x": 89.6, "y": 1.52 },
|
||||
{ "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "rotation": 112.26, "x": 91.06, "y": -0.35 },
|
||||
{ "name": "neck", "parent": "COG", "length": 41.36, "rotation": 39.05, "x": 64.75, "y": 11.98 },
|
||||
{ "name": "head", "parent": "neck", "length": 188.83, "rotation": 8.06, "x": 69.96, "y": 2.49 },
|
||||
{ "name": "R_wing", "parent": "head", "length": 359.5, "rotation": 83.21, "x": -74.68, "y": 20.9 },
|
||||
{ "name": "chin", "parent": "neck", "length": 153.15, "rotation": -69.07, "x": 64.62, "y": -6.99 },
|
||||
{ "name": "tail1", "parent": "back", "length": 65.65, "rotation": 44.31, "x": 115.37, "y": -0.19 },
|
||||
{ "name": "tail2", "parent": "tail1", "length": 54.5, "rotation": 12, "x": 65.65, "y": 0.22 },
|
||||
{ "name": "tail3", "parent": "tail2", "length": 41.78, "rotation": 1.8, "x": 54.5, "y": 0.37 },
|
||||
{ "name": "tail4", "parent": "tail3", "length": 34.19, "rotation": -1.8, "x": 41.78, "y": 0.16 },
|
||||
{ "name": "tail5", "parent": "tail4", "length": 32.32, "rotation": -3.15, "x": 34.19, "y": -0.19 },
|
||||
{ "name": "tail6", "parent": "tail5", "length": 80.08, "rotation": -29.55, "x": 32.32, "y": -0.23 }
|
||||
],
|
||||
"slots": [
|
||||
{ "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" },
|
||||
{ "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" },
|
||||
{ "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" },
|
||||
{ "name": "tail6", "bone": "tail6", "attachment": "tail06" },
|
||||
{ "name": "tail5", "bone": "tail5", "attachment": "tail05" },
|
||||
{ "name": "tail4", "bone": "tail4", "attachment": "tail04" },
|
||||
{ "name": "tail3", "bone": "tail3", "attachment": "tail03" },
|
||||
{ "name": "tail2", "bone": "tail2", "attachment": "tail02" },
|
||||
{ "name": "tail1", "bone": "tail1", "attachment": "tail01" },
|
||||
{ "name": "back", "bone": "back", "attachment": "back" },
|
||||
{ "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" },
|
||||
{ "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" },
|
||||
{ "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" },
|
||||
{ "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" },
|
||||
{ "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" },
|
||||
{ "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" },
|
||||
{ "name": "chest", "bone": "chest", "attachment": "chest" },
|
||||
{ "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" },
|
||||
{ "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" },
|
||||
{ "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" },
|
||||
{ "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" },
|
||||
{ "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" },
|
||||
{ "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" },
|
||||
{ "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" },
|
||||
{ "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" },
|
||||
{ "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" },
|
||||
{ "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" },
|
||||
{ "name": "chin", "bone": "chin", "attachment": "chin" },
|
||||
{ "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" },
|
||||
{ "name": "head", "bone": "head", "attachment": "head" }
|
||||
],
|
||||
"skins": {
|
||||
"default": {
|
||||
"L_front_leg": {
|
||||
"L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 }
|
||||
},
|
||||
"L_front_thigh": {
|
||||
"L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 }
|
||||
},
|
||||
"L_front_toe1": {
|
||||
"front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 }
|
||||
},
|
||||
"L_front_toe2": {
|
||||
"front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 }
|
||||
},
|
||||
"L_front_toe3": {
|
||||
"front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 }
|
||||
},
|
||||
"L_front_toe4": {
|
||||
"front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 }
|
||||
},
|
||||
"L_rear_leg": {
|
||||
"L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 }
|
||||
},
|
||||
"L_rear_thigh": {
|
||||
"L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 }
|
||||
},
|
||||
"L_wing": {
|
||||
"L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 },
|
||||
"L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 },
|
||||
"L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 },
|
||||
"L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 },
|
||||
"L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 },
|
||||
"L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 },
|
||||
"L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 },
|
||||
"L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 },
|
||||
"L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 }
|
||||
},
|
||||
"R_front_leg": {
|
||||
"R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 }
|
||||
},
|
||||
"R_front_thigh": {
|
||||
"R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 }
|
||||
},
|
||||
"R_front_toe1": {
|
||||
"front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 }
|
||||
},
|
||||
"R_front_toe2": {
|
||||
"front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 }
|
||||
},
|
||||
"R_front_toe3": {
|
||||
"front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 }
|
||||
},
|
||||
"R_rear_leg": {
|
||||
"R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 }
|
||||
},
|
||||
"R_rear_thigh": {
|
||||
"R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 }
|
||||
},
|
||||
"R_rear_toe1": {
|
||||
"rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 }
|
||||
},
|
||||
"R_rear_toe2": {
|
||||
"rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 }
|
||||
},
|
||||
"R_rear_toe3": {
|
||||
"rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 }
|
||||
},
|
||||
"R_wing": {
|
||||
"R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 },
|
||||
"R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 },
|
||||
"R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 },
|
||||
"R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 },
|
||||
"R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 },
|
||||
"R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 },
|
||||
"R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 },
|
||||
"R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 },
|
||||
"R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 }
|
||||
},
|
||||
"back": {
|
||||
"back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 }
|
||||
},
|
||||
"chest": {
|
||||
"chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 }
|
||||
},
|
||||
"chin": {
|
||||
"chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 }
|
||||
},
|
||||
"head": {
|
||||
"head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 }
|
||||
},
|
||||
"tail1": {
|
||||
"tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 }
|
||||
},
|
||||
"tail2": {
|
||||
"tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 }
|
||||
},
|
||||
"tail3": {
|
||||
"tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 }
|
||||
},
|
||||
"tail4": {
|
||||
"tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 }
|
||||
},
|
||||
"tail5": {
|
||||
"tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 }
|
||||
},
|
||||
"tail6": {
|
||||
"tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 }
|
||||
}
|
||||
}
|
||||
},
|
||||
"animations": {
|
||||
"flying": {
|
||||
"slots": {
|
||||
"L_wing": {
|
||||
"attachment": [
|
||||
{ "time": 0, "name": "L_wing01" },
|
||||
{ "time": 0.0666, "name": "L_wing02" },
|
||||
{ "time": 0.1333, "name": "L_wing03" },
|
||||
{ "time": 0.2, "name": "L_wing04" },
|
||||
{ "time": 0.2666, "name": "L_wing05" },
|
||||
{ "time": 0.3333, "name": "L_wing06" },
|
||||
{ "time": 0.4, "name": "L_wing07" },
|
||||
{ "time": 0.4666, "name": "L_wing08" },
|
||||
{ "time": 0.5333, "name": "L_wing09" },
|
||||
{ "time": 0.6, "name": "L_wing01" },
|
||||
{ "time": 0.7333, "name": "L_wing02" },
|
||||
{ "time": 0.8, "name": "L_wing03" },
|
||||
{ "time": 0.8333, "name": "L_wing04" },
|
||||
{ "time": 0.8666, "name": "L_wing05" },
|
||||
{ "time": 0.9, "name": "L_wing06" },
|
||||
{ "time": 0.9333, "name": "L_wing07" },
|
||||
{ "time": 0.9666, "name": "L_wing08" },
|
||||
{ "time": 1, "name": "L_wing01" }
|
||||
]
|
||||
},
|
||||
"R_wing": {
|
||||
"attachment": [
|
||||
{ "time": 0, "name": "R_wing01" },
|
||||
{ "time": 0.0666, "name": "R_wing02" },
|
||||
{ "time": 0.1333, "name": "R_wing03" },
|
||||
{ "time": 0.2, "name": "R_wing04" },
|
||||
{ "time": 0.2666, "name": "R_wing05" },
|
||||
{ "time": 0.3333, "name": "R_wing06" },
|
||||
{ "time": 0.4, "name": "R_wing07" },
|
||||
{ "time": 0.4666, "name": "R_wing08" },
|
||||
{ "time": 0.5333, "name": "R_wing09" },
|
||||
{ "time": 0.6, "name": "R_wing01" },
|
||||
{ "time": 0.7333, "name": "R_wing02" },
|
||||
{ "time": 0.7666, "name": "R_wing02" },
|
||||
{ "time": 0.8, "name": "R_wing03" },
|
||||
{ "time": 0.8333, "name": "R_wing04" },
|
||||
{ "time": 0.8666, "name": "R_wing05" },
|
||||
{ "time": 0.9, "name": "R_wing06" },
|
||||
{ "time": 0.9333, "name": "R_wing07" },
|
||||
{ "time": 0.9666, "name": "R_wing08" },
|
||||
{ "time": 1, "name": "R_wing01" }
|
||||
]
|
||||
}
|
||||
},
|
||||
"bones": {
|
||||
"back": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 17.39 },
|
||||
{ "time": 0.5, "angle": 0 },
|
||||
{ "time": 0.8333, "angle": 7 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"neck": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": -8.18 },
|
||||
{ "time": 0.3333, "angle": -23.16 },
|
||||
{ "time": 0.5, "angle": -18.01 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"chest": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "angle": 0, "curve": "stepped" },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"tail1": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": -2.42 },
|
||||
{ "time": 0.3333, "angle": -26.2 },
|
||||
{ "time": 0.5, "angle": -29.65 },
|
||||
{ "time": 0.6666, "angle": -23.15 },
|
||||
{ "time": 0.8333, "angle": -55.46 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_rear_thigh": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "angle": 0, "curve": "stepped" },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"tail2": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": -1.12 },
|
||||
{ "time": 0.3333, "angle": 10.48 },
|
||||
{ "time": 0.5, "angle": 7.89 },
|
||||
{ "time": 0.8333, "angle": -10.38 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"tail3": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 8.24 },
|
||||
{ "time": 0.3333, "angle": 15.21 },
|
||||
{ "time": 0.5, "angle": 14.84 },
|
||||
{ "time": 0.8333, "angle": -18.9 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"tail4": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 17.46 },
|
||||
{ "time": 0.3333, "angle": 22.15 },
|
||||
{ "time": 0.5, "angle": 22.76 },
|
||||
{ "time": 0.8333, "angle": -4.37 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"tail5": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 7.4 },
|
||||
{ "time": 0.3333, "angle": 28.5 },
|
||||
{ "time": 0.5, "angle": 21.33 },
|
||||
{ "time": 0.8333, "angle": -1.27 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"tail6": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 45.99 },
|
||||
{ "time": 0.4, "angle": 43.53 },
|
||||
{ "time": 0.5, "angle": 61.79 },
|
||||
{ "time": 0.8333, "angle": 13.28 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_rear_leg": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": -14.21 },
|
||||
{ "time": 0.5, "angle": 47.17 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_rear_toe3": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.5, "angle": -36.06 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_rear_toe2": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.5, "angle": -20.32 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_rear_toe1": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.5, "angle": -18.71 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"head": {
|
||||
"rotate": [
|
||||
{
|
||||
"time": 0,
|
||||
"angle": 0,
|
||||
"curve": [ 0.408, 1.36, 0.675, 1.43 ]
|
||||
},
|
||||
{ "time": 0.5, "angle": 1.03 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"chin": {
|
||||
"rotate": [
|
||||
{
|
||||
"time": 0,
|
||||
"angle": 0,
|
||||
"curve": [ 0.416, 1.15, 0.494, 1.27 ]
|
||||
},
|
||||
{ "time": 0.3333, "angle": -5.15 },
|
||||
{ "time": 0.5, "angle": 9.79 },
|
||||
{ "time": 0.6666, "angle": 18.94 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"L_front_thigh": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": -19.18 },
|
||||
{ "time": 0.3333, "angle": -32.02 },
|
||||
{ "time": 0.5, "angle": -19.62 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_front_thigh": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": -12.96 },
|
||||
{ "time": 0.5, "angle": 16.2 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"L_front_leg": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 37.77 },
|
||||
{ "time": 0.5, "angle": 0, "curve": "stepped" },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"L_front_toe1": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": -16.08 },
|
||||
{ "time": 0.5, "angle": 0, "curve": "stepped" },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"L_front_toe2": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "angle": 0, "curve": "stepped" },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1 },
|
||||
{ "time": 0.5, "x": 1.33, "y": 1.029 },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"L_front_toe4": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.5, "angle": 26.51 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1 },
|
||||
{ "time": 0.5, "x": 1.21, "y": 0.993 },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"L_front_toe3": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.5, "angle": 16.99 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1 },
|
||||
{ "time": 0.5, "x": 1.354, "y": 1.007 },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_front_leg": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 26.07 },
|
||||
{ "time": 0.5, "angle": -21.6 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_front_toe1": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 29.23 },
|
||||
{ "time": 0.5, "angle": 34.83 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1 },
|
||||
{ "time": 0.5, "x": 1.412, "y": 1 },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_front_toe2": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 24.89 },
|
||||
{ "time": 0.5, "angle": 23.16 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1 },
|
||||
{ "time": 0.5, "x": 1.407, "y": 1.057 },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"R_front_toe3": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.1666, "angle": 11.01 },
|
||||
{ "time": 0.5, "angle": 0, "curve": "stepped" },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1 },
|
||||
{ "time": 0.5, "x": 1.329, "y": 1.181 },
|
||||
{ "time": 1, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"L_rear_leg": {
|
||||
"rotate": [
|
||||
{ "time": 0, "angle": 0 },
|
||||
{ "time": 0.3666, "angle": 25.19 },
|
||||
{ "time": 0.6666, "angle": -15.65 },
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{ "time": 0, "x": 0, "y": 0 }
|
||||
],
|
||||
"scale": [
|
||||
{ "time": 0, "x": 1, "y": 1 }
|
||||
]
|
||||
},
|
||||
"COG": {
|
||||
"rotate": [
|
||||
{
|
||||
"time": 0,
|
||||
"angle": 0,
|
||||
"curve": [ 0.456, 0.2, 0.422, 1.06 ]
|
||||
},
|
||||
{ "time": 0.3333, "angle": 23.93 },
|
||||
{
|
||||
"time": 0.6666,
|
||||
"angle": 337.8,
|
||||
"curve": [ 0.41, 0, 0.887, 0.75 ]
|
||||
},
|
||||
{ "time": 1, "angle": 0 }
|
||||
],
|
||||
"translate": [
|
||||
{
|
||||
"time": 0,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"curve": [ 0.33, 1, 0.816, 1.33 ]
|
||||
},
|
||||
{
|
||||
"time": 0.5,
|
||||
"x": 0,
|
||||
"y": 113.01,
|
||||
"curve": [ 0.396, 0, 0.709, 2.03 ]
|
||||
},
|
||||
{ "time": 1, "x": 0, "y": 0 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
spine-ts/webgl/demos/assets/dragon.png
Normal file
BIN
spine-ts/webgl/demos/assets/dragon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
@ -1,5 +1,5 @@
|
||||
<html>
|
||||
<script src="../../../build/spine-webgl.js"></script>
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
body, html { height: 100% }
|
||||
@ -9,5 +9,8 @@
|
||||
<canvas id="ikdemo-canvas"></canvas>
|
||||
<center><div id="info" style="color: #f00; position: fixed; top: 0; width: 100%"></div></center>
|
||||
<script src="ikconstraint.js"></script>
|
||||
<script>
|
||||
ikConstraintDemo();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +1,4 @@
|
||||
(function() {
|
||||
var ikConstraintDemo = function(pathPrefix) {
|
||||
var CIRCLE_INNER_COLOR = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var CIRCLE_OUTER_COLOR = new spine.Color(0.8, 0, 0, 0.8);
|
||||
|
||||
@ -7,15 +7,16 @@
|
||||
var lastFrameTime = Date.now() / 1000;
|
||||
var target = null;
|
||||
var boneName = "hip";
|
||||
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
|
||||
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
|
||||
|
||||
function init () {
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("ikdemo-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.webgl.AssetManager(gl);
|
||||
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
|
||||
input = new spine.webgl.Input(canvas);
|
||||
input.addListener({
|
||||
down: function(x, y) {
|
||||
@ -95,4 +96,4 @@
|
||||
}
|
||||
|
||||
init();
|
||||
})();
|
||||
};
|
||||
23
spine-ts/webgl/demos/imagesequences.html
Normal file
23
spine-ts/webgl/demos/imagesequences.html
Normal file
@ -0,0 +1,23 @@
|
||||
<html>
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
body, html { height: 100% }
|
||||
canvas { position: absolute; width: 100% ;height: 100%; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="imagesequencesdemo-canvas"></canvas>
|
||||
<center>
|
||||
<div style="color: #fff; position: fixed; top: 0; width: 100%">
|
||||
<select id="imagesequencesdemo-active-skeleton"></select></br>
|
||||
<input id="imagesequencesdemo-playbutton" type="button" value="Pause"></input>
|
||||
<input id="imagesequencesdemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input>
|
||||
</div>
|
||||
</center>
|
||||
<script src="imagesequences.js"></script>
|
||||
<script>
|
||||
imageSequencesDemo();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
205
spine-ts/webgl/demos/imagesequences.js
Normal file
205
spine-ts/webgl/demos/imagesequences.js
Normal file
@ -0,0 +1,205 @@
|
||||
var imageSequencesDemo = function(pathPrefix) {
|
||||
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, bounds;
|
||||
var lastFrameTime = Date.now() / 1000;
|
||||
var skeletons = {};
|
||||
var activeSkeleton = "alien";
|
||||
|
||||
var playButton, timeLine, isPlaying = true;
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("imagesequencesdemo-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
|
||||
assetManager.loadTexture("assets/alien.png");
|
||||
assetManager.loadText("assets/alien.json");
|
||||
assetManager.loadText("assets/alien.atlas");
|
||||
assetManager.loadTexture("assets/dragon.png");
|
||||
assetManager.loadText("assets/dragon.json");
|
||||
assetManager.loadText("assets/dragon.atlas");
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
if (assetManager.isLoadingComplete()) {
|
||||
skeletons["alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
|
||||
skeletons["dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
|
||||
setupUI();
|
||||
requestAnimationFrame(render);
|
||||
} else requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#imagesequencesdemo-playbutton");
|
||||
playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying) playButton.val("Pause");
|
||||
else playButton.val("Play");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
|
||||
timeLine = $("#imagesequencesdemo-timeline");
|
||||
timeLineUpdate = function () {
|
||||
if (!isPlaying) {
|
||||
var active = skeletons[activeSkeleton];
|
||||
var time = timeLine.val() / 100;
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
time = animationDuration * time;
|
||||
active.state.update(time - active.playTime);
|
||||
active.state.apply(active.skeleton);
|
||||
active.skeleton.updateWorldTransform();
|
||||
active.playTime = time;
|
||||
}
|
||||
}
|
||||
timeLine.change(timeLineUpdate);
|
||||
timeLine.on("input", timeLineUpdate);
|
||||
timeLine.click(function () { if (isPlaying) playButton.click();});
|
||||
|
||||
var list = $("#imagesequencesdemo-active-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 = $("#imagesequencesdemo-active-skeleton option:selected").text();
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
timeLine.val(active.playTime / animationDuration * 100);
|
||||
})
|
||||
}
|
||||
|
||||
function loadSkeleton(name, animation, sequenceSlots) {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get("assets/" + name + ".atlas"), function(path) {
|
||||
return assetManager.get("assets/" + path);
|
||||
});
|
||||
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
|
||||
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();
|
||||
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 = sequenceSlots[i];
|
||||
var index = skeleton.findSlotIndex(slot);
|
||||
for (var name in skeleton.skin.attachments[index]) {
|
||||
regions.push(skeleton.skin.attachments[index][name]);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
atlas: atlas,
|
||||
skeleton: skeleton,
|
||||
state: state,
|
||||
playTime: 0,
|
||||
bounds: {
|
||||
offset: offset,
|
||||
size: size
|
||||
},
|
||||
slots: sequenceSlots,
|
||||
regions: regions
|
||||
};
|
||||
}
|
||||
|
||||
function render () {
|
||||
var now = Date.now() / 1000;
|
||||
var delta = now - lastFrameTime;
|
||||
lastFrameTime = now;
|
||||
delta *= 0.5;
|
||||
|
||||
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;
|
||||
renderer.camera.position.y = offset.y + size.y / 2;
|
||||
renderer.camera.viewportWidth = size.x * 2.2;
|
||||
renderer.camera.viewportHeight = size.y * 1.2;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(0.2, 0.2, 0.2, 1);
|
||||
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.val(active.playTime / animationDuration * 100);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton);
|
||||
|
||||
var x = offset.x + size.x + 100;
|
||||
var y = offset.y;
|
||||
var slotsWidth = 0, slotsHeight = 0;
|
||||
var slotSize = size.y / 3;
|
||||
var maxSlotWidth = 0;
|
||||
var j = 0;
|
||||
for (var i = 0; i < active.regions.length; i++) {
|
||||
var region = active.regions[i].region;
|
||||
var scale = Math.min(slotSize / region.height, slotSize / region.width);
|
||||
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
|
||||
|
||||
var isVisible = false;
|
||||
for (var ii = 0; ii < active.slots.length; ii++) {
|
||||
var slotName = active.slots[ii];
|
||||
var slotIndex = skeleton.findSlotIndex(slotName);
|
||||
|
||||
for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
|
||||
var slot = skeleton.drawOrder[iii];
|
||||
if (slot.data.index == slotIndex) {
|
||||
if (slot.attachment != null) {
|
||||
if (slot.attachment.name === active.regions[i].name) {
|
||||
isVisible = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isVisible) break;
|
||||
}
|
||||
|
||||
if (isVisible) renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR);
|
||||
|
||||
maxSlotWidth = Math.max(maxSlotWidth, region.width * scale);
|
||||
y += slotSize;
|
||||
j++;
|
||||
if (j == 3) {
|
||||
x += maxSlotWidth + 10;
|
||||
maxSlotWidth = 0;
|
||||
y = offset.y;
|
||||
j = 0;
|
||||
}
|
||||
}
|
||||
|
||||
renderer.end();
|
||||
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
init();
|
||||
};
|
||||
@ -1,5 +1,6 @@
|
||||
<html>
|
||||
<script src="../../../build/spine-webgl.js"></script>
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
body, html { height: 100% }
|
||||
@ -12,9 +13,14 @@
|
||||
<span style="color: #fff">Time Multiplier</span>
|
||||
<input type="range" min="0" max="200" value ="100" id="skeletonvsspritedemo-timeslider" style="color: #fff;"></input></br>
|
||||
<span style="color: #fff">Show Atlas</span>
|
||||
<input type="checkbox" id="skeletonvsspritedemo-atlascheckbox" style="color: #fff;"></input>
|
||||
<input type="checkbox" id="skeletonvsspritedemo-atlascheckbox" style="color: #fff;"></input></br>
|
||||
<input id="skeletonvsspritedemo-playbutton" type="button" value="Pause"></input>
|
||||
<input id="skeletonvsspritedemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input>
|
||||
</center>
|
||||
</div>
|
||||
<script src="skeletonvssprite.js"></script>
|
||||
<script>
|
||||
skeletonVsSpriteDemo();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +1,7 @@
|
||||
(function() {
|
||||
var skeletonVsSpriteDemo = function(pathPrefix) {
|
||||
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 skeletonAtlas;
|
||||
@ -7,11 +10,10 @@
|
||||
var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
|
||||
var lastFrameTime = Date.now() / 1000;
|
||||
var timeSlider, atlasCheckbox;
|
||||
|
||||
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 playButton, timeLine, isPlaying = true, playTime = 0;
|
||||
|
||||
function init () {
|
||||
if (pathPrefix === undefined) pathPrefix = "";
|
||||
timeSlider = document.getElementById("skeletonvsspritedemo-timeslider");
|
||||
atlasCheckbox = document.getElementById("skeletonvsspritedemo-atlascheckbox");
|
||||
|
||||
@ -20,7 +22,7 @@
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = new spine.webgl.AssetManager(gl);
|
||||
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
|
||||
assetManager.loadTexture("assets/raptor.png");
|
||||
assetManager.loadText("assets/raptor.json");
|
||||
assetManager.loadText("assets/raptor.atlas");
|
||||
@ -56,17 +58,43 @@
|
||||
frames.push(frameAtlas.findRegion("raptor-walk_" + i));
|
||||
}
|
||||
frameScale = bounds.x / frames[0].width * 1.1;
|
||||
|
||||
viewportWidth = ((700 + bounds.x) - offset.x);
|
||||
viewportHeight = ((0 + bounds.y) - offset.y);
|
||||
|
||||
renderer.camera.position.x = offset.x + viewportWidth / 2;
|
||||
renderer.camera.position.y = offset.y + viewportHeight / 2;
|
||||
viewportHeight = ((0 + bounds.y) - offset.y);
|
||||
|
||||
setupUI();
|
||||
requestAnimationFrame(render);
|
||||
} else requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#skeletonvsspritedemo-playbutton");
|
||||
playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying) playButton.val("Pause");
|
||||
else playButton.val("Play");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
|
||||
timeLine = $("#skeletonvsspritedemo-timeline");
|
||||
timeLineUpdate = function () {
|
||||
if (!isPlaying) {
|
||||
var time = timeLine.val() / 100;
|
||||
var animationDuration = animationState.getCurrent(0).animation.duration;
|
||||
time = animationDuration * time;
|
||||
animationState.update(time - playTime);
|
||||
animationState.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
playTime = time;
|
||||
frameTime = time;
|
||||
while (frameTime > animationDuration) frameTime -= animationDuration;
|
||||
currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);
|
||||
}
|
||||
}
|
||||
timeLine.change(timeLineUpdate);
|
||||
timeLine.on("input", timeLineUpdate);
|
||||
timeLine.click(function () { if (isPlaying) playButton.click();});
|
||||
}
|
||||
|
||||
function render () {
|
||||
var now = Date.now() / 1000;
|
||||
var delta = now - lastFrameTime;
|
||||
@ -75,19 +103,27 @@
|
||||
|
||||
delta *= (timeSlider.value / 100);
|
||||
|
||||
if (!atlasCheckbox.checked) {
|
||||
animationState.update(delta);
|
||||
animationState.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
if (!atlasCheckbox.checked) {
|
||||
if (isPlaying) {
|
||||
var animationDuration = animationState.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration) {
|
||||
playTime -= animationDuration;
|
||||
}
|
||||
timeLine.val(playTime / animationDuration * 100);
|
||||
|
||||
frameTime += delta;
|
||||
if (frameTime > 1 / FPS) {
|
||||
frameTime -= 1 / FPS;
|
||||
currFrame++;
|
||||
if (currFrame >= frames.length) currFrame = 0;
|
||||
animationState.update(delta);
|
||||
animationState.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
frameTime += delta;
|
||||
while (frameTime > animationDuration) frameTime -= animationDuration;
|
||||
currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);
|
||||
}
|
||||
}
|
||||
|
||||
renderer.camera.position.x = offset.x + viewportWidth / 2 + 100;
|
||||
renderer.camera.position.y = offset.y + viewportHeight / 2;
|
||||
renderer.camera.viewportWidth = viewportWidth * 1.2;
|
||||
renderer.camera.viewportHeight = viewportHeight * 1.2;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
@ -111,7 +147,7 @@
|
||||
renderer.drawTexture(skeletonAtlas.pages[0].texture, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
|
||||
offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize);
|
||||
renderer.rect(false, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
|
||||
offset.y + halfSpaceWidth / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize, SKELETON_ATLAS_COLOR);
|
||||
offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize, SKELETON_ATLAS_COLOR);
|
||||
|
||||
var x = offset.x + halfSpaceWidth;
|
||||
var y = offset.y + halfSpaceHeight / 2;
|
||||
@ -130,4 +166,4 @@
|
||||
}
|
||||
|
||||
init();
|
||||
})();
|
||||
};
|
||||
@ -1,5 +1,6 @@
|
||||
<html>
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
body, html { height: 100% }
|
||||
|
||||
@ -31,10 +31,10 @@
|
||||
|
||||
module spine.webgl {
|
||||
export class AssetManager extends spine.AssetManager {
|
||||
constructor (gl: WebGLRenderingContext) {
|
||||
constructor (gl: WebGLRenderingContext, pathPrefix: string = "") {
|
||||
super((image: HTMLImageElement) => {
|
||||
return new spine.webgl.GLTexture(gl, image);
|
||||
});
|
||||
}, pathPrefix);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user