|
@@ -1,8 +1,8 @@
|
|
|
var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
- var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
|
|
+ var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
|
|
|
|
|
var canvas, gl, renderer, input, assetManager;
|
|
|
- var skeleton, bounds;
|
|
|
+ var skeleton, bounds;
|
|
|
var timeKeeper, loadingScreen;
|
|
|
var skeletons = {};
|
|
|
var activeSkeleton = "Alien";
|
|
@@ -15,18 +15,18 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
function init () {
|
|
|
canvas = document.getElementById("imagechanges-canvas");
|
|
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
|
|
- gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
|
|
+ gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
|
|
|
|
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
|
|
assetManager = spineDemos.assetManager;
|
|
|
- var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
|
|
|
+ var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
|
|
|
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
|
|
|
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
|
|
|
- assetManager.loadJson(DEMO_NAME, "demos.json");
|
|
|
- timeKeeper = new spine.TimeKeeper();
|
|
|
+ assetManager.loadJson(DEMO_NAME, "demos.json");
|
|
|
+ timeKeeper = new spine.TimeKeeper();
|
|
|
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
|
requestAnimationFrame(load);
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
function load () {
|
|
|
timeKeeper.update();
|
|
@@ -34,7 +34,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
|
|
|
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
|
|
|
setupUI();
|
|
|
- loadingComplete(canvas, render);
|
|
|
+ loadingComplete(canvas, render);
|
|
|
} else {
|
|
|
loadingScreen.draw();
|
|
|
requestAnimationFrame(load);
|
|
@@ -43,7 +43,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
|
|
|
function setupUI() {
|
|
|
playButton = $("#imagechanges-playbutton");
|
|
|
- var playButtonUpdate = function () {
|
|
|
+ var playButtonUpdate = function () {
|
|
|
isPlaying = !isPlaying;
|
|
|
if (isPlaying)
|
|
|
playButton.addClass("pause").removeClass("play");
|
|
@@ -55,7 +55,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
|
|
|
timeLine = $("#imagechanges-timeline").data("slider");
|
|
|
timeLine.changed = function (percent) {
|
|
|
- if (isPlaying) playButton.click();
|
|
|
+ if (isPlaying) playButton.click();
|
|
|
if (!isPlaying) {
|
|
|
var active = skeletons[activeSkeleton];
|
|
|
var animationDuration = active.state.getCurrent(0).animation.duration;
|
|
@@ -63,11 +63,11 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
active.state.update(time - active.playTime);
|
|
|
active.state.apply(active.skeleton);
|
|
|
active.skeleton.updateWorldTransform();
|
|
|
- active.playTime = time;
|
|
|
+ active.playTime = time;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- var list = $("#imagechanges-skeleton");
|
|
|
+ var list = $("#imagechanges-skeleton");
|
|
|
for (var skeletonName in skeletons) {
|
|
|
var option = $("<option></option>");
|
|
|
option.attr("value", skeletonName).text(skeletonName);
|
|
@@ -84,7 +84,7 @@ var imageChangesDemo = function(loadingComplete, 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);
|
|
|
+ return assetManager.get(DEMO_NAME, path);
|
|
|
});
|
|
|
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
|
|
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
|
@@ -93,16 +93,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
skeleton.setSkinByName("default");
|
|
|
|
|
|
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
|
|
|
- var anim = skeletonData.findAnimation(animation);
|
|
|
+ var anim = skeletonData.findAnimation(animation);
|
|
|
state.setAnimation(0, animation, true);
|
|
|
if (name === "alien") {
|
|
|
- state.update(anim.duration / 2.5);
|
|
|
+ state.update(anim.duration / 2.5);
|
|
|
}
|
|
|
state.apply(skeleton);
|
|
|
- skeleton.updateWorldTransform();
|
|
|
+ skeleton.updateWorldTransform();
|
|
|
var offset = new spine.Vector2();
|
|
|
var size = new spine.Vector2();
|
|
|
- skeleton.getBounds(offset, size);
|
|
|
+ skeleton.getBounds(offset, size, []);
|
|
|
if (name === "alien") {
|
|
|
state.update(-anim.duration / 2.5);
|
|
|
}
|
|
@@ -110,16 +110,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
var regions = [];
|
|
|
for(var i = 0; i < sequenceSlots.length; i++) {
|
|
|
var slot = sequenceSlots[i];
|
|
|
- var index = skeleton.findSlotIndex(slot);
|
|
|
+ var index = skeleton.findSlotIndex(slot);
|
|
|
for (var name in skeleton.skin.attachments[index]) {
|
|
|
- regions.push(skeleton.skin.attachments[index][name]);
|
|
|
+ regions.push(skeleton.skin.attachments[index][name]);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
atlas: atlas,
|
|
|
- skeleton: skeleton,
|
|
|
- state: state,
|
|
|
+ skeleton: skeleton,
|
|
|
+ state: state,
|
|
|
playTime: 0,
|
|
|
bounds: {
|
|
|
offset: offset,
|
|
@@ -132,7 +132,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
|
|
|
function render () {
|
|
|
timeKeeper.update();
|
|
|
- var delta = timeKeeper.delta;
|
|
|
+ var delta = timeKeeper.delta;
|
|
|
|
|
|
var active = skeletons[activeSkeleton];
|
|
|
var skeleton = active.skeleton;
|
|
@@ -159,7 +159,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
|
|
|
if (isPlaying) {
|
|
|
var animationDuration = state.getCurrent(0).animation.duration;
|
|
|
- active.playTime += delta;
|
|
|
+ active.playTime += delta;
|
|
|
while (active.playTime >= animationDuration) {
|
|
|
active.playTime -= animationDuration;
|
|
|
}
|
|
@@ -170,15 +170,15 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
skeleton.updateWorldTransform();
|
|
|
}
|
|
|
|
|
|
- renderer.begin();
|
|
|
+ renderer.begin();
|
|
|
renderer.drawSkeleton(skeleton, true);
|
|
|
|
|
|
var y = offsetY;
|
|
|
var slotsWidth = 0, slotsHeight = 0;
|
|
|
var slotSize = size.y / 3;
|
|
|
- var maxSlotWidth = 0;
|
|
|
+ var maxSlotWidth = 0;
|
|
|
var j = 0;
|
|
|
- for (var i = 0; i < active.regions.length; i++) {
|
|
|
+ for (var i = 0; i < active.regions.length; i++) {
|
|
|
var region = active.regions[i].region;
|
|
|
var scale = Math.min(slotSize / region.height, slotSize / region.width);
|
|
|
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
|
|
@@ -187,7 +187,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
for (var ii = 0; ii < active.slots.length; ii++) {
|
|
|
var slotName = active.slots[ii];
|
|
|
var slotIndex = skeleton.findSlotIndex(slotName);
|
|
|
-
|
|
|
+
|
|
|
for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
|
|
|
var slot = skeleton.drawOrder[iii];
|
|
|
if (slot.data.index == slotIndex) {
|
|
@@ -212,7 +212,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|
|
maxSlotWidth = 0;
|
|
|
y = offsetY;
|
|
|
j = 0;
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
renderer.end();
|