feat: use custom player module
This commit is contained in:
Haoyu Xu
19
apps/module/spine-ts/webgl/demos/additiveblending.html
Executable file
19
apps/module/spine-ts/webgl/demos/additiveblending.html
Executable file
@@ -0,0 +1,19 @@
|
||||
<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>
|
||||
160
apps/module/spine-ts/webgl/demos/additiveblending.js
Executable file
160
apps/module/spine-ts/webgl/demos/additiveblending.js
Executable file
@@ -0,0 +1,160 @@
|
||||
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();
|
||||
};
|
||||
1048
apps/module/spine-ts/webgl/demos/assets/atlas1.atlas
Executable file
1048
apps/module/spine-ts/webgl/demos/assets/atlas1.atlas
Executable file
File diff suppressed because it is too large
Load Diff
BIN
apps/module/spine-ts/webgl/demos/assets/atlas1.png
Executable file
BIN
apps/module/spine-ts/webgl/demos/assets/atlas1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
apps/module/spine-ts/webgl/demos/assets/atlas12.png
Executable file
BIN
apps/module/spine-ts/webgl/demos/assets/atlas12.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
1252
apps/module/spine-ts/webgl/demos/assets/atlas2.atlas
Executable file
1252
apps/module/spine-ts/webgl/demos/assets/atlas2.atlas
Executable file
File diff suppressed because it is too large
Load Diff
BIN
apps/module/spine-ts/webgl/demos/assets/atlas2.png
Executable file
BIN
apps/module/spine-ts/webgl/demos/assets/atlas2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
1
apps/module/spine-ts/webgl/demos/assets/demos.json
Executable file
1
apps/module/spine-ts/webgl/demos/assets/demos.json
Executable file
File diff suppressed because one or more lines are too long
2917
apps/module/spine-ts/webgl/demos/assets/heroes.atlas
Executable file
2917
apps/module/spine-ts/webgl/demos/assets/heroes.atlas
Executable file
File diff suppressed because it is too large
Load Diff
BIN
apps/module/spine-ts/webgl/demos/assets/heroes.png
Executable file
BIN
apps/module/spine-ts/webgl/demos/assets/heroes.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 804 KiB |
BIN
apps/module/spine-ts/webgl/demos/assets/heroes2.png
Executable file
BIN
apps/module/spine-ts/webgl/demos/assets/heroes2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
24
apps/module/spine-ts/webgl/demos/clipping.html
Executable file
24
apps/module/spine-ts/webgl/demos/clipping.html
Executable file
@@ -0,0 +1,24 @@
|
||||
<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>
|
||||
120
apps/module/spine-ts/webgl/demos/clipping.js
Executable file
120
apps/module/spine-ts/webgl/demos/clipping.js
Executable file
@@ -0,0 +1,120 @@
|
||||
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();
|
||||
};
|
||||
127
apps/module/spine-ts/webgl/demos/demos.css
Executable file
127
apps/module/spine-ts/webgl/demos/demos.css
Executable file
@@ -0,0 +1,127 @@
|
||||
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;
|
||||
}
|
||||
353
apps/module/spine-ts/webgl/demos/demos.html
Executable file
353
apps/module/spine-ts/webgl/demos/demos.html
Executable file
@@ -0,0 +1,353 @@
|
||||
<!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>
|
||||
85
apps/module/spine-ts/webgl/demos/demos.js
Executable file
85
apps/module/spine-ts/webgl/demos/demos.js
Executable file
@@ -0,0 +1,85 @@
|
||||
|
||||
$(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");
|
||||
});
|
||||
});
|
||||
25
apps/module/spine-ts/webgl/demos/hoverboard.html
Executable file
25
apps/module/spine-ts/webgl/demos/hoverboard.html
Executable file
@@ -0,0 +1,25 @@
|
||||
<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>
|
||||
181
apps/module/spine-ts/webgl/demos/hoverboard.js
Executable file
181
apps/module/spine-ts/webgl/demos/hoverboard.js
Executable file
@@ -0,0 +1,181 @@
|
||||
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();
|
||||
};
|
||||
24
apps/module/spine-ts/webgl/demos/imagechanges.html
Executable file
24
apps/module/spine-ts/webgl/demos/imagechanges.html
Executable file
@@ -0,0 +1,24 @@
|
||||
<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>
|
||||
198
apps/module/spine-ts/webgl/demos/imagechanges.js
Executable file
198
apps/module/spine-ts/webgl/demos/imagechanges.js
Executable file
@@ -0,0 +1,198 @@
|
||||
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();
|
||||
};
|
||||
26
apps/module/spine-ts/webgl/demos/meshes.html
Executable file
26
apps/module/spine-ts/webgl/demos/meshes.html
Executable file
@@ -0,0 +1,26 @@
|
||||
<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>
|
||||
158
apps/module/spine-ts/webgl/demos/meshes.js
Executable file
158
apps/module/spine-ts/webgl/demos/meshes.js
Executable file
@@ -0,0 +1,158 @@
|
||||
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();
|
||||
};
|
||||
25
apps/module/spine-ts/webgl/demos/skins.html
Executable file
25
apps/module/spine-ts/webgl/demos/skins.html
Executable file
@@ -0,0 +1,25 @@
|
||||
<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>
|
||||
214
apps/module/spine-ts/webgl/demos/skins.js
Executable file
214
apps/module/spine-ts/webgl/demos/skins.js
Executable file
@@ -0,0 +1,214 @@
|
||||
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();
|
||||
};
|
||||
25
apps/module/spine-ts/webgl/demos/spritesheets.html
Executable file
25
apps/module/spine-ts/webgl/demos/spritesheets.html
Executable file
@@ -0,0 +1,25 @@
|
||||
<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>
|
||||
151
apps/module/spine-ts/webgl/demos/spritesheets.js
Executable file
151
apps/module/spine-ts/webgl/demos/spritesheets.js
Executable file
@@ -0,0 +1,151 @@
|
||||
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();
|
||||
};
|
||||
22
apps/module/spine-ts/webgl/demos/stretchyman.html
Executable file
22
apps/module/spine-ts/webgl/demos/stretchyman.html
Executable file
@@ -0,0 +1,22 @@
|
||||
<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>
|
||||
188
apps/module/spine-ts/webgl/demos/stretchyman.js
Executable file
188
apps/module/spine-ts/webgl/demos/stretchyman.js
Executable file
@@ -0,0 +1,188 @@
|
||||
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();
|
||||
};
|
||||
24
apps/module/spine-ts/webgl/demos/tank.html
Executable file
24
apps/module/spine-ts/webgl/demos/tank.html
Executable file
@@ -0,0 +1,24 @@
|
||||
<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>
|
||||
121
apps/module/spine-ts/webgl/demos/tank.js
Executable file
121
apps/module/spine-ts/webgl/demos/tank.js
Executable file
@@ -0,0 +1,121 @@
|
||||
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();
|
||||
};
|
||||
25
apps/module/spine-ts/webgl/demos/transforms.html
Executable file
25
apps/module/spine-ts/webgl/demos/transforms.html
Executable file
@@ -0,0 +1,25 @@
|
||||
<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>
|
||||
177
apps/module/spine-ts/webgl/demos/transforms.js
Executable file
177
apps/module/spine-ts/webgl/demos/transforms.js
Executable file
@@ -0,0 +1,177 @@
|
||||
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();
|
||||
};
|
||||
24
apps/module/spine-ts/webgl/demos/transitions.html
Executable file
24
apps/module/spine-ts/webgl/demos/transitions.html
Executable file
@@ -0,0 +1,24 @@
|
||||
<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>
|
||||
141
apps/module/spine-ts/webgl/demos/transitions.js
Executable file
141
apps/module/spine-ts/webgl/demos/transitions.js
Executable file
@@ -0,0 +1,141 @@
|
||||
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();
|
||||
};
|
||||
177
apps/module/spine-ts/webgl/demos/utils.js
Executable file
177
apps/module/spine-ts/webgl/demos/utils.js
Executable file
@@ -0,0 +1,177 @@
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
24
apps/module/spine-ts/webgl/demos/vine.html
Executable file
24
apps/module/spine-ts/webgl/demos/vine.html
Executable file
@@ -0,0 +1,24 @@
|
||||
<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>
|
||||
181
apps/module/spine-ts/webgl/demos/vine.js
Executable file
181
apps/module/spine-ts/webgl/demos/vine.js
Executable file
@@ -0,0 +1,181 @@
|
||||
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();
|
||||
};
|
||||
Reference in New Issue
Block a user