feat: added added new skin to ptilopsis
well, i have to make changes to spine-ts so it can handle the difference between the size of texture
This commit is contained in:
Haoyu Xu
@@ -1,19 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>IK Constraints - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="additiveblending.js"></script>
|
||||
<body style="margin: 0; padding: 0;">
|
||||
|
||||
<div style="margin: 0 auto;" class="aspect standalone"></div>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(additiveBlendingDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,160 +0,0 @@
|
||||
var additiveBlendingDemo = function(canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
|
||||
var HANDLE_SIZE = 0.10;
|
||||
|
||||
var gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var target = null;
|
||||
var dragging = false;
|
||||
var handle = new spine.Vector2();
|
||||
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
|
||||
var isPlaying = true;
|
||||
|
||||
var left, right, up, down;
|
||||
var cursor;
|
||||
|
||||
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() {
|
||||
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -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, "atlas2.png");
|
||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["owl"]);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
|
||||
state.setAnimation(0, "idle", true);
|
||||
state.setAnimation(1, "blink", true);
|
||||
left = state.setAnimation(2, "left", true);
|
||||
right = state.setAnimation(3, "right", true);
|
||||
up = state.setAnimation(4, "up", true);
|
||||
down = state.setAnimation(5, "down", true);
|
||||
left.mixBlend = spine.MixBlend.add;
|
||||
right.mixBlend = spine.MixBlend.add;
|
||||
up.mixBlend = spine.MixBlend.add;
|
||||
down.mixBlend = spine.MixBlend.add;
|
||||
left.alpha = 0;
|
||||
right.alpha = 0;
|
||||
up.alpha = 0;
|
||||
down.alpha = 0;
|
||||
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function calculateBlend (x, y, isPageCoords) {
|
||||
var canvasBounds = canvas.getBoundingClientRect();
|
||||
var centerX = canvasBounds.x + canvasBounds.width / 2;
|
||||
var centerY = canvasBounds.y + canvasBounds.height / 2;
|
||||
right.alpha = x < centerX ? 1 - x / centerX : 0;
|
||||
left.alpha = x > centerX ? (x - centerX) / (window.innerWidth - centerX): 0;
|
||||
up.alpha = y < centerY ? 1 - y / centerY : 0;
|
||||
down.alpha = y > centerY ? (y - centerY) / (window.innerHeight - centerY): 0;
|
||||
}
|
||||
|
||||
function setupInput () {
|
||||
if (!isMobileDevice()) {
|
||||
document.addEventListener("mousemove", function (event) {
|
||||
clientMouseX = event.clientX;
|
||||
clientMouseY = event.clientY;
|
||||
mouseMoved = true;
|
||||
}, false);
|
||||
} else {
|
||||
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);
|
||||
if (temp.set(handle.x, handle.y, 0).distance(coords) < canvas.width * HANDLE_SIZE) {
|
||||
dragging = true;
|
||||
}
|
||||
},
|
||||
up: function(x, y) {
|
||||
dragging = false;
|
||||
},
|
||||
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);
|
||||
handle.x = coords.x;
|
||||
handle.y = coords.y;
|
||||
calculateBlend(x, y, false);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function render () {
|
||||
if (!isMobileDevice() && mouseMoved) calculateBlend(clientMouseX, clientMouseY, true);
|
||||
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.4;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.4;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
|
||||
if (isMobileDevice()) {
|
||||
gl.lineWidth(2);
|
||||
renderer.circle(true, handle.x, handle.y, canvas.width * HANDLE_SIZE, COLOR_INNER);
|
||||
renderer.circle(false, handle.x, handle.y, canvas.width * HANDLE_SIZE, COLOR_OUTER);
|
||||
gl.lineWidth(1);
|
||||
}
|
||||
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
additiveBlendingDemo.loadingComplete = loadingComplete;
|
||||
additiveBlendingDemo.render = render;
|
||||
additiveBlendingDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 804 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
@@ -1,24 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Clipping - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="clipping.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="clipping-playbutton"></div>
|
||||
<div id="clipping-timeline" class="slider"></div>
|
||||
<input id="clipping-drawtriangles" type="checkbox"></input> Draw triangles
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(clippingDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,120 +0,0 @@
|
||||
var clippingDemo = function(canvas, bgColor) {
|
||||
var gl, renderer, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
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");
|
||||
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "portal", true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x + 200;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2 + 100;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#clipping-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeline = $("#clipping-timeline").data("slider");
|
||||
timeline.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percent;
|
||||
state.update(time - playTime);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawClipping = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
$("#clipping-drawtriangles").click(function() {
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawClipping = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = this.checked;
|
||||
})
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration)
|
||||
playTime -= animationDuration;
|
||||
timeline.set(playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.6;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.6;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
clippingDemo.loadingComplete = loadingComplete;
|
||||
clippingDemo.render = render;
|
||||
clippingDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,127 +0,0 @@
|
||||
body, html {
|
||||
margin: 0;
|
||||
font-family: Tahoma;
|
||||
font-size: 11pt;
|
||||
}
|
||||
body {
|
||||
padding: 15px;
|
||||
}
|
||||
br {
|
||||
display: block;
|
||||
content: "";
|
||||
margin-top: 15px;
|
||||
}
|
||||
h2 {
|
||||
padding-top: 1em;
|
||||
}
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.aspect {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.standalone {
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
clear: both;
|
||||
}
|
||||
.demo-container {
|
||||
float: left;
|
||||
width: 58%;
|
||||
}
|
||||
.demo-text {
|
||||
float: left;
|
||||
width: 38%;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.timeline, .timeline td:nth-child(2) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.play {
|
||||
background: black;
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23F2F2F2%27%20d%3D%27M30.185%2C15.5L12.556%2C24.8V6.201L30.185%2C15.5z%27%2F%3E%3C%2Fsvg%3E");
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
}
|
||||
.pause {
|
||||
background: black;
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M26.94%2C6.978v17.045h-5.249V6.978H26.94z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M18.975%2C6.978v17.045h-5.249V6.978H18.975z%22%2F%3E%3C%2Fsvg%3E");
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
transform: translateZ(0);
|
||||
background: #222;
|
||||
display: inline-block;
|
||||
}
|
||||
.slider, .slider.filled span {
|
||||
height: 15px;
|
||||
border: 1px solid #c5c5c5;
|
||||
}
|
||||
.slider div {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 10px;
|
||||
height: 17px;
|
||||
background: white;
|
||||
border: #000 1px solid;
|
||||
border-radius: 2px;
|
||||
z-index: 10;
|
||||
}
|
||||
.slider.filled {
|
||||
border: 0;
|
||||
}
|
||||
.slider.filled div {
|
||||
top: -1px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.slider.filled span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #3ea9f5;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
z-index: 5;
|
||||
}
|
||||
.slider.filled span:last-child {
|
||||
background: #222;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
.overlay-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
.overlay-label {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,353 +0,0 @@
|
||||
<!DOCTYPE html><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Spine: Demos</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
|
||||
<script src="utils.js"></script>
|
||||
<script src="spritesheets.js"></script>
|
||||
<script src="imagechanges.js"></script>
|
||||
<script src="transitions.js"></script>
|
||||
<script src="meshes.js"></script>
|
||||
<script src="skins.js"></script>
|
||||
<script src="hoverboard.js"></script>
|
||||
<script src="vine.js"></script>
|
||||
<script src="clipping.js"></script>
|
||||
<script src="stretchyman.js"></script>
|
||||
<script src="tank.js"></script>
|
||||
<script src="transforms.js"></script>
|
||||
<script src="additiveblending.js"></script>
|
||||
|
||||
<script src="demos.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="demos" class="demos-page">
|
||||
<div class="demo">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Spine-versus-sprites-sheets"><a href="#Spine-versus-sprite-sheets">Spine versus sprite sheets</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
<div id="spritesheets-overlay" class="overlay-hide">
|
||||
<div class="overlay-label" style="width:50%"><b>Spine</b><br><span class="hide-small">All animations, all frame rates<br></span><b>0.18 MB</b></div>
|
||||
<div class="overlay-label" style="left:50%;width:50%"><b>Sprite sheet</b><br><span class="hide-small">1 second of animation @ 30FPS<br></span><b>3.39 MB = 18x larger!</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:0px">
|
||||
<div class="control-label"><span>Animation speed</span></div>
|
||||
<div class="slidervalue" id="spritesheets-timeslider-label"> </div>
|
||||
<div class="slider filled" id="spritesheets-timeslider"></div>
|
||||
</div>
|
||||
<div class="control" style="margin:0">
|
||||
<div>
|
||||
<button id="spritesheets-roar" class="btn unit-50">Roar</button>
|
||||
<button id="spritesheets-jump" class="btn unit-50">Jump</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Spine-with-frame-based-animation"><a href="#Spine-with-frame-based-animation">Spine with frame-based animation</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout"><tr>
|
||||
<td><div id="imagechanges-playbutton" class="pause"></div></td>
|
||||
<td><div class="slider" id="imagechanges-timeline"></div></td>
|
||||
</tr></table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control">
|
||||
<label>Select a skeleton:</label>
|
||||
<div class="select-container">
|
||||
<select id="imagechanges-skeleton" size="2"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Transitions-and-layering"><a href="#Transitions-and-layering">Transitions and layering</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div id="transitions-overlay" class="overlay-hide">
|
||||
<div class="overlay-label" style="left:25%;"><b>Smooth</b></div>
|
||||
<div class="overlay-label" style="right:30%;"><b>Abrupt</b></div>
|
||||
</div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="margin:0">
|
||||
<div>
|
||||
<button id="transitions-die" class="btn unit-50">Die</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="padding-bottom:0px">
|
||||
<div class="control-label"><span>Animation speed</span></div>
|
||||
<div class="slidervalue" id="transitions-timeslider-label"> </div>
|
||||
<div class="slider filled" id="transitions-timeslider"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-mesh-deformations">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Mesh-deformations"><a href="#Mesh-deformations">Mesh deformation</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout"><tr>
|
||||
<td><div id="meshes-playbutton" class="pause"></div></td>
|
||||
<td><div class="slider" id="meshes-timeline"></div></td>
|
||||
</tr></table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:0">
|
||||
<label>Select a character:</label>
|
||||
<div class="select-container">
|
||||
<select id="meshes-skeleton" size="3"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="width:50%; display:inline-block; float:left; padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="meshes-drawbonescheckbox" name="check">
|
||||
<label for="meshes-drawbonescheckbox"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#meshes-drawbonescheckbox').click()">Show bones</span>
|
||||
</div>
|
||||
<div class="control" style="width:50%; display:inline-block; padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="meshes-drawmeshtrianglescheckbox" name="check">
|
||||
<label for="meshes-drawmeshtrianglescheckbox"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#meshes-drawmeshtrianglescheckbox').click()">Show triangles</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-skins">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Skins"><a href="#Skins">Skins</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control">
|
||||
<label>Select a skin:</label>
|
||||
<div class="select-container">
|
||||
<select id="skins-skin"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="margin:0">
|
||||
<div>
|
||||
<button id="skins-randomizeattachments" class="btn unit-50">Randomize</button>
|
||||
<button id="skins-swingsword" class="btn unit-50">Swing Sword</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="padding-bottom:6px; padding-top:10px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="skins-randomizeskins" name="check" checked="true">
|
||||
<label for="skins-randomizeskins"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#skins-randomizeskins').click()">Random skins</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-ik-constraint">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Inverse-kinematics"><a href="#Inverse-kinematics">Inverse kinematics</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="margin:0">
|
||||
<div>
|
||||
<button id="hoverboard-shoot" class="btn unit-50">Shoot</button>
|
||||
<button id="hoverboard-jump" class="btn unit-50">Jump</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control" style="width:50%; display:inline-block; float:left; padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="hoverboard-aim" name="check">
|
||||
<label for="hoverboard-aim"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#hoverboard-aim').click()">Aim</span>
|
||||
</div>
|
||||
<div class="control" style="width:50%; display:inline-block; padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="hoverboard-drawbones" name="check">
|
||||
<label for="hoverboard-drawbones"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#hoverboard-drawbones').click()">Show bones</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-path-constraint">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Path-constraints"><a href="#Path-constraints">Path constraints</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout"><tr>
|
||||
<td><div id="vine-playbutton" class="pause"></div></td>
|
||||
<td><div class="slider" id="vine-timeline"></div></td>
|
||||
</tr></table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="vine-drawbones" name="check">
|
||||
<label for="vine-drawbones"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#vine-drawbones').click()">Show bones & paths</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="stretchyman-drawbones" name="check">
|
||||
<label for="stretchyman-drawbones"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#stretchyman-drawbones').click()">Show bones & paths</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-clipping">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Clipping"><a href="#Clipping">Clipping</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout"><tr>
|
||||
<td><div id="clipping-playbutton" class="pause"></div></td>
|
||||
<td><div class="slider" id="clipping-timeline"></div></td>
|
||||
</tr></table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="clipping-drawtriangles" name="check">
|
||||
<label for="clipping-drawtriangles"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#clipping-drawtriangles').click()">Show triangles</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-transform-constraint">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Transform-constraints"><a href="#Transform-constraints">Transform constraints</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<table class="timeline layout"><tr>
|
||||
<td><div id="tank-playbutton" class="pause"></div></td>
|
||||
<td><div class="slider" id="tank-timeline"></div></td>
|
||||
</tr></table>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="tank-drawbones" name="check">
|
||||
<label for="tank-drawbones" id="tank-drawbones-label"></label>
|
||||
</div>
|
||||
<span style="cursor:pointer" onclick="$('#tank-drawbones').click()">Show bones & paths</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:0px">
|
||||
<div class="control-label"><span>Rotation offset</span></div>
|
||||
<div class="slidervalue" id="transforms-rotationoffset-label"> </div>
|
||||
<div class="slider filled" id="transforms-rotationoffset"></div>
|
||||
</div>
|
||||
<div class="control" style="padding-bottom:0px">
|
||||
<div class="control-label"><span>Translation mix</span></div>
|
||||
<div class="slidervalue" id="transforms-translationmix-label"> </div>
|
||||
<div class="slider filled" id="transforms-translationmix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo" id="demo-additive-blending">
|
||||
<div>
|
||||
<div>
|
||||
<h2 id="Additive-blending"><a href="#Additive-blending">Additive Blending</a></h2>
|
||||
<div class="demo-container">
|
||||
<div class="aspect"></div>
|
||||
<div class="resize"></div>
|
||||
</div>
|
||||
<div class="demo-text">
|
||||
<div class="controls">
|
||||
<div class="control" style="padding-bottom:6px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -1,85 +0,0 @@
|
||||
|
||||
$(function () {
|
||||
window.onerror = function(message, url, lineNo) {
|
||||
alert("Error: " + message + "\n" + "URL:" + url + "\nLine: " + lineNo);
|
||||
}
|
||||
|
||||
spineDemos.init();
|
||||
spineDemos.assetManager = new spine.SharedAssetManager("assets/");
|
||||
|
||||
var demos = [
|
||||
spritesheetsDemo,
|
||||
imageChangesDemo,
|
||||
transitionsDemo,
|
||||
meshesDemo,
|
||||
skinsDemo,
|
||||
hoverboardDemo,
|
||||
vineDemo,
|
||||
clippingDemo,
|
||||
stretchymanDemo,
|
||||
tankDemo,
|
||||
transformsDemo,
|
||||
additiveBlendingDemo
|
||||
];
|
||||
|
||||
var placeholders = document.getElementsByClassName("aspect");
|
||||
|
||||
for (var i = 0; i < demos.length; i++)
|
||||
spineDemos.addDemo(demos[i], placeholders[i]);
|
||||
|
||||
function resizeSliders () {
|
||||
$(".slider").each(function () {
|
||||
$(this).data("slider").resized();
|
||||
});
|
||||
}
|
||||
|
||||
function windowResized () {
|
||||
// Keep canvas from taking up whole screen.
|
||||
$(".aspect").each(function () {
|
||||
$(this).css("padding-bottom", Math.min(70.14, $(window).height() * 0.75 / $(this).width() * 100) + "%");
|
||||
});
|
||||
|
||||
// Swap controls when media query puts text below canvas.
|
||||
var below = $("#below").is(':visible');
|
||||
$(".demo .description").each(function () {
|
||||
var description = $(this);
|
||||
var controls = description.children(".controls");
|
||||
if (below || description.hasClass("fullsize"))
|
||||
description.prepend(controls);
|
||||
else
|
||||
description.append(controls);
|
||||
});
|
||||
|
||||
resizeSliders();
|
||||
}
|
||||
windowResized();
|
||||
$(window).resize(windowResized);
|
||||
|
||||
$(".resize").click(function () {
|
||||
var resizeButton = $(this);
|
||||
var container = resizeButton.parent();
|
||||
var parent = container.parent();
|
||||
var overlayLabels = parent.find(".overlay-label");
|
||||
var description = parent.children(".description");
|
||||
var controls = description.children(".controls");
|
||||
|
||||
container.toggleClass("fullsize");
|
||||
resizeButton.toggleClass("checked");
|
||||
|
||||
var offset = parseFloat(overlayLabels.css("bottom"));
|
||||
description.toggleClass("fullsize");
|
||||
if (description.hasClass("fullsize")) {
|
||||
overlayLabels.css("bottom", offset * 1.666);
|
||||
} else {
|
||||
resizeSliders();
|
||||
overlayLabels.css("bottom", offset / 1.666);
|
||||
}
|
||||
setTimeout(function() {
|
||||
windowResized();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
$(".checkbox-overlay").change(function () {
|
||||
$(this).closest(".demo").find(".overlay").toggleClass("overlay-hide");
|
||||
});
|
||||
});
|
||||
@@ -1,25 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>IK Constraints - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="hoverboard.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones<br>
|
||||
<input id="hoverboard-aim" type="checkbox"></input> Aim<br>
|
||||
<button id="hoverboard-shoot">Shoot</button>
|
||||
<button id="hoverboard-jump">Jump</button>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(hoverboardDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,181 +0,0 @@
|
||||
var hoverboardDemo = function(canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
|
||||
|
||||
var gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var target = null;
|
||||
var hoverTargets = [];
|
||||
var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"];
|
||||
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 () {
|
||||
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");
|
||||
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "hoverboard", true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
for (var i = 0; i < controlBones.length; i++)
|
||||
hoverTargets.push(null);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI () {
|
||||
var checkbox = $("#hoverboard-drawbones");
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
checkbox.change(function() {
|
||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
});
|
||||
|
||||
var aimTrack = 1;
|
||||
var shootAimTrack = 2;
|
||||
var shootTrack = 3;
|
||||
|
||||
$("#hoverboard-aim").change(function () {
|
||||
if (!this.checked)
|
||||
state.setEmptyAnimation(aimTrack, 0.2);
|
||||
else {
|
||||
state.setEmptyAnimation(aimTrack, 0);
|
||||
state.addAnimation(aimTrack, "aim", true, 0).mixDuration = 0.2;
|
||||
}
|
||||
});
|
||||
|
||||
$("#hoverboard-shoot").click(function () {
|
||||
state.setAnimation(shootAimTrack, "aim", true);
|
||||
state.setAnimation(shootTrack, "shoot", false).listener = {
|
||||
complete: function (trackIndex) {
|
||||
state.setEmptyAnimation(shootAimTrack, 0.2);
|
||||
state.clearTrack(shootTrack);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
$("#hoverboard-jump").click(function () {
|
||||
state.setAnimation(aimTrack, "jump", false);
|
||||
state.addEmptyAnimation(aimTrack, 0.5, 0);
|
||||
if ($("#hoverboard-aim").prop("checked"))
|
||||
state.addAnimation(aimTrack, "aim", true, 0.4).mixDuration = 0.2;
|
||||
});
|
||||
}
|
||||
|
||||
function setupInput () {
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
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);
|
||||
|
||||
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, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
|
||||
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
|
||||
}
|
||||
renderer.end();
|
||||
gl.lineWidth(1);
|
||||
}
|
||||
|
||||
hoverboardDemo.loadingComplete = loadingComplete;
|
||||
hoverboardDemo.render = render;
|
||||
hoverboardDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Frame-by-frame - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="imagechanges.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="imagechanges-timeline" class="slider"></div>
|
||||
<input id="imagechanges-playbutton" type="button" value="Pause"></input><br>
|
||||
<select id="imagechanges-skeleton" size="2"></select>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(imageChangesDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,198 +0,0 @@
|
||||
var imageChangesDemo = function(canvas, bgColor) {
|
||||
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var skeletons = {};
|
||||
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 () {
|
||||
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");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete () {
|
||||
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
|
||||
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#imagechanges-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#imagechanges-timeline").data("slider");
|
||||
timeLine.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percent;
|
||||
active.state.update(time - active.playTime);
|
||||
active.state.apply(active.skeleton);
|
||||
active.skeleton.updateWorldTransform();
|
||||
active.playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
var list = $("#imagechanges-skeleton");
|
||||
for (var skeletonName in skeletons) {
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", skeletonName).text(skeletonName);
|
||||
if (skeletonName === activeSkeleton) option.attr("selected", "selected");
|
||||
list.append(option);
|
||||
}
|
||||
list.change(function() {
|
||||
activeSkeleton = $("#imagechanges-skeleton option:selected").text();
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
timeLine.set(active.playTime / animationDuration);
|
||||
})
|
||||
}
|
||||
|
||||
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
|
||||
var skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName("default");
|
||||
|
||||
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
|
||||
var anim = skeletonData.findAnimation(animation);
|
||||
state.setAnimation(0, animation, true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
var size = new spine.Vector2();
|
||||
skeleton.getBounds(offset, size, []);
|
||||
|
||||
var regions = [];
|
||||
for(var i = 0; i < sequenceSlots.length; i++) {
|
||||
var slot = skeleton.findSlot(sequenceSlots[i]);
|
||||
sequenceSlots[i] = slot;
|
||||
var index = slot.data.index;
|
||||
for (var name in skeleton.skin.attachments[index])
|
||||
regions.push(skeleton.skin.attachments[index][name]);
|
||||
}
|
||||
|
||||
return {
|
||||
atlas: atlas,
|
||||
skeleton: skeleton,
|
||||
state: state,
|
||||
playTime: 0,
|
||||
bounds: {
|
||||
offset: offset,
|
||||
size: size
|
||||
},
|
||||
slots: sequenceSlots,
|
||||
regions: regions
|
||||
};
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
var active = skeletons[activeSkeleton];
|
||||
var skeleton = active.skeleton;
|
||||
var state = active.state;
|
||||
var offset = active.bounds.offset;
|
||||
var size = active.bounds.size;
|
||||
|
||||
var x = offset.x + size.x + 100, offsetY = offset.y, zoom = 1;
|
||||
if (activeSkeleton === "Alien") {
|
||||
renderer.camera.position.x = offset.x + size.x + 400;
|
||||
renderer.camera.position.y = offset.y + size.y / 2 + 450;
|
||||
x += 400;
|
||||
zoom = 0.31;
|
||||
} else {
|
||||
renderer.camera.position.x = offset.x + size.x;
|
||||
renderer.camera.position.y = offset.y + size.y / 2;
|
||||
x += 100;
|
||||
}
|
||||
renderer.camera.viewportWidth = size.x * 2.4 / zoom;
|
||||
renderer.camera.viewportHeight = size.y * 1.4 / zoom;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
active.playTime += delta;
|
||||
while (active.playTime >= animationDuration) {
|
||||
active.playTime -= animationDuration;
|
||||
}
|
||||
timeLine.set(active.playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
|
||||
var y = offsetY;
|
||||
var slotsWidth = 0, slotsHeight = 0;
|
||||
var slotSize = size.y / 3;
|
||||
var maxSlotWidth = 0;
|
||||
var j = 0;
|
||||
for (var i = 0, n = active.regions.length; i < n; i++) {
|
||||
var region = active.regions[i].region;
|
||||
var scale = Math.min(slotSize / region.height, slotSize / region.width) / zoom;
|
||||
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
|
||||
|
||||
for (var ii = 0; ii < active.slots.length; ii++) {
|
||||
var slot = active.slots[ii];
|
||||
if (slot.attachment && slot.attachment.name === region.name) {
|
||||
renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
maxSlotWidth = Math.max(maxSlotWidth, region.width * scale);
|
||||
y += slotSize / zoom + 2;
|
||||
j++;
|
||||
if (j == 3) {
|
||||
x += maxSlotWidth + 10;
|
||||
maxSlotWidth = 0;
|
||||
y = offsetY;
|
||||
j = 0;
|
||||
}
|
||||
}
|
||||
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
imageChangesDemo.loadingComplete = loadingComplete;
|
||||
imageChangesDemo.render = render;
|
||||
imageChangesDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Meshes - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="meshes.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="meshes-timeline" class="slider"></div>
|
||||
<input id="meshes-playbutton" type="button" value="Pause"></input><br>
|
||||
<select id="meshes-skeleton" size="3"></select><br>
|
||||
<input type="checkbox" id="meshes-drawbonescheckbox" style="color: #fff;"></input> Draw bones<br>
|
||||
<input type="checkbox" id="meshes-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles<br>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(meshesDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,158 +0,0 @@
|
||||
var meshesDemo = function(canvas, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var skeletons = {};
|
||||
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 () {
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
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");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete () {
|
||||
timeKeeper.update();
|
||||
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
|
||||
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
|
||||
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#meshes-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeline = $("#meshes-timeline").data("slider");
|
||||
timeline.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percent;
|
||||
active.state.update(time - active.playTime);
|
||||
active.state.apply(active.skeleton);
|
||||
active.skeleton.updateWorldTransform();
|
||||
active.playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
var list = $("#meshes-skeleton");
|
||||
for (var skeletonName in skeletons) {
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", skeletonName).text(skeletonName);
|
||||
if (skeletonName === activeSkeleton) option.attr("selected", "selected");
|
||||
list.append(option);
|
||||
}
|
||||
list.change(function() {
|
||||
activeSkeleton = $("#meshes-skeleton option:selected").text();
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
timeline.set(active.playTime / animationDuration);
|
||||
})
|
||||
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
$("#meshes-drawbonescheckbox").click(function() {
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
})
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
$("#meshes-drawmeshtrianglescheckbox").click(function() {
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
|
||||
})
|
||||
}
|
||||
|
||||
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
|
||||
var skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName("default");
|
||||
|
||||
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
|
||||
state.setAnimation(0, animation, true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
var size = new spine.Vector2();
|
||||
skeleton.getBounds(offset, size, []);
|
||||
|
||||
return {
|
||||
atlas: atlas,
|
||||
skeleton: skeleton,
|
||||
state: state,
|
||||
playTime: 0,
|
||||
bounds: {
|
||||
offset: offset,
|
||||
size: size
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
var active = skeletons[activeSkeleton];
|
||||
var skeleton = active.skeleton;
|
||||
var state = active.state;
|
||||
var offset = active.bounds.offset;
|
||||
var size = active.bounds.size;
|
||||
|
||||
renderer.camera.position.x = offset.x + size.x / 2;
|
||||
renderer.camera.position.y = offset.y + size.y / 2 + 20;
|
||||
renderer.camera.viewportWidth = size.x * 1.1;
|
||||
renderer.camera.viewportHeight = size.y * 1.1;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
active.playTime += delta;
|
||||
while (active.playTime >= animationDuration)
|
||||
active.playTime -= animationDuration;
|
||||
timeline.set(active.playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
meshesDemo.loadingComplete = loadingComplete;
|
||||
meshesDemo.render = render;
|
||||
meshesDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,25 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Skins - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="skins.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<select id="skins-skin"></select><br>
|
||||
<button id="skins-randomizeattachments">Random Attachments</button>
|
||||
<button id="skins-swingsword">Swing Sword</button><br>
|
||||
<input id="skins-randomizeskins" type="checkbox" checked=true></input> Randomize skin
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(skinsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,214 +0,0 @@
|
||||
var skinsDemo = function(canvas, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, offset, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
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 () {
|
||||
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, "heroes.png");
|
||||
assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes2.png");
|
||||
assetManager.loadText(DEMO_NAME, "heroes.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName("Assassin");
|
||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||
stateData.defaultMix = 0.2;
|
||||
stateData.setMix("roll", "run", 0);
|
||||
stateData.setMix("jump", "run2", 0);
|
||||
state = new spine.AnimationState(stateData);
|
||||
setupAnimations(state);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupInput (){
|
||||
input.addListener({
|
||||
down: function(x, y) {
|
||||
swingSword();
|
||||
},
|
||||
up: function(x, y) { },
|
||||
dragged: function(x, y) { },
|
||||
moved: function (x, y) { }
|
||||
});
|
||||
}
|
||||
|
||||
function setupAnimations(state) {
|
||||
state.addAnimation(0, "idle", true, 1);
|
||||
state.addAnimation(0, "walk", true, 2);
|
||||
state.addAnimation(0, "run", true, 4);
|
||||
state.addAnimation(0, "roll", false, 3);
|
||||
state.addAnimation(0, "run", true, 0);
|
||||
state.addAnimation(0, "run2", true, 1.5);
|
||||
state.addAnimation(0, "jump", false, 3);
|
||||
state.addAnimation(0, "run2", true, 0);
|
||||
state.addAnimation(0, "run", true, 1);
|
||||
state.addAnimation(0, "idle", true, 3);
|
||||
state.addAnimation(0, "idleTired", true, 0.5);
|
||||
state.addAnimation(0, "idle", true, 2);
|
||||
state.addAnimation(0, "walk2", true, 1);
|
||||
state.addAnimation(0, "block", true, 3);
|
||||
state.addAnimation(0, "punch1", false, 1.5);
|
||||
state.addAnimation(0, "block", true, 0);
|
||||
state.addAnimation(0, "punch1", false, 1.5);
|
||||
state.addAnimation(0, "punch2", false, 0);
|
||||
state.addAnimation(0, "block", true, 0);
|
||||
state.addAnimation(0, "hitBig", false, 1.5);
|
||||
state.addAnimation(0, "floorIdle", true, 0);
|
||||
state.addAnimation(0, "floorGetUp", false, 1.5);
|
||||
state.addAnimation(0, "idle", true, 0);
|
||||
state.addAnimation(0, "meleeSwing1-fullBody", false, 1.5);
|
||||
state.addAnimation(0, "idle", true, 0);
|
||||
state.addAnimation(0, "meleeSwing2-fullBody", false, 1.5);
|
||||
state.addAnimation(0, "idle", true, 0);
|
||||
state.addAnimation(0, "idleTired", true, 0.5);
|
||||
state.addAnimation(0, "crouchIdle", true, 1.5);
|
||||
state.addAnimation(0, "crouchWalk", true, 2);
|
||||
state.addAnimation(0, "crouchIdle", true, 2.5).listener = {
|
||||
start: function (trackIndex) {
|
||||
setupAnimations(state);
|
||||
}
|
||||
};
|
||||
|
||||
state.setAnimation(1, "empty", false, 0);
|
||||
state.setAnimation(1, "hideSword", false, 2);
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
var list = $("#skins-skin");
|
||||
for (var skin in skeleton.data.skins) {
|
||||
skin = skeleton.data.skins[skin];
|
||||
if (skin.name == "default") continue;
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", skin.name).text(skin.name);
|
||||
if (skin.name === "Assassin") {
|
||||
option.attr("selected", "selected");
|
||||
skeleton.setSkinByName("Assassin");
|
||||
}
|
||||
list.append(option);
|
||||
}
|
||||
list.change(function() {
|
||||
activeSkin = $("#skins-skin option:selected").text();
|
||||
skeleton.setSkinByName(activeSkin);
|
||||
skeleton.setSlotsToSetupPose();
|
||||
randomizeSkins.checked = false;
|
||||
});
|
||||
|
||||
$("#skins-randomizeattachments").click(randomizeAttachments);
|
||||
$("#skins-swingsword").click(swingSword);
|
||||
randomizeSkins = document.getElementById("skins-randomizeskins");
|
||||
}
|
||||
|
||||
function setSkin (skin) {
|
||||
var slot = skeleton.findSlot("item_near");
|
||||
var weapon = slot.getAttachment();
|
||||
skeleton.setSkin(skin);
|
||||
skeleton.setSlotsToSetupPose();
|
||||
slot.setAttachment(weapon);
|
||||
}
|
||||
|
||||
function swingSword () {
|
||||
state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
|
||||
}
|
||||
|
||||
function randomizeSkin () {
|
||||
var result;
|
||||
var count = 0;
|
||||
for (var skin in skeleton.data.skins) {
|
||||
if (skeleton.data.skins[skin].name === "default") continue;
|
||||
if (Math.random() < 1/++count) {
|
||||
result = skeleton.data.skins[skin];
|
||||
}
|
||||
}
|
||||
setSkin(result);
|
||||
$("#skins-skin option").filter(function() {
|
||||
return ($(this).text() == result.name);
|
||||
}).prop("selected", true);
|
||||
}
|
||||
|
||||
function randomizeAttachments () {
|
||||
var skins = [];
|
||||
for (var skin in skeleton.data.skins) {
|
||||
skin = skeleton.data.skins[skin];
|
||||
if (skin.name === "default") continue;
|
||||
skins.push(skin);
|
||||
}
|
||||
|
||||
var newSkin = new spine.Skin("random-skin");
|
||||
for (var slot = 0; slot < skeleton.slots.length; slot++) {
|
||||
var skin = skins[(Math.random() * skins.length - 1) | 0];
|
||||
var attachments = skin.attachments[slot];
|
||||
for (var attachmentName in attachments) {
|
||||
newSkin.setAttachment(slot, attachmentName, attachments[attachmentName]);
|
||||
}
|
||||
}
|
||||
setSkin(newSkin);
|
||||
randomizeSkins.checked = false;
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (randomizeSkins.checked) {
|
||||
var now = Date.now() / 1000;
|
||||
if (now - lastSkinChange > 2) {
|
||||
randomizeSkin();
|
||||
lastSkinChange = now;
|
||||
}
|
||||
}
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x * 1.5 - 125;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
renderer.camera.viewportWidth = bounds.x * 3;
|
||||
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);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
var texture = assetManager.get(DEMO_NAME, "heroes.png");
|
||||
var width = bounds.x * 1.25;
|
||||
var scale = width / texture.getImage().width;
|
||||
var height = scale * texture.getImage().height;
|
||||
renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
skinsDemo.loadingComplete = loadingComplete;
|
||||
skinsDemo.render = render;
|
||||
skinsDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,25 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Spine vs Sprite Sheets - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="spritesheets.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<button id="spritesheets-roar">Roar</button>
|
||||
<button id="spritesheets-jump">Jump</button><br>
|
||||
Time multiplier
|
||||
<div id="spritesheets-timeslider" class="slider filled"></div>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(spritesheetsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,151 +0,0 @@
|
||||
var spritesheetsDemo = function(canvas, bgColor) {
|
||||
var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8);
|
||||
var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, animationState, offset, bounds;
|
||||
var skeletonSeq, walkAnim, walkLastTime = 0, walkLastTimePrecise = 0;
|
||||
var skeletonAtlas;
|
||||
var viewportWidth, viewportHeight;
|
||||
var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
|
||||
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 () {
|
||||
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");
|
||||
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||
stateData.defaultMix = 0.5;
|
||||
stateData.setMix("jump", "walk", 0.3);
|
||||
animationState = new spine.AnimationState(stateData);
|
||||
animationState.setAnimation(0, "walk", true);
|
||||
animationState.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
skeleton.x -= 60;
|
||||
|
||||
skeletonSeq = new spine.Skeleton(skeletonData);
|
||||
walkAnim = skeletonSeq.data.findAnimation("walk");
|
||||
walkAnim.apply(skeletonSeq, 0, 0, true, null, 1, true, false);
|
||||
skeletonSeq.x += bounds.x + 150;
|
||||
|
||||
viewportWidth = ((700 + bounds.x) - offset.x);
|
||||
viewportHeight = ((0 + bounds.y) - offset.y);
|
||||
resize();
|
||||
setupUI();
|
||||
setupInput();
|
||||
|
||||
$("#spritesheets-overlay").removeClass("overlay-hide");
|
||||
$("#spritesheets-overlay").addClass("overlay");
|
||||
}
|
||||
|
||||
function setupUI () {
|
||||
timeSlider = $("#spritesheets-timeslider").data("slider");
|
||||
timeSlider.set(0.5);
|
||||
timeSliderLabel = $("#spritesheets-timeslider-label")[0];
|
||||
}
|
||||
|
||||
function setupInput () {
|
||||
input.addListener({
|
||||
down: function(x, y) {
|
||||
setAnimation((clickAnim++ % 2 == 0) ? "roar" : "jump");
|
||||
},
|
||||
up: function(x, y) { },
|
||||
moved: function(x, y) { },
|
||||
dragged: function(x, y) { }
|
||||
});
|
||||
$("#spritesheets-roar").click(function () {
|
||||
setAnimation("roar");
|
||||
});
|
||||
$("#spritesheets-jump").click(function () {
|
||||
setAnimation("jump");
|
||||
});
|
||||
}
|
||||
|
||||
function setAnimation (name) {
|
||||
animationState.setAnimation(0, name, false);
|
||||
animationState.addAnimation(0, "walk", true, 0);
|
||||
}
|
||||
|
||||
function resize () {
|
||||
renderer.camera.position.x = offset.x + viewportWidth / 2 - 25;
|
||||
renderer.camera.position.y = offset.y + viewportHeight / 2 - 100;
|
||||
renderer.camera.viewportWidth = viewportWidth * 1.2;
|
||||
renderer.camera.viewportHeight = viewportHeight * 1.2;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
resize();
|
||||
|
||||
delta *= timeSlider.get();
|
||||
if (timeSliderLabel) {
|
||||
var oldValue = timeSliderLabel.textContent;
|
||||
var newValue = Math.round(timeSlider.get() * 100) + "%";
|
||||
if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
|
||||
}
|
||||
|
||||
var animationDuration = animationState.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration) {
|
||||
playTime -= animationDuration;
|
||||
}
|
||||
|
||||
walkLastTimePrecise += delta;
|
||||
while (walkLastTimePrecise - walkLastTime > 1 / FPS) {
|
||||
var newWalkTime = walkLastTime + 1 / FPS;
|
||||
walkAnim.apply(skeletonSeq, walkLastTime, newWalkTime, true, null, 1, spine.MixBlend.setup, spine.MixDirection.mixIn);
|
||||
walkLastTime = newWalkTime;
|
||||
}
|
||||
skeletonSeq.updateWorldTransform();
|
||||
|
||||
animationState.update(delta);
|
||||
var current = animationState.getCurrent(0);
|
||||
if (current.animation.name == "walk") current.trackTime = walkLastTimePrecise;
|
||||
animationState.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
var frame = frames[currFrame];
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeleton(skeletonSeq, true);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
spritesheetsDemo.loadingComplete = loadingComplete;
|
||||
spritesheetsDemo.render = render;
|
||||
spritesheetsDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Strechyman - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="stretchyman.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<input id="stretchyman-drawbones" type="checkbox"></input> Display bones
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(stretchymanDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,188 +0,0 @@
|
||||
var stretchymanDemo = function(canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
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 timeKeeper, loadingScreen;
|
||||
var target = null;
|
||||
var hoverTargets = [];
|
||||
var controlBones = [
|
||||
"back leg controller",
|
||||
"front leg controller",
|
||||
"back arm controller",
|
||||
"front arm 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();
|
||||
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 () {
|
||||
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); };
|
||||
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();
|
||||
}
|
||||
|
||||
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
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);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function center (middleBone, hipBone, footBone, amount, dir) {
|
||||
temp.set(footBone.worldX + skeleton.x, footBone.worldY + skeleton.y, 0)
|
||||
.sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0));
|
||||
var dist = Math.sqrt(temp.x * temp.x + temp.y * temp.y);
|
||||
temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0);
|
||||
temp.scale(0.5).add(temp3);
|
||||
middleBone.parent.worldToLocal(kneePos.set(temp.x, temp.y));
|
||||
middleBone.x = kneePos.x;
|
||||
middleBone.y = kneePos.y;
|
||||
middleBone.children[0].y = (22 + Math.max(0, amount - dist * 0.3)) * dir;
|
||||
}
|
||||
|
||||
function rotate (handBone, elbowBone) {
|
||||
// can do all this in world space cause handBone is essentially in world space
|
||||
var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.webgl.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize();
|
||||
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180;
|
||||
if (v.y < 0) angle = 360 - angle;
|
||||
handBone.rotation = angle;
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
center(skeleton.findBone("back leg middle"), skeleton.findBone("back leg 1"), skeleton.findBone("back leg controller"), 65, 1);
|
||||
center(skeleton.findBone("front leg middle"), skeleton.findBone("front leg 1"), skeleton.findBone("front leg controller"), 65, 1);
|
||||
center(skeleton.findBone("front arm middle"), skeleton.findBone("front arm 1"), skeleton.findBone("front arm controller"), 90, -1);
|
||||
center(skeleton.findBone("back arm middle"), skeleton.findBone("back arm 1"), skeleton.findBone("back arm controller"), 90, -1);
|
||||
rotate(skeleton.findBone("front arm controller"), skeleton.findBone("front arm elbow"));
|
||||
rotate(skeleton.findBone("back arm controller"), skeleton.findBone("back arm elbow"));
|
||||
var headControl = skeleton.findBone("head controller"), hipControl = skeleton.findBone("hip controller")
|
||||
var head = skeleton.findBone("head");
|
||||
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();
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.2;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.5;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
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, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
|
||||
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
|
||||
}
|
||||
renderer.end();
|
||||
gl.lineWidth(1);
|
||||
}
|
||||
|
||||
stretchymanDemo.loadingComplete = loadingComplete;
|
||||
stretchymanDemo.render = render;
|
||||
stretchymanDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tank - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="tank.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="tank-timeline" class="slider"></div>
|
||||
<input id="tank-playbutton" type="button" value="Pause"></input><br>
|
||||
<input id="tank-drawbones" type="checkbox"></input> Display bones
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(tankDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,121 +0,0 @@
|
||||
var tankDemo = function(canvas, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, offset, bounds;
|
||||
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 () {
|
||||
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, "atlas2.png");
|
||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "drive", true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
offset.x = -1204.22;
|
||||
bounds.x = 1914.52;
|
||||
bounds.y = 965.78;
|
||||
// skeleton.getBounds(offset, bounds);
|
||||
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#tank-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#tank-timeline").data("slider");
|
||||
timeLine.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percent;
|
||||
state.update(time - playTime);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
$("#tank-drawbones").change(function() {
|
||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration)
|
||||
playTime -= animationDuration;
|
||||
timeLine.set(playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
offset.x = skeleton.findBone("tankRoot").worldX;
|
||||
offset.y = skeleton.findBone("tankRoot").worldY;
|
||||
|
||||
renderer.camera.position.x = offset.x - 300;
|
||||
renderer.camera.position.y = bounds.y - 505;
|
||||
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);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, true);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
tankDemo.loadingComplete = loadingComplete;
|
||||
tankDemo.render = render;
|
||||
tankDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,25 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Transform Constraints - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="transforms.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
Rotation offset
|
||||
<div id="transforms-rotationoffset" class="slider filled"></div><br>
|
||||
Translation mix
|
||||
<div id="transforms-translationmix" class="slider filled"></div>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(transformsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,177 +0,0 @@
|
||||
var transformsDemo = function(canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
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;
|
||||
var rotateHandle;
|
||||
var target = null;
|
||||
var hoverTargets = [null, null, null];
|
||||
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;
|
||||
|
||||
var DEMO_NAME = "TransformsDemo";
|
||||
|
||||
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, "atlas2.png");
|
||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform();
|
||||
rotateHandle = skeleton.findBone("rotate-handle");
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
var rotationOffset = $("#transforms-rotationoffset").data("slider");
|
||||
rotationOffset.changed = function (percent) {
|
||||
var val = percent * 360 - 180;
|
||||
var delta = val - lastOffset;
|
||||
lastOffset = val;
|
||||
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
|
||||
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
|
||||
$("#transforms-rotationoffset-label").text(Math.round(val) + "°");
|
||||
};
|
||||
$("#transforms-rotationoffset-label").text("0°");
|
||||
|
||||
var translationMix = $("#transforms-translationmix").data("slider");
|
||||
translationMix.set(0.5);
|
||||
translationMix.changed = function (percent) {
|
||||
var val = percent;
|
||||
var delta = val - lastMix;
|
||||
lastMix = val;
|
||||
skeleton.findTransformConstraint("wheel1").translateMix += delta;
|
||||
$("#transforms-translationmix-label").text(Math.round(val * 100) + "%");
|
||||
};
|
||||
$("#transforms-translationmix-label").text("50%");
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
var getRotation = function(x, y) {
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
|
||||
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;
|
||||
return angle;
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.6;
|
||||
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);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
|
||||
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, 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();
|
||||
}
|
||||
|
||||
transformsDemo.loadingComplete = loadingComplete;
|
||||
transformsDemo.render = render;
|
||||
transformsDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Transitions - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="transitions.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
Time multiplier
|
||||
<div id="transitions-timeslider" class="slider filled"></div><br>
|
||||
<button id="transitions-die">Die</button>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(transitionsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,141 +0,0 @@
|
||||
var transitionsDemo = function(canvas, loadingComplete, bgColor) {
|
||||
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, skeletonNoMix, state, stateNoMix, bounds;
|
||||
var timeSlider, timeSliderLabel;
|
||||
var timeKeeper;
|
||||
|
||||
var DEMO_NAME = "TransitionsDemo";
|
||||
|
||||
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.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");
|
||||
|
||||
input = new spine.webgl.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete () {
|
||||
skeleton = loadSkeleton("spineboy");
|
||||
skeletonNoMix = new spine.Skeleton(skeleton.data);
|
||||
state = createState(0.25);
|
||||
state.multipleMixing = true;
|
||||
setAnimations(state, 0, 0);
|
||||
stateNoMix = createState(0);
|
||||
setAnimations(stateNoMix, -0.25, 0);
|
||||
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
|
||||
skeleton.getBounds(bounds.offset, bounds.size, []);
|
||||
setupInput();
|
||||
$("#transitions-overlay").removeClass("overlay-hide");
|
||||
$("#transitions-overlay").addClass("overlay");
|
||||
}
|
||||
|
||||
function setupInput() {
|
||||
$("#transitions-die").click(function () {
|
||||
var entry = state.setAnimation(0, "death", false);
|
||||
setAnimations(state, 0, true, 0);
|
||||
entry.next.mixDuration = 0.1;
|
||||
|
||||
var entry = stateNoMix.setAnimation(0, "death", false);
|
||||
setAnimations(stateNoMix, -0.25, -0.25 + -0.1);
|
||||
});
|
||||
}
|
||||
|
||||
function createState (mix) {
|
||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||
stateData.defaultMix = mix;
|
||||
var state = new spine.AnimationState(stateData);
|
||||
return state;
|
||||
}
|
||||
|
||||
function setAnimations (state, delay, first) {
|
||||
state.addAnimation(0, "idle", true, first);
|
||||
state.addAnimation(0, "walk", true, 0.6);
|
||||
state.addAnimation(0, "jump", false, 1);
|
||||
state.addAnimation(0, "run", true, delay);
|
||||
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, delay);
|
||||
state.addAnimation(0, "jump", true, 0.5);
|
||||
state.addAnimation(0, "walk", true, delay).listener = {
|
||||
start: function (trackIndex) {
|
||||
setAnimations(state, delay, 0.6);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
|
||||
var skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName("default");
|
||||
return skeleton;
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta * timeSlider.get();
|
||||
if (timeSliderLabel) {
|
||||
var oldValue = timeSliderLabel.textContent;
|
||||
var newValue = Math.round(timeSlider.get() * 100) + "%";
|
||||
if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
|
||||
}
|
||||
|
||||
var offset = bounds.offset;
|
||||
var size = bounds.size;
|
||||
|
||||
renderer.camera.position.x = offset.x + size.x - 50;
|
||||
renderer.camera.position.y = offset.y + size.y / 2 - 40;
|
||||
renderer.camera.viewportWidth = size.x * 2;
|
||||
renderer.camera.viewportHeight = size.y * 2;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
skeleton.x = -200;
|
||||
skeleton.y = -100;
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
|
||||
stateNoMix.update(delta);
|
||||
stateNoMix.apply(skeletonNoMix);
|
||||
skeletonNoMix.updateWorldTransform();
|
||||
skeletonNoMix.x = size.x + 45;
|
||||
skeletonNoMix.y = -100;
|
||||
renderer.drawSkeleton(skeletonNoMix, true);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
transitionsDemo.loadingComplete = loadingComplete;
|
||||
transitionsDemo.render = render;
|
||||
transitionsDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,177 +0,0 @@
|
||||
var spineDemos = {
|
||||
HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.25),
|
||||
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: []
|
||||
};
|
||||
|
||||
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(' - ');
|
||||
|
||||
alert(message);
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
(function () {
|
||||
var timeKeeper = new spine.TimeKeeper();
|
||||
function loop () {
|
||||
timeKeeper.update();
|
||||
if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
|
||||
requestAnimationFrame(loop);
|
||||
var demos = spineDemos.demos;
|
||||
for (var i = 0; i < demos.length; i++) {
|
||||
var demo = demos[i];
|
||||
|
||||
checkElementVisible(demo);
|
||||
renderDemo(demo);
|
||||
}
|
||||
}
|
||||
|
||||
function renderDemo(demo) {
|
||||
var canvas = demo.canvas;
|
||||
if (!spineDemos.assetManager.isLoadingComplete(demo.DEMO_NAME)) {
|
||||
if (demo.visible) {
|
||||
if (canvas.parentElement != demo.placeholder) {
|
||||
$(canvas).detach();
|
||||
demo.placeholder.appendChild(canvas);
|
||||
}
|
||||
demo.loadingScreen.draw();
|
||||
}
|
||||
} else {
|
||||
if (!demo.loaded) {
|
||||
demo.loadingComplete();
|
||||
demo.loaded = true;
|
||||
}
|
||||
|
||||
if (demo.visible) {
|
||||
if (canvas.parentElement != demo.placeholder) {
|
||||
$(canvas).detach();
|
||||
demo.placeholder.appendChild(canvas);
|
||||
}
|
||||
if (spineDemos.log) console.log("Rendering " + canvas.id);
|
||||
demo.render();
|
||||
demo.loadingScreen.draw(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function checkElementVisible(demo) {
|
||||
const rect = demo.placeholder.getBoundingClientRect();
|
||||
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
|
||||
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
|
||||
const vertInView = (rect.top <= windowHeight * 1.1) && ((rect.top + rect.height) >= windowHeight * -0.1);
|
||||
const horInView = (rect.left <= windowWidth * 1.1) && ((rect.left + rect.width) >= windowWidth * -0.1);
|
||||
|
||||
demo.visible = (vertInView && horInView);
|
||||
}
|
||||
|
||||
function createCanvases (numCanvases) {
|
||||
for (var i = 0; i < numCanvases; i++) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 1; canvas.height = 1;
|
||||
canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
|
||||
canvas.id = "canvas-" + i;
|
||||
spineDemos.canvases.push(canvas);
|
||||
}
|
||||
}
|
||||
|
||||
spineDemos.init = function () {
|
||||
var numCanvases = 5;
|
||||
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
||||
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1;
|
||||
if (isFirefox && isAndroid) numCanvases = 2;
|
||||
createCanvases(numCanvases);
|
||||
loadSliders();
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
spineDemos.addDemo = function (demo, placeholder) {
|
||||
var canvas = spineDemos.canvases[spineDemos.demos.length % spineDemos.canvases.length];
|
||||
demo(canvas);
|
||||
demo.placeholder = placeholder;
|
||||
demo.canvas = canvas;
|
||||
demo.visible = false;
|
||||
var renderer = new spine.webgl.SceneRenderer(canvas, canvas.ctx.gl);
|
||||
demo.loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
$(window).on('DOMContentLoaded load resize scroll', function() {
|
||||
checkElementVisible(demo);
|
||||
renderDemo(demo);
|
||||
});
|
||||
checkElementVisible(demo);
|
||||
spineDemos.demos.push(demo);
|
||||
}
|
||||
|
||||
loadSliders = function () {
|
||||
$(window).resize(function() {
|
||||
$(".slider").each(function () {
|
||||
$(this).data("slider").resized();
|
||||
});
|
||||
});
|
||||
$(".slider").each(function () {
|
||||
var div = $(this), handle = $("<div/>").appendTo(div);
|
||||
var bg1, bg2;
|
||||
if (div.hasClass("filled")) {
|
||||
bg1 = $("<span/>").appendTo(div)[0].style;
|
||||
bg2 = $("<span/>").appendTo(div)[0].style;
|
||||
}
|
||||
var hw = handle.width(), value = 0, object, lastX;
|
||||
handle = handle[0].style;
|
||||
positionHandle(0);
|
||||
function positionHandle (percent) {
|
||||
var w = div.width();
|
||||
var x = Math.round((w - hw - 3) * percent + 1);
|
||||
if (x != lastX) {
|
||||
lastX = x;
|
||||
handle.transform = "translateX(" + x + "px)";
|
||||
if (bg1) {
|
||||
var w1 = x + hw / 2;
|
||||
bg1.width = w1 + "px";
|
||||
bg2.width = (w - w1) + "px";
|
||||
bg2.left = w1 + "px";
|
||||
}
|
||||
}
|
||||
value = percent;
|
||||
}
|
||||
function mouseEvent (e) {
|
||||
var x = e.pageX;
|
||||
if (!x && e.originalEvent.touches) x = e.originalEvent.touches[0].pageX;
|
||||
var percent = Math.max(0, Math.min(1, (x - div.offset().left - hw / 2) / (div.width() - hw - 2)));
|
||||
positionHandle(percent);
|
||||
if (object.changed) object.changed(percent);
|
||||
}
|
||||
function clearEvents () {
|
||||
$(document).off("mouseup.slider mousemove.slider touchmove.slider touchend.slider");
|
||||
}
|
||||
div.on("mousedown touchstart", function (e) {
|
||||
mouseEvent(e);
|
||||
e.preventDefault(); // Disable text selection.
|
||||
$(document).on("mousemove.slider touchmove.slider", mouseEvent).on("mouseup.slider touchend.slider", clearEvents);
|
||||
});
|
||||
div.data("slider", object = {
|
||||
set: positionHandle,
|
||||
get: function () { return value; },
|
||||
resized: function () {
|
||||
lastX = null;
|
||||
positionHandle(value);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
@@ -1,24 +0,0 @@
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Path Constraints - Spine Demo</title>
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<script src="vine.js"></script>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect standalone"></div>
|
||||
<div id="vine-timeline" class="slider"></div>
|
||||
<input id="vine-playbutton" type="button" value="Pause"></input><br>
|
||||
<input id="vine-drawbones" type="checkbox"></input> Display bones & path
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(vineDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,181 +0,0 @@
|
||||
var vineDemo = function(canvas, bgColor) {
|
||||
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
||||
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
|
||||
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;
|
||||
var target = null;
|
||||
var hoverTargets = [null, null, null, null, null, null];
|
||||
var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"];
|
||||
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 () {
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.ctx.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();
|
||||
}
|
||||
|
||||
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "animation", true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#vine-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#vine-timeline").data("slider");
|
||||
timeLine.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
time = animationDuration * percent;
|
||||
state.update(time - playTime);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
var checkbox = $("#vine-drawbones");
|
||||
checkbox.change(function() {
|
||||
renderer.skeletonDebugRenderer.drawPaths = 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);
|
||||
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
|
||||
target = bone;
|
||||
}
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration) {
|
||||
playTime -= animationDuration;
|
||||
}
|
||||
timeLine.set(playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton);
|
||||
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, 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();
|
||||
}
|
||||
|
||||
vineDemo.loadingComplete = loadingComplete;
|
||||
vineDemo.render = render;
|
||||
vineDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@@ -1,55 +0,0 @@
|
||||
|
||||
coin-pma.png
|
||||
size: 1024,1024
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
coin-front-logo
|
||||
rotate: false
|
||||
xy: 2, 570
|
||||
size: 305, 302
|
||||
orig: 305, 302
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
coin-front-shine-logo
|
||||
rotate: false
|
||||
xy: 2, 286
|
||||
size: 282, 282
|
||||
orig: 282, 282
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
coin-front-shine-spineboy
|
||||
rotate: false
|
||||
xy: 305, 283
|
||||
size: 282, 282
|
||||
orig: 282, 282
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
coin-front-spineboy
|
||||
rotate: true
|
||||
xy: 309, 567
|
||||
size: 305, 302
|
||||
orig: 305, 302
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
coin-side-round
|
||||
rotate: false
|
||||
xy: 2, 2
|
||||
size: 144, 282
|
||||
orig: 144, 282
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
coin-side-straight
|
||||
rotate: false
|
||||
xy: 286, 286
|
||||
size: 17, 282
|
||||
orig: 17, 282
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
shine
|
||||
rotate: false
|
||||
xy: 148, 39
|
||||
size: 72, 245
|
||||
orig: 72, 245
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 236 KiB |
Binary file not shown.
@@ -1,293 +0,0 @@
|
||||
|
||||
goblins-pma.png
|
||||
size: 1024,128
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
dagger
|
||||
rotate: false
|
||||
xy: 2, 18
|
||||
size: 26, 108
|
||||
orig: 26, 108
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/eyes-closed
|
||||
rotate: false
|
||||
xy: 2, 4
|
||||
size: 34, 12
|
||||
orig: 34, 12
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/head
|
||||
rotate: true
|
||||
xy: 113, 23
|
||||
size: 103, 66
|
||||
orig: 103, 66
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/left-arm
|
||||
rotate: true
|
||||
xy: 937, 89
|
||||
size: 37, 35
|
||||
orig: 37, 35
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/left-foot
|
||||
rotate: true
|
||||
xy: 609, 61
|
||||
size: 65, 31
|
||||
orig: 65, 31
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/left-hand
|
||||
rotate: false
|
||||
xy: 840, 21
|
||||
size: 36, 41
|
||||
orig: 36, 41
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/left-lower-leg
|
||||
rotate: false
|
||||
xy: 504, 56
|
||||
size: 33, 70
|
||||
orig: 33, 70
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/left-shoulder
|
||||
rotate: false
|
||||
xy: 745, 17
|
||||
size: 29, 44
|
||||
orig: 29, 44
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/left-upper-leg
|
||||
rotate: false
|
||||
xy: 397, 53
|
||||
size: 33, 73
|
||||
orig: 33, 73
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/neck
|
||||
rotate: false
|
||||
xy: 862, 85
|
||||
size: 36, 41
|
||||
orig: 36, 41
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/pelvis
|
||||
rotate: false
|
||||
xy: 776, 18
|
||||
size: 62, 43
|
||||
orig: 62, 43
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/right-arm
|
||||
rotate: true
|
||||
xy: 181, 5
|
||||
size: 23, 50
|
||||
orig: 23, 50
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/right-foot
|
||||
rotate: true
|
||||
xy: 747, 63
|
||||
size: 63, 33
|
||||
orig: 63, 33
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/right-hand
|
||||
rotate: false
|
||||
xy: 878, 3
|
||||
size: 36, 37
|
||||
orig: 36, 37
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/right-lower-leg
|
||||
rotate: false
|
||||
xy: 321, 50
|
||||
size: 36, 76
|
||||
orig: 36, 76
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/right-shoulder
|
||||
rotate: false
|
||||
xy: 663, 14
|
||||
size: 39, 45
|
||||
orig: 39, 45
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/right-upper-leg
|
||||
rotate: false
|
||||
xy: 675, 63
|
||||
size: 34, 63
|
||||
orig: 34, 63
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/torso
|
||||
rotate: false
|
||||
xy: 181, 30
|
||||
size: 68, 96
|
||||
orig: 68, 96
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/undie-straps
|
||||
rotate: false
|
||||
xy: 38, 2
|
||||
size: 55, 19
|
||||
orig: 55, 19
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblin/undies
|
||||
rotate: false
|
||||
xy: 974, 97
|
||||
size: 36, 29
|
||||
orig: 36, 29
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/eyes-closed
|
||||
rotate: false
|
||||
xy: 397, 30
|
||||
size: 37, 21
|
||||
orig: 37, 21
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/head
|
||||
rotate: true
|
||||
xy: 30, 23
|
||||
size: 103, 81
|
||||
orig: 103, 81
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/left-arm
|
||||
rotate: true
|
||||
xy: 916, 8
|
||||
size: 37, 35
|
||||
orig: 37, 35
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/left-foot
|
||||
rotate: true
|
||||
xy: 642, 61
|
||||
size: 65, 31
|
||||
orig: 65, 31
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/left-hand
|
||||
rotate: false
|
||||
xy: 900, 86
|
||||
size: 35, 40
|
||||
orig: 35, 40
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/left-lower-leg
|
||||
rotate: false
|
||||
xy: 539, 56
|
||||
size: 33, 70
|
||||
orig: 33, 70
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/left-shoulder
|
||||
rotate: false
|
||||
xy: 633, 13
|
||||
size: 28, 46
|
||||
orig: 28, 46
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/left-upper-leg
|
||||
rotate: false
|
||||
xy: 574, 56
|
||||
size: 33, 70
|
||||
orig: 33, 70
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/neck
|
||||
rotate: false
|
||||
xy: 878, 42
|
||||
size: 35, 41
|
||||
orig: 35, 41
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/pelvis
|
||||
rotate: true
|
||||
xy: 817, 64
|
||||
size: 62, 43
|
||||
orig: 62, 43
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/right-arm
|
||||
rotate: false
|
||||
xy: 603, 4
|
||||
size: 28, 50
|
||||
orig: 28, 50
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/right-foot
|
||||
rotate: true
|
||||
xy: 782, 63
|
||||
size: 63, 33
|
||||
orig: 63, 33
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/right-hand
|
||||
rotate: false
|
||||
xy: 915, 47
|
||||
size: 36, 37
|
||||
orig: 36, 37
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/right-lower-leg
|
||||
rotate: false
|
||||
xy: 359, 50
|
||||
size: 36, 76
|
||||
orig: 36, 76
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/right-shoulder
|
||||
rotate: false
|
||||
xy: 704, 16
|
||||
size: 39, 45
|
||||
orig: 39, 45
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/right-upper-leg
|
||||
rotate: false
|
||||
xy: 711, 63
|
||||
size: 34, 63
|
||||
orig: 34, 63
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/torso
|
||||
rotate: false
|
||||
xy: 251, 30
|
||||
size: 68, 96
|
||||
orig: 68, 96
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/undie-straps
|
||||
rotate: false
|
||||
xy: 95, 2
|
||||
size: 55, 19
|
||||
orig: 55, 19
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goblingirl/undies
|
||||
rotate: false
|
||||
xy: 974, 66
|
||||
size: 36, 29
|
||||
orig: 36, 29
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
shield
|
||||
rotate: false
|
||||
xy: 432, 54
|
||||
size: 70, 72
|
||||
orig: 70, 72
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
spear
|
||||
rotate: true
|
||||
xy: 233, 6
|
||||
size: 22, 368
|
||||
orig: 22, 368
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 166 KiB |
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 390 KiB |
Binary file not shown.
@@ -1,195 +0,0 @@
|
||||
|
||||
owl-pma.png
|
||||
size: 1024,512
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
L_eye-closed
|
||||
rotate: true
|
||||
xy: 512, 5
|
||||
size: 90, 86
|
||||
orig: 90, 86
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_eye-iris
|
||||
rotate: true
|
||||
xy: 600, 10
|
||||
size: 90, 86
|
||||
orig: 90, 86
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_eye-light
|
||||
rotate: true
|
||||
xy: 688, 4
|
||||
size: 21, 20
|
||||
orig: 21, 20
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_eye-pupil
|
||||
rotate: true
|
||||
xy: 856, 13
|
||||
size: 63, 60
|
||||
orig: 63, 60
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_foot
|
||||
rotate: true
|
||||
xy: 834, 78
|
||||
size: 64, 48
|
||||
orig: 64, 48
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
L_wing
|
||||
rotate: true
|
||||
xy: 349, 4
|
||||
size: 81, 110
|
||||
orig: 81, 110
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_eye-closed
|
||||
rotate: true
|
||||
xy: 637, 119
|
||||
size: 90, 86
|
||||
orig: 90, 86
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_eye-iris
|
||||
rotate: true
|
||||
xy: 688, 27
|
||||
size: 90, 86
|
||||
orig: 90, 86
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_eye-light
|
||||
rotate: true
|
||||
xy: 710, 4
|
||||
size: 21, 20
|
||||
orig: 21, 20
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_eye-pupil
|
||||
rotate: true
|
||||
xy: 884, 80
|
||||
size: 63, 60
|
||||
orig: 63, 60
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_foot
|
||||
rotate: true
|
||||
xy: 845, 145
|
||||
size: 64, 48
|
||||
orig: 64, 48
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
R_wing
|
||||
rotate: false
|
||||
xy: 421, 93
|
||||
size: 81, 110
|
||||
orig: 81, 110
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
beak
|
||||
rotate: false
|
||||
xy: 776, 2
|
||||
size: 39, 41
|
||||
orig: 39, 41
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
beak-down
|
||||
rotate: false
|
||||
xy: 817, 3
|
||||
size: 37, 40
|
||||
orig: 37, 40
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
body
|
||||
rotate: false
|
||||
xy: 2, 7
|
||||
size: 248, 196
|
||||
orig: 248, 196
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
feather-1
|
||||
rotate: false
|
||||
xy: 918, 18
|
||||
size: 59, 60
|
||||
orig: 59, 60
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
feather-2
|
||||
rotate: false
|
||||
xy: 781, 144
|
||||
size: 62, 65
|
||||
orig: 62, 65
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
feather-3
|
||||
rotate: false
|
||||
xy: 776, 45
|
||||
size: 56, 76
|
||||
orig: 56, 76
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
head-base
|
||||
rotate: true
|
||||
xy: 621, 211
|
||||
size: 299, 237
|
||||
orig: 299, 237
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
leaf-1
|
||||
rotate: false
|
||||
xy: 559, 102
|
||||
size: 76, 101
|
||||
orig: 76, 101
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
leaf-2
|
||||
rotate: true
|
||||
xy: 252, 4
|
||||
size: 65, 95
|
||||
orig: 65, 95
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
leaf-3
|
||||
rotate: true
|
||||
xy: 252, 71
|
||||
size: 132, 77
|
||||
orig: 132, 77
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
leaf-4
|
||||
rotate: true
|
||||
xy: 461, 2
|
||||
size: 89, 49
|
||||
orig: 89, 49
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
leaf-5
|
||||
rotate: false
|
||||
xy: 504, 97
|
||||
size: 53, 106
|
||||
orig: 53, 106
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
leaf-6
|
||||
rotate: false
|
||||
xy: 331, 87
|
||||
size: 88, 116
|
||||
orig: 88, 116
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
leaf-7
|
||||
rotate: false
|
||||
xy: 725, 123
|
||||
size: 54, 86
|
||||
orig: 54, 86
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
wood
|
||||
rotate: false
|
||||
xy: 2, 205
|
||||
size: 617, 305
|
||||
orig: 617, 305
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 432 KiB |
Binary file not shown.
@@ -1,272 +0,0 @@
|
||||
|
||||
raptor-pma.png
|
||||
size: 1024,512
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
back-arm
|
||||
rotate: true
|
||||
xy: 829, 88
|
||||
size: 46, 25
|
||||
orig: 46, 25
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
back-bracer
|
||||
rotate: true
|
||||
xy: 195, 238
|
||||
size: 39, 28
|
||||
orig: 39, 28
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
back-hand
|
||||
rotate: true
|
||||
xy: 724, 140
|
||||
size: 36, 34
|
||||
orig: 36, 34
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
back-knee
|
||||
rotate: true
|
||||
xy: 760, 131
|
||||
size: 49, 67
|
||||
orig: 49, 67
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
back-thigh
|
||||
rotate: true
|
||||
xy: 225, 238
|
||||
size: 39, 24
|
||||
orig: 39, 24
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
eyes-open
|
||||
rotate: false
|
||||
xy: 975, 204
|
||||
size: 47, 45
|
||||
orig: 47, 45
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-arm
|
||||
rotate: false
|
||||
xy: 969, 112
|
||||
size: 48, 26
|
||||
orig: 48, 26
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-bracer
|
||||
rotate: true
|
||||
xy: 724, 97
|
||||
size: 41, 29
|
||||
orig: 41, 29
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-hand
|
||||
rotate: false
|
||||
xy: 251, 239
|
||||
size: 41, 38
|
||||
orig: 41, 38
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-open-hand
|
||||
rotate: true
|
||||
xy: 856, 76
|
||||
size: 43, 44
|
||||
orig: 43, 44
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-thigh
|
||||
rotate: true
|
||||
xy: 729, 178
|
||||
size: 57, 29
|
||||
orig: 57, 29
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
gun
|
||||
rotate: false
|
||||
xy: 894, 251
|
||||
size: 107, 103
|
||||
orig: 107, 103
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
gun-nohand
|
||||
rotate: false
|
||||
xy: 764, 241
|
||||
size: 105, 102
|
||||
orig: 105, 102
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
head
|
||||
rotate: false
|
||||
xy: 756, 345
|
||||
size: 136, 149
|
||||
orig: 136, 149
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
lower-leg
|
||||
rotate: true
|
||||
xy: 475, 237
|
||||
size: 73, 98
|
||||
orig: 73, 98
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
mouth-grind
|
||||
rotate: false
|
||||
xy: 975, 172
|
||||
size: 47, 30
|
||||
orig: 47, 30
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
mouth-smile
|
||||
rotate: false
|
||||
xy: 975, 140
|
||||
size: 47, 30
|
||||
orig: 47, 30
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
neck
|
||||
rotate: false
|
||||
xy: 366, 282
|
||||
size: 18, 21
|
||||
orig: 18, 21
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-back-arm
|
||||
rotate: true
|
||||
xy: 636, 97
|
||||
size: 82, 86
|
||||
orig: 82, 86
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-body
|
||||
rotate: false
|
||||
xy: 2, 2
|
||||
size: 632, 233
|
||||
orig: 632, 233
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-front-arm
|
||||
rotate: true
|
||||
xy: 871, 168
|
||||
size: 81, 102
|
||||
orig: 81, 102
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-front-leg
|
||||
rotate: false
|
||||
xy: 2, 237
|
||||
size: 191, 257
|
||||
orig: 191, 257
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-hindleg-back
|
||||
rotate: false
|
||||
xy: 195, 279
|
||||
size: 169, 215
|
||||
orig: 169, 215
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-horn
|
||||
rotate: true
|
||||
xy: 431, 312
|
||||
size: 182, 80
|
||||
orig: 182, 80
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-horn-back
|
||||
rotate: true
|
||||
xy: 513, 318
|
||||
size: 176, 77
|
||||
orig: 176, 77
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-jaw
|
||||
rotate: false
|
||||
xy: 894, 356
|
||||
size: 126, 138
|
||||
orig: 126, 138
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-jaw-tooth
|
||||
rotate: true
|
||||
xy: 294, 240
|
||||
size: 37, 48
|
||||
orig: 37, 48
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-mouth-inside
|
||||
rotate: true
|
||||
xy: 344, 241
|
||||
size: 36, 41
|
||||
orig: 36, 41
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-saddle-strap-back
|
||||
rotate: false
|
||||
xy: 575, 242
|
||||
size: 54, 74
|
||||
orig: 54, 74
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-saddle-strap-front
|
||||
rotate: true
|
||||
xy: 764, 182
|
||||
size: 57, 95
|
||||
orig: 57, 95
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-saddle-w-shadow
|
||||
rotate: false
|
||||
xy: 592, 323
|
||||
size: 162, 171
|
||||
orig: 162, 171
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-tail-shadow
|
||||
rotate: true
|
||||
xy: 366, 305
|
||||
size: 189, 63
|
||||
orig: 189, 63
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
raptor-tongue
|
||||
rotate: false
|
||||
xy: 387, 239
|
||||
size: 86, 64
|
||||
orig: 86, 64
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
stirrup-back
|
||||
rotate: true
|
||||
xy: 829, 136
|
||||
size: 44, 35
|
||||
orig: 44, 35
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
stirrup-front
|
||||
rotate: true
|
||||
xy: 866, 121
|
||||
size: 45, 50
|
||||
orig: 45, 50
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
stirrup-strap
|
||||
rotate: false
|
||||
xy: 918, 120
|
||||
size: 49, 46
|
||||
orig: 49, 46
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
torso
|
||||
rotate: true
|
||||
xy: 636, 181
|
||||
size: 54, 91
|
||||
orig: 54, 91
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
visor
|
||||
rotate: false
|
||||
xy: 631, 237
|
||||
size: 131, 84
|
||||
orig: 131, 84
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 469 KiB |
Binary file not shown.
@@ -1,286 +0,0 @@
|
||||
|
||||
spineboy-pma.png
|
||||
size: 1024,256
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
crosshair
|
||||
rotate: false
|
||||
xy: 813, 160
|
||||
size: 45, 45
|
||||
orig: 45, 45
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
eye-indifferent
|
||||
rotate: false
|
||||
xy: 569, 2
|
||||
size: 47, 45
|
||||
orig: 47, 45
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
eye-surprised
|
||||
rotate: true
|
||||
xy: 643, 7
|
||||
size: 47, 45
|
||||
orig: 47, 45
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-bracer
|
||||
rotate: false
|
||||
xy: 811, 51
|
||||
size: 29, 40
|
||||
orig: 29, 40
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-fist-closed
|
||||
rotate: false
|
||||
xy: 807, 93
|
||||
size: 38, 41
|
||||
orig: 38, 41
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-fist-open
|
||||
rotate: false
|
||||
xy: 815, 210
|
||||
size: 43, 44
|
||||
orig: 43, 44
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-foot
|
||||
rotate: true
|
||||
xy: 706, 64
|
||||
size: 63, 35
|
||||
orig: 63, 35
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-shin
|
||||
rotate: false
|
||||
xy: 80, 11
|
||||
size: 41, 92
|
||||
orig: 41, 92
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-thigh
|
||||
rotate: false
|
||||
xy: 754, 12
|
||||
size: 23, 56
|
||||
orig: 23, 56
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-upper-arm
|
||||
rotate: false
|
||||
xy: 618, 5
|
||||
size: 23, 49
|
||||
orig: 23, 49
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
goggles
|
||||
rotate: false
|
||||
xy: 214, 20
|
||||
size: 131, 83
|
||||
orig: 131, 83
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
gun
|
||||
rotate: true
|
||||
xy: 347, 14
|
||||
size: 105, 102
|
||||
orig: 105, 102
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
head
|
||||
rotate: false
|
||||
xy: 80, 105
|
||||
size: 136, 149
|
||||
orig: 136, 149
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
hoverboard-board
|
||||
rotate: true
|
||||
xy: 2, 8
|
||||
size: 246, 76
|
||||
orig: 246, 76
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
hoverboard-thruster
|
||||
rotate: false
|
||||
xy: 478, 2
|
||||
size: 30, 32
|
||||
orig: 30, 32
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
hoverglow-small
|
||||
rotate: true
|
||||
xy: 218, 117
|
||||
size: 137, 38
|
||||
orig: 137, 38
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
mouth-grind
|
||||
rotate: true
|
||||
xy: 775, 80
|
||||
size: 47, 30
|
||||
orig: 47, 30
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
mouth-oooo
|
||||
rotate: true
|
||||
xy: 779, 31
|
||||
size: 47, 30
|
||||
orig: 47, 30
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
mouth-smile
|
||||
rotate: true
|
||||
xy: 783, 207
|
||||
size: 47, 30
|
||||
orig: 47, 30
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
muzzle-glow
|
||||
rotate: false
|
||||
xy: 779, 4
|
||||
size: 25, 25
|
||||
orig: 25, 25
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
muzzle-ring
|
||||
rotate: false
|
||||
xy: 451, 14
|
||||
size: 25, 105
|
||||
orig: 25, 105
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
muzzle01
|
||||
rotate: true
|
||||
xy: 664, 60
|
||||
size: 67, 40
|
||||
orig: 67, 40
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
muzzle02
|
||||
rotate: true
|
||||
xy: 580, 56
|
||||
size: 68, 42
|
||||
orig: 68, 42
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
muzzle03
|
||||
rotate: true
|
||||
xy: 478, 36
|
||||
size: 83, 53
|
||||
orig: 83, 53
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
muzzle04
|
||||
rotate: true
|
||||
xy: 533, 49
|
||||
size: 75, 45
|
||||
orig: 75, 45
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
muzzle05
|
||||
rotate: true
|
||||
xy: 624, 56
|
||||
size: 68, 38
|
||||
orig: 68, 38
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
neck
|
||||
rotate: false
|
||||
xy: 806, 8
|
||||
size: 18, 21
|
||||
orig: 18, 21
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
portal-bg
|
||||
rotate: false
|
||||
xy: 258, 121
|
||||
size: 133, 133
|
||||
orig: 133, 133
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
portal-flare1
|
||||
rotate: true
|
||||
xy: 690, 2
|
||||
size: 56, 30
|
||||
orig: 56, 30
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
portal-flare2
|
||||
rotate: false
|
||||
xy: 510, 3
|
||||
size: 57, 31
|
||||
orig: 57, 31
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
portal-flare3
|
||||
rotate: true
|
||||
xy: 722, 4
|
||||
size: 58, 30
|
||||
orig: 58, 30
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
portal-shade
|
||||
rotate: false
|
||||
xy: 393, 121
|
||||
size: 133, 133
|
||||
orig: 133, 133
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
portal-streaks1
|
||||
rotate: false
|
||||
xy: 528, 126
|
||||
size: 126, 128
|
||||
orig: 126, 128
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
portal-streaks2
|
||||
rotate: false
|
||||
xy: 656, 129
|
||||
size: 125, 125
|
||||
orig: 125, 125
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
rear-bracer
|
||||
rotate: false
|
||||
xy: 826, 13
|
||||
size: 28, 36
|
||||
orig: 28, 36
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
rear-foot
|
||||
rotate: true
|
||||
xy: 743, 70
|
||||
size: 57, 30
|
||||
orig: 57, 30
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
rear-shin
|
||||
rotate: false
|
||||
xy: 174, 14
|
||||
size: 38, 89
|
||||
orig: 38, 89
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
rear-thigh
|
||||
rotate: false
|
||||
xy: 783, 158
|
||||
size: 28, 47
|
||||
orig: 28, 47
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
rear-upper-arm
|
||||
rotate: true
|
||||
xy: 783, 136
|
||||
size: 20, 44
|
||||
orig: 20, 44
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
torso
|
||||
rotate: false
|
||||
xy: 123, 13
|
||||
size: 49, 90
|
||||
orig: 49, 90
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 264 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 261 KiB |
@@ -1,41 +0,0 @@
|
||||
|
||||
stretchyman-pma.png
|
||||
size: 1024,256
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
back-arm
|
||||
rotate: false
|
||||
xy: 149, 45
|
||||
size: 72, 202
|
||||
orig: 72, 202
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
back-leg
|
||||
rotate: true
|
||||
xy: 312, 4
|
||||
size: 100, 318
|
||||
orig: 100, 318
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
body
|
||||
rotate: true
|
||||
xy: 223, 106
|
||||
size: 141, 452
|
||||
orig: 141, 452
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
front-arm
|
||||
rotate: false
|
||||
xy: 2, 26
|
||||
size: 145, 221
|
||||
orig: 145, 221
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
head
|
||||
rotate: false
|
||||
xy: 223, 2
|
||||
size: 87, 102
|
||||
orig: 87, 102
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
@@ -1,174 +0,0 @@
|
||||
|
||||
tank-pma.png
|
||||
size: 1024,1024
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
antenna
|
||||
rotate: true
|
||||
xy: 2, 712
|
||||
size: 11, 152
|
||||
orig: 11, 152
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
cannon
|
||||
rotate: false
|
||||
xy: 222, 694
|
||||
size: 466, 29
|
||||
orig: 466, 29
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
cannon-connector
|
||||
rotate: true
|
||||
xy: 82, 654
|
||||
size: 56, 68
|
||||
orig: 56, 68
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
ground
|
||||
rotate: false
|
||||
xy: 2, 175
|
||||
size: 512, 177
|
||||
orig: 512, 177
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
guntower
|
||||
rotate: false
|
||||
xy: 647, 347
|
||||
size: 365, 145
|
||||
orig: 365, 145
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
machinegun
|
||||
rotate: false
|
||||
xy: 690, 694
|
||||
size: 166, 29
|
||||
orig: 166, 29
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
machinegun-mount
|
||||
rotate: true
|
||||
xy: 858, 687
|
||||
size: 36, 48
|
||||
orig: 36, 48
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
rock
|
||||
rotate: false
|
||||
xy: 664, 607
|
||||
size: 290, 64
|
||||
orig: 290, 64
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
smoke-glow
|
||||
rotate: false
|
||||
xy: 946, 673
|
||||
size: 50, 50
|
||||
orig: 50, 50
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
smoke-puff01-bg
|
||||
rotate: false
|
||||
xy: 312, 630
|
||||
size: 92, 62
|
||||
orig: 92, 62
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
smoke-puff01-fg
|
||||
rotate: false
|
||||
xy: 222, 633
|
||||
size: 88, 59
|
||||
orig: 88, 59
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
smoke-puff02-fg
|
||||
rotate: false
|
||||
xy: 406, 630
|
||||
size: 92, 62
|
||||
orig: 92, 62
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
smoke-puff03-fg
|
||||
rotate: false
|
||||
xy: 500, 630
|
||||
size: 92, 62
|
||||
orig: 92, 62
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
smoke-puff04-fg
|
||||
rotate: false
|
||||
xy: 2, 662
|
||||
size: 78, 48
|
||||
orig: 78, 48
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tank-bottom
|
||||
rotate: false
|
||||
xy: 2, 354
|
||||
size: 643, 138
|
||||
orig: 643, 138
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tank-bottom-shadow
|
||||
rotate: false
|
||||
xy: 2, 2
|
||||
size: 646, 171
|
||||
orig: 646, 171
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tank-top
|
||||
rotate: false
|
||||
xy: 195, 494
|
||||
size: 704, 111
|
||||
orig: 704, 111
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tread
|
||||
rotate: false
|
||||
xy: 172, 708
|
||||
size: 48, 15
|
||||
orig: 48, 15
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
tread-inside
|
||||
rotate: true
|
||||
xy: 156, 710
|
||||
size: 13, 14
|
||||
orig: 13, 14
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
wheel-big
|
||||
rotate: false
|
||||
xy: 97, 540
|
||||
size: 96, 96
|
||||
orig: 96, 96
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
wheel-big-overlay
|
||||
rotate: false
|
||||
xy: 2, 559
|
||||
size: 93, 93
|
||||
orig: 93, 93
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
wheel-mid
|
||||
rotate: false
|
||||
xy: 152, 638
|
||||
size: 68, 68
|
||||
orig: 68, 68
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
wheel-mid-overlay
|
||||
rotate: false
|
||||
xy: 594, 624
|
||||
size: 68, 68
|
||||
orig: 68, 68
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
wheel-small
|
||||
rotate: false
|
||||
xy: 908, 687
|
||||
size: 36, 36
|
||||
orig: 36, 36
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 504 KiB |
Binary file not shown.
@@ -1,13 +0,0 @@
|
||||
|
||||
vine-pma.png
|
||||
size: 128,1024
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
vine
|
||||
rotate: false
|
||||
xy: 2, 2
|
||||
size: 68, 962
|
||||
orig: 68, 962
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
Binary file not shown.
@@ -1,157 +0,0 @@
|
||||
<html>
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
body, html { height: 100% }
|
||||
canvas { position: absolute; width: 100% ;height: 100%; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<script>
|
||||
|
||||
var canvas;
|
||||
var gl;
|
||||
var shader;
|
||||
var batcher;
|
||||
var mvp = new spine.webgl.Matrix4();
|
||||
var assetManager;
|
||||
var skeletonRenderer;
|
||||
|
||||
var lastFrameTime;
|
||||
var spineboy;
|
||||
|
||||
function init () {
|
||||
// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
|
||||
// loading textures. That is handled separately by PolygonBatcher.
|
||||
canvas = document.getElementById("canvas");
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
var config = { alpha: false };
|
||||
gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
|
||||
shader = spine.webgl.Shader.newTwoColoredTextured(gl);
|
||||
batcher = new spine.webgl.PolygonBatcher(gl);
|
||||
mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
|
||||
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
|
||||
assetManager = new spine.webgl.AssetManager(gl);
|
||||
|
||||
// Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png
|
||||
// file for the atlas. We then wait until all resources are loaded in the load() method.
|
||||
assetManager.loadBinary("assets/spineboy-pro.skel");
|
||||
assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
// Wait until the AssetManager has loaded all resources, then load the skeletons.
|
||||
if (assetManager.isLoadingComplete()) {
|
||||
spineboy = loadSpineboy("run", true);
|
||||
lastFrameTime = Date.now() / 1000;
|
||||
requestAnimationFrame(render); // Loading is done, call render every frame.
|
||||
} else {
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
}
|
||||
|
||||
function loadSpineboy (initialAnimation, premultipliedAlpha) {
|
||||
// Load the texture atlas from the AssetManager.
|
||||
var atlas = assetManager.get("assets/spineboy-pma.atlas");
|
||||
|
||||
// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
|
||||
// Create a SkeletonBinary instance for parsing the .skel file.
|
||||
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
||||
|
||||
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
|
||||
skeletonBinary.scale = 1;
|
||||
var skeletonData = skeletonBinary.readSkeletonData(assetManager.get("assets/spineboy-pro.skel"));
|
||||
var skeleton = new spine.Skeleton(skeletonData);
|
||||
var bounds = calculateSetupPoseBounds(skeleton);
|
||||
|
||||
// Create an AnimationState, and set the initial animation in looping mode.
|
||||
var animationStateData = new spine.AnimationStateData(skeleton.data);
|
||||
var animationState = new spine.AnimationState(animationStateData);
|
||||
animationState.setAnimation(0, initialAnimation, true);
|
||||
|
||||
// Pack everything up and return to caller.
|
||||
return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
|
||||
}
|
||||
|
||||
function calculateSetupPoseBounds (skeleton) {
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
var size = new spine.Vector2();
|
||||
skeleton.getBounds(offset, size, []);
|
||||
return { offset: offset, size: size };
|
||||
}
|
||||
|
||||
function render () {
|
||||
var now = Date.now() / 1000;
|
||||
var delta = now - lastFrameTime;
|
||||
lastFrameTime = now;
|
||||
|
||||
// Update the MVP matrix to adjust for canvas size changes
|
||||
resize();
|
||||
|
||||
gl.clearColor(0.3, 0.3, 0.3, 1);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
// Apply the animation state based on the delta time.
|
||||
var skeleton = spineboy.skeleton;
|
||||
var state = spineboy.state;
|
||||
var premultipliedAlpha = spineboy.premultipliedAlpha;
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
// Bind the shader and set the texture and model-view-projection matrix.
|
||||
shader.bind();
|
||||
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
|
||||
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
|
||||
|
||||
// Start the batch and tell the SkeletonRenderer to render the active skeleton.
|
||||
batcher.begin(shader);
|
||||
skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
|
||||
skeletonRenderer.draw(batcher, skeleton);
|
||||
batcher.end();
|
||||
|
||||
shader.unbind();
|
||||
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
function resize () {
|
||||
var w = canvas.clientWidth;
|
||||
var h = canvas.clientHeight;
|
||||
if (canvas.width != w || canvas.height != h) {
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
}
|
||||
|
||||
// Calculations to center the skeleton in the canvas.
|
||||
var bounds = spineboy.bounds;
|
||||
var centerX = bounds.offset.x + bounds.size.x / 2;
|
||||
var centerY = bounds.offset.y + bounds.size.y / 2;
|
||||
var scaleX = bounds.size.x / canvas.width;
|
||||
var scaleY = bounds.size.y / canvas.height;
|
||||
var scale = Math.max(scaleX, scaleY) * 1.2;
|
||||
if (scale < 1) scale = 1;
|
||||
var width = canvas.width * scale;
|
||||
var height = canvas.height * scale;
|
||||
|
||||
mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,333 +0,0 @@
|
||||
<html>
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
body, html { height: 100% }
|
||||
canvas { position: absolute; width: 100% ;height: 100%; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<center>
|
||||
<div style="color: #fff; position: fixed; top: 0; width: 100%">
|
||||
<span>Skeleton:</span><select id="skeletonList"></select>
|
||||
<span>Animation:</span><select id="animationList"></select>
|
||||
<span>Skin:</span><select id="skinList"></select>
|
||||
<span>Vertex Effect:</span><select id="effectList"></select>
|
||||
<span>Debug:</span><input type="checkbox" id="debug">
|
||||
</div>
|
||||
</center>
|
||||
<script>
|
||||
|
||||
var canvas;
|
||||
var gl;
|
||||
var shader;
|
||||
var batcher;
|
||||
var mvp = new spine.webgl.Matrix4();
|
||||
var skeletonRenderer;
|
||||
var assetManager;
|
||||
|
||||
var debugRenderer;
|
||||
var shapes;
|
||||
|
||||
var lastFrameTime;
|
||||
var skeletons = {};
|
||||
var activeSkeleton = "spineboy";
|
||||
var swirlEffect = new spine.SwirlEffect(0);
|
||||
var jitterEffect = new spine.JitterEffect(20, 20);
|
||||
var swirlTime = 0;
|
||||
|
||||
function init () {
|
||||
// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
|
||||
// loading textures. That is handled separately by PolygonBatcher.
|
||||
canvas = document.getElementById("canvas");
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
var config = { alpha: false };
|
||||
gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
|
||||
shader = spine.webgl.Shader.newTwoColoredTextured(gl);
|
||||
batcher = new spine.webgl.PolygonBatcher(gl);
|
||||
mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
|
||||
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
|
||||
assetManager = new spine.webgl.AssetManager(gl);
|
||||
|
||||
// Create a debug renderer and the ShapeRenderer it needs to render lines.
|
||||
debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
|
||||
debugRenderer.drawRegionAttachments = true;
|
||||
debugRenderer.drawBoundingBoxes = true;
|
||||
debugRenderer.drawMeshHull = true;
|
||||
debugRenderer.drawMeshTriangles = true;
|
||||
debugRenderer.drawPaths = true;
|
||||
debugShader = spine.webgl.Shader.newColored(gl);
|
||||
shapes = new spine.webgl.ShapeRenderer(gl);
|
||||
|
||||
// Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png
|
||||
// file for the atlas. We then wait until all resources are loaded in the load() method.
|
||||
assetManager.loadBinary("assets/spineboy-pro.skel");
|
||||
assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
|
||||
assetManager.loadBinary("assets/raptor-pro.skel");
|
||||
assetManager.loadTextureAtlas("assets/raptor-pma.atlas");
|
||||
assetManager.loadBinary("assets/tank-pro.skel");
|
||||
assetManager.loadTextureAtlas("assets/tank-pma.atlas");
|
||||
assetManager.loadBinary("assets/goblins-pro.skel");
|
||||
assetManager.loadTextureAtlas("assets/goblins-pma.atlas");
|
||||
assetManager.loadBinary("assets/vine-pro.skel");
|
||||
assetManager.loadTextureAtlas("assets/vine-pma.atlas");
|
||||
assetManager.loadBinary("assets/stretchyman-pro.skel");
|
||||
assetManager.loadTextureAtlas("assets/stretchyman-pma.atlas");
|
||||
assetManager.loadBinary("assets/coin-pro.skel");
|
||||
assetManager.loadTextureAtlas("assets/coin-pma.atlas");
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
// Wait until the AssetManager has loaded all resources, then load the skeletons.
|
||||
if (assetManager.isLoadingComplete()) {
|
||||
skeletons["raptor"] = loadSkeleton("raptor-pro", "walk", true);
|
||||
skeletons["spineboy"] = loadSkeleton("spineboy-pro", "run", true);
|
||||
skeletons["tank"] = loadSkeleton("tank-pro", "drive", true);
|
||||
skeletons["goblins"] = loadSkeleton("goblins-pro", "walk", true, "goblin");
|
||||
skeletons["vine"] = loadSkeleton("vine-pro", "grow", true);
|
||||
skeletons["stretchyman"] = loadSkeleton("stretchyman-pro", "sneak", true);
|
||||
skeletons["coin"] = loadSkeleton("coin-pro", "animation", true);
|
||||
setupUI();
|
||||
lastFrameTime = Date.now() / 1000;
|
||||
requestAnimationFrame(render); // Loading is done, call render every frame.
|
||||
} else {
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
}
|
||||
|
||||
function loadSkeleton (name, initialAnimation, premultipliedAlpha, skin) {
|
||||
if (skin === undefined) skin = "default";
|
||||
|
||||
// Load the texture atlas using name.atlas from the AssetManager.
|
||||
var atlas = assetManager.get("assets/" + name.replace("-ess", "").replace("-pro", "") + (premultipliedAlpha ? "-pma": "") + ".atlas");
|
||||
|
||||
// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
|
||||
// Create a SkeletonBinary instance for parsing the .skel file.
|
||||
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
||||
|
||||
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
|
||||
skeletonBinary.scale = 1;
|
||||
var skeletonData = skeletonBinary.readSkeletonData(assetManager.get("assets/" + name + ".skel"));
|
||||
var skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName(skin);
|
||||
var bounds = calculateSetupPoseBounds(skeleton);
|
||||
|
||||
// Create an AnimationState, and set the initial animation in looping mode.
|
||||
var animationStateData = new spine.AnimationStateData(skeleton.data);
|
||||
var animationState = new spine.AnimationState(animationStateData);
|
||||
if (name == "spineboy") {
|
||||
animationStateData.setMix("walk", "jump", 0.4)
|
||||
animationStateData.setMix("jump", "run", 0.4);
|
||||
animationState.setAnimation(0, "walk", true);
|
||||
var jumpEntry = animationState.addAnimation(0, "jump", false, 3);
|
||||
animationState.addAnimation(0, "run", true, 0);
|
||||
} else {
|
||||
animationState.setAnimation(0, initialAnimation, true);
|
||||
}
|
||||
animationState.addListener({
|
||||
start: function(track) {
|
||||
console.log("Animation on track " + track.trackIndex + " started");
|
||||
},
|
||||
interrupt: function(track) {
|
||||
console.log("Animation on track " + track.trackIndex + " interrupted");
|
||||
},
|
||||
end: function(track) {
|
||||
console.log("Animation on track " + track.trackIndex + " ended");
|
||||
},
|
||||
disposed: function(track) {
|
||||
console.log("Animation on track " + track.trackIndex + " disposed");
|
||||
},
|
||||
complete: function(track) {
|
||||
console.log("Animation on track " + track.trackIndex + " completed");
|
||||
},
|
||||
event: function(track, event) {
|
||||
console.log("Event on track " + track.trackIndex + ": " + JSON.stringify(event));
|
||||
}
|
||||
})
|
||||
|
||||
// Pack everything up and return to caller.
|
||||
return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
|
||||
}
|
||||
|
||||
function calculateSetupPoseBounds(skeleton) {
|
||||
skeleton.setToSetupPose();
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
var size = new spine.Vector2();
|
||||
skeleton.getBounds(offset, size, []);
|
||||
return { offset: offset, size: size };
|
||||
}
|
||||
|
||||
function setupUI () {
|
||||
var skeletonList = $("#skeletonList");
|
||||
for (var skeletonName in skeletons) {
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", skeletonName).text(skeletonName);
|
||||
if (skeletonName === activeSkeleton) option.attr("selected", "selected");
|
||||
skeletonList.append(option);
|
||||
}
|
||||
var effectList = $("#effectList");
|
||||
var effects = ["None", "Swirl", "Jitter"];
|
||||
for (var effect in effects) {
|
||||
var effectName = effects[effect];
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", effectName).text(effectName);
|
||||
effectList.append(option);
|
||||
}
|
||||
var setupAnimationUI = function() {
|
||||
var animationList = $("#animationList");
|
||||
animationList.empty();
|
||||
var skeleton = skeletons[activeSkeleton].skeleton;
|
||||
var state = skeletons[activeSkeleton].state;
|
||||
var activeAnimation = state.tracks[0].animation.name;
|
||||
for (var i = 0; i < skeleton.data.animations.length; i++) {
|
||||
var name = skeleton.data.animations[i].name;
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", name).text(name);
|
||||
if (name === activeAnimation) option.attr("selected", "selected");
|
||||
animationList.append(option);
|
||||
}
|
||||
|
||||
animationList.change(function() {
|
||||
var state = skeletons[activeSkeleton].state;
|
||||
var skeleton = skeletons[activeSkeleton].skeleton;
|
||||
var animationName = $("#animationList option:selected").text();
|
||||
skeleton.setToSetupPose();
|
||||
state.setAnimation(0, animationName, true);
|
||||
})
|
||||
}
|
||||
|
||||
var setupSkinUI = function() {
|
||||
var skinList = $("#skinList");
|
||||
skinList.empty();
|
||||
var skeleton = skeletons[activeSkeleton].skeleton;
|
||||
var activeSkin = skeleton.skin == null ? "default" : skeleton.skin.name;
|
||||
for (var i = 0; i < skeleton.data.skins.length; i++) {
|
||||
var name = skeleton.data.skins[i].name;
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", name).text(name);
|
||||
if (name === activeSkin) option.attr("selected", "selected");
|
||||
skinList.append(option);
|
||||
}
|
||||
|
||||
skinList.change(function() {
|
||||
var skeleton = skeletons[activeSkeleton].skeleton;
|
||||
var skinName = $("#skinList option:selected").text();
|
||||
skeleton.setSkinByName(skinName);
|
||||
skeleton.setSlotsToSetupPose();
|
||||
})
|
||||
}
|
||||
|
||||
skeletonList.change(function() {
|
||||
activeSkeleton = $("#skeletonList option:selected").text();
|
||||
setupAnimationUI();
|
||||
setupSkinUI();
|
||||
})
|
||||
setupAnimationUI();
|
||||
setupSkinUI();
|
||||
}
|
||||
|
||||
function render () {
|
||||
var now = Date.now() / 1000;
|
||||
var delta = now - lastFrameTime;
|
||||
lastFrameTime = now;
|
||||
|
||||
// Update the MVP matrix to adjust for canvas size changes
|
||||
resize();
|
||||
|
||||
gl.clearColor(0.3, 0.3, 0.3, 1);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
// Apply the animation state based on the delta time.
|
||||
var skeleton = skeletons[activeSkeleton].skeleton;
|
||||
var state = skeletons[activeSkeleton].state;
|
||||
var bounds = skeletons[activeSkeleton].bounds;
|
||||
var premultipliedAlpha = skeletons[activeSkeleton].premultipliedAlpha;
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
// Bind the shader and set the texture and model-view-projection matrix.
|
||||
shader.bind();
|
||||
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
|
||||
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
|
||||
|
||||
// Start the batch and tell the SkeletonRenderer to render the active skeleton.
|
||||
batcher.begin(shader);
|
||||
|
||||
var effect = $("#effectList option:selected").text();
|
||||
if (effect == "None") {
|
||||
skeletonRenderer.vertexEffect = null;
|
||||
} else if (effect == "Swirl") {
|
||||
swirlTime += delta;
|
||||
var percent = swirlTime % 2;
|
||||
if (percent > 1) percent = 1 - (percent -1 );
|
||||
swirlEffect.angle = 120 * percent - 60;
|
||||
swirlEffect.centerX = bounds.offset.x + bounds.size.x / 2;
|
||||
swirlEffect.centerY = bounds.offset.y + bounds.size.y / 2;
|
||||
swirlEffect.radius = Math.sqrt(bounds.size.x * bounds.size.x + bounds.size.y * bounds.size.y);
|
||||
skeletonRenderer.vertexEffect = swirlEffect;
|
||||
} else if (effect == "Jitter") {
|
||||
skeletonRenderer.vertexEffect = jitterEffect;
|
||||
}
|
||||
|
||||
skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
|
||||
skeletonRenderer.draw(batcher, skeleton);
|
||||
batcher.end();
|
||||
|
||||
shader.unbind();
|
||||
|
||||
// Draw debug information.
|
||||
var debug = $('#debug').is(':checked');
|
||||
if (debug) {
|
||||
debugShader.bind();
|
||||
debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
|
||||
debugRenderer.premultipliedAlpha = premultipliedAlpha;
|
||||
shapes.begin(debugShader);
|
||||
debugRenderer.draw(shapes, skeleton);
|
||||
shapes.end();
|
||||
debugShader.unbind();
|
||||
}
|
||||
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
function resize () {
|
||||
var w = canvas.clientWidth;
|
||||
var h = canvas.clientHeight;
|
||||
if (canvas.width != w || canvas.height != h) {
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
}
|
||||
|
||||
// Calculations to center the skeleton in the canvas.
|
||||
var bounds = skeletons[activeSkeleton].bounds;
|
||||
var centerX = bounds.offset.x + bounds.size.x / 2;
|
||||
var centerY = bounds.offset.y + bounds.size.y / 2;
|
||||
var scaleX = bounds.size.x / canvas.width;
|
||||
var scaleY = bounds.size.y / canvas.height;
|
||||
var scale = Math.max(scaleX, scaleY) * 1.2;
|
||||
if (scale < 1) scale = 1;
|
||||
var width = canvas.width * scale;
|
||||
var height = canvas.height * scale;
|
||||
|
||||
mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,232 +0,0 @@
|
||||
/******************************************************************************
|
||||
* Spine Runtimes License Agreement
|
||||
* Last updated January 1, 2020. Replaces all prior versions.
|
||||
*
|
||||
* Copyright (c) 2013-2020, Esoteric Software LLC
|
||||
*
|
||||
* Integration of the Spine Runtimes into software or otherwise creating
|
||||
* derivative works of the Spine Runtimes is permitted under the terms and
|
||||
* conditions of Section 2 of the Spine Editor License Agreement:
|
||||
* http://esotericsoftware.com/spine-editor-license
|
||||
*
|
||||
* Otherwise, it is permitted to integrate the Spine Runtimes into software
|
||||
* or otherwise create derivative works of the Spine Runtimes (collectively,
|
||||
* "Products"), provided that each user of the Products must obtain their own
|
||||
* Spine Editor license and redistribution of the Products in any form must
|
||||
* include this license and copyright notice.
|
||||
*
|
||||
* THE SPINE RUNTIMES ARE PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
* DISCLAIMED. IN NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY
|
||||
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES,
|
||||
* BUSINESS INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND
|
||||
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
|
||||
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*****************************************************************************/
|
||||
|
||||
module spine.webgl {
|
||||
export class Input {
|
||||
element: HTMLElement;
|
||||
lastX = 0;
|
||||
lastY = 0;
|
||||
buttonDown = false;
|
||||
currTouch: Touch = null;
|
||||
touchesPool = new Pool<spine.webgl.Touch>(() => {
|
||||
return new spine.webgl.Touch(0, 0, 0);
|
||||
});
|
||||
|
||||
private listeners = new Array<InputListener>();
|
||||
constructor (element: HTMLElement) {
|
||||
this.element = element;
|
||||
this.setupCallbacks(element);
|
||||
}
|
||||
|
||||
private setupCallbacks(element: HTMLElement) {
|
||||
let mouseDown = (ev: UIEvent) => {
|
||||
if (ev instanceof MouseEvent) {
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = ev.clientX - rect.left;
|
||||
let y = ev.clientY - rect.top;
|
||||
|
||||
let listeners = this.listeners;
|
||||
for (let i = 0; i < listeners.length; i++) {
|
||||
if (listeners[i].down) listeners[i].down(x, y);
|
||||
}
|
||||
|
||||
this.lastX = x;
|
||||
this.lastY = y;
|
||||
this.buttonDown = true;
|
||||
|
||||
document.addEventListener("mousemove", mouseMove);
|
||||
document.addEventListener("mouseup", mouseUp);
|
||||
}
|
||||
}
|
||||
|
||||
let mouseMove = (ev: UIEvent) => {
|
||||
if (ev instanceof MouseEvent) {
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = ev.clientX - rect.left;
|
||||
let y = ev.clientY - rect.top;
|
||||
|
||||
let listeners = this.listeners;
|
||||
for (let i = 0; i < listeners.length; i++) {
|
||||
if (this.buttonDown) {
|
||||
if (listeners[i].dragged) listeners[i].dragged(x, y);
|
||||
} else {
|
||||
if (listeners[i].moved) listeners[i].moved(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
this.lastX = x;
|
||||
this.lastY = y;
|
||||
}
|
||||
};
|
||||
|
||||
let mouseUp = (ev: UIEvent) => {
|
||||
if (ev instanceof MouseEvent) {
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = ev.clientX - rect.left;
|
||||
let y = ev.clientY - rect.top;
|
||||
|
||||
let listeners = this.listeners;
|
||||
for (let i = 0; i < listeners.length; i++) {
|
||||
if (listeners[i].up) listeners[i].up(x, y);
|
||||
}
|
||||
|
||||
this.lastX = x;
|
||||
this.lastY = y;
|
||||
this.buttonDown = false;
|
||||
document.removeEventListener("mousemove", mouseMove);
|
||||
document.removeEventListener("mouseup", mouseUp);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
element.addEventListener("mousedown", mouseDown, true);
|
||||
element.addEventListener("mousemove", mouseMove, true);
|
||||
element.addEventListener("mouseup", mouseUp, true);
|
||||
element.addEventListener("touchstart", (ev: TouchEvent) => {
|
||||
if (this.currTouch != null) return;
|
||||
|
||||
var touches = ev.changedTouches;
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
var touch = touches[i];
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = touch.clientX - rect.left;
|
||||
let y = touch.clientY - rect.top;
|
||||
this.currTouch = this.touchesPool.obtain();
|
||||
this.currTouch.identifier = touch.identifier;
|
||||
this.currTouch.x = x;
|
||||
this.currTouch.y = y;
|
||||
break;
|
||||
}
|
||||
|
||||
let listeners = this.listeners;
|
||||
for (let i = 0; i < listeners.length; i++) {
|
||||
if (listeners[i].down) listeners[i].down(this.currTouch.x, this.currTouch.y);
|
||||
}
|
||||
|
||||
this.lastX = this.currTouch.x;
|
||||
this.lastY = this.currTouch.y;
|
||||
this.buttonDown = true;
|
||||
ev.preventDefault();
|
||||
}, false);
|
||||
element.addEventListener("touchend", (ev: TouchEvent) => {
|
||||
var touches = ev.changedTouches;
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
var touch = touches[i];
|
||||
if (this.currTouch.identifier === touch.identifier) {
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = this.currTouch.x = touch.clientX - rect.left;
|
||||
let y = this.currTouch.y = touch.clientY - rect.top;
|
||||
this.touchesPool.free(this.currTouch);
|
||||
let listeners = this.listeners;
|
||||
for (let i = 0; i < listeners.length; i++) {
|
||||
if (listeners[i].up) listeners[i].up(x, y);
|
||||
}
|
||||
|
||||
this.lastX = x;
|
||||
this.lastY = y;
|
||||
this.buttonDown = false;
|
||||
this.currTouch = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
ev.preventDefault();
|
||||
}, false);
|
||||
element.addEventListener("touchcancel", (ev: TouchEvent) => {
|
||||
var touches = ev.changedTouches;
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
var touch = touches[i];
|
||||
if (this.currTouch.identifier === touch.identifier) {
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = this.currTouch.x = touch.clientX - rect.left;
|
||||
let y = this.currTouch.y = touch.clientY - rect.top;
|
||||
this.touchesPool.free(this.currTouch);
|
||||
let listeners = this.listeners;
|
||||
for (let i = 0; i < listeners.length; i++) {
|
||||
if (listeners[i].up) listeners[i].up(x, y);
|
||||
}
|
||||
|
||||
this.lastX = x;
|
||||
this.lastY = y;
|
||||
this.buttonDown = false;
|
||||
this.currTouch = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
ev.preventDefault();
|
||||
}, false);
|
||||
element.addEventListener("touchmove", (ev: TouchEvent) => {
|
||||
if (this.currTouch == null) return;
|
||||
|
||||
var touches = ev.changedTouches;
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
var touch = touches[i];
|
||||
if (this.currTouch.identifier === touch.identifier) {
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = touch.clientX - rect.left;
|
||||
let y = touch.clientY - rect.top;
|
||||
|
||||
let listeners = this.listeners;
|
||||
for (let i = 0; i < listeners.length; i++) {
|
||||
if (listeners[i].dragged) listeners[i].dragged(x, y);
|
||||
}
|
||||
|
||||
this.lastX = this.currTouch.x = x;
|
||||
this.lastY = this.currTouch.y = y;
|
||||
break;
|
||||
}
|
||||
}
|
||||
ev.preventDefault();
|
||||
}, false);
|
||||
}
|
||||
|
||||
addListener(listener: InputListener) {
|
||||
this.listeners.push(listener);
|
||||
}
|
||||
|
||||
removeListener(listener: InputListener) {
|
||||
let idx = this.listeners.indexOf(listener);
|
||||
if (idx > -1) {
|
||||
this.listeners.splice(idx, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class Touch {
|
||||
constructor(public identifier: number, public x: number, public y: number) {
|
||||
}
|
||||
}
|
||||
|
||||
export interface InputListener {
|
||||
down(x: number, y: number): void;
|
||||
up(x: number, y: number): void;
|
||||
moved(x: number, y: number): void;
|
||||
dragged(x: number, y: number): void;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user