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

[ts] Update demos to 4.0 and new AssetManager.

Browse Source
This commit is contained in:
Nathan Sweet 2021-06-18 18:48:51 -04:00
parent 43cb6dfe22
commit 5d6f46d295
23 changed files with 2059 additions and 5175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,8 +19,6 @@ var additiveBlendingDemo = function(canvas, bgColor) {
var clientMouseX = 0, clientMouseY = 0, mouseMoved;
var DEMO_NAME = "AdditiveBlendingDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function isMobileDevice() {
@ -32,23 +30,18 @@ var additiveBlendingDemo = function(canvas, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
cursor = document.getElementById("cursor");
}
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["owl"]);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").owl);
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
@ -153,8 +146,8 @@ var additiveBlendingDemo = function(canvas, bgColor) {
renderer.end();
}
init();
additiveBlendingDemo.assetManager = assetManager;
additiveBlendingDemo.loadingComplete = loadingComplete;
additiveBlendingDemo.render = render;
additiveBlendingDemo.DEMO_NAME = DEMO_NAME;
init();
};

1374
spine-ts/webgl/demos/assets/atlas1.atlas
View File

File diff suppressed because it is too large Load Diff

BIN
spine-ts/webgl/demos/assets/atlas1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 827 KiB

BIN
spine-ts/webgl/demos/assets/atlas12.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

1343
spine-ts/webgl/demos/assets/atlas2.atlas
View File

File diff suppressed because it is too large Load Diff

BIN
spine-ts/webgl/demos/assets/atlas2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

2
spine-ts/webgl/demos/assets/demos.json
View File

File diff suppressed because one or more lines are too long

4204
spine-ts/webgl/demos/assets/heroes.atlas
View File

File diff suppressed because it is too large Load Diff

BIN
spine-ts/webgl/demos/assets/heroes.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 804 KiB

After

Width:  |  Height:  |  Size: 776 KiB

BIN
spine-ts/webgl/demos/assets/heroes2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

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

@ -4,30 +4,23 @@ var clippingDemo = function(canvas, bgColor) {
var timeKeeper;
var playButton, timeline, isPlaying = true, playTime = 0;
var DEMO_NAME = "ClippingDemo";
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.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "portal", true);
@ -113,8 +106,8 @@ var clippingDemo = function(canvas, bgColor) {
renderer.end();
}
init();
clippingDemo.assetManager = assetManager;
clippingDemo.loadingComplete = loadingComplete;
clippingDemo.render = render;
clippingDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -5,7 +5,6 @@ $(function () {
}
spineDemos.init();
spineDemos.assetManager = new spine.SharedAssetManager("assets/");
var demos = [
spritesheetsDemo,

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

@ -13,8 +13,6 @@ var hoverboardDemo = function(canvas, bgColor) {
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
var isPlaying = true;
var DEMO_NAME = "HoverboardDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -22,23 +20,17 @@ var hoverboardDemo = function(canvas, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "hoverboard", true);
@ -174,8 +166,8 @@ var hoverboardDemo = function(canvas, bgColor) {
gl.lineWidth(1);
}
init();
hoverboardDemo.assetManager = assetManager;
hoverboardDemo.loadingComplete = loadingComplete;
hoverboardDemo.render = render;
hoverboardDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -8,8 +8,6 @@ var imageChangesDemo = function(canvas, bgColor) {
var activeSkeleton = "Alien";
var playButton, timeLine, isPlaying = true;
var DEMO_NAME = "ImageChangesDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -17,12 +15,9 @@ var imageChangesDemo = function(canvas, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
@ -74,12 +69,9 @@ var imageChangesDemo = function(canvas, bgColor) {
}
function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json")[name]);
var skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName("default");
@ -102,7 +94,6 @@ var imageChangesDemo = function(canvas, bgColor) {
}
return {
atlas: atlas,
skeleton: skeleton,
state: state,
playTime: 0,
@ -191,8 +182,8 @@ var imageChangesDemo = function(canvas, bgColor) {
renderer.end();
}
init();
imageChangesDemo.assetManager = assetManager;
imageChangesDemo.loadingComplete = loadingComplete;
imageChangesDemo.render = render;
imageChangesDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -6,8 +6,6 @@ var meshesDemo = function(canvas, bgColor) {
var activeSkeleton = "Orange Girl";
var playButton, timeline, isPlaying = true;
var DEMO_NAME = "MeshesDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -15,11 +13,9 @@ var meshesDemo = function(canvas, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
@ -85,12 +81,9 @@ var meshesDemo = function(canvas, bgColor) {
}
function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json")[name]);
var skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName("default");
@ -103,7 +96,6 @@ var meshesDemo = function(canvas, bgColor) {
skeleton.getBounds(offset, size, []);
return {
atlas: atlas,
skeleton: skeleton,
state: state,
playTime: 0,
@ -151,8 +143,8 @@ var meshesDemo = function(canvas, bgColor) {
renderer.end();
}
init();
meshesDemo.assetManager = assetManager;
meshesDemo.loadingComplete = loadingComplete;
meshesDemo.render = render;
meshesDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -5,8 +5,6 @@ var skinsDemo = function(canvas, bgColor) {
var playButton, timeLine, isPlaying = true, playTime = 0;
var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
var DEMO_NAME = "SkinsDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -14,23 +12,17 @@ var skinsDemo = function(canvas, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes.png");
assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes2.png");
assetManager.loadText(DEMO_NAME, "heroes.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("heroes.atlas");
assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("heroes.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").heroes);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName("Assassin");
var stateData = new spine.AnimationStateData(skeleton.data);
@ -199,7 +191,7 @@ var skinsDemo = function(canvas, bgColor) {
renderer.begin();
renderer.drawSkeleton(skeleton, true);
var texture = assetManager.get(DEMO_NAME, "heroes.png");
var texture = assetManager.get("heroes.png");
var width = bounds.x * 1.25;
var scale = width / texture.getImage().width;
var height = scale * texture.getImage().height;
@ -207,8 +199,8 @@ var skinsDemo = function(canvas, bgColor) {
renderer.end();
}
init();
skinsDemo.assetManager = assetManager;
skinsDemo.loadingComplete = loadingComplete;
skinsDemo.render = render;
skinsDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -11,8 +11,6 @@ var spritesheetsDemo = function(canvas, bgColor) {
var timeKeeper, loadingScreen, input;
var playTime = 0, framePlaytime = 0, clickAnim = 0;
var DEMO_NAME = "SpritesheetsDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -20,23 +18,17 @@ var spritesheetsDemo = function(canvas, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas);
}
function loadingComplete () {
skeletonAtlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(skeletonAtlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").raptor);
skeleton = new spine.Skeleton(skeletonData);
var stateData = new spine.AnimationStateData(skeleton.data);
stateData.defaultMix = 0.5;
@ -144,8 +136,8 @@ var spritesheetsDemo = function(canvas, bgColor) {
renderer.end();
}
init();
spritesheetsDemo.assetManager = assetManager;
spritesheetsDemo.loadingComplete = loadingComplete;
spritesheetsDemo.render = render;
spritesheetsDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -21,8 +21,6 @@ var stretchymanDemo = function(canvas, bgColor) {
var kneePos = new spine.Vector2();
var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
var DEMO_NAME = "StretchymanDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -30,22 +28,17 @@ var stretchymanDemo = function(canvas, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
input = new spine.webgl.Input(canvas);
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas);
}
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").stretchyman);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
@ -181,8 +174,8 @@ var stretchymanDemo = function(canvas, bgColor) {
gl.lineWidth(1);
}
init();
stretchymanDemo.assetManager = assetManager;
stretchymanDemo.loadingComplete = loadingComplete;
stretchymanDemo.render = render;
stretchymanDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -4,8 +4,6 @@ var tankDemo = function(canvas, bgColor) {
var timeKeeper;
var playButton, timeLine, isPlaying = true, playTime = 0;
var DEMO_NAME = "TankDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -13,21 +11,16 @@ var tankDemo = function(canvas, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").tank);
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "drive", true);
@ -114,8 +107,8 @@ var tankDemo = function(canvas, bgColor) {
renderer.end();
}
init();
tankDemo.assetManager = assetManager;
tankDemo.loadingComplete = loadingComplete;
tankDemo.render = render;
tankDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -15,8 +15,6 @@ var transformsDemo = function(canvas, bgColor) {
var lastRotation = 0;
var mix, lastOffset = 0, lastMix = 0.5;
var DEMO_NAME = "TransformsDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -24,22 +22,17 @@ var transformsDemo = function(canvas, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").transforms);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
@ -80,7 +73,9 @@ var transformsDemo = function(canvas, bgColor) {
var val = percent;
var delta = val - lastMix;
lastMix = val;
skeleton.findTransformConstraint("wheel1").translateMix += delta;
var constraint = skeleton.findTransformConstraint("wheel1");
constraint.mixX += delta;
constraint.mixY += delta;
$("#transforms-translationmix-label").text(Math.round(val * 100) + "%");
};
$("#transforms-translationmix-label").text("50%");
@ -170,8 +165,8 @@ var transformsDemo = function(canvas, bgColor) {
renderer.end();
}
init();
transformsDemo.assetManager = assetManager;
transformsDemo.loadingComplete = loadingComplete;
transformsDemo.render = render;
transformsDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -6,8 +6,6 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
var timeSlider, timeSliderLabel;
var timeKeeper;
var DEMO_NAME = "TransitionsDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -19,13 +17,9 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
@ -85,12 +79,9 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
}
function loadSkeleton(name) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json")[name]);
var skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName("default");
return skeleton;
@ -134,8 +125,8 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
renderer.end();
}
init();
transitionsDemo.assetManager = assetManager;
transitionsDemo.loadingComplete = loadingComplete;
transitionsDemo.render = render;
transitionsDemo.DEMO_NAME = DEMO_NAME;
init();
};

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

@ -3,30 +3,29 @@ var spineDemos = {
HOVER_COLOR_OUTER: new spine.Color(1, 1, 1, 1),
NON_HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.5),
NON_HOVER_COLOR_OUTER: new spine.Color(1, 0, 0, 0.8),
assetManager: new spine.SharedAssetManager("assets/"),
demos: [],
loopRunning: false,
canvases: []
canvases: [],
downloader: new spine.Downloader()
};
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1)
alert('Script Error: See Browser Console for Detail');
else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
return false;
alert(message);
}
return false;
};
(function () {
@ -37,8 +36,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
requestAnimationFrame(loop);
var demos = spineDemos.demos;
for (var i = 0; i < demos.length; i++) {
var demo = demos[i];
var demo = demos[i];
checkElementVisible(demo);
renderDemo(demo);
}
@ -46,7 +44,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
function renderDemo(demo) {
var canvas = demo.canvas;
if (!spineDemos.assetManager.isLoadingComplete(demo.DEMO_NAME)) {
if (!demo.assetManager.isLoadingComplete()) {
if (demo.visible) {
if (canvas.parentElement != demo.placeholder) {
$(canvas).detach();

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

@ -13,8 +13,6 @@ var vineDemo = function(canvas, bgColor) {
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var playButton, timeLine, isPlaying = true, playTime = 0;
var DEMO_NAME = "VineDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
@ -23,21 +21,16 @@ var vineDemo = function(canvas, bgColor) {
renderer = new spine.webgl.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").vine);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
@ -174,8 +167,8 @@ var vineDemo = function(canvas, bgColor) {
renderer.end();
}
init();
vineDemo.assetManager = assetManager;
vineDemo.loadingComplete = loadingComplete;
vineDemo.render = render;
vineDemo.DEMO_NAME = DEMO_NAME;
init();
};