UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated spineboy and alien demos.

Browse Source
This commit is contained in:
Nathan Sweet 2017-09-11 21:35:35 +02:00
parent 43f37ce565
commit b14fb26ad8
3 changed files with 42 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,16 +46,17 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
}); });
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy-hover"]); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
skeleton = new spine.Skeleton(skeletonData); skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "idle", true); state.setAnimation(0, "hoverboard", true);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
bounds = new spine.Vector2(); bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []); skeleton.getBounds(offset, bounds, []);
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null); for (var i = 0; i < controlBones.length; i++)
hoverTargets.push(null);
renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2; renderer.camera.position.y = offset.y + bounds.y / 2;

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

@ -35,7 +35,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function load () { function load () {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) { if (assetManager.isLoadingComplete(DEMO_NAME)) {
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]); skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"]) skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI(); setupUI();
loadingComplete(canvas, render); loadingComplete(canvas, render);
@ -109,9 +109,8 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
for(var i = 0; i < sequenceSlots.length; i++) { for(var i = 0; i < sequenceSlots.length; i++) {
var slot = sequenceSlots[i]; var slot = sequenceSlots[i];
var index = skeleton.findSlotIndex(slot); var index = skeleton.findSlotIndex(slot);
for (var name in skeleton.skin.attachments[index]) { for (var name in skeleton.skin.attachments[index])
regions.push(skeleton.skin.attachments[index][name]); regions.push(skeleton.skin.attachments[index][name]);
}
} }
return { return {
@ -138,17 +137,22 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
var offset = active.bounds.offset; var offset = active.bounds.offset;
var size = active.bounds.size; var size = active.bounds.size;
var x = offset.x + size.x + 100, offsetY = offset.y; var x = offset.x + size.x + 100, offsetY = offset.y, zoom = 1, rows, regionOffset = 0;
if (activeSkeleton === "Alien") { if (activeSkeleton === "Alien") {
renderer.camera.position.x = offset.x + size.x; renderer.camera.position.x = offset.x + size.x + 400;
renderer.camera.position.y = offset.y + size.y / 2; renderer.camera.position.y = offset.y + size.y / 2 + 450;
x += 400;
zoom = 0.31;
rows = 3;
regionOffset = 3;
} else { } else {
renderer.camera.position.x = offset.x + size.x; renderer.camera.position.x = offset.x + size.x;
renderer.camera.position.y = offset.y + size.y / 2; renderer.camera.position.y = offset.y + size.y / 2;
x += 100; x += 100;
rows = 3;
} }
renderer.camera.viewportWidth = size.x * 2.4; renderer.camera.viewportWidth = size.x * 2.4 / zoom;
renderer.camera.viewportHeight = size.y * 1.4; renderer.camera.viewportHeight = size.y * 1.4 / zoom;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
@ -172,39 +176,33 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
var y = offsetY; var y = offsetY;
var slotsWidth = 0, slotsHeight = 0; var slotsWidth = 0, slotsHeight = 0;
var slotSize = size.y / 3; var slotSize = size.y / rows;
var maxSlotWidth = 0; var maxSlotWidth = 0;
var j = 0; var j = 0;
for (var i = 0; i < active.regions.length; i++) { for (var i = 0, n = active.regions.length; i < n; i++) {
var region = active.regions[i].region; var region = active.regions[(i + regionOffset) % n].region;
var scale = Math.min(slotSize / region.height, slotSize / region.width); var width = region.rotate ? region.height : region.width;
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale); var height = region.rotate ? region.width : region.height;
var scale = Math.min(slotSize / height, slotSize / width) / zoom;
renderer.drawRegion(region, x, y, width * scale, height * scale);
var isVisible = false; var isVisible = false;
for (var ii = 0; ii < active.slots.length; ii++) { for (var ii = 0; ii < active.slots.length; ii++) {
var slotName = active.slots[ii]; var slotName = active.slots[ii];
var slotIndex = skeleton.findSlotIndex(slotName); var slot = skeleton.findSlot(slotName);
if (slot && slot.attachment && slot.attachment.name === region.name) {
for (var iii = 0; iii < skeleton.drawOrder.length; iii++) { isVisible = true;
var slot = skeleton.drawOrder[iii]; break;
if (slot.data.index == slotIndex) {
if (slot.attachment != null) {
if (slot.attachment.name === active.regions[i].name) {
isVisible = true;
break;
}
}
}
} }
if (isVisible) break; if (isVisible) break;
} }
if (isVisible) renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR); if (isVisible) renderer.rect(false, x, y, width * scale, height * scale, OUTLINE_COLOR);
maxSlotWidth = Math.max(maxSlotWidth, region.width * scale); maxSlotWidth = Math.max(maxSlotWidth, width * scale);
y += slotSize; y += slotSize / zoom + 2;
j++; j++;
if (j == 3) { if (j == rows) {
x += maxSlotWidth + 10; x += maxSlotWidth + 10;
maxSlotWidth = 0; maxSlotWidth = 0;
y = offsetY; y = offsetY;

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

@ -45,9 +45,9 @@ var transitionsDemo = function(loadingComplete, bgColor) {
skeletonNoMix = new spine.Skeleton(skeleton.data); skeletonNoMix = new spine.Skeleton(skeleton.data);
state = createState(0.25); state = createState(0.25);
state.multipleMixing = true; state.multipleMixing = true;
setAnimations(state, 0); setAnimations(state, 0, true);
stateNoMix = createState(0); stateNoMix = createState(0);
setAnimations(stateNoMix, -0.25); setAnimations(stateNoMix, -0.25, true);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
@ -79,20 +79,18 @@ var transitionsDemo = function(loadingComplete, bgColor) {
return state; return state;
} }
function setAnimations(state, mix) { function setAnimations(state, mix, first) {
state.addAnimation(0, "idle", true, 0.7); state.addAnimation(0, "idle", true, first ? 0 : 0.6);
state.addAnimation(0, "walk", true, 0.7);
state.addAnimation(0, "idle", true, 0.8);
state.addAnimation(0, "run", true, 0.7);
state.addAnimation(0, "idle", true, 0.8);
state.addAnimation(0, "walk", true, 0.6); state.addAnimation(0, "walk", true, 0.6);
state.addAnimation(0, "run", true, 0.6); state.addAnimation(0, "run", true, 1);
state.addAnimation(0, "jump", false, 0.6); state.addAnimation(0, "walk", true, 1.2);
state.addAnimation(0, "run", true, 0.5);
state.addAnimation(0, "jump", false, 1);
state.addAnimation(0, "run", true, mix); state.addAnimation(0, "run", true, mix);
state.addAnimation(0, "jump", true, 0.5); state.addAnimation(0, "jump", true, 0.5);
state.addAnimation(0, "run", true, mix).listener = { state.addAnimation(0, "walk", true, mix).listener = {
start: function (trackIndex) { start: function (trackIndex) {
setAnimations(state, mix); setAnimations(state, mix, false);
} }
}; };
} }
@ -134,7 +132,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
skeleton.x = -300; skeleton.x = -200;
skeleton.y = -100; skeleton.y = -100;
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);