mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-01 21:29:07 +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
|
#ifndef SPINE_SHAREDLIB_H
|
||||||
#define SPINE_SHAREDLIB_H
|
#define SPINE_SHAREDLIB_H
|
||||||
|
|
||||||
#define SP_API
|
|
||||||
|
|
||||||
#ifdef _WIN32
|
#ifdef _WIN32
|
||||||
#define DLLIMPORT __declspec(dllimport)
|
#define DLLIMPORT __declspec(dllimport)
|
||||||
#define DLLEXPORT __declspec(dllexport)
|
#define DLLEXPORT __declspec(dllexport)
|
||||||
@ -43,6 +41,8 @@
|
|||||||
|
|
||||||
#ifdef SPINEPLUGIN_API
|
#ifdef SPINEPLUGIN_API
|
||||||
#define SP_API SPINEPLUGIN_API
|
#define SP_API SPINEPLUGIN_API
|
||||||
|
#else
|
||||||
|
#define SP_API
|
||||||
#endif
|
#endif
|
||||||
|
|
||||||
#endif /* SPINE_SHAREDLIB_H */
|
#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)
|
- [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)
|
- [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)
|
- [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)
|
- [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)
|
- [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.
|
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 {
|
body, html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100%;
|
|
||||||
font-family: Tahoma;
|
font-family: Tahoma;
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
}
|
}
|
||||||
@ -12,16 +11,10 @@ br {
|
|||||||
content: "";
|
content: "";
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
.aspect {
|
h2 {
|
||||||
margin-bottom: 15px;
|
padding-top: 1em;
|
||||||
max-width: 800px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
.aspect div {
|
canvas {
|
||||||
position: relative;
|
|
||||||
padding-bottom: 70.14%;
|
|
||||||
}
|
|
||||||
.aspect canvas {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -29,8 +22,49 @@ br {
|
|||||||
right: 0;
|
right: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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 {
|
.slider {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
@ -38,6 +72,7 @@ br {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
background: #222;
|
background: #222;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.slider, .slider.filled span {
|
.slider, .slider.filled span {
|
||||||
height: 15px;
|
height: 15px;
|
||||||
@ -73,3 +108,15 @@ br {
|
|||||||
border-top-right-radius: 3px;
|
border-top-right-radius: 3px;
|
||||||
border-bottom-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>
|
<body>
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<div class="aspect"><div><canvas id="hoverboard-canvas"></canvas></div></div>
|
<div class="aspect"></div>
|
||||||
<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones
|
<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>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
hoverboardDemo(spineDemos.setupRendering);
|
spineDemos.init();
|
||||||
|
spineDemos.addDemo(hoverboardDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</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_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
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_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 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 skeleton, state, bounds;
|
||||||
var timeKeeper, loadingScreen;
|
var timeKeeper, loadingScreen;
|
||||||
var target = null;
|
var target = null;
|
||||||
var hoverTargets = [];
|
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 coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
|
||||||
var isPlaying = true;
|
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);
|
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||||
|
|
||||||
function init () {
|
function init () {
|
||||||
canvas = document.getElementById("hoverboard-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
assetManager = spineDemos.assetManager;
|
assetManager = spineDemos.assetManager;
|
||||||
@ -34,46 +29,37 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
|||||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||||
input = new spine.webgl.Input(canvas);
|
input = new spine.webgl.Input(canvas);
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
return assetManager.get(DEMO_NAME, path);
|
||||||
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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
|
||||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
skeleton = new spine.Skeleton(skeletonData);
|
||||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy-hover"]);
|
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||||
skeleton = new spine.Skeleton(skeletonData);
|
state.setAnimation(0, "hoverboard", true);
|
||||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
state.apply(skeleton);
|
||||||
state.setAnimation(0, "idle", true);
|
skeleton.updateWorldTransform();
|
||||||
state.apply(skeleton);
|
var offset = new spine.Vector2();
|
||||||
skeleton.updateWorldTransform();
|
bounds = new spine.Vector2();
|
||||||
var offset = new spine.Vector2();
|
skeleton.getBounds(offset, bounds, []);
|
||||||
bounds = new spine.Vector2();
|
for (var i = 0; i < controlBones.length; i++)
|
||||||
skeleton.getBounds(offset, bounds, []);
|
hoverTargets.push(null);
|
||||||
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
|
|
||||||
|
|
||||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||||
|
|
||||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||||
|
|
||||||
setupUI();
|
setupUI();
|
||||||
setupInput();
|
setupInput();
|
||||||
|
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupUI() {
|
function setupUI () {
|
||||||
var checkbox = $("#hoverboard-drawbones");
|
var checkbox = $("#hoverboard-drawbones");
|
||||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||||
@ -82,9 +68,39 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
|||||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||||
renderer.skeletonDebugRenderer.drawBones = 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({
|
input.addListener({
|
||||||
down: function(x, y) {
|
down: function(x, y) {
|
||||||
isPlaying = false;
|
isPlaying = false;
|
||||||
@ -97,6 +113,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
up: function(x, y) {
|
up: function(x, y) {
|
||||||
|
if (target && target.data.name == "crosshair") $("#hoverboard-shoot").click();
|
||||||
target = null;
|
target = null;
|
||||||
},
|
},
|
||||||
dragged: function(x, y) {
|
dragged: function(x, y) {
|
||||||
@ -154,9 +171,10 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
|
|||||||
}
|
}
|
||||||
renderer.end();
|
renderer.end();
|
||||||
gl.lineWidth(1);
|
gl.lineWidth(1);
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hoverboardDemo.loadingComplete = loadingComplete;
|
||||||
|
hoverboardDemo.render = render;
|
||||||
|
hoverboardDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -9,15 +9,15 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<div class="aspect"><div><canvas id="imagechanges-canvas"></canvas></div></div>
|
<div class="aspect"></div>
|
||||||
<div id="imagechanges-timeline" class="slider"></div>
|
<div id="imagechanges-timeline" class="slider"></div>
|
||||||
<input id="imagechanges-playbutton" type="button" value="Pause"></input><br>
|
<input id="imagechanges-playbutton" type="button" value="Pause"></input><br>
|
||||||
<select id="imagechanges-skeleton" size="2"></select>
|
<select id="imagechanges-skeleton" size="2"></select>
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
spineDemos.loadSliders();
|
spineDemos.init();
|
||||||
imageChangesDemo(spineDemos.setupRendering);
|
spineDemos.addDemo(imageChangesDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</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 OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
||||||
|
|
||||||
var canvas, gl, renderer, input, assetManager;
|
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);
|
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||||
|
|
||||||
function init () {
|
function init () {
|
||||||
canvas = document.getElementById("imagechanges-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
assetManager = spineDemos.assetManager;
|
assetManager = spineDemos.assetManager;
|
||||||
@ -28,21 +23,12 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|||||||
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
|
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
|
||||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
|
||||||
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
|
setupUI();
|
||||||
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
|
|
||||||
setupUI();
|
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupUI() {
|
function setupUI() {
|
||||||
@ -107,11 +93,11 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|||||||
|
|
||||||
var regions = [];
|
var regions = [];
|
||||||
for(var i = 0; i < sequenceSlots.length; i++) {
|
for(var i = 0; i < sequenceSlots.length; i++) {
|
||||||
var slot = sequenceSlots[i];
|
var slot = skeleton.findSlot(sequenceSlots[i]);
|
||||||
var index = skeleton.findSlotIndex(slot);
|
sequenceSlots[i] = slot;
|
||||||
for (var name in skeleton.skin.attachments[index]) {
|
var index = slot.data.index;
|
||||||
|
for (var name in skeleton.skin.attachments[index])
|
||||||
regions.push(skeleton.skin.attachments[index][name]);
|
regions.push(skeleton.skin.attachments[index][name]);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -138,17 +124,19 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|||||||
var offset = active.bounds.offset;
|
var offset = active.bounds.offset;
|
||||||
var size = active.bounds.size;
|
var size = active.bounds.size;
|
||||||
|
|
||||||
var x = offset.x + size.x + 100, offsetY = offset.y;
|
var x = offset.x + size.x + 100, offsetY = offset.y, zoom = 1;
|
||||||
if (activeSkeleton === "Alien") {
|
if (activeSkeleton === "Alien") {
|
||||||
renderer.camera.position.x = offset.x + size.x;
|
renderer.camera.position.x = offset.x + size.x + 400;
|
||||||
renderer.camera.position.y = offset.y + size.y / 2;
|
renderer.camera.position.y = offset.y + size.y / 2 + 450;
|
||||||
|
x += 400;
|
||||||
|
zoom = 0.31;
|
||||||
} else {
|
} else {
|
||||||
renderer.camera.position.x = offset.x + size.x;
|
renderer.camera.position.x = offset.x + size.x;
|
||||||
renderer.camera.position.y = offset.y + size.y / 2;
|
renderer.camera.position.y = offset.y + size.y / 2;
|
||||||
x += 100;
|
x += 100;
|
||||||
}
|
}
|
||||||
renderer.camera.viewportWidth = size.x * 2.4;
|
renderer.camera.viewportWidth = size.x * 2.4 / zoom;
|
||||||
renderer.camera.viewportHeight = size.y * 1.4;
|
renderer.camera.viewportHeight = size.y * 1.4 / zoom;
|
||||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||||
|
|
||||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||||
@ -175,34 +163,21 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|||||||
var slotSize = size.y / 3;
|
var slotSize = size.y / 3;
|
||||||
var maxSlotWidth = 0;
|
var maxSlotWidth = 0;
|
||||||
var j = 0;
|
var j = 0;
|
||||||
for (var i = 0; i < active.regions.length; i++) {
|
for (var i = 0, n = active.regions.length; i < n; i++) {
|
||||||
var region = active.regions[i].region;
|
var region = active.regions[i].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);
|
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
|
||||||
|
|
||||||
var isVisible = false;
|
|
||||||
for (var ii = 0; ii < active.slots.length; ii++) {
|
for (var ii = 0; ii < active.slots.length; ii++) {
|
||||||
var slotName = active.slots[ii];
|
var slot = active.slots[ii];
|
||||||
var slotIndex = skeleton.findSlotIndex(slotName);
|
if (slot.attachment && slot.attachment.name === region.name) {
|
||||||
|
renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR);
|
||||||
for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
|
break;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
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);
|
maxSlotWidth = Math.max(maxSlotWidth, region.width * scale);
|
||||||
y += slotSize;
|
y += slotSize / zoom + 2;
|
||||||
j++;
|
j++;
|
||||||
if (j == 3) {
|
if (j == 3) {
|
||||||
x += maxSlotWidth + 10;
|
x += maxSlotWidth + 10;
|
||||||
@ -213,9 +188,10 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderer.end();
|
renderer.end();
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
imageChangesDemo.loadingComplete = loadingComplete;
|
||||||
|
imageChangesDemo.render = render;
|
||||||
|
imageChangesDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -9,7 +9,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<div class="aspect"><div><canvas id="meshes-canvas"></canvas></div></div>
|
<div class="aspect"></div>
|
||||||
<div id="meshes-timeline" class="slider"></div>
|
<div id="meshes-timeline" class="slider"></div>
|
||||||
<input id="meshes-playbutton" type="button" value="Pause"></input><br>
|
<input id="meshes-playbutton" type="button" value="Pause"></input><br>
|
||||||
<select id="meshes-skeleton" size="3"></select><br>
|
<select id="meshes-skeleton" size="3"></select><br>
|
||||||
@ -18,8 +18,8 @@
|
|||||||
</center>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
spineDemos.loadSliders();
|
spineDemos.init();
|
||||||
meshesDemo(spineDemos.setupRendering);
|
spineDemos.addDemo(meshesDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,24 +1,18 @@
|
|||||||
var meshesDemo = function(loadingComplete, bgColor) {
|
var meshesDemo = function(canvas, bgColor) {
|
||||||
var canvas, gl, renderer, input, assetManager;
|
var canvas, gl, renderer, input, assetManager;
|
||||||
var skeleton, bounds;
|
var skeleton, bounds;
|
||||||
var timeKeeper, loadingScreen;
|
var timeKeeper, loadingScreen;
|
||||||
var skeletons = {};
|
var skeletons = {};
|
||||||
var activeSkeleton = "Orange Girl";
|
var activeSkeleton = "Orange Girl";
|
||||||
var playButton, timeLine, isPlaying = true;
|
var playButton, timeline, isPlaying = true;
|
||||||
|
|
||||||
var DEMO_NAME = "MeshesDemo";
|
var DEMO_NAME = "MeshesDemo";
|
||||||
|
|
||||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||||
|
|
||||||
function init () {
|
function init () {
|
||||||
canvas = document.getElementById("meshes-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||||
assetManager = spineDemos.assetManager;
|
assetManager = spineDemos.assetManager;
|
||||||
@ -27,22 +21,14 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
|||||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
timeKeeper.update();
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
|
||||||
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
|
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
|
||||||
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
|
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
|
||||||
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
|
setupUI();
|
||||||
setupUI();
|
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupUI() {
|
function setupUI() {
|
||||||
@ -57,8 +43,8 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
|||||||
playButton.click(playButtonUpdate);
|
playButton.click(playButtonUpdate);
|
||||||
playButton.addClass("pause");
|
playButton.addClass("pause");
|
||||||
|
|
||||||
timeLine = $("#meshes-timeline").data("slider");
|
timeline = $("#meshes-timeline").data("slider");
|
||||||
timeLine.changed = function (percent) {
|
timeline.changed = function (percent) {
|
||||||
if (isPlaying) playButton.click();
|
if (isPlaying) playButton.click();
|
||||||
if (!isPlaying) {
|
if (!isPlaying) {
|
||||||
var active = skeletons[activeSkeleton];
|
var active = skeletons[activeSkeleton];
|
||||||
@ -82,7 +68,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
|||||||
activeSkeleton = $("#meshes-skeleton option:selected").text();
|
activeSkeleton = $("#meshes-skeleton option:selected").text();
|
||||||
var active = skeletons[activeSkeleton];
|
var active = skeletons[activeSkeleton];
|
||||||
var animationDuration = active.state.getCurrent(0).animation.duration;
|
var animationDuration = active.state.getCurrent(0).animation.duration;
|
||||||
timeLine.set(active.playTime / animationDuration);
|
timeline.set(active.playTime / animationDuration);
|
||||||
})
|
})
|
||||||
|
|
||||||
renderer.skeletonDebugRenderer.drawBones = false;
|
renderer.skeletonDebugRenderer.drawBones = false;
|
||||||
@ -150,10 +136,9 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
|||||||
if (isPlaying) {
|
if (isPlaying) {
|
||||||
var animationDuration = state.getCurrent(0).animation.duration;
|
var animationDuration = state.getCurrent(0).animation.duration;
|
||||||
active.playTime += delta;
|
active.playTime += delta;
|
||||||
while (active.playTime >= animationDuration) {
|
while (active.playTime >= animationDuration)
|
||||||
active.playTime -= animationDuration;
|
active.playTime -= animationDuration;
|
||||||
}
|
timeline.set(active.playTime / animationDuration);
|
||||||
timeLine.set(active.playTime / animationDuration);
|
|
||||||
|
|
||||||
state.update(delta);
|
state.update(delta);
|
||||||
state.apply(skeleton);
|
state.apply(skeleton);
|
||||||
@ -164,9 +149,10 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
|||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton, true);
|
||||||
renderer.drawSkeletonDebug(skeleton);
|
renderer.drawSkeletonDebug(skeleton);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
meshesDemo.loadingComplete = loadingComplete;
|
||||||
|
meshesDemo.render = render;
|
||||||
|
meshesDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -9,7 +9,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<div class="aspect"><div><canvas id="skins-canvas"></canvas></div></div>
|
<div class="aspect"></div>
|
||||||
<select id="skins-skin"></select><br>
|
<select id="skins-skin"></select><br>
|
||||||
<button id="skins-randomizeattachments">Random Attachments</button>
|
<button id="skins-randomizeattachments">Random Attachments</button>
|
||||||
<button id="skins-swingsword">Swing Sword</button><br>
|
<button id="skins-swingsword">Swing Sword</button><br>
|
||||||
@ -17,7 +17,8 @@
|
|||||||
</center>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
skinsDemo(spineDemos.setupRendering);
|
spineDemos.init();
|
||||||
|
spineDemos.addDemo(skinsDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
var skinsDemo = function(loadingComplete, bgColor) {
|
var skinsDemo = function(canvas, bgColor) {
|
||||||
var canvas, gl, renderer, input, assetManager;
|
var canvas, gl, renderer, input, assetManager;
|
||||||
var skeleton, state, offset, bounds;
|
var skeleton, state, offset, bounds;
|
||||||
var timeKeeper, loadingScreen;
|
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);
|
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||||
|
|
||||||
function init () {
|
function init () {
|
||||||
canvas = document.getElementById("skins-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
assetManager = spineDemos.assetManager;
|
assetManager = spineDemos.assetManager;
|
||||||
@ -26,39 +21,30 @@ var skinsDemo = function(loadingComplete, bgColor) {
|
|||||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||||
input = new spine.webgl.Input(canvas);
|
input = new spine.webgl.Input(canvas);
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) {
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
return assetManager.get(DEMO_NAME, path);
|
||||||
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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
|
||||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
skeleton = new spine.Skeleton(skeletonData);
|
||||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
|
skeleton.setSkinByName("Assassin");
|
||||||
skeleton = new spine.Skeleton(skeletonData);
|
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||||
skeleton.setSkinByName("Assassin");
|
stateData.defaultMix = 0.2;
|
||||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
stateData.setMix("roll", "run", 0);
|
||||||
stateData.defaultMix = 0.2;
|
stateData.setMix("jump", "run2", 0);
|
||||||
stateData.setMix("roll", "run", 0);
|
state = new spine.AnimationState(stateData);
|
||||||
stateData.setMix("jump", "run2", 0);
|
setupAnimations(state);
|
||||||
state = new spine.AnimationState(stateData);
|
state.apply(skeleton);
|
||||||
setupAnimations(state);
|
skeleton.updateWorldTransform();
|
||||||
state.apply(skeleton);
|
offset = new spine.Vector2();
|
||||||
skeleton.updateWorldTransform();
|
bounds = new spine.Vector2();
|
||||||
offset = new spine.Vector2();
|
skeleton.getBounds(offset, bounds, []);
|
||||||
bounds = new spine.Vector2();
|
setupUI();
|
||||||
skeleton.getBounds(offset, bounds, []);
|
setupInput();
|
||||||
setupUI();
|
|
||||||
setupInput();
|
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupInput (){
|
function setupInput (){
|
||||||
@ -218,9 +204,10 @@ var skinsDemo = function(loadingComplete, bgColor) {
|
|||||||
var height = scale * texture.getImage().height;
|
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.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
skinsDemo.loadingComplete = loadingComplete;
|
||||||
|
skinsDemo.render = render;
|
||||||
|
skinsDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -9,7 +9,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<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-roar">Roar</button>
|
||||||
<button id="spritesheets-jump">Jump</button><br>
|
<button id="spritesheets-jump">Jump</button><br>
|
||||||
Time multiplier
|
Time multiplier
|
||||||
@ -17,8 +17,8 @@ Time multiplier
|
|||||||
</center>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
spineDemos.loadSliders();
|
spineDemos.init();
|
||||||
spritesheetsDemo(spineDemos.setupRendering);
|
spineDemos.addDemo(spritesheetsDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</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 SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8);
|
||||||
var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
|
var 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);
|
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||||
|
|
||||||
function init () {
|
function init () {
|
||||||
canvas = document.getElementById("spritesheets-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
assetManager = spineDemos.assetManager;
|
assetManager = spineDemos.assetManager;
|
||||||
@ -32,49 +27,41 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
|||||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
input = new spine.webgl.Input(canvas);
|
input = new spine.webgl.Input(canvas);
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
skeletonAtlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
return assetManager.get(DEMO_NAME, path);
|
||||||
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 atlasLoader = new spine.AtlasAttachmentLoader(skeletonAtlas);
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
|
||||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
skeleton = new spine.Skeleton(skeletonData);
|
||||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
|
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||||
skeleton = new spine.Skeleton(skeletonData);
|
stateData.defaultMix = 0.5;
|
||||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
stateData.setMix("jump", "walk", 0.3);
|
||||||
stateData.defaultMix = 0.5;
|
animationState = new spine.AnimationState(stateData);
|
||||||
animationState = new spine.AnimationState(stateData);
|
animationState.setAnimation(0, "walk", true);
|
||||||
animationState.setAnimation(0, "walk", true);
|
animationState.apply(skeleton);
|
||||||
animationState.apply(skeleton);
|
skeleton.updateWorldTransform();
|
||||||
skeleton.updateWorldTransform();
|
offset = new spine.Vector2();
|
||||||
offset = new spine.Vector2();
|
bounds = new spine.Vector2();
|
||||||
bounds = new spine.Vector2();
|
skeleton.getBounds(offset, bounds, []);
|
||||||
skeleton.getBounds(offset, bounds, []);
|
skeleton.x -= 60;
|
||||||
skeleton.x -= 60;
|
|
||||||
|
|
||||||
skeletonSeq = new spine.Skeleton(skeletonData);
|
skeletonSeq = new spine.Skeleton(skeletonData);
|
||||||
walkAnim = skeletonSeq.data.findAnimation("walk");
|
walkAnim = skeletonSeq.data.findAnimation("walk");
|
||||||
walkAnim.apply(skeletonSeq, 0, 0, true, null, 1, true, false);
|
walkAnim.apply(skeletonSeq, 0, 0, true, null, 1, true, false);
|
||||||
skeletonSeq.x += bounds.x + 150;
|
skeletonSeq.x += bounds.x + 150;
|
||||||
|
|
||||||
viewportWidth = ((700 + bounds.x) - offset.x);
|
viewportWidth = ((700 + bounds.x) - offset.x);
|
||||||
viewportHeight = ((0 + bounds.y) - offset.y);
|
viewportHeight = ((0 + bounds.y) - offset.y);
|
||||||
resize();
|
resize();
|
||||||
setupUI();
|
setupUI();
|
||||||
setupInput();
|
setupInput();
|
||||||
|
|
||||||
$("#spritesheets-overlay").removeClass("overlay-hide");
|
$("#spritesheets-overlay").removeClass("overlay-hide");
|
||||||
$("#spritesheets-overlay").addClass("overlay");
|
$("#spritesheets-overlay").addClass("overlay");
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupUI () {
|
function setupUI () {
|
||||||
@ -107,7 +94,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
|||||||
|
|
||||||
function resize () {
|
function resize () {
|
||||||
renderer.camera.position.x = offset.x + viewportWidth / 2 - 25;
|
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.viewportWidth = viewportWidth * 1.2;
|
||||||
renderer.camera.viewportHeight = viewportHeight * 1.2;
|
renderer.camera.viewportHeight = viewportHeight * 1.2;
|
||||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||||
@ -142,7 +129,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
|||||||
|
|
||||||
animationState.update(delta);
|
animationState.update(delta);
|
||||||
var current = animationState.getCurrent(0);
|
var current = animationState.getCurrent(0);
|
||||||
if (current.animation.name == "walk") current.time = walkLastTimePrecise;
|
if (current.animation.name == "walk") current.trackTime = walkLastTimePrecise;
|
||||||
animationState.apply(skeleton);
|
animationState.apply(skeleton);
|
||||||
skeleton.updateWorldTransform();
|
skeleton.updateWorldTransform();
|
||||||
|
|
||||||
@ -154,9 +141,10 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
|
|||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton, true);
|
||||||
renderer.drawSkeleton(skeletonSeq, true);
|
renderer.drawSkeleton(skeletonSeq, true);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
spritesheetsDemo.loadingComplete = loadingComplete;
|
||||||
|
spritesheetsDemo.render = render;
|
||||||
|
spritesheetsDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -9,12 +9,13 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<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
|
<input id="stretchyman-drawbones" type="checkbox"></input> Display bones
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
stretchymanDemo(spineDemos.setupRendering);
|
spineDemos.init();
|
||||||
|
spineDemos.addDemo(stretchymanDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</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_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
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_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);
|
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||||
|
|
||||||
function init () {
|
function init () {
|
||||||
canvas = document.getElementById("stretchyman-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
assetManager = spineDemos.assetManager;
|
assetManager = spineDemos.assetManager;
|
||||||
@ -42,43 +37,33 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
|||||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
return assetManager.get(DEMO_NAME, path);
|
||||||
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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman);
|
||||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
skeleton = new spine.Skeleton(skeletonData);
|
||||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman);
|
skeleton.setToSetupPose();
|
||||||
skeleton = new spine.Skeleton(skeletonData);
|
skeleton.updateWorldTransform();
|
||||||
skeleton.setToSetupPose();
|
var offset = new spine.Vector2();
|
||||||
skeleton.updateWorldTransform();
|
bounds = new spine.Vector2();
|
||||||
var offset = new spine.Vector2();
|
skeleton.getBounds(offset, bounds, []);
|
||||||
bounds = new spine.Vector2();
|
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
|
||||||
skeleton.getBounds(offset, bounds, []);
|
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||||
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
|
state.setAnimation(0, "idle", true);
|
||||||
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.x = offset.x + bounds.x / 2;
|
||||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||||
|
|
||||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||||
|
|
||||||
setupUI();
|
setupUI();
|
||||||
setupInput();
|
setupInput();
|
||||||
|
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupUI() {
|
function setupUI() {
|
||||||
@ -194,9 +179,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
|
|||||||
}
|
}
|
||||||
renderer.end();
|
renderer.end();
|
||||||
gl.lineWidth(1);
|
gl.lineWidth(1);
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
stretchymanDemo.loadingComplete = loadingComplete;
|
||||||
|
stretchymanDemo.render = render;
|
||||||
|
stretchymanDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -9,15 +9,15 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<div class="aspect"><div><canvas id="tank-canvas"></canvas></div></div>
|
<div class="aspect"></div>
|
||||||
<div id="tank-timeline" class="slider"></div>
|
<div id="tank-timeline" class="slider"></div>
|
||||||
<input id="tank-playbutton" type="button" value="Pause"></input><br>
|
<input id="tank-playbutton" type="button" value="Pause"></input><br>
|
||||||
<input id="tank-drawbones" type="checkbox"></input> Display bones
|
<input id="tank-drawbones" type="checkbox"></input> Display bones
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
spineDemos.loadSliders();
|
spineDemos.init();
|
||||||
tankDemo(spineDemos.setupRendering);
|
spineDemos.addDemo(tankDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
var tankDemo = function(loadingComplete, bgColor) {
|
var tankDemo = function(canvas, bgColor) {
|
||||||
var canvas, gl, renderer, input, assetManager;
|
var canvas, gl, renderer, input, assetManager;
|
||||||
var skeleton, state, offset, bounds;
|
var skeleton, state, offset, bounds;
|
||||||
var timeKeeper, loadingScreen;
|
var timeKeeper;
|
||||||
var playButton, timeLine, isPlaying = true, playTime = 0;
|
var playButton, timeLine, isPlaying = true, playTime = 0;
|
||||||
|
|
||||||
var DEMO_NAME = "TankDemo";
|
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);
|
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||||
|
|
||||||
function init () {
|
function init () {
|
||||||
canvas = document.getElementById("tank-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
assetManager = spineDemos.assetManager;
|
assetManager = spineDemos.assetManager;
|
||||||
@ -24,41 +19,32 @@ var tankDemo = function(loadingComplete, bgColor) {
|
|||||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
return assetManager.get(DEMO_NAME, path);
|
||||||
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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank);
|
||||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
skeleton = new spine.Skeleton(skeletonData);
|
||||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank);
|
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||||
skeleton = new spine.Skeleton(skeletonData);
|
state.setAnimation(0, "drive", true);
|
||||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
state.apply(skeleton);
|
||||||
state.setAnimation(0, "drive", true);
|
skeleton.updateWorldTransform();
|
||||||
state.apply(skeleton);
|
offset = new spine.Vector2();
|
||||||
skeleton.updateWorldTransform();
|
bounds = new spine.Vector2();
|
||||||
offset = new spine.Vector2();
|
offset.x = -1204.22;
|
||||||
bounds = new spine.Vector2();
|
bounds.x = 1914.52;
|
||||||
offset.x = -1204.22;
|
bounds.y = 965.78;
|
||||||
bounds.x = 1914.52;
|
// skeleton.getBounds(offset, bounds);
|
||||||
bounds.y = 965.78;
|
|
||||||
// skeleton.getBounds(offset, bounds);
|
|
||||||
|
|
||||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||||
|
|
||||||
setupUI();
|
setupUI();
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupUI() {
|
function setupUI() {
|
||||||
@ -126,9 +112,10 @@ var tankDemo = function(loadingComplete, bgColor) {
|
|||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton, true);
|
||||||
renderer.drawSkeletonDebug(skeleton, true);
|
renderer.drawSkeletonDebug(skeleton, true);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
tankDemo.loadingComplete = loadingComplete;
|
||||||
|
tankDemo.render = render;
|
||||||
|
tankDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -9,7 +9,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<div class="aspect"><div><canvas id="transforms-canvas"></canvas></div></div>
|
<div class="aspect"></div>
|
||||||
Rotation offset
|
Rotation offset
|
||||||
<div id="transforms-rotationoffset" class="slider filled"></div><br>
|
<div id="transforms-rotationoffset" class="slider filled"></div><br>
|
||||||
Translation mix
|
Translation mix
|
||||||
@ -17,8 +17,8 @@ Translation mix
|
|||||||
</center>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
spineDemos.loadSliders();
|
spineDemos.init();
|
||||||
transformsDemo(spineDemos.setupRendering);
|
spineDemos.addDemo(transformsDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</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_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
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_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 canvas, gl, renderer, input, assetManager;
|
||||||
var skeleton, state, bounds;
|
var skeleton, state, bounds;
|
||||||
var timeKeeper, loadingScreen;
|
var timeKeeper;
|
||||||
var rotateHandle;
|
var rotateHandle;
|
||||||
var target = null;
|
var target = null;
|
||||||
var hoverTargets = [null, null, 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);
|
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||||
|
|
||||||
function init () {
|
function init () {
|
||||||
canvas = document.getElementById("transforms-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
assetManager = spineDemos.assetManager;
|
assetManager = spineDemos.assetManager;
|
||||||
@ -36,45 +31,35 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
|||||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||||
input = new spine.webgl.Input(canvas);
|
input = new spine.webgl.Input(canvas);
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
return assetManager.get(DEMO_NAME, path);
|
||||||
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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms);
|
||||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
skeleton = new spine.Skeleton(skeletonData);
|
||||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms);
|
skeleton.setToSetupPose();
|
||||||
skeleton = new spine.Skeleton(skeletonData);
|
skeleton.updateWorldTransform();
|
||||||
skeleton.setToSetupPose();
|
var offset = new spine.Vector2();
|
||||||
skeleton.updateWorldTransform();
|
bounds = new spine.Vector2();
|
||||||
var offset = new spine.Vector2();
|
skeleton.getBounds(offset, bounds, []);
|
||||||
bounds = new spine.Vector2();
|
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||||
skeleton.getBounds(offset, bounds, []);
|
skeleton.setToSetupPose();
|
||||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
skeleton.updateWorldTransform();
|
||||||
skeleton.setToSetupPose();
|
rotateHandle = skeleton.findBone("rotate-handle");
|
||||||
skeleton.updateWorldTransform();
|
|
||||||
rotateHandle = skeleton.findBone("rotate-handle");
|
|
||||||
|
|
||||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||||
|
|
||||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||||
|
|
||||||
setupUI();
|
setupUI();
|
||||||
setupInput();
|
setupInput();
|
||||||
|
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupUI() {
|
function setupUI() {
|
||||||
@ -183,9 +168,10 @@ var transformsDemo = function(loadingComplete, bgColor) {
|
|||||||
}
|
}
|
||||||
gl.lineWidth(1);
|
gl.lineWidth(1);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
transformsDemo.loadingComplete = loadingComplete;
|
||||||
|
transformsDemo.render = render;
|
||||||
|
transformsDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -9,14 +9,15 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<div class="aspect"><div><canvas id="transitions-canvas"></canvas></div></div>
|
<div class="aspect"></div>
|
||||||
Time multiplier
|
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>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
spineDemos.loadSliders();
|
spineDemos.init();
|
||||||
transitionsDemo(spineDemos.setupRendering);
|
spineDemos.addDemo(transitionsDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</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 OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
|
||||||
|
|
||||||
var canvas, gl, renderer, input, assetManager;
|
var canvas, gl, renderer, input, assetManager;
|
||||||
var skeleton, skeletonNoMix, state, stateNoMix, bounds;
|
var skeleton, skeletonNoMix, state, stateNoMix, bounds;
|
||||||
var timeSlider, timeSliderLabel;
|
var timeSlider, timeSliderLabel;
|
||||||
var timeKeeper;
|
var timeKeeper;
|
||||||
var loadingScreen;
|
|
||||||
|
|
||||||
var DEMO_NAME = "TransitionsDemo";
|
var DEMO_NAME = "TransitionsDemo";
|
||||||
|
|
||||||
@ -15,13 +14,9 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
|||||||
timeSlider = $("#transitions-timeslider").data("slider");
|
timeSlider = $("#transitions-timeslider").data("slider");
|
||||||
timeSlider.set(0.5);
|
timeSlider.set(0.5);
|
||||||
timeSliderLabel = $("#transitions-timeslider-label")[0];
|
timeSliderLabel = $("#transitions-timeslider-label")[0];
|
||||||
canvas = document.getElementById("transitions-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
assetManager = spineDemos.assetManager;
|
assetManager = spineDemos.assetManager;
|
||||||
@ -33,66 +28,57 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
|||||||
|
|
||||||
input = new spine.webgl.Input(canvas);
|
input = new spine.webgl.Input(canvas);
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
skeleton = loadSkeleton("spineboy");
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
skeletonNoMix = new spine.Skeleton(skeleton.data);
|
||||||
skeleton = loadSkeleton("spineboy");
|
state = createState(0.25);
|
||||||
skeletonNoMix = new spine.Skeleton(skeleton.data);
|
state.multipleMixing = true;
|
||||||
state = createState(0.25);
|
setAnimations(state, 0, 0);
|
||||||
state.multipleMixing = true;
|
stateNoMix = createState(0);
|
||||||
setAnimations(state, 0);
|
setAnimations(stateNoMix, -0.25, 0);
|
||||||
stateNoMix = createState(0);
|
|
||||||
setAnimations(stateNoMix, -0.25);
|
|
||||||
|
|
||||||
state.apply(skeleton);
|
state.apply(skeleton);
|
||||||
skeleton.updateWorldTransform();
|
skeleton.updateWorldTransform();
|
||||||
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
|
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
|
||||||
skeleton.getBounds(bounds.offset, bounds.size, []);
|
skeleton.getBounds(bounds.offset, bounds.size, []);
|
||||||
setupInput();
|
setupInput();
|
||||||
$("#transitions-overlay").removeClass("overlay-hide");
|
$("#transitions-overlay").removeClass("overlay-hide");
|
||||||
$("#transitions-overlay").addClass("overlay");
|
$("#transitions-overlay").addClass("overlay");
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupInput() {
|
function setupInput() {
|
||||||
input.addListener({
|
$("#transitions-die").click(function () {
|
||||||
down: function(x, y) { },
|
var entry = state.setAnimation(0, "death", false);
|
||||||
up: function(x, y) { },
|
setAnimations(state, 0, true, 0);
|
||||||
moved: function(x, y) { },
|
entry.next.mixDuration = 0.1;
|
||||||
dragged: function(x, y) { }
|
|
||||||
|
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);
|
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||||
stateData.defaultMix = mix;
|
stateData.defaultMix = mix;
|
||||||
var state = new spine.AnimationState(stateData);
|
var state = new spine.AnimationState(stateData);
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAnimations(state, mix) {
|
function setAnimations (state, delay, first) {
|
||||||
state.addAnimation(0, "idle", true, 0.7);
|
state.addAnimation(0, "idle", true, first);
|
||||||
state.addAnimation(0, "walk", true, 0.7);
|
|
||||||
state.addAnimation(0, "idle", true, 0.8);
|
|
||||||
state.addAnimation(0, "run", true, 0.7);
|
|
||||||
state.addAnimation(0, "idle", true, 0.8);
|
|
||||||
state.addAnimation(0, "walk", true, 0.6);
|
state.addAnimation(0, "walk", true, 0.6);
|
||||||
state.addAnimation(0, "run", true, 0.6);
|
state.addAnimation(0, "jump", false, 1);
|
||||||
state.addAnimation(0, "jump", false, 0.6);
|
state.addAnimation(0, "run", true, delay);
|
||||||
state.addAnimation(0, "run", true, mix);
|
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, "jump", true, 0.5);
|
||||||
state.addAnimation(0, "run", true, mix).listener = {
|
state.addAnimation(0, "walk", true, delay).listener = {
|
||||||
start: function (trackIndex) {
|
start: function (trackIndex) {
|
||||||
setAnimations(state, mix);
|
setAnimations(state, delay, 0.6);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -134,7 +120,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
|||||||
state.update(delta);
|
state.update(delta);
|
||||||
state.apply(skeleton);
|
state.apply(skeleton);
|
||||||
skeleton.updateWorldTransform();
|
skeleton.updateWorldTransform();
|
||||||
skeleton.x = -300;
|
skeleton.x = -200;
|
||||||
skeleton.y = -100;
|
skeleton.y = -100;
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton, true);
|
||||||
|
|
||||||
@ -145,9 +131,10 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
|||||||
skeletonNoMix.y = -100;
|
skeletonNoMix.y = -100;
|
||||||
renderer.drawSkeleton(skeletonNoMix, true);
|
renderer.drawSkeleton(skeletonNoMix, true);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
transitionsDemo.loadingComplete = loadingComplete;
|
||||||
|
transitionsDemo.render = render;
|
||||||
|
transitionsDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
return render;
|
|
||||||
};
|
};
|
||||||
@ -3,9 +3,10 @@ var spineDemos = {
|
|||||||
HOVER_COLOR_OUTER: new spine.Color(1, 1, 1, 1),
|
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_INNER: new spine.Color(0.478, 0, 0, 0.5),
|
||||||
NON_HOVER_COLOR_OUTER: new spine.Color(1, 0, 0, 0.8),
|
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: [],
|
demos: [],
|
||||||
loopRunning: false
|
loopRunning: false,
|
||||||
|
canvases: []
|
||||||
};
|
};
|
||||||
(function () {
|
(function () {
|
||||||
var timeKeeper = new spine.TimeKeeper();
|
var timeKeeper = new spine.TimeKeeper();
|
||||||
@ -17,36 +18,77 @@ var spineDemos = {
|
|||||||
for (var i = 0; i < demos.length; i++) {
|
for (var i = 0; i < demos.length; i++) {
|
||||||
var demo = demos[i];
|
var demo = demos[i];
|
||||||
var canvas = demo.canvas;
|
var canvas = demo.canvas;
|
||||||
var renderFunc = demo.renderFunc;
|
|
||||||
if (demo.visible) {
|
checkElementVisible(demo);
|
||||||
if (spineDemos.log) console.log("Rendering " + canvas.id);
|
|
||||||
renderFunc();
|
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) {
|
function checkElementVisible(demo) {
|
||||||
var rect = demo.canvas.getBoundingClientRect();
|
const rect = demo.placeholder.getBoundingClientRect();
|
||||||
var x = 0, y = 0;
|
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
|
||||||
var width = (window.innerHeight || document.documentElement.clientHeight);
|
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
|
||||||
var height = (window.innerWidth || document.documentElement.clientWidth);
|
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
|
||||||
demo.visible = rect.left < x + width && rect.right > x && rect.top < y + height && rect.bottom > y;
|
const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
|
||||||
};
|
|
||||||
|
|
||||||
spineDemos.setupRendering = function (canvas, renderFunc) {
|
demo.visible = (vertInView && horInView);
|
||||||
var demo = {canvas: canvas, renderFunc: renderFunc, visible: false};
|
}
|
||||||
|
|
||||||
|
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() {
|
$(window).on('DOMContentLoaded load resize scroll', function() {
|
||||||
checkElementVisible(demo);
|
checkElementVisible(demo);
|
||||||
});
|
});
|
||||||
checkElementVisible(demo);
|
checkElementVisible(demo);
|
||||||
if (!spineDemos.loopRunning) {
|
|
||||||
loop();
|
|
||||||
spineDemos.loopRunning = true;
|
|
||||||
}
|
|
||||||
spineDemos.demos.push(demo);
|
spineDemos.demos.push(demo);
|
||||||
};
|
}
|
||||||
|
|
||||||
spineDemos.loadSliders = function () {
|
loadSliders = function () {
|
||||||
$(window).resize(function() {
|
$(window).resize(function() {
|
||||||
$(".slider").each(function () {
|
$(".slider").each(function () {
|
||||||
$(this).data("slider").resized();
|
$(this).data("slider").resized();
|
||||||
|
|||||||
@ -9,15 +9,15 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<div class="aspect"><div><canvas id="vine-canvas"></canvas></div></div>
|
<div class="aspect"></div>
|
||||||
<div id="vine-timeline" class="slider"></div>
|
<div id="vine-timeline" class="slider"></div>
|
||||||
<input id="vine-playbutton" type="button" value="Pause"></input><br>
|
<input id="vine-playbutton" type="button" value="Pause"></input><br>
|
||||||
<input id="vine-drawbones" type="checkbox"></input> Display bones & path
|
<input id="vine-drawbones" type="checkbox"></input> Display bones & path
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
spineDemos.loadSliders();
|
spineDemos.init();
|
||||||
vineDemo(spineDemos.setupRendering);
|
spineDemos.addDemo(vineDemo, document.getElementsByClassName("aspect")[0]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</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_INNER = new spine.Color(0.8, 0, 0, 0.5);
|
||||||
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
|
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_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 canvas, gl, renderer, input, assetManager;
|
||||||
var skeleton, state, bounds;
|
var skeleton, state, bounds;
|
||||||
var timeKeeper, loadingScreen;
|
var timeKeeper;
|
||||||
var target = null;
|
var target = null;
|
||||||
var hoverTargets = [null, null, null, null, null, null];
|
var hoverTargets = [null, null, null, null, null, null];
|
||||||
var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"];
|
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);
|
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||||
|
|
||||||
function init () {
|
function init () {
|
||||||
canvas = document.getElementById("vine-canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||||
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
gl = canvas.ctx.gl;
|
||||||
if (!gl) {
|
|
||||||
alert('WebGL is unavailable.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||||
input = new spine.webgl.Input(canvas);
|
input = new spine.webgl.Input(canvas);
|
||||||
@ -34,44 +29,34 @@ var vineDemo = function(loadingComplete, bgColor) {
|
|||||||
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
|
||||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||||
timeKeeper = new spine.TimeKeeper();
|
timeKeeper = new spine.TimeKeeper();
|
||||||
loadingScreen = new spine.webgl.LoadingScreen(renderer);
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function load () {
|
function loadingComplete () {
|
||||||
timeKeeper.update();
|
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
|
||||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
return assetManager.get(DEMO_NAME, path);
|
||||||
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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine);
|
||||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
skeleton = new spine.Skeleton(skeletonData);
|
||||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine);
|
skeleton.setToSetupPose();
|
||||||
skeleton = new spine.Skeleton(skeletonData);
|
skeleton.updateWorldTransform();
|
||||||
skeleton.setToSetupPose();
|
var offset = new spine.Vector2();
|
||||||
skeleton.updateWorldTransform();
|
bounds = new spine.Vector2();
|
||||||
var offset = new spine.Vector2();
|
skeleton.getBounds(offset, bounds, []);
|
||||||
bounds = new spine.Vector2();
|
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
||||||
skeleton.getBounds(offset, bounds, []);
|
state.setAnimation(0, "animation", true);
|
||||||
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
state.apply(skeleton);
|
||||||
state.setAnimation(0, "animation", true);
|
skeleton.updateWorldTransform();
|
||||||
state.apply(skeleton);
|
|
||||||
skeleton.updateWorldTransform();
|
|
||||||
|
|
||||||
renderer.camera.position.x = offset.x + bounds.x / 2;
|
renderer.camera.position.x = offset.x + bounds.x / 2;
|
||||||
renderer.camera.position.y = offset.y + bounds.y / 2;
|
renderer.camera.position.y = offset.y + bounds.y / 2;
|
||||||
|
|
||||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||||
|
|
||||||
setupUI();
|
setupUI();
|
||||||
setupInput();
|
setupInput();
|
||||||
|
|
||||||
loadingComplete(canvas, render);
|
|
||||||
} else {
|
|
||||||
loadingScreen.draw();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupUI() {
|
function setupUI() {
|
||||||
@ -187,9 +172,10 @@ var vineDemo = function(loadingComplete, bgColor) {
|
|||||||
}
|
}
|
||||||
gl.lineWidth(1);
|
gl.lineWidth(1);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
|
|
||||||
loadingScreen.draw(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
vineDemo.loadingComplete = loadingComplete;
|
||||||
|
vineDemo.render = render;
|
||||||
|
vineDemo.DEMO_NAME = DEMO_NAME;
|
||||||
init();
|
init();
|
||||||
};
|
};
|
||||||
@ -120,7 +120,7 @@ namespace Spine.Unity.Editor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (materials.arraySize == 0) {
|
if (materials.arraySize == 0) {
|
||||||
EditorGUILayout.HelpBox("Missing materials", MessageType.Error);
|
EditorGUILayout.HelpBox("No materials", MessageType.Error);
|
||||||
return;
|
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();
|
EditorGUILayout.Space();
|
||||||
if (atlasFile.objectReferenceValue != null) {
|
if (atlasFile.objectReferenceValue != null) {
|
||||||
if (SpineInspectorUtility.LargeCenteredButton(SpriteSlicesLabel)) {
|
if (SpineInspectorUtility.LargeCenteredButton(SpriteSlicesLabel)) {
|
||||||
@ -142,6 +151,8 @@ namespace Spine.Unity.Editor {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
EditorGUILayout.Space();
|
||||||
|
|
||||||
#if REGION_BAKING_MESH
|
#if REGION_BAKING_MESH
|
||||||
if (atlasFile.objectReferenceValue != null) {
|
if (atlasFile.objectReferenceValue != null) {
|
||||||
Atlas atlas = asset.GetAtlas();
|
Atlas atlas = asset.GetAtlas();
|
||||||
|
|||||||
@ -188,6 +188,8 @@ namespace Spine.Unity.Editor {
|
|||||||
const string SHOW_HIERARCHY_ICONS_KEY = "SPINE_SHOW_HIERARCHY_ICONS";
|
const string SHOW_HIERARCHY_ICONS_KEY = "SPINE_SHOW_HIERARCHY_ICONS";
|
||||||
public static bool showHierarchyIcons = DEFAULT_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 float DEFAULT_SCENE_ICONS_SCALE = 1f;
|
||||||
public const string SCENE_ICONS_SCALE_KEY = "SPINE_SCENE_ICONS_SCALE";
|
public const string SCENE_ICONS_SCALE_KEY = "SPINE_SCENE_ICONS_SCALE";
|
||||||
|
|
||||||
|
|||||||
@ -212,6 +212,7 @@ namespace Spine.Unity.Modules.AttachmentTools {
|
|||||||
|
|
||||||
public static class SpriteAtlasRegionExtensions {
|
public static class SpriteAtlasRegionExtensions {
|
||||||
internal const TextureFormat SpineTextureFormat = TextureFormat.RGBA32;
|
internal const TextureFormat SpineTextureFormat = TextureFormat.RGBA32;
|
||||||
|
internal const float DefaultMipmapBias = -0.5f;
|
||||||
internal const bool UseMipMaps = false;
|
internal const bool UseMipMaps = false;
|
||||||
internal const float DefaultScale = 0.01f;
|
internal const float DefaultScale = 0.01f;
|
||||||
|
|
||||||
@ -440,6 +441,7 @@ namespace Spine.Unity.Modules.AttachmentTools {
|
|||||||
|
|
||||||
// Fill a new texture with the collected attachment textures.
|
// Fill a new texture with the collected attachment textures.
|
||||||
var newTexture = new Texture2D(maxAtlasSize, maxAtlasSize, textureFormat, mipmaps);
|
var newTexture = new Texture2D(maxAtlasSize, maxAtlasSize, textureFormat, mipmaps);
|
||||||
|
newTexture.mipMapBias = SpriteAtlasRegionExtensions.DefaultMipmapBias;
|
||||||
newTexture.anisoLevel = texturesToPack[0].anisoLevel;
|
newTexture.anisoLevel = texturesToPack[0].anisoLevel;
|
||||||
newTexture.name = newName;
|
newTexture.name = newName;
|
||||||
var rects = newTexture.PackTextures(texturesToPack.ToArray(), padding, maxAtlasSize);
|
var rects = newTexture.PackTextures(texturesToPack.ToArray(), padding, maxAtlasSize);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user