UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-06 10:46:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Getting close to being done with demos

Browse Source
This commit is contained in:
badlogic 2016-09-01 17:12:50 +02:00
parent 348b11e275
commit e5032250bc
18 changed files with 178 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
spine-ts/build/spine-all.js
View File

@ -4121,7 +4121,7 @@ var spine;
spine.DebugUtils = DebugUtils; spine.DebugUtils = DebugUtils;
var Pool = (function () { var Pool = (function () {
function Pool(instantiator) { function Pool(instantiator) {
this.items = new Array(16); this.items = new Array();
this.instantiator = instantiator; this.instantiator = instantiator;
} }
Pool.prototype.obtain = function () { Pool.prototype.obtain = function () {
@ -5072,57 +5072,60 @@ var spine;
for (var i_1 = 0; i_1 < listeners.length; i_1++) { for (var i_1 = 0; i_1 < listeners.length; i_1++) {
listeners[i_1].down(_this.currTouch.x, _this.currTouch.y); listeners[i_1].down(_this.currTouch.x, _this.currTouch.y);
} }
console.log("Start " + _this.currTouch.x + ", " + _this.currTouch.y);
_this.lastX = _this.currTouch.x; _this.lastX = _this.currTouch.x;
_this.lastY = _this.currTouch.y; _this.lastY = _this.currTouch.y;
_this.buttonDown = true; _this.buttonDown = true;
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchend", function (ev) { element.addEventListener("touchend", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
var touch = touches[i]; var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) { if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect(); var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left; var x = _this.currTouch.x = touch.clientX - rect.left;
var y = touch.clientY - rect.top; var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch); _this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners; var listeners = _this.listeners;
for (var i_2 = 0; i_2 < listeners.length; i_2++) { for (var i_2 = 0; i_2 < listeners.length; i_2++) {
listeners[i_2].up(x, y); listeners[i_2].up(x, y);
} }
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break; break;
} }
} }
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchcancel", function (ev) { element.addEventListener("touchcancel", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
var touch = touches[i]; var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) { if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect(); var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left; var x = _this.currTouch.x = touch.clientX - rect.left;
var y = touch.clientY - rect.top; var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch); _this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners; var listeners = _this.listeners;
for (var i_3 = 0; i_3 < listeners.length; i_3++) { for (var i_3 = 0; i_3 < listeners.length; i_3++) {
listeners[i_3].up(x, y); listeners[i_3].up(x, y);
} }
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break; break;
} }
} }
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchmove", function (ev) { element.addEventListener("touchmove", function (ev) {
if (_this.currTouch != null) if (_this.currTouch == null)
return; return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
@ -5135,6 +5138,9 @@ var spine;
for (var i_4 = 0; i_4 < listeners.length; i_4++) { for (var i_4 = 0; i_4 < listeners.length; i_4++) {
listeners[i_4].dragged(x, y); listeners[i_4].dragged(x, y);
} }
console.log("Drag " + x + ", " + y);
_this.lastX = _this.currTouch.x = x;
_this.lastY = _this.currTouch.y = y;
break; break;
} }
} }
@ -5178,7 +5184,6 @@ var spine;
this.backgroundColor = new spine.Color(0, 0, 0, 1); this.backgroundColor = new spine.Color(0, 0, 0, 1);
this.renderer = renderer; this.renderer = renderer;
var logoImg = document.createElement("img"); var logoImg = document.createElement("img");
document.getElementsByTagName("body")[0].appendChild(logoImg);
logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA; logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
logoImg.crossOrigin = "anonymous"; logoImg.crossOrigin = "anonymous";
logoImg.onload = function (ev) { logoImg.onload = function (ev) {

2
spine-ts/build/spine-all.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-core.js
View File

@ -3944,7 +3944,7 @@ var spine;
spine.DebugUtils = DebugUtils; spine.DebugUtils = DebugUtils;
var Pool = (function () { var Pool = (function () {
function Pool(instantiator) { function Pool(instantiator) {
this.items = new Array(16); this.items = new Array();
this.instantiator = instantiator; this.instantiator = instantiator;
} }
Pool.prototype.obtain = function () { Pool.prototype.obtain = function () {

2
spine-ts/build/spine-core.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-threejs.js
View File

@ -3944,7 +3944,7 @@ var spine;
spine.DebugUtils = DebugUtils; spine.DebugUtils = DebugUtils;
var Pool = (function () { var Pool = (function () {
function Pool(instantiator) { function Pool(instantiator) {
this.items = new Array(16); this.items = new Array();
this.instantiator = instantiator; this.instantiator = instantiator;
} }
Pool.prototype.obtain = function () { Pool.prototype.obtain = function () {

2
spine-ts/build/spine-threejs.js.map
View File

File diff suppressed because one or more lines are too long

35
spine-ts/build/spine-webgl.js
View File

@ -3944,7 +3944,7 @@ var spine;
spine.DebugUtils = DebugUtils; spine.DebugUtils = DebugUtils;
var Pool = (function () { var Pool = (function () {
function Pool(instantiator) { function Pool(instantiator) {
this.items = new Array(16); this.items = new Array();
this.instantiator = instantiator; this.instantiator = instantiator;
} }
Pool.prototype.obtain = function () { Pool.prototype.obtain = function () {
@ -4649,57 +4649,60 @@ var spine;
for (var i_1 = 0; i_1 < listeners.length; i_1++) { for (var i_1 = 0; i_1 < listeners.length; i_1++) {
listeners[i_1].down(_this.currTouch.x, _this.currTouch.y); listeners[i_1].down(_this.currTouch.x, _this.currTouch.y);
} }
console.log("Start " + _this.currTouch.x + ", " + _this.currTouch.y);
_this.lastX = _this.currTouch.x; _this.lastX = _this.currTouch.x;
_this.lastY = _this.currTouch.y; _this.lastY = _this.currTouch.y;
_this.buttonDown = true; _this.buttonDown = true;
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchend", function (ev) { element.addEventListener("touchend", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
var touch = touches[i]; var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) { if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect(); var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left; var x = _this.currTouch.x = touch.clientX - rect.left;
var y = touch.clientY - rect.top; var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch); _this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners; var listeners = _this.listeners;
for (var i_2 = 0; i_2 < listeners.length; i_2++) { for (var i_2 = 0; i_2 < listeners.length; i_2++) {
listeners[i_2].up(x, y); listeners[i_2].up(x, y);
} }
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break; break;
} }
} }
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchcancel", function (ev) { element.addEventListener("touchcancel", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
var touch = touches[i]; var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) { if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect(); var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left; var x = _this.currTouch.x = touch.clientX - rect.left;
var y = touch.clientY - rect.top; var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch); _this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners; var listeners = _this.listeners;
for (var i_3 = 0; i_3 < listeners.length; i_3++) { for (var i_3 = 0; i_3 < listeners.length; i_3++) {
listeners[i_3].up(x, y); listeners[i_3].up(x, y);
} }
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break; break;
} }
} }
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchmove", function (ev) { element.addEventListener("touchmove", function (ev) {
if (_this.currTouch != null) if (_this.currTouch == null)
return; return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
@ -4712,6 +4715,9 @@ var spine;
for (var i_4 = 0; i_4 < listeners.length; i_4++) { for (var i_4 = 0; i_4 < listeners.length; i_4++) {
listeners[i_4].dragged(x, y); listeners[i_4].dragged(x, y);
} }
console.log("Drag " + x + ", " + y);
_this.lastX = _this.currTouch.x = x;
_this.lastY = _this.currTouch.y = y;
break; break;
} }
} }
@ -4755,7 +4761,6 @@ var spine;
this.backgroundColor = new spine.Color(0, 0, 0, 1); this.backgroundColor = new spine.Color(0, 0, 0, 1);
this.renderer = renderer; this.renderer = renderer;
var logoImg = document.createElement("img"); var logoImg = document.createElement("img");
document.getElementsByTagName("body")[0].appendChild(logoImg);
logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA; logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
logoImg.crossOrigin = "anonymous"; logoImg.crossOrigin = "anonymous";
logoImg.onload = function (ev) { logoImg.onload = function (ev) {

2
spine-ts/build/spine-webgl.js.map
View File

File diff suppressed because one or more lines are too long

35
spine-ts/build/spine-widget.js
View File

@ -3944,7 +3944,7 @@ var spine;
spine.DebugUtils = DebugUtils; spine.DebugUtils = DebugUtils;
var Pool = (function () { var Pool = (function () {
function Pool(instantiator) { function Pool(instantiator) {
this.items = new Array(16); this.items = new Array();
this.instantiator = instantiator; this.instantiator = instantiator;
} }
Pool.prototype.obtain = function () { Pool.prototype.obtain = function () {
@ -4649,57 +4649,60 @@ var spine;
for (var i_1 = 0; i_1 < listeners.length; i_1++) { for (var i_1 = 0; i_1 < listeners.length; i_1++) {
listeners[i_1].down(_this.currTouch.x, _this.currTouch.y); listeners[i_1].down(_this.currTouch.x, _this.currTouch.y);
} }
console.log("Start " + _this.currTouch.x + ", " + _this.currTouch.y);
_this.lastX = _this.currTouch.x; _this.lastX = _this.currTouch.x;
_this.lastY = _this.currTouch.y; _this.lastY = _this.currTouch.y;
_this.buttonDown = true; _this.buttonDown = true;
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchend", function (ev) { element.addEventListener("touchend", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
var touch = touches[i]; var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) { if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect(); var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left; var x = _this.currTouch.x = touch.clientX - rect.left;
var y = touch.clientY - rect.top; var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch); _this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners; var listeners = _this.listeners;
for (var i_2 = 0; i_2 < listeners.length; i_2++) { for (var i_2 = 0; i_2 < listeners.length; i_2++) {
listeners[i_2].up(x, y); listeners[i_2].up(x, y);
} }
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break; break;
} }
} }
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchcancel", function (ev) { element.addEventListener("touchcancel", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
var touch = touches[i]; var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) { if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect(); var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left; var x = _this.currTouch.x = touch.clientX - rect.left;
var y = touch.clientY - rect.top; var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch); _this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners; var listeners = _this.listeners;
for (var i_3 = 0; i_3 < listeners.length; i_3++) { for (var i_3 = 0; i_3 < listeners.length; i_3++) {
listeners[i_3].up(x, y); listeners[i_3].up(x, y);
} }
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break; break;
} }
} }
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchmove", function (ev) { element.addEventListener("touchmove", function (ev) {
if (_this.currTouch != null) if (_this.currTouch == null)
return; return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
@ -4712,6 +4715,9 @@ var spine;
for (var i_4 = 0; i_4 < listeners.length; i_4++) { for (var i_4 = 0; i_4 < listeners.length; i_4++) {
listeners[i_4].dragged(x, y); listeners[i_4].dragged(x, y);
} }
console.log("Drag " + x + ", " + y);
_this.lastX = _this.currTouch.x = x;
_this.lastY = _this.currTouch.y = y;
break; break;
} }
} }
@ -4755,7 +4761,6 @@ var spine;
this.backgroundColor = new spine.Color(0, 0, 0, 1); this.backgroundColor = new spine.Color(0, 0, 0, 1);
this.renderer = renderer; this.renderer = renderer;
var logoImg = document.createElement("img"); var logoImg = document.createElement("img");
document.getElementsByTagName("body")[0].appendChild(logoImg);
logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA; logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
logoImg.crossOrigin = "anonymous"; logoImg.crossOrigin = "anonymous";
logoImg.onload = function (ev) { logoImg.onload = function (ev) {

2
spine-ts/build/spine-widget.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/core/src/Utils.ts
View File

@ -181,7 +181,7 @@ module spine {
} }
export class Pool<T> { export class Pool<T> {
private items = new Array<T>(16); private items = new Array<T>();
private instantiator: () => T; private instantiator: () => T;
constructor (instantiator: () => T) { constructor (instantiator: () => T) {

2
spine-ts/webgl/demos/ikconstraint.html
View File

@ -12,7 +12,7 @@
<body> <body>
<canvas id="ikdemo-canvas"></canvas> <canvas id="ikdemo-canvas"></canvas>
<center> <center>
<div>Display Bones</div><input id="stretchydemo-drawbones" type="checkbox"></input> <div>Display Bones</div><input id="ikdemo-drawbones" type="checkbox"><input></div>
</center> </center>
<script src="utils.js"></script> <script src="utils.js"></script>
<script src="ikconstraint.js"></script> <script src="ikconstraint.js"></script>

16
spine-ts/webgl/demos/ikconstraint.js
View File

@ -5,14 +5,13 @@ var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8); var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, bounds; var skeleton, state, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var target = null; var target = null;
var hoverTargets = []; var hoverTargets = [];
var controlBones = ["hoverboard controller", "hip", "board target"]; var controlBones = ["hoverboard controller", "hip", "board target"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
var kneePos = new spine.Vector2(); var isPlaying = true;
var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
@ -44,7 +43,9 @@ var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("spineboy-hover.json")); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("spineboy-hover.json"));
skeleton = new spine.Skeleton(skeletonData); skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose(); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "idle", true);
state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
bounds = new spine.Vector2(); bounds = new spine.Vector2();
@ -81,6 +82,7 @@ var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
function setupInput (){ function setupInput (){
input.addListener({ input.addListener({
down: function(x, y) { down: function(x, y) {
isPlaying = false;
for (var i = 0; i < controlBones.length; i++) { for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]); var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
@ -122,7 +124,9 @@ var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
function render () { function render () {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportWidth = bounds.x * 1.2;

6
spine-ts/webgl/demos/imagesequences.js
View File

@ -5,7 +5,7 @@ var imageSequencesDemo = function(pathPrefix, loadingComplete, bgColor) {
var skeleton, bounds; var skeleton, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var skeletons = {}; var skeletons = {};
var activeSkeleton = "alien"; var activeSkeleton = "Alien";
var playButton, timeLine, isPlaying = true; var playButton, timeLine, isPlaying = true;
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1); if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1);
@ -32,8 +32,8 @@ var imageSequencesDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () { function load () {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
skeletons["alien"] = loadSkeleton("alien", "death", ["head", "splat01"]); skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
skeletons["dragon"] = loadSkeleton("dragon", "flying", ["R_wing"]) skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI(); setupUI();
loadingComplete(canvas, render); loadingComplete(canvas, render);
} else { } else {

4
spine-ts/webgl/demos/skins.html
View File

@ -15,8 +15,8 @@
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
<select id="skinsdemo-active-skin"></select></br> <select id="skinsdemo-active-skin"></select></br>
<button id="skinsdemo-randomizeskin" value="Random Skin">Random Skin</button> <button id="skinsdemo-randomizeattachments" value="Random Skin">Random Attachments</button>
<button id="skinsdemo-randomizeattachments" value="Randomize Attachments">Randomize Attachments</button> <div>Randomize Skin</div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input></div>
</div> </div>
</center> </center>
<script src="utils.js"></script> <script src="utils.js"></script>

115
spine-ts/webgl/demos/skins.js
View File

@ -3,8 +3,9 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
var skeleton, state, offset, bounds; var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var playButton, timeLine, isPlaying = true, playTime = 0; var playButton, timeLine, isPlaying = true, playTime = 0;
var randomizeSkins, lastSkinChange = Date.now() / 1000;
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
if (pathPrefix === undefined) pathPrefix = ""; if (pathPrefix === undefined) pathPrefix = "";
@ -18,6 +19,7 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
assetManager.loadTexture("heroes.png"); assetManager.loadTexture("heroes.png");
assetManager.loadText("heroes.json"); assetManager.loadText("heroes.json");
assetManager.loadText("heroes.atlas"); assetManager.loadText("heroes.atlas");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer); loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor; loadingScreen.backgroundColor = bgColor;
@ -47,6 +49,7 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
bounds = new spine.Vector2(); bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds); skeleton.getBounds(offset, bounds);
setupUI(); setupUI();
setupInput();
loadingComplete(canvas, render); loadingComplete(canvas, render);
} else { } else {
loadingScreen.draw(); loadingScreen.draw();
@ -54,6 +57,17 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
} }
} }
function setupInput (){
input.addListener({
down: function(x, y) {
state.setAnimation(5, Math.random() > 0.5 ? "meleeSwing1" : "meleeSwing2", false, 0);
},
up: function(x, y) { },
dragged: function(x, y) { },
moved: function (x, y) { }
});
}
function setupAnimations(state) { function setupAnimations(state) {
state.addAnimation(0, "idle", true, 1); state.addAnimation(0, "idle", true, 1);
state.addAnimation(0, "walk", true, 2); state.addAnimation(0, "walk", true, 2);
@ -85,7 +99,14 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
state.addAnimation(0, "idleTired", true, 0.5); state.addAnimation(0, "idleTired", true, 0.5);
state.addAnimation(0, "crouchIdle", true, 1.5); state.addAnimation(0, "crouchIdle", true, 1.5);
state.addAnimation(0, "crouchWalk", true, 2); state.addAnimation(0, "crouchWalk", true, 2);
state.addAnimation(0, "crouchIdle", true, 2.5); state.addAnimation(0, "crouchIdle", true, 2.5).listener = {
event: function (trackIndex, event) {},
complete: function (trackIndex, loopCount) {},
start: function (trackIndex) {
setupAnimations(state);
},
end: function (trackIndex) { }
};
state.addAnimation(1, "meleeSwing1", false, 4); state.addAnimation(1, "meleeSwing1", false, 4);
@ -94,15 +115,9 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
state.addAnimation(3, "meleeSwing2", false, 10.5); state.addAnimation(3, "meleeSwing2", false, 10.5);
state.addAnimation(3, "meleeSwing1", false, 0); state.addAnimation(3, "meleeSwing1", false, 0);
state.addAnimation(3, "meleeSwing2", false, 0); state.addAnimation(3, "meleeSwing2", false, 0);
state.addAnimation(4, "hideSword", false, 19.15).listener = { state.addAnimation(4, "hideSword", false, 0);
event: function (trackIndex, event) {}, state.addAnimation(4, "hideSword", false, 19.15);
complete: function (trackIndex, loopCount) {},
start: function (trackIndex) {
setAnimations(state);
},
end: function (trackIndex) {}
};
} }
function setupUI() { function setupUI() {
@ -121,49 +136,65 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
activeSkin = $("#skinsdemo-active-skin option:selected").text(); activeSkin = $("#skinsdemo-active-skin option:selected").text();
skeleton.setSkinByName(activeSkin); skeleton.setSkinByName(activeSkin);
skeleton.setSlotsToSetupPose(); skeleton.setSlotsToSetupPose();
randomizeSkins.checked = false;
}); });
var randomSkin = $("#skinsdemo-randomizeskin"); var randomAttachments = $("#skinsdemo-randomizeattachments");
randomSkin.click(function() { randomAttachments.click(function() {
var result; randomizeAttachments();
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];
}
}
skeleton.setSkin(result);
skeleton.setSlotsToSetupPose();
$("#skinsdemo-active-skin select").val(result.name);
}); });
randomizeSkins = document.getElementById("skinsdemo-randomizeskins");
}
var randomizeAttachments = $("#skinsdemo-randomizeattachments"); function randomizeSkin() {
randomizeAttachments.click(function() { var result;
var skins = []; var count = 0;
for (var skin in skeleton.data.skins) { for (var skin in skeleton.data.skins) {
skin = skeleton.data.skins[skin]; if (skeleton.data.skins[skin].name === "default") continue;
if (skin.name === "default") continue; if (Math.random() < 1/++count) {
skins.push(skin); result = skeleton.data.skins[skin];
} }
}
skeleton.setSkin(result);
skeleton.setSlotsToSetupPose();
$("#skinsdemo-active-skin option").filter(function() {
return ($(this).text() == result.name);
}).prop("selected", true);
}
var newSkin = new spine.Skin("random-skin"); function randomizeAttachments() {
for (var slot = 0; slot < skeleton.slots.length; slot++) { var skins = [];
var skin = skins[(Math.random() * skins.length - 1) | 0]; for (var skin in skeleton.data.skins) {
var attachments = skin.attachments[slot]; skin = skeleton.data.skins[skin];
for (var attachmentName in attachments) { if (skin.name === "default") continue;
newSkin.addAttachment(slot, attachmentName, attachments[attachmentName]); 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.addAttachment(slot, attachmentName, attachments[attachmentName]);
} }
skeleton.setSkin(newSkin); }
skeleton.setSlotsToSetupPose(); skeleton.setSkin(newSkin);
}); skeleton.setSlotsToSetupPose();
randomizeSkins.checked = false;
} }
function render () { function render () {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; 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 - 150; renderer.camera.position.x = offset.x + bounds.x * 1.5 - 150;
renderer.camera.position.y = offset.y + bounds.y / 2; renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.camera.viewportWidth = bounds.x * 3; renderer.camera.viewportWidth = bounds.x * 3;
@ -183,7 +214,7 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
var width = bounds.x; var width = bounds.x;
var scale = width / texture.getImage().width; var scale = width / texture.getImage().width;
var height = scale * texture.getImage().height; var height = scale * texture.getImage().height;
renderer.drawTexture(texture, offset.x + bounds.x + 300, offset.y + bounds.y / 2 - height / 2 - 50, width, height); renderer.drawTexture(texture, offset.x + bounds.x + 200, offset.y + bounds.y / 2 - height / 2 - 50, width, height);
renderer.end(); renderer.end();
} }

37
spine-ts/webgl/src/Input.ts
View File

@ -118,60 +118,60 @@ module spine.webgl {
for (let i = 0; i < listeners.length; i++) { for (let i = 0; i < listeners.length; i++) {
listeners[i].down(this.currTouch.x, this.currTouch.y); listeners[i].down(this.currTouch.x, this.currTouch.y);
} }
console.log("Start " + this.currTouch.x + ", " + this.currTouch.y);
this.lastX = this.currTouch.x; this.lastX = this.currTouch.x;
this.lastY = this.currTouch.y; this.lastY = this.currTouch.y;
this.buttonDown = true; this.buttonDown = true;
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchend", (ev: TouchEvent) => { element.addEventListener("touchend", (ev: TouchEvent) => {
if (this.currTouch != null) return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
var touch = touches[i]; var touch = touches[i];
if (this.currTouch.identifier === touch.identifier) { if (this.currTouch.identifier === touch.identifier) {
let rect = element.getBoundingClientRect(); let rect = element.getBoundingClientRect();
let x = touch.clientX - rect.left; let x = this.currTouch.x = touch.clientX - rect.left;
let y = touch.clientY - rect.top; let y = this.currTouch.y = touch.clientY - rect.top;
this.touchesPool.free(this.currTouch); this.touchesPool.free(this.currTouch);
this.currTouch = null;
this.buttonDown = false;
let listeners = this.listeners; let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) { for (let i = 0; i < listeners.length; i++) {
listeners[i].up(x, y); listeners[i].up(x, y);
} }
console.log("End " + x + ", " + y);
this.lastX = x;
this.lastY = y;
this.buttonDown = false;
this.currTouch = null;
break; break;
} }
} }
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchcancel", (ev: TouchEvent) => { element.addEventListener("touchcancel", (ev: TouchEvent) => {
if (this.currTouch != null) return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
var touch = touches[i]; var touch = touches[i];
if (this.currTouch.identifier === touch.identifier) { if (this.currTouch.identifier === touch.identifier) {
let rect = element.getBoundingClientRect(); let rect = element.getBoundingClientRect();
let x = touch.clientX - rect.left; let x = this.currTouch.x = touch.clientX - rect.left;
let y = touch.clientY - rect.top; let y = this.currTouch.y = touch.clientY - rect.top;
this.touchesPool.free(this.currTouch); this.touchesPool.free(this.currTouch);
this.currTouch = null;
this.buttonDown = false;
let listeners = this.listeners; let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) { for (let i = 0; i < listeners.length; i++) {
listeners[i].up(x, y); listeners[i].up(x, y);
} }
console.log("End " + x + ", " + y);
this.lastX = x;
this.lastY = y;
this.buttonDown = false;
this.currTouch = null;
break; break;
} }
} }
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
element.addEventListener("touchmove", (ev: TouchEvent) => { element.addEventListener("touchmove", (ev: TouchEvent) => {
if (this.currTouch != null) return; if (this.currTouch == null) return;
var touches = ev.changedTouches; var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) { for (var i = 0; i < touches.length; i++) {
@ -185,6 +185,9 @@ module spine.webgl {
for (let i = 0; i < listeners.length; i++) { for (let i = 0; i < listeners.length; i++) {
listeners[i].dragged(x, y); listeners[i].dragged(x, y);
} }
console.log("Drag " + x + ", " + y);
this.lastX = this.currTouch.x = x;
this.lastY = this.currTouch.y = y;
break; break;
} }
} }

3
spine-ts/webgl/src/LoadingScreen.ts
View File

@ -17,8 +17,7 @@ module spine.webgl {
constructor (renderer: SceneRenderer) { constructor (renderer: SceneRenderer) {
this.renderer = renderer; this.renderer = renderer;
var logoImg = document.createElement("img"); var logoImg = document.createElement("img");
document.getElementsByTagName("body")[0].appendChild(logoImg);
logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA; logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
logoImg.crossOrigin = "anonymous"; logoImg.crossOrigin = "anonymous";
logoImg.onload = (ev) => { logoImg.onload = (ev) => {