UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-14 02:58:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Fixed input handling for player control bones and demos.

Browse Source
This commit is contained in:
Nathan Sweet 2021-06-22 22:52:00 -04:00
parent 286552b8fa
commit f77a51d33a
29 changed files with 211 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/build/spine-all.d.ts vendored
View File

@ -1289,7 +1289,6 @@ declare module spine.canvas {
declare module spine.webgl {
class AssetManager extends spine.AssetManager {
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string, downloader?: Downloader);
protected createTexture(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap): Texture;
}
}
declare module spine.webgl {

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

@ -2881,10 +2881,9 @@ var spine;
_this.success(success, path, atlas_1);
}
}, function (imagePath, message) {
if (!abort_1) {
abort_1 = true;
if (!abort_1)
_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
}
abort_1 = true;
});
};
for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {
@ -9241,12 +9240,10 @@ var spine;
function AssetManager(context, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
var _this = _super.call(this, function (image) { return _this.createTexture(context, image); }, pathPrefix, downloader) || this;
return _this;
return _super.call(this, function (image) {
return new spine.webgl.GLTexture(context, image);
}, pathPrefix, downloader) || this;
}
AssetManager.prototype.createTexture = function (context, image) {
return new spine.webgl.GLTexture(context, image);
};
return AssetManager;
}(spine.AssetManager));
webgl.AssetManager = AssetManager;
@ -11905,7 +11902,6 @@ var spine;
geo.setAttribute("uv", new THREE.InterleavedBufferAttribute(vertexBuffer, 2, 7, false));
geo.setIndex(new THREE.BufferAttribute(indices, 1));
geo.getIndex().usage = WebGLRenderingContext.DYNAMIC_DRAW;
;
geo.drawRange.start = 0;
geo.drawRange.count = 0;
_this.geometry = geo;
@ -12333,6 +12329,8 @@ var spine;
config.backgroundImage = null;
if (config.premultipliedAlpha === undefined)
config.premultipliedAlpha = true;
if (config.mipmaps === undefined)
config.mipmaps = true;
if (!config.debug)
config.debug = {};
if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0)
@ -12375,51 +12373,7 @@ var spine;
catch (e) {
this.showError("Sorry, your browser does not support WebGL.\nPlease use the latest version of Firefox, Chrome, Edge, or Safari.", e);
}
this.assetManager = new (function (_super) {
__extends(class_1, _super);
function class_1() {
return _super !== null && _super.apply(this, arguments) || this;
}
class_1.prototype.createTexture = function (context, image) {
return new (function (_super) {
__extends(class_2, _super);
function class_2() {
return _super !== null && _super.apply(this, arguments) || this;
}
class_2.prototype.setFilters = function (minFilter, magFilter) {
if (config.mipmaps) {
minFilter = spine.TextureFilter.MipMapLinearLinear;
magFilter = spine.TextureFilter.Linear;
}
var mipmaps = false;
switch (minFilter) {
case spine.TextureFilter.MipMap:
case spine.TextureFilter.MipMapLinearLinear:
case spine.TextureFilter.MipMapLinearNearest:
case spine.TextureFilter.MipMapNearestLinear:
case spine.TextureFilter.MipMapNearestNearest:
if (config.mipmaps) {
var gl = this.context.gl;
var ext = gl.getExtension("EXT_texture_filter_anisotropic");
if (ext) {
gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, 8);
mipmaps = true;
}
else
minFilter = spine.TextureFilter.Linear;
}
else
mipmaps = true;
}
_super.prototype.setFilters.call(this, minFilter, magFilter);
if (mipmaps)
this.update(true);
};
return class_2;
}(spine.webgl.GLTexture))(context, image);
};
return class_1;
}(spine.webgl.AssetManager))(this.context, "", config.downloader);
this.assetManager = new spine.webgl.AssetManager(this.context, "", config.downloader);
if (config.rawDataURIs) {
for (var path in config.rawDataURIs)
this.assetManager.setRawDataURI(path, config.rawDataURIs[path]);
@ -12516,6 +12470,22 @@ var spine;
this.showError("Error: Assets could not be loaded.\n" + toString(this.assetManager.getErrors()));
var config = this.config;
var atlas = this.assetManager.get(config.atlasUrl);
var gl = this.context.gl, anisotropic = gl.getExtension("EXT_texture_filter_anisotropic");
for (var _i = 0, _a = atlas.pages; _i < _a.length; _i++) {
var page = _a[_i];
var minFilter = page.minFilter;
if (config.mipmaps) {
if (anisotropic) {
gl.texParameterf(gl.TEXTURE_2D, anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, 8);
minFilter = spine.TextureFilter.MipMapLinearLinear;
}
else
minFilter = spine.TextureFilter.Linear;
page.texture.setFilters(minFilter, spine.TextureFilter.Nearest);
}
if (minFilter != spine.TextureFilter.Nearest && minFilter != spine.TextureFilter.Linear)
page.texture.update(true);
}
var skeletonData;
if (config.jsonUrl) {
try {
@ -12618,25 +12588,22 @@ var spine;
var input = new spine.webgl.Input(canvas);
var target = null;
var coords = new spine.webgl.Vector3();
var temp3 = new spine.webgl.Vector3();
var temp2 = new spine.Vector2();
var mouse = new spine.webgl.Vector3();
var position = new spine.Vector2();
var skeleton = this.skeleton;
var renderer = this.sceneRenderer;
var closest = function (x, y) {
y = canvas.height - y;
mouse.set(x, canvas.clientHeight - y, 0);
var bestDistance = 24, index = 0;
var best;
for (var i = 0; i < controlBones.length; i++) {
selectedBones[i] = null;
var bone = skeleton.findBone(controlBones[i]);
if (bone) {
renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.width, canvas.height);
var distance = temp3.set(x, y, 0).distance(coords);
if (distance < bestDistance) {
bestDistance = distance;
best = bone;
index = i;
}
var distance = renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.clientWidth, canvas.clientHeight).distance(mouse);
if (distance < bestDistance) {
bestDistance = distance;
best = bone;
index = i;
}
}
if (best)
@ -12653,13 +12620,13 @@ var spine;
},
dragged: function (x, y) {
if (target) {
x = spine.MathUtils.clamp(x, 0, canvas.width);
y = spine.MathUtils.clamp(y, 0, canvas.height);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
x = spine.MathUtils.clamp(x, 0, canvas.clientWidth);
y = spine.MathUtils.clamp(y, 0, canvas.clientHeight);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
if (target.parent) {
target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
target.x = temp2.x;
target.y = temp2.y;
target.parent.worldToLocal(position.set(coords.x - skeleton.x, coords.y - skeleton.y));
target.x = position.x;
target.y = position.y;
}
else {
target.x = coords.x - skeleton.x;
@ -12867,19 +12834,17 @@ var spine;
height: this.currentViewport.height + this.currentViewport.padBottom + this.currentViewport.padTop
};
if (this.previousViewport) {
var transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / config.viewport.transitionTime;
var transitionAlpha = (performance.now() - this.viewportTransitionStart) / 1000 / config.viewport.transitionTime;
if (transitionAlpha < 1) {
var oldViewport = {
x: this.previousViewport.x - this.previousViewport.padLeft,
y: this.previousViewport.y - this.previousViewport.padBottom,
width: this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight,
height: this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop
};
var x = this.previousViewport.x - this.previousViewport.padLeft;
var y = this.previousViewport.y - this.previousViewport.padBottom;
var width = this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight;
var height = this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop;
viewport = {
x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
x: x + (viewport.x - x) * transitionAlpha,
y: y + (viewport.y - y) * transitionAlpha,
width: width + (viewport.width - width) * transitionAlpha,
height: height + (viewport.height - height) * transitionAlpha
};
}
}
@ -12923,9 +12888,9 @@ var spine;
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
}
gl.lineWidth(1);
}
if (config.viewport.debugRender) {
gl.lineWidth(1);
renderer.rect(false, this.currentViewport.x, this.currentViewport.y, this.currentViewport.width, this.currentViewport.height, spine.Color.GREEN);
renderer.rect(false, viewport.x, viewport.y, viewport.width, viewport.height, spine.Color.RED);
}

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

File diff suppressed because one or more lines are too long

5
spine-ts/build/spine-canvas.js
View File

@ -2881,10 +2881,9 @@ var spine;
_this.success(success, path, atlas_1);
}
}, function (imagePath, message) {
if (!abort_1) {
abort_1 = true;
if (!abort_1)
_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
}
abort_1 = true;
});
};
for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {

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

File diff suppressed because one or more lines are too long

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

@ -2881,10 +2881,9 @@ var spine;
_this.success(success, path, atlas_1);
}
}, function (imagePath, message) {
if (!abort_1) {
abort_1 = true;
if (!abort_1)
_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
}
abort_1 = true;
});
};
for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {

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

File diff suppressed because one or more lines are too long

1
spine-ts/build/spine-player.d.ts vendored
View File

@ -1258,7 +1258,6 @@ declare module spine {
declare module spine.webgl {
class AssetManager extends spine.AssetManager {
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string, downloader?: Downloader);
protected createTexture(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap): Texture;
}
}
declare module spine.webgl {

130
spine-ts/build/spine-player.js
View File

@ -2881,10 +2881,9 @@ var spine;
_this.success(success, path, atlas_1);
}
}, function (imagePath, message) {
if (!abort_1) {
abort_1 = true;
if (!abort_1)
_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
}
abort_1 = true;
});
};
for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {
@ -8991,12 +8990,10 @@ var spine;
function AssetManager(context, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
var _this = _super.call(this, function (image) { return _this.createTexture(context, image); }, pathPrefix, downloader) || this;
return _this;
return _super.call(this, function (image) {
return new spine.webgl.GLTexture(context, image);
}, pathPrefix, downloader) || this;
}
AssetManager.prototype.createTexture = function (context, image) {
return new spine.webgl.GLTexture(context, image);
};
return AssetManager;
}(spine.AssetManager));
webgl.AssetManager = AssetManager;
@ -11656,6 +11653,8 @@ var spine;
config.backgroundImage = null;
if (config.premultipliedAlpha === undefined)
config.premultipliedAlpha = true;
if (config.mipmaps === undefined)
config.mipmaps = true;
if (!config.debug)
config.debug = {};
if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0)
@ -11698,51 +11697,7 @@ var spine;
catch (e) {
this.showError("Sorry, your browser does not support WebGL.\nPlease use the latest version of Firefox, Chrome, Edge, or Safari.", e);
}
this.assetManager = new (function (_super) {
__extends(class_1, _super);
function class_1() {
return _super !== null && _super.apply(this, arguments) || this;
}
class_1.prototype.createTexture = function (context, image) {
return new (function (_super) {
__extends(class_2, _super);
function class_2() {
return _super !== null && _super.apply(this, arguments) || this;
}
class_2.prototype.setFilters = function (minFilter, magFilter) {
if (config.mipmaps) {
minFilter = spine.TextureFilter.MipMapLinearLinear;
magFilter = spine.TextureFilter.Linear;
}
var mipmaps = false;
switch (minFilter) {
case spine.TextureFilter.MipMap:
case spine.TextureFilter.MipMapLinearLinear:
case spine.TextureFilter.MipMapLinearNearest:
case spine.TextureFilter.MipMapNearestLinear:
case spine.TextureFilter.MipMapNearestNearest:
if (config.mipmaps) {
var gl = this.context.gl;
var ext = gl.getExtension("EXT_texture_filter_anisotropic");
if (ext) {
gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, 8);
mipmaps = true;
}
else
minFilter = spine.TextureFilter.Linear;
}
else
mipmaps = true;
}
_super.prototype.setFilters.call(this, minFilter, magFilter);
if (mipmaps)
this.update(true);
};
return class_2;
}(spine.webgl.GLTexture))(context, image);
};
return class_1;
}(spine.webgl.AssetManager))(this.context, "", config.downloader);
this.assetManager = new spine.webgl.AssetManager(this.context, "", config.downloader);
if (config.rawDataURIs) {
for (var path in config.rawDataURIs)
this.assetManager.setRawDataURI(path, config.rawDataURIs[path]);
@ -11839,6 +11794,22 @@ var spine;
this.showError("Error: Assets could not be loaded.\n" + toString(this.assetManager.getErrors()));
var config = this.config;
var atlas = this.assetManager.get(config.atlasUrl);
var gl = this.context.gl, anisotropic = gl.getExtension("EXT_texture_filter_anisotropic");
for (var _i = 0, _a = atlas.pages; _i < _a.length; _i++) {
var page = _a[_i];
var minFilter = page.minFilter;
if (config.mipmaps) {
if (anisotropic) {
gl.texParameterf(gl.TEXTURE_2D, anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, 8);
minFilter = spine.TextureFilter.MipMapLinearLinear;
}
else
minFilter = spine.TextureFilter.Linear;
page.texture.setFilters(minFilter, spine.TextureFilter.Nearest);
}
if (minFilter != spine.TextureFilter.Nearest && minFilter != spine.TextureFilter.Linear)
page.texture.update(true);
}
var skeletonData;
if (config.jsonUrl) {
try {
@ -11941,25 +11912,22 @@ var spine;
var input = new spine.webgl.Input(canvas);
var target = null;
var coords = new spine.webgl.Vector3();
var temp3 = new spine.webgl.Vector3();
var temp2 = new spine.Vector2();
var mouse = new spine.webgl.Vector3();
var position = new spine.Vector2();
var skeleton = this.skeleton;
var renderer = this.sceneRenderer;
var closest = function (x, y) {
y = canvas.height - y;
mouse.set(x, canvas.clientHeight - y, 0);
var bestDistance = 24, index = 0;
var best;
for (var i = 0; i < controlBones.length; i++) {
selectedBones[i] = null;
var bone = skeleton.findBone(controlBones[i]);
if (bone) {
renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.width, canvas.height);
var distance = temp3.set(x, y, 0).distance(coords);
if (distance < bestDistance) {
bestDistance = distance;
best = bone;
index = i;
}
var distance = renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.clientWidth, canvas.clientHeight).distance(mouse);
if (distance < bestDistance) {
bestDistance = distance;
best = bone;
index = i;
}
}
if (best)
@ -11976,13 +11944,13 @@ var spine;
},
dragged: function (x, y) {
if (target) {
x = spine.MathUtils.clamp(x, 0, canvas.width);
y = spine.MathUtils.clamp(y, 0, canvas.height);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
x = spine.MathUtils.clamp(x, 0, canvas.clientWidth);
y = spine.MathUtils.clamp(y, 0, canvas.clientHeight);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
if (target.parent) {
target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
target.x = temp2.x;
target.y = temp2.y;
target.parent.worldToLocal(position.set(coords.x - skeleton.x, coords.y - skeleton.y));
target.x = position.x;
target.y = position.y;
}
else {
target.x = coords.x - skeleton.x;
@ -12190,19 +12158,17 @@ var spine;
height: this.currentViewport.height + this.currentViewport.padBottom + this.currentViewport.padTop
};
if (this.previousViewport) {
var transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / config.viewport.transitionTime;
var transitionAlpha = (performance.now() - this.viewportTransitionStart) / 1000 / config.viewport.transitionTime;
if (transitionAlpha < 1) {
var oldViewport = {
x: this.previousViewport.x - this.previousViewport.padLeft,
y: this.previousViewport.y - this.previousViewport.padBottom,
width: this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight,
height: this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop
};
var x = this.previousViewport.x - this.previousViewport.padLeft;
var y = this.previousViewport.y - this.previousViewport.padBottom;
var width = this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight;
var height = this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop;
viewport = {
x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
x: x + (viewport.x - x) * transitionAlpha,
y: y + (viewport.y - y) * transitionAlpha,
width: width + (viewport.width - width) * transitionAlpha,
height: height + (viewport.height - height) * transitionAlpha
};
}
}
@ -12246,9 +12212,9 @@ var spine;
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
}
gl.lineWidth(1);
}
if (config.viewport.debugRender) {
gl.lineWidth(1);
renderer.rect(false, this.currentViewport.x, this.currentViewport.y, this.currentViewport.width, this.currentViewport.height, spine.Color.GREEN);
renderer.rect(false, viewport.x, viewport.y, viewport.width, viewport.height, spine.Color.RED);
}

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

File diff suppressed because one or more lines are too long

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

@ -2881,10 +2881,9 @@ var spine;
_this.success(success, path, atlas_1);
}
}, function (imagePath, message) {
if (!abort_1) {
abort_1 = true;
if (!abort_1)
_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
}
abort_1 = true;
});
};
for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {
@ -9024,7 +9023,6 @@ var spine;
geo.setAttribute("uv", new THREE.InterleavedBufferAttribute(vertexBuffer, 2, 7, false));
geo.setIndex(new THREE.BufferAttribute(indices, 1));
geo.getIndex().usage = WebGLRenderingContext.DYNAMIC_DRAW;
;
geo.drawRange.start = 0;
geo.drawRange.count = 0;
_this.geometry = geo;

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

File diff suppressed because one or more lines are too long

1
spine-ts/build/spine-webgl.d.ts vendored
View File

@ -1258,7 +1258,6 @@ declare module spine {
declare module spine.webgl {
class AssetManager extends spine.AssetManager {
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string, downloader?: Downloader);
protected createTexture(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap): Texture;
}
}
declare module spine.webgl {

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

@ -2881,10 +2881,9 @@ var spine;
_this.success(success, path, atlas_1);
}
}, function (imagePath, message) {
if (!abort_1) {
abort_1 = true;
if (!abort_1)
_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
}
abort_1 = true;
});
};
for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {
@ -8991,12 +8990,10 @@ var spine;
function AssetManager(context, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
var _this = _super.call(this, function (image) { return _this.createTexture(context, image); }, pathPrefix, downloader) || this;
return _this;
return _super.call(this, function (image) {
return new spine.webgl.GLTexture(context, image);
}, pathPrefix, downloader) || this;
}
AssetManager.prototype.createTexture = function (context, image) {
return new spine.webgl.GLTexture(context, image);
};
return AssetManager;
}(spine.AssetManager));
webgl.AssetManager = AssetManager;

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

File diff suppressed because one or more lines are too long

59
spine-ts/player/src/Player.ts
View File

@ -393,7 +393,7 @@ module spine {
let atlas = this.assetManager.get(config.atlasUrl);
let gl = this.context.gl, anisotropic = gl.getExtension("EXT_texture_filter_anisotropic");
for (let page of atlas.pages) {
var minFilter = page.minFilter;
let minFilter = page.minFilter;
if (config.mipmaps) {
if (anisotropic) {
gl.texParameterf(gl.TEXTURE_2D, anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, 8);
@ -509,26 +509,25 @@ module spine {
let input = new spine.webgl.Input(canvas);
let target:Bone = null;
let coords = new spine.webgl.Vector3();
let temp3 = new spine.webgl.Vector3();
let temp2 = new spine.Vector2();
let mouse = new spine.webgl.Vector3();
let position = new spine.Vector2();
let skeleton = this.skeleton;
let renderer = this.sceneRenderer;
let closest = function (x: number, y: number): Bone {
y = canvas.height - y;
mouse.set(x, canvas.clientHeight - y, 0)
let bestDistance = 24, index = 0;
let best:Bone;
for (let i = 0; i < controlBones.length; i++) {
selectedBones[i] = null;
let bone = skeleton.findBone(controlBones[i]);
if (bone) {
renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.width, canvas.height);
let distance = temp3.set(x, y, 0).distance(coords);
if (distance < bestDistance) {
bestDistance = distance;
best = bone;
index = i;
}
let distance = renderer.camera.worldToScreen(
coords.set(bone.worldX, bone.worldY, 0),
canvas.clientWidth, canvas.clientHeight).distance(mouse);
if (distance < bestDistance) {
bestDistance = distance;
best = bone;
index = i;
}
}
if (best) selectedBones[index] = best;
@ -545,13 +544,13 @@ module spine {
},
dragged: (x, y) => {
if (target) {
x = MathUtils.clamp(x, 0, canvas.width)
y = MathUtils.clamp(y, 0, canvas.height);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
x = MathUtils.clamp(x, 0, canvas.clientWidth)
y = MathUtils.clamp(y, 0, canvas.clientHeight);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
if (target.parent) {
target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
target.x = temp2.x;
target.y = temp2.y;
target.parent.worldToLocal(position.set(coords.x - skeleton.x, coords.y - skeleton.y));
target.x = position.x;
target.y = position.y;
} else {
target.x = coords.x - skeleton.x;
target.y = coords.y - skeleton.y;
@ -753,7 +752,7 @@ module spine {
if (config.showControls) {
this.playTime += delta;
var entry = this.animationState.getCurrent(0);
let entry = this.animationState.getCurrent(0);
if (entry) {
let duration = entry.animation.duration;
while (this.playTime >= duration && duration != 0)
@ -778,19 +777,17 @@ module spine {
};
if (this.previousViewport) {
let transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / config.viewport.transitionTime;
let transitionAlpha = (performance.now() - this.viewportTransitionStart) / 1000 / config.viewport.transitionTime;
if (transitionAlpha < 1) {
let oldViewport = {
x: this.previousViewport.x - (this.previousViewport.padLeft as number),
y: this.previousViewport.y - (this.previousViewport.padBottom as number),
width: this.previousViewport.width + (this.previousViewport.padLeft as number) + (this.previousViewport.padRight as number),
height: this.previousViewport.height + (this.previousViewport.padBottom as number) + (this.previousViewport.padTop as number)
};
let x = this.previousViewport.x - (this.previousViewport.padLeft as number);
let y = this.previousViewport.y - (this.previousViewport.padBottom as number);
let width = this.previousViewport.width + (this.previousViewport.padLeft as number) + (this.previousViewport.padRight as number);
let height = this.previousViewport.height + (this.previousViewport.padBottom as number) + (this.previousViewport.padTop as number);
viewport = {
x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
x: x + (viewport.x - x) * transitionAlpha,
y: y + (viewport.y - y) * transitionAlpha,
width: width + (viewport.width - width) * transitionAlpha,
height: height + (viewport.height - height) * transitionAlpha
};
}
}
@ -844,11 +841,11 @@ module spine {
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
}
gl.lineWidth(1);
}
// Draw the viewport bounds.
if (config.viewport.debugRender) {
gl.lineWidth(1);
renderer.rect(false, this.currentViewport.x, this.currentViewport.y, this.currentViewport.width, this.currentViewport.height, Color.GREEN);
renderer.rect(false, viewport.x, viewport.y, viewport.width, viewport.height, Color.RED);
}

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

@ -26,9 +26,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
};
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
@ -96,7 +94,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
var input = new spine.webgl.Input(canvas);
input.addListener({
down: function(x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
if (temp.set(handle.x, handle.y, 0).distance(coords) < canvas.width * HANDLE_SIZE) {
dragging = true;
}
@ -106,7 +104,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
},
dragged: function(x, y) {
if (dragging && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
handle.x = coords.x;
handle.y = coords.y;
calculateBlend(x, y, false);

2
spine-ts/webgl/demos/clipping.js
View File

@ -7,9 +7,7 @@ var clippingDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");

31
spine-ts/webgl/demos/hoverboard.js
View File

@ -16,7 +16,6 @@ var hoverboardDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
@ -97,41 +96,17 @@ var hoverboardDemo = function(canvas, bgColor) {
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);
if (temp.set(bone.worldX, bone.worldY, 0).distance(coords) < 30) {
target = bone;
}
}
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
},
up: function(x, y) {
if (target && target.data.name == "crosshair") $("#hoverboard-shoot").click();
target = null;
},
dragged: function(x, y) {
if (target != null && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (target.parent !== null) {
target.parent.worldToLocal(temp2.set(coords.x, coords.y));
target.x = temp2.x;
target.y = temp2.y;
} else {
target.x = coords.x;
target.y = coords.y;
}
}
spineDemos.dragged(canvas, renderer, target, x, y);
},
moved: function (x, y) {
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);
if (temp.set(bone.worldX, bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
hoverTargets[i] = null;
}
}
spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
}
});
}

2
spine-ts/webgl/demos/imagechanges.js
View File

@ -11,9 +11,7 @@ var imageChangesDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");

1
spine-ts/webgl/demos/meshes.js
View File

@ -9,7 +9,6 @@ var meshesDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false;

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

@ -8,9 +8,7 @@ var skinsDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("heroes.atlas");

2
spine-ts/webgl/demos/spritesheets.js
View File

@ -14,9 +14,7 @@ var spritesheetsDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");

38
spine-ts/webgl/demos/stretchyman.js
View File

@ -24,9 +24,7 @@ var stretchymanDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
@ -72,43 +70,21 @@ var stretchymanDemo = function(canvas, bgColor) {
function setupInput (){
input.addListener({
down: function(x, y) {
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);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone;
}
}
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
},
up: function(x, y) {
target = null;
},
dragged: function(x, y) {
if (target != null && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
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));
else
temp2.set(coords.x - skeleton.x, coords.y - skeleton.y);
target.x = temp2.x;
target.y = temp2.y;
if (target.data.name === "head controller") {
var hipControl = skeleton.findBone("hip controller");
target.x = spine.MathUtils.clamp(target.x, -65, 65);
target.y = Math.max(260, target.y);
}
spineDemos.dragged(canvas, renderer, target, x, y);
if (target && target.data.name === "head controller") {
var hipControl = skeleton.findBone("hip controller");
target.x = spine.MathUtils.clamp(target.x, -65, 65);
target.y = Math.max(260, target.y);
}
},
moved: function (x, y) {
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);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
hoverTargets[i] = null;
}
}
spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
}
});
}

2
spine-ts/webgl/demos/tank.js
View File

@ -7,9 +7,7 @@ var tankDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");

51
spine-ts/webgl/demos/transforms.js
View File

@ -18,9 +18,7 @@ var transformsDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
@ -83,7 +81,7 @@ var transformsDemo = function(canvas, bgColor) {
function setupInput() {
var getRotation = function(x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
var wheel1 = skeleton.findBone("wheel1overlay");
var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
@ -92,48 +90,23 @@ var transformsDemo = function(canvas, bgColor) {
}
input.addListener({
down: function(x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone;
if (target === rotateHandle) lastRotation = getRotation(x, y);
}
}
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
if (target === rotateHandle) lastRotation = getRotation(x, y);
},
up: function(x, y) {
target = null;
},
dragged: function(x, y) {
if (target != null && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
if (target === rotateHandle) {
var rotation = getRotation(x, y);
var delta = rotation - lastRotation;
skeleton.findBone("wheel1").rotation += delta;
lastRotation = rotation;
} else {
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;
}
}
}
},
if (target === rotateHandle) {
var rotation = getRotation(x, y);
var delta = rotation - lastRotation;
skeleton.findBone("wheel1").rotation += delta;
lastRotation = rotation;
} else
spineDemos.dragged(canvas, renderer, target, x, y);
},
moved: function (x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
hoverTargets[i] = null;
}
}
spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
}
})
}

11
spine-ts/webgl/demos/transitions.js
View File

@ -9,20 +9,17 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
timeSlider = $("#transitions-timeslider").data("slider");
timeSlider.set(0.5);
timeSliderLabel = $("#transitions-timeslider-label")[0];
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
timeSlider = $("#transitions-timeslider").data("slider");
timeSlider.set(0.5);
timeSliderLabel = $("#transitions-timeslider-label")[0];
}
function loadingComplete () {

39
spine-ts/webgl/demos/utils.js
View File

@ -109,6 +109,45 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
spineDemos.demos.push(demo);
}
var coords = new spine.webgl.Vector3();
var mouse = new spine.webgl.Vector3();
spineDemos.closest = function (canvas, renderer, skeleton, controlBones, hoverTargets, x, y) {
mouse.set(x, canvas.clientHeight - y, 0)
var bestDistance = 24, index = 0;
var best;
for (var i = 0; i < controlBones.length; i++) {
hoverTargets[i] = null;
let bone = skeleton.findBone(controlBones[i]);
let distance = renderer.camera.worldToScreen(
coords.set(bone.worldX, bone.worldY, 0),
canvas.clientWidth, canvas.clientHeight).distance(mouse);
if (distance < bestDistance) {
bestDistance = distance;
best = bone;
index = i;
}
}
if (best) hoverTargets[index] = best;
return best;
};
var position = new spine.webgl.Vector3();
spineDemos.dragged = function (canvas, renderer, target, x, y) {
if (target) {
x = spine.MathUtils.clamp(x, 0, canvas.clientWidth)
y = spine.MathUtils.clamp(y, 0, canvas.clientHeight);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
if (target.parent !== null) {
target.parent.worldToLocal(position.set(coords.x, coords.y));
target.x = position.x;
target.y = position.y;
} else {
target.x = coords.x;
target.y = coords.y;
}
}
};
loadSliders = function () {
$(window).resize(function() {
$(".slider").each(function () {

32
spine-ts/webgl/demos/vine.js
View File

@ -16,9 +16,7 @@ var vineDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
@ -89,40 +87,16 @@ var vineDemo = function(canvas, bgColor) {
function setupInput() {
input.addListener({
down: function(x, y) {
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);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone;
}
}
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
},
up: function(x, y) {
target = null;
},
dragged: function(x, y) {
if (target != null && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
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;
}
}
spineDemos.dragged(canvas, renderer, target, x, y);
},
moved: function (x, y) {
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);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
hoverTargets[i] = null;
}
}
spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
}
});
}