mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-05 23:05:01 +08:00
Merge branch '3.6' into 3.7-beta
This commit is contained in:
badlogic
commit
4dfb74c70e
@ -31,8 +31,6 @@
|
||||
#ifndef SPINE_SHAREDLIB_H
|
||||
#define SPINE_SHAREDLIB_H
|
||||
|
||||
#define SP_API
|
||||
|
||||
#ifdef _WIN32
|
||||
#define DLLIMPORT __declspec(dllimport)
|
||||
#define DLLEXPORT __declspec(dllexport)
|
||||
@ -43,6 +41,8 @@
|
||||
|
||||
#ifdef SPINEPLUGIN_API
|
||||
#define SP_API SPINEPLUGIN_API
|
||||
#else
|
||||
#define SP_API
|
||||
#endif
|
||||
|
||||
#endif /* SPINE_SHAREDLIB_H */
|
||||
|
||||
@ -71,10 +71,11 @@ The spine-ts WebGL demos load their image, atlas, and JSON files from our webser
|
||||
- [Meshes](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/meshes.html)
|
||||
- [Skins](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/skins.html)
|
||||
- [Hoverboard](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/hoverboard.html)
|
||||
- [Transform constraints](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/transforms.html)
|
||||
- [Tank](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/tank.html)
|
||||
- [Vine](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/vine.html)
|
||||
- [Clipping](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/clipping.html)
|
||||
- [Stretchyman](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/stretchyman.html)
|
||||
- [Tank](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/tank.html)
|
||||
- [Transform constraints](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/transforms.html)
|
||||
|
||||
Please note that Chrome and possibly other browsers do not use the original CORS headers when loading cached resources. After the initial page load for a demo, you may need to forcefully refresh (hold `shift` and click refresh) or clear your browser cache.
|
||||
|
||||
|
||||
3068
spine-ts/build/spine-webgl.d.ts
vendored
3068
spine-ts/build/spine-webgl.d.ts
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1042
spine-ts/webgl/demos/assets/atlas1.atlas
Executable file
1042
spine-ts/webgl/demos/assets/atlas1.atlas
Executable file
File diff suppressed because it is too large
Load Diff
BIN
spine-ts/webgl/demos/assets/atlas1.png
Executable file
BIN
spine-ts/webgl/demos/assets/atlas1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
1063
spine-ts/webgl/demos/assets/atlas2.atlas
Executable file
1063
spine-ts/webgl/demos/assets/atlas2.atlas
Executable file
File diff suppressed because it is too large
Load Diff
BIN
spine-ts/webgl/demos/assets/atlas2.png
Executable file
BIN
spine-ts/webgl/demos/assets/atlas2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
1
spine-ts/webgl/demos/assets/demos.json
Executable file
1
spine-ts/webgl/demos/assets/demos.json
Executable file
File diff suppressed because one or more lines are too long
2911
spine-ts/webgl/demos/assets/heroes.atlas
Executable file
2911
spine-ts/webgl/demos/assets/heroes.atlas
Executable file
File diff suppressed because it is too large
Load Diff
BIN
spine-ts/webgl/demos/assets/heroes.png
Executable file
BIN
spine-ts/webgl/demos/assets/heroes.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 864 KiB |
24
spine-ts/webgl/demos/clipping.html
Normal file
24
spine-ts/webgl/demos/clipping.html
Normal 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"></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>
|
||||
119
spine-ts/webgl/demos/clipping.js
Normal file
119
spine-ts/webgl/demos/clipping.js
Normal file
@ -0,0 +1,119 @@
|
||||
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.loadText(DEMO_NAME, "atlas1.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete () {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
|
||||
return assetManager.get(DEMO_NAME, path);
|
||||
});
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "portal", true);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
var offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
|
||||
renderer.camera.position.x = offset.x + bounds.x + 200;
|
||||
renderer.camera.position.y = offset.y + bounds.y / 2 + 100;
|
||||
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
playButton = $("#clipping-playbutton");
|
||||
var playButtonUpdate = function () {
|
||||
isPlaying = !isPlaying;
|
||||
if (isPlaying)
|
||||
playButton.addClass("pause").removeClass("play");
|
||||
else
|
||||
playButton.addClass("play").removeClass("pause");
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeline = $("#clipping-timeline").data("slider");
|
||||
timeline.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percent;
|
||||
state.update(time - playTime);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
playTime = time;
|
||||
}
|
||||
};
|
||||
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawClipping = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
$("#clipping-drawtriangles").click(function() {
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawClipping = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = this.checked;
|
||||
})
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
playTime += delta;
|
||||
while (playTime >= animationDuration)
|
||||
playTime -= animationDuration;
|
||||
timeline.set(playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
renderer.camera.viewportWidth = bounds.x * 1.6;
|
||||
renderer.camera.viewportHeight = bounds.y * 1.6;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
clippingDemo.loadingComplete = loadingComplete;
|
||||
clippingDemo.render = render;
|
||||
clippingDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -1,6 +1,5 @@
|
||||
body, html {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: Tahoma;
|
||||
font-size: 11pt;
|
||||
}
|
||||
@ -12,16 +11,10 @@ br {
|
||||
content: "";
|
||||
margin-top: 15px;
|
||||
}
|
||||
.aspect {
|
||||
margin-bottom: 15px;
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
h2 {
|
||||
padding-top: 1em;
|
||||
}
|
||||
.aspect div {
|
||||
position: relative;
|
||||
padding-bottom: 70.14%;
|
||||
}
|
||||
.aspect canvas {
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -29,8 +22,49 @@ br {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.aspect {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -38,12 +72,13 @@ br {
|
||||
text-align: left;
|
||||
transform: translateZ(0);
|
||||
background: #222;
|
||||
display: inline-block;
|
||||
}
|
||||
.slider, .slider.filled span {
|
||||
height: 15px;
|
||||
border: 1px solid #c5c5c5;
|
||||
}
|
||||
.slider div {
|
||||
.slider div {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 10px;
|
||||
@ -56,7 +91,7 @@ br {
|
||||
.slider.filled {
|
||||
border: 0;
|
||||
}
|
||||
.slider.filled div {
|
||||
.slider.filled div {
|
||||
top: -1px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
@ -73,3 +108,15 @@ br {
|
||||
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;
|
||||
}
|
||||
|
||||
335
spine-ts/webgl/demos/demos.html
Normal file
335
spine-ts/webgl/demos/demos.html
Normal file
@ -0,0 +1,335 @@
|
||||
<!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="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>
|
||||
</body></html>
|
||||
85
spine-ts/webgl/demos/demos.js
Normal file
85
spine-ts/webgl/demos/demos.js
Normal 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,
|
||||
];
|
||||
|
||||
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");
|
||||
});
|
||||
});
|
||||
@ -9,12 +9,16 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="hoverboard-canvas"></canvas></div></div>
|
||||
<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones
|
||||
<div class="aspect"></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>
|
||||
hoverboardDemo(spineDemos.setupRendering);
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(hoverboardDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
var hoverboardDemo = function(loadingComplete, bgColor) {
|
||||
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 canvas, gl, renderer, input, assetManager;
|
||||
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"];
|
||||
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;
|
||||
|
||||
@ -18,13 +18,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("hoverboard-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = spineDemos.assetManager;
|
||||
@ -34,46 +29,37 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
input = new spine.webgl.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_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")["spineboy-hover"]);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||
state.setAnimation(0, "idle", 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);
|
||||
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.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;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
function setupUI () {
|
||||
var checkbox = $("#hoverboard-drawbones");
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
@ -82,9 +68,39 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
||||
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 (){
|
||||
function setupInput () {
|
||||
input.addListener({
|
||||
down: function(x, y) {
|
||||
isPlaying = false;
|
||||
@ -97,6 +113,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
},
|
||||
up: function(x, y) {
|
||||
if (target && target.data.name == "crosshair") $("#hoverboard-shoot").click();
|
||||
target = null;
|
||||
},
|
||||
dragged: function(x, y) {
|
||||
@ -154,9 +171,10 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
renderer.end();
|
||||
gl.lineWidth(1);
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
hoverboardDemo.loadingComplete = loadingComplete;
|
||||
hoverboardDemo.render = render;
|
||||
hoverboardDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -9,15 +9,15 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="imagechanges-canvas"></canvas></div></div>
|
||||
<div class="aspect"></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.loadSliders();
|
||||
imageChangesDemo(spineDemos.setupRendering);
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(imageChangesDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var imageChangesDemo = function(loadingComplete, bgColor) {
|
||||
var imageChangesDemo = function(canvas, bgColor) {
|
||||
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
@ -13,13 +13,8 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("imagechanges-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = spineDemos.assetManager;
|
||||
@ -28,21 +23,12 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
||||
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
|
||||
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
|
||||
setupUI();
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
function loadingComplete () {
|
||||
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
|
||||
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
@ -107,11 +93,11 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
var regions = [];
|
||||
for(var i = 0; i < sequenceSlots.length; i++) {
|
||||
var slot = sequenceSlots[i];
|
||||
var index = skeleton.findSlotIndex(slot);
|
||||
for (var name in skeleton.skin.attachments[index]) {
|
||||
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 {
|
||||
@ -138,17 +124,19 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
||||
var offset = active.bounds.offset;
|
||||
var size = active.bounds.size;
|
||||
|
||||
var x = offset.x + size.x + 100, offsetY = offset.y;
|
||||
var x = offset.x + size.x + 100, offsetY = offset.y, zoom = 1;
|
||||
if (activeSkeleton === "Alien") {
|
||||
renderer.camera.position.x = offset.x + size.x;
|
||||
renderer.camera.position.y = offset.y + size.y / 2;
|
||||
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;
|
||||
renderer.camera.viewportHeight = size.y * 1.4;
|
||||
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);
|
||||
@ -175,34 +163,21 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
||||
var slotSize = size.y / 3;
|
||||
var maxSlotWidth = 0;
|
||||
var j = 0;
|
||||
for (var i = 0; i < active.regions.length; i++) {
|
||||
for (var i = 0, n = active.regions.length; i < n; i++) {
|
||||
var region = active.regions[i].region;
|
||||
var scale = Math.min(slotSize / region.height, slotSize / region.width);
|
||||
var scale = Math.min(slotSize / region.height, slotSize / region.width) / zoom;
|
||||
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
|
||||
|
||||
var isVisible = false;
|
||||
for (var ii = 0; ii < active.slots.length; ii++) {
|
||||
var slotName = active.slots[ii];
|
||||
var slotIndex = skeleton.findSlotIndex(slotName);
|
||||
|
||||
for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
|
||||
var slot = skeleton.drawOrder[iii];
|
||||
if (slot.data.index == slotIndex) {
|
||||
if (slot.attachment != null) {
|
||||
if (slot.attachment.name === active.regions[i].name) {
|
||||
isVisible = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
if (isVisible) break;
|
||||
}
|
||||
|
||||
if (isVisible) renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR);
|
||||
|
||||
maxSlotWidth = Math.max(maxSlotWidth, region.width * scale);
|
||||
y += slotSize;
|
||||
y += slotSize / zoom + 2;
|
||||
j++;
|
||||
if (j == 3) {
|
||||
x += maxSlotWidth + 10;
|
||||
@ -213,9 +188,10 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
|
||||
renderer.end();
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
imageChangesDemo.loadingComplete = loadingComplete;
|
||||
imageChangesDemo.render = render;
|
||||
imageChangesDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -9,7 +9,7 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="meshes-canvas"></canvas></div></div>
|
||||
<div class="aspect"></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>
|
||||
@ -18,8 +18,8 @@
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.loadSliders();
|
||||
meshesDemo(spineDemos.setupRendering);
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(meshesDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,24 +1,18 @@
|
||||
var meshesDemo = function(loadingComplete, bgColor) {
|
||||
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 playButton, timeline, isPlaying = true;
|
||||
|
||||
var DEMO_NAME = "MeshesDemo";
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("meshes-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
|
||||
gl = canvas.ctx.gl;
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
assetManager = spineDemos.assetManager;
|
||||
@ -27,22 +21,14 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
function loadingComplete () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
|
||||
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
|
||||
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
|
||||
setupUI();
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
|
||||
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
|
||||
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
@ -57,8 +43,8 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#meshes-timeline").data("slider");
|
||||
timeLine.changed = function (percent) {
|
||||
timeline = $("#meshes-timeline").data("slider");
|
||||
timeline.changed = function (percent) {
|
||||
if (isPlaying) playButton.click();
|
||||
if (!isPlaying) {
|
||||
var active = skeletons[activeSkeleton];
|
||||
@ -82,7 +68,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
activeSkeleton = $("#meshes-skeleton option:selected").text();
|
||||
var active = skeletons[activeSkeleton];
|
||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||
timeLine.set(active.playTime / animationDuration);
|
||||
timeline.set(active.playTime / animationDuration);
|
||||
})
|
||||
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
@ -150,10 +136,9 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
if (isPlaying) {
|
||||
var animationDuration = state.getCurrent(0).animation.duration;
|
||||
active.playTime += delta;
|
||||
while (active.playTime >= animationDuration) {
|
||||
while (active.playTime >= animationDuration)
|
||||
active.playTime -= animationDuration;
|
||||
}
|
||||
timeLine.set(active.playTime / animationDuration);
|
||||
timeline.set(active.playTime / animationDuration);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
@ -164,9 +149,10 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton);
|
||||
renderer.end();
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
meshesDemo.loadingComplete = loadingComplete;
|
||||
meshesDemo.render = render;
|
||||
meshesDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -9,7 +9,7 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="skins-canvas"></canvas></div></div>
|
||||
<div class="aspect"></div>
|
||||
<select id="skins-skin"></select><br>
|
||||
<button id="skins-randomizeattachments">Random Attachments</button>
|
||||
<button id="skins-swingsword">Swing Sword</button><br>
|
||||
@ -17,7 +17,8 @@
|
||||
</center>
|
||||
|
||||
<script>
|
||||
skinsDemo(spineDemos.setupRendering);
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(skinsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var skinsDemo = function(loadingComplete, bgColor) {
|
||||
var skinsDemo = function(canvas, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, offset, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
@ -10,13 +10,8 @@ var skinsDemo = function(loadingComplete, bgColor) {
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("skins-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = spineDemos.assetManager;
|
||||
@ -26,39 +21,30 @@ var skinsDemo = function(loadingComplete, bgColor) {
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
input = new spine.webgl.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
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();
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
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 (){
|
||||
@ -218,9 +204,10 @@ var skinsDemo = function(loadingComplete, bgColor) {
|
||||
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();
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
skinsDemo.loadingComplete = loadingComplete;
|
||||
skinsDemo.render = render;
|
||||
skinsDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -9,16 +9,16 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="spritesheets-canvas"></canvas></div></div>
|
||||
<div class="aspect"></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.loadSliders();
|
||||
spritesheetsDemo(spineDemos.setupRendering);
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(spritesheetsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var spritesheetsDemo = function(loadingComplete, bgColor) {
|
||||
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);
|
||||
|
||||
@ -16,13 +16,8 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("spritesheets-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = spineDemos.assetManager;
|
||||
@ -32,49 +27,41 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
input = new spine.webgl.Input(canvas);
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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();
|
||||
viewportWidth = ((700 + bounds.x) - offset.x);
|
||||
viewportHeight = ((0 + bounds.y) - offset.y);
|
||||
resize();
|
||||
setupUI();
|
||||
setupInput();
|
||||
|
||||
$("#spritesheets-overlay").removeClass("overlay-hide");
|
||||
$("#spritesheets-overlay").addClass("overlay");
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
$("#spritesheets-overlay").removeClass("overlay-hide");
|
||||
$("#spritesheets-overlay").addClass("overlay");
|
||||
}
|
||||
|
||||
function setupUI () {
|
||||
@ -107,7 +94,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
function resize () {
|
||||
renderer.camera.position.x = offset.x + viewportWidth / 2 - 25;
|
||||
renderer.camera.position.y = offset.y + viewportHeight / 2 - 160;
|
||||
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);
|
||||
@ -142,7 +129,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
animationState.update(delta);
|
||||
var current = animationState.getCurrent(0);
|
||||
if (current.animation.name == "walk") current.time = walkLastTimePrecise;
|
||||
if (current.animation.name == "walk") current.trackTime = walkLastTimePrecise;
|
||||
animationState.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
@ -154,9 +141,10 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeleton(skeletonSeq, true);
|
||||
renderer.end();
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
spritesheetsDemo.loadingComplete = loadingComplete;
|
||||
spritesheetsDemo.render = render;
|
||||
spritesheetsDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -9,12 +9,13 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="stretchyman-canvas"></canvas></div></div>
|
||||
<div class="aspect"></div>
|
||||
<input id="stretchyman-drawbones" type="checkbox"></input> Display bones
|
||||
</center>
|
||||
|
||||
<script>
|
||||
stretchymanDemo(spineDemos.setupRendering);
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(stretchymanDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
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);
|
||||
@ -26,13 +26,8 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("stretchyman-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = spineDemos.assetManager;
|
||||
@ -42,43 +37,33 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
|
||||
return assetManager.get(DEMO_NAME, path);
|
||||
});
|
||||
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);
|
||||
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.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;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
@ -194,9 +179,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
renderer.end();
|
||||
gl.lineWidth(1);
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
stretchymanDemo.loadingComplete = loadingComplete;
|
||||
stretchymanDemo.render = render;
|
||||
stretchymanDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -9,15 +9,15 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="tank-canvas"></canvas></div></div>
|
||||
<div class="aspect"></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.loadSliders();
|
||||
tankDemo(spineDemos.setupRendering);
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(tankDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var tankDemo = function(loadingComplete, bgColor) {
|
||||
var tankDemo = function(canvas, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, offset, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var timeKeeper;
|
||||
var playButton, timeLine, isPlaying = true, playTime = 0;
|
||||
|
||||
var DEMO_NAME = "TankDemo";
|
||||
@ -9,13 +9,8 @@ var tankDemo = function(loadingComplete, bgColor) {
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("tank-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = spineDemos.assetManager;
|
||||
@ -24,41 +19,32 @@ var tankDemo = function(loadingComplete, bgColor) {
|
||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
|
||||
return assetManager.get(DEMO_NAME, path);
|
||||
});
|
||||
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);
|
||||
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;
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
setupUI();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
@ -126,9 +112,10 @@ var tankDemo = function(loadingComplete, bgColor) {
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, true);
|
||||
renderer.end();
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
tankDemo.loadingComplete = loadingComplete;
|
||||
tankDemo.render = render;
|
||||
tankDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -9,16 +9,16 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="transforms-canvas"></canvas></div></div>
|
||||
<div class="aspect"></div>
|
||||
Rotation offset
|
||||
<div id="transforms-rotationoffset" class="slider filled"></div><br>
|
||||
Translation mix
|
||||
<div id="transforms-translationmix" class="slider filled"></div>
|
||||
<div id="transforms-translationmix" class="slider filled"></div>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.loadSliders();
|
||||
transformsDemo(spineDemos.setupRendering);
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(transformsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var transformsDemo = function(loadingComplete, bgColor) {
|
||||
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);
|
||||
@ -6,7 +6,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var timeKeeper;
|
||||
var rotateHandle;
|
||||
var target = null;
|
||||
var hoverTargets = [null, null, null];
|
||||
@ -20,13 +20,8 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("transforms-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = spineDemos.assetManager;
|
||||
@ -36,45 +31,35 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
input = new spine.webgl.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
|
||||
return assetManager.get(DEMO_NAME, path);
|
||||
});
|
||||
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");
|
||||
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.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;
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
@ -183,9 +168,10 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
gl.lineWidth(1);
|
||||
renderer.end();
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
transformsDemo.loadingComplete = loadingComplete;
|
||||
transformsDemo.render = render;
|
||||
transformsDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -9,14 +9,15 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="transitions-canvas"></canvas></div></div>
|
||||
<div class="aspect"></div>
|
||||
Time multiplier
|
||||
<div id="transitions-timeslider" class="slider filled"></div>
|
||||
<div id="transitions-timeslider" class="slider filled"></div><br>
|
||||
<button id="transitions-die">Die</button>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.loadSliders();
|
||||
transitionsDemo(spineDemos.setupRendering);
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(transitionsDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
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 loadingScreen;
|
||||
|
||||
var DEMO_NAME = "TransitionsDemo";
|
||||
|
||||
@ -15,13 +14,9 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
timeSlider = $("#transitions-timeslider").data("slider");
|
||||
timeSlider.set(0.5);
|
||||
timeSliderLabel = $("#transitions-timeslider-label")[0];
|
||||
canvas = document.getElementById("transitions-canvas");
|
||||
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = spineDemos.assetManager;
|
||||
@ -33,66 +28,57 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
input = new spine.webgl.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
skeleton = loadSkeleton("spineboy");
|
||||
skeletonNoMix = new spine.Skeleton(skeleton.data);
|
||||
state = createState(0.25);
|
||||
state.multipleMixing = true;
|
||||
setAnimations(state, 0);
|
||||
stateNoMix = createState(0);
|
||||
setAnimations(stateNoMix, -0.25);
|
||||
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");
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
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() {
|
||||
input.addListener({
|
||||
down: function(x, y) { },
|
||||
up: function(x, y) { },
|
||||
moved: function(x, y) { },
|
||||
dragged: function(x, y) { }
|
||||
$("#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) {
|
||||
function createState (mix) {
|
||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||
stateData.defaultMix = mix;
|
||||
var state = new spine.AnimationState(stateData);
|
||||
return state;
|
||||
}
|
||||
|
||||
function setAnimations(state, mix) {
|
||||
state.addAnimation(0, "idle", true, 0.7);
|
||||
state.addAnimation(0, "walk", true, 0.7);
|
||||
state.addAnimation(0, "idle", true, 0.8);
|
||||
state.addAnimation(0, "run", true, 0.7);
|
||||
state.addAnimation(0, "idle", true, 0.8);
|
||||
function setAnimations (state, delay, first) {
|
||||
state.addAnimation(0, "idle", true, first);
|
||||
state.addAnimation(0, "walk", true, 0.6);
|
||||
state.addAnimation(0, "run", true, 0.6);
|
||||
state.addAnimation(0, "jump", false, 0.6);
|
||||
state.addAnimation(0, "run", true, mix);
|
||||
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, "run", true, mix).listener = {
|
||||
state.addAnimation(0, "walk", true, delay).listener = {
|
||||
start: function (trackIndex) {
|
||||
setAnimations(state, mix);
|
||||
setAnimations(state, delay, 0.6);
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -134,7 +120,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
skeleton.x = -300;
|
||||
skeleton.x = -200;
|
||||
skeleton.y = -100;
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
|
||||
@ -145,9 +131,10 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
skeletonNoMix.y = -100;
|
||||
renderer.drawSkeleton(skeletonNoMix, true);
|
||||
renderer.end();
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
transitionsDemo.loadingComplete = loadingComplete;
|
||||
transitionsDemo.render = render;
|
||||
transitionsDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
return render;
|
||||
};
|
||||
@ -3,9 +3,10 @@ var spineDemos = {
|
||||
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("http://esotericsoftware.com/demos/exports/"),
|
||||
assetManager: new spine.SharedAssetManager("assets/"),
|
||||
demos: [],
|
||||
loopRunning: false
|
||||
loopRunning: false,
|
||||
canvases: []
|
||||
};
|
||||
(function () {
|
||||
var timeKeeper = new spine.TimeKeeper();
|
||||
@ -13,40 +14,81 @@ var spineDemos = {
|
||||
timeKeeper.update();
|
||||
if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
|
||||
requestAnimationFrame(loop);
|
||||
var demos = spineDemos.demos;
|
||||
var demos = spineDemos.demos;
|
||||
for (var i = 0; i < demos.length; i++) {
|
||||
var demo = demos[i];
|
||||
var canvas = demo.canvas;
|
||||
var renderFunc = demo.renderFunc;
|
||||
if (demo.visible) {
|
||||
if (spineDemos.log) console.log("Rendering " + canvas.id);
|
||||
renderFunc();
|
||||
|
||||
checkElementVisible(demo);
|
||||
|
||||
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) {
|
||||
var rect = demo.canvas.getBoundingClientRect();
|
||||
var x = 0, y = 0;
|
||||
var width = (window.innerHeight || document.documentElement.clientHeight);
|
||||
var height = (window.innerWidth || document.documentElement.clientWidth);
|
||||
demo.visible = rect.left < x + width && rect.right > x && rect.top < y + height && rect.bottom > y;
|
||||
};
|
||||
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) && ((rect.top + rect.height) >= 0);
|
||||
const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
|
||||
|
||||
spineDemos.setupRendering = function (canvas, renderFunc) {
|
||||
var demo = {canvas: canvas, renderFunc: renderFunc, visible: false};
|
||||
demo.visible = (vertInView && horInView);
|
||||
}
|
||||
|
||||
function createCanvases (numCanvases) {
|
||||
for (var i = 0; i < numCanvases; i++) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
|
||||
canvas.id = "canvas-" + i;
|
||||
spineDemos.canvases.push(canvas);
|
||||
}
|
||||
}
|
||||
|
||||
spineDemos.init = function () {
|
||||
createCanvases(4);
|
||||
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);
|
||||
});
|
||||
checkElementVisible(demo);
|
||||
if (!spineDemos.loopRunning) {
|
||||
loop();
|
||||
spineDemos.loopRunning = true;
|
||||
}
|
||||
spineDemos.demos.push(demo);
|
||||
};
|
||||
}
|
||||
|
||||
spineDemos.loadSliders = function () {
|
||||
loadSliders = function () {
|
||||
$(window).resize(function() {
|
||||
$(".slider").each(function () {
|
||||
$(this).data("slider").resized();
|
||||
|
||||
@ -9,15 +9,15 @@
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<div class="aspect"><div><canvas id="vine-canvas"></canvas></div></div>
|
||||
<div class="aspect"></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.loadSliders();
|
||||
vineDemo(spineDemos.setupRendering);
|
||||
<script>
|
||||
spineDemos.init();
|
||||
spineDemos.addDemo(vineDemo, document.getElementsByClassName("aspect")[0]);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var vineDemo = function(loadingComplete, bgColor) {
|
||||
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);
|
||||
@ -6,7 +6,7 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var timeKeeper;
|
||||
var target = null;
|
||||
var hoverTargets = [null, null, null, null, null, null];
|
||||
var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"];
|
||||
@ -18,13 +18,8 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas = document.getElementById("vine-canvas");
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
||||
if (!gl) {
|
||||
alert('WebGL is unavailable.');
|
||||
return;
|
||||
}
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
input = new spine.webgl.Input(canvas);
|
||||
@ -34,44 +29,34 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
|
||||
function load () {
|
||||
timeKeeper.update();
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
|
||||
return assetManager.get(DEMO_NAME, path);
|
||||
});
|
||||
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();
|
||||
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.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;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
setupInput();
|
||||
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
loadingScreen.draw();
|
||||
requestAnimationFrame(load);
|
||||
}
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
@ -187,9 +172,10 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
gl.lineWidth(1);
|
||||
renderer.end();
|
||||
|
||||
loadingScreen.draw(true);
|
||||
}
|
||||
|
||||
vineDemo.loadingComplete = loadingComplete;
|
||||
vineDemo.render = render;
|
||||
vineDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
@ -120,7 +120,7 @@ namespace Spine.Unity.Editor {
|
||||
}
|
||||
|
||||
if (materials.arraySize == 0) {
|
||||
EditorGUILayout.HelpBox("Missing materials", MessageType.Error);
|
||||
EditorGUILayout.HelpBox("No materials", MessageType.Error);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -133,6 +133,15 @@ namespace Spine.Unity.Editor {
|
||||
}
|
||||
}
|
||||
|
||||
EditorGUILayout.Space();
|
||||
if (SpineInspectorUtility.LargeCenteredButton(SpineInspectorUtility.TempContent("Set Mipmap Bias to " + SpineEditorUtilities.DEFAULT_MIPMAPBIAS))) {
|
||||
foreach (var m in atlasAsset.materials) {
|
||||
var texture = m.mainTexture;
|
||||
texture.mipMapBias = SpineEditorUtilities.DEFAULT_MIPMAPBIAS;
|
||||
}
|
||||
Debug.Log("Texture mipmap bias set to " + SpineEditorUtilities.DEFAULT_MIPMAPBIAS);
|
||||
}
|
||||
|
||||
EditorGUILayout.Space();
|
||||
if (atlasFile.objectReferenceValue != null) {
|
||||
if (SpineInspectorUtility.LargeCenteredButton(SpriteSlicesLabel)) {
|
||||
@ -142,6 +151,8 @@ namespace Spine.Unity.Editor {
|
||||
}
|
||||
}
|
||||
|
||||
EditorGUILayout.Space();
|
||||
|
||||
#if REGION_BAKING_MESH
|
||||
if (atlasFile.objectReferenceValue != null) {
|
||||
Atlas atlas = asset.GetAtlas();
|
||||
|
||||
@ -188,6 +188,8 @@ namespace Spine.Unity.Editor {
|
||||
const string SHOW_HIERARCHY_ICONS_KEY = "SPINE_SHOW_HIERARCHY_ICONS";
|
||||
public static bool showHierarchyIcons = DEFAULT_SHOW_HIERARCHY_ICONS;
|
||||
|
||||
internal const float DEFAULT_MIPMAPBIAS = -0.5f;
|
||||
|
||||
public const float DEFAULT_SCENE_ICONS_SCALE = 1f;
|
||||
public const string SCENE_ICONS_SCALE_KEY = "SPINE_SCENE_ICONS_SCALE";
|
||||
|
||||
|
||||
@ -212,6 +212,7 @@ namespace Spine.Unity.Modules.AttachmentTools {
|
||||
|
||||
public static class SpriteAtlasRegionExtensions {
|
||||
internal const TextureFormat SpineTextureFormat = TextureFormat.RGBA32;
|
||||
internal const float DefaultMipmapBias = -0.5f;
|
||||
internal const bool UseMipMaps = false;
|
||||
internal const float DefaultScale = 0.01f;
|
||||
|
||||
@ -440,6 +441,7 @@ namespace Spine.Unity.Modules.AttachmentTools {
|
||||
|
||||
// Fill a new texture with the collected attachment textures.
|
||||
var newTexture = new Texture2D(maxAtlasSize, maxAtlasSize, textureFormat, mipmaps);
|
||||
newTexture.mipMapBias = SpriteAtlasRegionExtensions.DefaultMipmapBias;
|
||||
newTexture.anisoLevel = texturesToPack[0].anisoLevel;
|
||||
newTexture.name = newName;
|
||||
var rects = newTexture.PackTextures(texturesToPack.ToArray(), padding, maxAtlasSize);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user