UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 07:14:55 +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;
var Pool = (function () {
function Pool(instantiator) {
this.items = new Array(16);
this.items = new Array();
this.instantiator = instantiator;
}
Pool.prototype.obtain = function () {
@ -5072,57 +5072,60 @@ var spine;
for (var i_1 = 0; i_1 < listeners.length; i_1++) {
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.lastY = _this.currTouch.y;
_this.buttonDown = true;
ev.preventDefault();
}, false);
element.addEventListener("touchend", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
var x = _this.currTouch.x = touch.clientX - rect.left;
var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_2 = 0; i_2 < listeners.length; i_2++) {
listeners[i_2].up(x, y);
}
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchcancel", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
var x = _this.currTouch.x = touch.clientX - rect.left;
var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_3 = 0; i_3 < listeners.length; i_3++) {
listeners[i_3].up(x, y);
}
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchmove", function (ev) {
if (_this.currTouch != null)
if (_this.currTouch == null)
return;
var touches = ev.changedTouches;
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++) {
listeners[i_4].dragged(x, y);
}
console.log("Drag " + x + ", " + y);
_this.lastX = _this.currTouch.x = x;
_this.lastY = _this.currTouch.y = y;
break;
}
}
@ -5178,7 +5184,6 @@ var spine;
this.backgroundColor = new spine.Color(0, 0, 0, 1);
this.renderer = renderer;
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.crossOrigin = "anonymous";
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;
var Pool = (function () {
function Pool(instantiator) {
this.items = new Array(16);
this.items = new Array();
this.instantiator = instantiator;
}
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;
var Pool = (function () {
function Pool(instantiator) {
this.items = new Array(16);
this.items = new Array();
this.instantiator = instantiator;
}
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;
var Pool = (function () {
function Pool(instantiator) {
this.items = new Array(16);
this.items = new Array();
this.instantiator = instantiator;
}
Pool.prototype.obtain = function () {
@ -4649,57 +4649,60 @@ var spine;
for (var i_1 = 0; i_1 < listeners.length; i_1++) {
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.lastY = _this.currTouch.y;
_this.buttonDown = true;
ev.preventDefault();
}, false);
element.addEventListener("touchend", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
var x = _this.currTouch.x = touch.clientX - rect.left;
var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_2 = 0; i_2 < listeners.length; i_2++) {
listeners[i_2].up(x, y);
}
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchcancel", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
var x = _this.currTouch.x = touch.clientX - rect.left;
var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_3 = 0; i_3 < listeners.length; i_3++) {
listeners[i_3].up(x, y);
}
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchmove", function (ev) {
if (_this.currTouch != null)
if (_this.currTouch == null)
return;
var touches = ev.changedTouches;
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++) {
listeners[i_4].dragged(x, y);
}
console.log("Drag " + x + ", " + y);
_this.lastX = _this.currTouch.x = x;
_this.lastY = _this.currTouch.y = y;
break;
}
}
@ -4755,7 +4761,6 @@ var spine;
this.backgroundColor = new spine.Color(0, 0, 0, 1);
this.renderer = renderer;
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.crossOrigin = "anonymous";
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;
var Pool = (function () {
function Pool(instantiator) {
this.items = new Array(16);
this.items = new Array();
this.instantiator = instantiator;
}
Pool.prototype.obtain = function () {
@ -4649,57 +4649,60 @@ var spine;
for (var i_1 = 0; i_1 < listeners.length; i_1++) {
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.lastY = _this.currTouch.y;
_this.buttonDown = true;
ev.preventDefault();
}, false);
element.addEventListener("touchend", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
var x = _this.currTouch.x = touch.clientX - rect.left;
var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_2 = 0; i_2 < listeners.length; i_2++) {
listeners[i_2].up(x, y);
}
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchcancel", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
var x = _this.currTouch.x = touch.clientX - rect.left;
var y = _this.currTouch.y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_3 = 0; i_3 < listeners.length; i_3++) {
listeners[i_3].up(x, y);
}
console.log("End " + x + ", " + y);
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = false;
_this.currTouch = null;
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchmove", function (ev) {
if (_this.currTouch != null)
if (_this.currTouch == null)
return;
var touches = ev.changedTouches;
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++) {
listeners[i_4].dragged(x, y);
}
console.log("Drag " + x + ", " + y);
_this.lastX = _this.currTouch.x = x;
_this.lastY = _this.currTouch.y = y;
break;
}
}
@ -4755,7 +4761,6 @@ var spine;
this.backgroundColor = new spine.Color(0, 0, 0, 1);
this.renderer = renderer;
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.crossOrigin = "anonymous";
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> {
private items = new Array<T>(16);
private items = new Array<T>();
private instantiator: () => T;
constructor (instantiator: () => T) {

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

@ -12,7 +12,7 @@
<body>
<canvas id="ikdemo-canvas"></canvas>
<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>
<script src="utils.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 canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var target = null;
var hoverTargets = [];
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 kneePos = new spine.Vector2();
var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
var isPlaying = true;
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 skeletonData = skeletonJson.readSkeletonData(assetManager.get("spineboy-hover.json"));
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();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
@ -81,6 +82,7 @@ var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
function setupInput (){
input.addListener({
down: function(x, y) {
isPlaying = false;
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
@ -122,7 +124,9 @@ var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
function render () {
timeKeeper.update();
var delta = timeKeeper.delta;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
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 timeKeeper, loadingScreen;
var skeletons = {};
var activeSkeleton = "alien";
var activeSkeleton = "Alien";
var playButton, timeLine, isPlaying = true;
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1);
@ -32,8 +32,8 @@ var imageSequencesDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
skeletons["alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
skeletons["dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI();
loadingComplete(canvas, render);
} else {

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

@ -15,8 +15,8 @@
<center>
<div style="position: fixed; top: 0; width: 100%">
<select id="skinsdemo-active-skin"></select></br>
<button id="skinsdemo-randomizeskin" value="Random Skin">Random Skin</button>
<button id="skinsdemo-randomizeattachments" value="Randomize Attachments">Randomize Attachments</button>
<button id="skinsdemo-randomizeattachments" value="Random Skin">Random Attachments</button>
<div>Randomize Skin</div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input></div>
</div>
</center>
<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 timeKeeper, loadingScreen;
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 () {
if (pathPrefix === undefined) pathPrefix = "";
@ -18,6 +19,7 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
assetManager.loadTexture("heroes.png");
assetManager.loadText("heroes.json");
assetManager.loadText("heroes.atlas");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
@ -47,6 +49,7 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
setupUI();
setupInput();
loadingComplete(canvas, render);
} else {
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) {
state.addAnimation(0, "idle", true, 1);
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, "crouchIdle", true, 1.5);
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);
@ -94,15 +115,9 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
state.addAnimation(3, "meleeSwing2", false, 10.5);
state.addAnimation(3, "meleeSwing1", false, 0);
state.addAnimation(3, "meleeSwing2", false, 0);
state.addAnimation(4, "hideSword", false, 19.15).listener = {
event: function (trackIndex, event) {},
complete: function (trackIndex, loopCount) {},
start: function (trackIndex) {
setAnimations(state);
},
end: function (trackIndex) {}
};
state.addAnimation(4, "hideSword", false, 0);
state.addAnimation(4, "hideSword", false, 19.15);
}
function setupUI() {
@ -121,49 +136,65 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
activeSkin = $("#skinsdemo-active-skin option:selected").text();
skeleton.setSkinByName(activeSkin);
skeleton.setSlotsToSetupPose();
randomizeSkins.checked = false;
});
var randomSkin = $("#skinsdemo-randomizeskin");
randomSkin.click(function() {
var result;
var count = 0;
for (var skin in skeleton.data.skins) {
if (skeleton.data.skins[skin].name === "default") continue;
if (Math.random() < 1/++count) {
result = skeleton.data.skins[skin];
}
}
skeleton.setSkin(result);
skeleton.setSlotsToSetupPose();
$("#skinsdemo-active-skin select").val(result.name);
var randomAttachments = $("#skinsdemo-randomizeattachments");
randomAttachments.click(function() {
randomizeAttachments();
});
randomizeSkins = document.getElementById("skinsdemo-randomizeskins");
}
var randomizeAttachments = $("#skinsdemo-randomizeattachments");
randomizeAttachments.click(function() {
var skins = [];
for (var skin in skeleton.data.skins) {
skin = skeleton.data.skins[skin];
if (skin.name === "default") continue;
skins.push(skin);
function randomizeSkin() {
var result;
var count = 0;
for (var skin in skeleton.data.skins) {
if (skeleton.data.skins[skin].name === "default") continue;
if (Math.random() < 1/++count) {
result = skeleton.data.skins[skin];
}
}
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");
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]);
}
function randomizeAttachments() {
var skins = [];
for (var skin in skeleton.data.skins) {
skin = skeleton.data.skins[skin];
if (skin.name === "default") continue;
skins.push(skin);
}
var newSkin = new spine.Skin("random-skin");
for (var slot = 0; slot < skeleton.slots.length; slot++) {
var skin = skins[(Math.random() * skins.length - 1) | 0];
var attachments = skin.attachments[slot];
for (var attachmentName in attachments) {
newSkin.addAttachment(slot, attachmentName, attachments[attachmentName]);
}
skeleton.setSkin(newSkin);
skeleton.setSlotsToSetupPose();
});
}
skeleton.setSkin(newSkin);
skeleton.setSlotsToSetupPose();
randomizeSkins.checked = false;
}
function render () {
timeKeeper.update();
var delta = timeKeeper.delta;
if (randomizeSkins.checked) {
var now = Date.now() / 1000;
if (now - lastSkinChange > 2) {
randomizeSkin();
lastSkinChange = now;
}
}
renderer.camera.position.x = offset.x + bounds.x * 1.5 - 150;
renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.camera.viewportWidth = bounds.x * 3;
@ -183,7 +214,7 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
var width = bounds.x;
var scale = width / texture.getImage().width;
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();
}

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

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

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

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