mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-15 03:21:35 +08:00
[ts] Fixed up demos
This commit is contained in:
badlogic
parent
030da37e6b
commit
6808b9f44a
@ -50,7 +50,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = 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);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
@ -139,15 +139,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
||||
gl.lineWidth(2);
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
|
||||
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
|
||||
renderer.circle(true, bone.worldX, bone.worldY, 20, colorInner);
|
||||
renderer.circle(false, bone.worldX, bone.worldY, 20, colorOuter);
|
||||
}
|
||||
// renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
||||
|
||||
renderer.end();
|
||||
gl.lineWidth(1);
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var meshesDemo = function(loadingComplete, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, bounds;
|
||||
var skeleton, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var skeletons = {};
|
||||
var activeSkeleton = "Orange Girl";
|
||||
@ -13,19 +13,19 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
function init () {
|
||||
canvas = document.getElementById("meshes-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);
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
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, "atlas2.png");
|
||||
assetManager.loadText(DEMO_NAME, "atlas2.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();
|
||||
@ -43,7 +43,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#meshes-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
@ -55,7 +55,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
timeLine = $("#meshes-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 meshesDemo = 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 = $("#meshes-skeleton");
|
||||
var list = $("#meshes-skeleton");
|
||||
for (var skeletonName in skeletons) {
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", skeletonName).text(skeletonName);
|
||||
@ -96,7 +96,7 @@ var meshesDemo = function(loadingComplete, 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);
|
||||
return assetManager.get(DEMO_NAME, path);
|
||||
});
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
@ -107,26 +107,26 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
|
||||
state.setAnimation(0, animation, true);
|
||||
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, []);
|
||||
|
||||
return {
|
||||
atlas: atlas,
|
||||
skeleton: skeleton,
|
||||
state: state,
|
||||
skeleton: skeleton,
|
||||
state: state,
|
||||
playTime: 0,
|
||||
bounds: {
|
||||
offset: offset,
|
||||
size: size
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
var active = skeletons[activeSkeleton];
|
||||
var skeleton = active.skeleton;
|
||||
@ -145,7 +145,7 @@ var meshesDemo = 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;
|
||||
}
|
||||
@ -156,7 +156,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
renderer.begin();
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton);
|
||||
renderer.end();
|
||||
|
||||
@ -47,7 +47,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
|
||||
skeleton.updateWorldTransform();
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds);
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
setupUI();
|
||||
setupInput();
|
||||
loadingComplete(canvas, render);
|
||||
|
||||
@ -50,7 +50,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
||||
skeleton.updateWorldTransform();
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds);
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
skeleton.x -= 60;
|
||||
|
||||
skeletonSeq = new spine.Skeleton(skeletonData);
|
||||
|
||||
@ -5,7 +5,7 @@ var stretchymanDemo = function(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, state;
|
||||
var skeleton, bounds, state;
|
||||
var timeKeeper, loadingScreen;
|
||||
var target = null;
|
||||
var hoverTargets = [];
|
||||
@ -14,7 +14,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
"front leg controller",
|
||||
"back arm controller",
|
||||
"front arm controller",
|
||||
"head controller",
|
||||
"head controller",
|
||||
"hip controller"
|
||||
];
|
||||
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
|
||||
@ -28,16 +28,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
function init () {
|
||||
canvas = document.getElementById("stretchyman-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); };
|
||||
input = new spine.webgl.Input(canvas);
|
||||
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");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
@ -46,7 +46,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.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);
|
||||
@ -56,10 +56,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = 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);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "idle", true);
|
||||
state.setAnimation(0, "idle", true);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
@ -77,25 +77,25 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
function setupUI() {
|
||||
var checkbox = $("#stretchyman-drawbones");
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
checkbox.change(function() {
|
||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
up: function(x, y) {
|
||||
@ -117,16 +117,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
}
|
||||
},
|
||||
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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -153,7 +153,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
@ -168,14 +168,14 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
var angle = Math.atan2(headControl.worldY - hipControl.worldY, headControl.worldX - hipControl.worldX) * spine.MathUtils.radDeg;
|
||||
angle = (angle - 90) * 2.5;
|
||||
head.rotation = head.data.rotation + Math.min(90, Math.abs(angle)) * Math.sign(angle);
|
||||
skeleton.updateWorldTransform();
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.2;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.2;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
|
||||
@ -5,12 +5,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var rotateHandle;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var rotateHandle;
|
||||
var target = null;
|
||||
var hoverTargets = [null, null, null];
|
||||
var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
|
||||
var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
|
||||
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
|
||||
var lastRotation = 0;
|
||||
var mix, lastOffset = 0, lastMix = 0.5;
|
||||
@ -22,16 +22,16 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
function init () {
|
||||
canvas = document.getElementById("transforms-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, "atlas2.png");
|
||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
input = new spine.webgl.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
@ -40,7 +40,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.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);
|
||||
@ -50,11 +50,11 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds);
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform();
|
||||
rotateHandle = skeleton.findBone("rotate-handle");
|
||||
rotateHandle = skeleton.findBone("rotate-handle");
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
@ -62,7 +62,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
|
||||
@ -79,7 +79,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
var val = percent * 360 - 180;
|
||||
var delta = val - lastOffset;
|
||||
lastOffset = val;
|
||||
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
|
||||
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
|
||||
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
|
||||
$("#transforms-rotationoffset-label").text(Math.round(val) + "°");
|
||||
};
|
||||
@ -103,21 +103,21 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
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;
|
||||
if (v.y < 0) angle = 360 - angle;
|
||||
if (v.y < 0) angle = 360 - angle;
|
||||
return angle;
|
||||
}
|
||||
input.addListener({
|
||||
down: function(x, y) {
|
||||
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]);
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
up: function(x, y) {
|
||||
up: function(x, y) {
|
||||
target = null;
|
||||
},
|
||||
dragged: function(x, y) {
|
||||
@ -140,10 +140,10 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
}
|
||||
},
|
||||
moved: function (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]);
|
||||
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 {
|
||||
@ -171,12 +171,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
|
||||
gl.lineWidth(2);
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
|
||||
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
|
||||
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);
|
||||
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);
|
||||
renderer.end();
|
||||
|
||||
@ -40,6 +40,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
skeleton = loadSkeleton("spineboy");
|
||||
skeletonNoMix = new spine.Skeleton(skeleton.data);
|
||||
state = createState(0.25);
|
||||
state.multipleMixing = true;
|
||||
setAnimations(state, 0);
|
||||
stateNoMix = createState(0);
|
||||
setAnimations(stateNoMix, -0.25);
|
||||
|
||||
@ -5,7 +5,7 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var target = null;
|
||||
var hoverTargets = [null, null, null, null, null, null];
|
||||
@ -20,16 +20,16 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
function init () {
|
||||
canvas = document.getElementById("vine-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);
|
||||
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");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
@ -38,7 +38,7 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.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);
|
||||
@ -48,7 +48,7 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds);
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "animation", true);
|
||||
state.apply(skeleton);
|
||||
@ -65,14 +65,14 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#vine-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
@ -87,11 +87,11 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
time = animationDuration * percent;
|
||||
time = animationDuration * percent;
|
||||
state.update(time - playTime);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
playTime = time;
|
||||
playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
@ -100,19 +100,19 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
var checkbox = $("#vine-drawbones");
|
||||
checkbox.change(function() {
|
||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
up: function(x, y) {
|
||||
@ -132,15 +132,15 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
},
|
||||
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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -151,14 +151,14 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration) {
|
||||
playTime -= animationDuration;
|
||||
}
|
||||
timeLine.set(playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
state.apply(skeleton);
|
||||
}
|
||||
|
||||
skeleton.updateWorldTransform();
|
||||
@ -168,18 +168,18 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton);
|
||||
gl.lineWidth(2);
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
|
||||
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
|
||||
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);
|
||||
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);
|
||||
renderer.end();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user