UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '3.6' into 3.7-beta

Browse Source
This commit is contained in:
badlogic 2017-09-15 11:00:46 +02:00
commit 4dfb74c70e
40 changed files with 16407 additions and 10828 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
spine-c/spine-c/include/spine/dll.h
View File

@ -31,8 +31,6 @@
#ifndef SPINE_SHAREDLIB_H
#define SPINE_SHAREDLIB_H
#define SP_API
#ifdef _WIN32
#define DLLIMPORT __declspec(dllimport)
#define DLLEXPORT __declspec(dllexport)
@ -43,6 +41,8 @@
#ifdef SPINEPLUGIN_API
#define SP_API SPINEPLUGIN_API
#else
#define SP_API
#endif
#endif /* SPINE_SHAREDLIB_H */

5
spine-ts/README.md
View File

@ -71,10 +71,11 @@ The spine-ts WebGL demos load their image, atlas, and JSON files from our webser
- [Meshes](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/meshes.html)
- [Skins](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/skins.html)
- [Hoverboard](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/hoverboard.html)
- [Transform constraints](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/transforms.html)
- [Tank](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/tank.html)
- [Vine](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/vine.html)
- [Clipping](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/clipping.html)
- [Stretchyman](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/stretchyman.html)
- [Tank](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/tank.html)
- [Transform constraints](http://rawgit.com/EsotericSoftware/spine-runtimes/3.6/spine-ts/webgl/demos/transforms.html)
Please note that Chrome and possibly other browsers do not use the original CORS headers when loading cached resources. After the initial page load for a demo, you may need to forcefully refresh (hold `shift` and click refresh) or clear your browser cache.

1042
spine-ts/webgl/demos/assets/atlas1.atlas Executable file
View File

File diff suppressed because it is too large Load Diff

BIN
spine-ts/webgl/demos/assets/atlas1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

1063
spine-ts/webgl/demos/assets/atlas2.atlas Executable file
View File

File diff suppressed because it is too large Load Diff

BIN
spine-ts/webgl/demos/assets/atlas2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

1
spine-ts/webgl/demos/assets/demos.json Executable file
View File

File diff suppressed because one or more lines are too long

2911
spine-ts/webgl/demos/assets/heroes.atlas Executable file
View File

File diff suppressed because it is too large Load Diff

BIN
spine-ts/webgl/demos/assets/heroes.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 864 KiB

24
spine-ts/webgl/demos/clipping.html Normal file
View 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
View 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();
};

69
spine-ts/webgl/demos/demos.css
View File

@ -1,6 +1,5 @@
body, html {
margin: 0;
height: 100%;
font-family: Tahoma;
font-size: 11pt;
}
@ -12,16 +11,10 @@ br {
content: "";
margin-top: 15px;
}
.aspect {
margin-bottom: 15px;
max-width: 800px;
text-align: center;
h2 {
padding-top: 1em;
}
.aspect div {
position: relative;
padding-bottom: 70.14%;
}
.aspect canvas {
canvas {
position: absolute;
top: 0;
bottom: 0;
@ -29,8 +22,49 @@ br {
right: 0;
width: 100%;
height: 100%;
border: 1px solid black;
}
.aspect {
position: relative;
width: 100%;
}
.demo {
clear: both;
}
.demo-container {
float: left;
width: 58%;
}
.demo-text {
float: left;
width: 38%;
margin-left: 2%;
margin-right: 2%;
}
.timeline, .timeline td:nth-child(2) {
width: 100%;
}
.play {
background: black;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23F2F2F2%27%20d%3D%27M30.185%2C15.5L12.556%2C24.8V6.201L30.185%2C15.5z%27%2F%3E%3C%2Fsvg%3E");
width: 40px;
height: 30px;
}
.pause {
background: black;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M26.94%2C6.978v17.045h-5.249V6.978H26.94z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M18.975%2C6.978v17.045h-5.249V6.978H18.975z%22%2F%3E%3C%2Fsvg%3E");
width: 40px;
height: 30px;
margin: 0;
}
.checkbox {
display: inline;
}
.slider {
width: 100%;
max-width: 800px;
@ -38,6 +72,7 @@ br {
text-align: left;
transform: translateZ(0);
background: #222;
display: inline-block;
}
.slider, .slider.filled span {
height: 15px;
@ -73,3 +108,15 @@ br {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.overlay {
opacity: 1;
transition: opacity 0.5s ease;
z-index: 10;
}
.overlay-hide {
opacity: 0;
}
.overlay-label {
display: none;
}

335
spine-ts/webgl/demos/demos.html Normal file
View 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">&nbsp;</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">&nbsp;</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 &amp; 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 &amp; 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 &amp; 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">&nbsp;</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">&nbsp;</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
View 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");
});
});

10
spine-ts/webgl/demos/hoverboard.html
View File

@ -9,12 +9,16 @@
<body>
<center>
<div class="aspect"><div><canvas id="hoverboard-canvas"></canvas></div></div>
<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones
<div class="aspect"></div>
<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones<br>
<input id="hoverboard-aim" type="checkbox"></input> Aim<br>
<button id="hoverboard-shoot">Shoot</button>
<button id="hoverboard-jump">Jump</button>
</center>
<script>
hoverboardDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(hoverboardDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

72
spine-ts/webgl/demos/hoverboard.js
View File

@ -1,15 +1,15 @@
var hoverboardDemo = function(loadingComplete, bgColor) {
var hoverboardDemo = function(canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager;
var gl, renderer, input, assetManager;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var target = null;
var hoverTargets = [];
var controlBones = ["hoverboard controller", "hip controller", "board target"];
var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
var isPlaying = true;
@ -18,13 +18,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("hoverboard-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
@ -34,28 +29,25 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
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-hover"]);
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, "idle", true);
state.setAnimation(0, "hoverboard", true);
state.apply(skeleton);
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
for (var i = 0; i < controlBones.length; i++)
hoverTargets.push(null);
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
@ -65,15 +57,9 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
setupUI();
setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI() {
function setupUI () {
var checkbox = $("#hoverboard-drawbones");
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawPaths = false;
@ -82,9 +68,39 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
var aimTrack = 1;
var shootAimTrack = 2;
var shootTrack = 3;
$("#hoverboard-aim").change(function () {
if (!this.checked)
state.setEmptyAnimation(aimTrack, 0.2);
else {
state.setEmptyAnimation(aimTrack, 0);
state.addAnimation(aimTrack, "aim", true, 0).mixDuration = 0.2;
}
});
$("#hoverboard-shoot").click(function () {
state.setAnimation(shootAimTrack, "aim", true);
state.setAnimation(shootTrack, "shoot", false).listener = {
complete: function (trackIndex) {
state.setEmptyAnimation(shootAimTrack, 0.2);
state.clearTrack(shootTrack);
}
};
});
$("#hoverboard-jump").click(function () {
state.setAnimation(aimTrack, "jump", false);
state.addEmptyAnimation(aimTrack, 0.5, 0);
if ($("#hoverboard-aim").prop("checked"))
state.addAnimation(aimTrack, "aim", true, 0.4).mixDuration = 0.2;
});
}
function setupInput (){
function setupInput () {
input.addListener({
down: function(x, y) {
isPlaying = false;
@ -97,6 +113,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
}
},
up: function(x, y) {
if (target && target.data.name == "crosshair") $("#hoverboard-shoot").click();
target = null;
},
dragged: function(x, y) {
@ -154,9 +171,10 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
}
renderer.end();
gl.lineWidth(1);
loadingScreen.draw(true);
}
hoverboardDemo.loadingComplete = loadingComplete;
hoverboardDemo.render = render;
hoverboardDemo.DEMO_NAME = DEMO_NAME;
init();
};

6
spine-ts/webgl/demos/imagechanges.html
View File

@ -9,15 +9,15 @@
<body>
<center>
<div class="aspect"><div><canvas id="imagechanges-canvas"></canvas></div></div>
<div class="aspect"></div>
<div id="imagechanges-timeline" class="slider"></div>
<input id="imagechanges-playbutton" type="button" value="Pause"></input><br>
<select id="imagechanges-skeleton" size="2"></select>
</center>
<script>
spineDemos.loadSliders();
imageChangesDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(imageChangesDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

72
spine-ts/webgl/demos/imagechanges.js
View File

@ -1,4 +1,4 @@
var imageChangesDemo = function(loadingComplete, bgColor) {
var imageChangesDemo = function(canvas, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
@ -13,13 +13,8 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("imagechanges-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
@ -28,21 +23,12 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
function loadingComplete () {
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI() {
@ -107,12 +93,12 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
var regions = [];
for(var i = 0; i < sequenceSlots.length; i++) {
var slot = sequenceSlots[i];
var index = skeleton.findSlotIndex(slot);
for (var name in skeleton.skin.attachments[index]) {
var slot = skeleton.findSlot(sequenceSlots[i]);
sequenceSlots[i] = slot;
var index = slot.data.index;
for (var name in skeleton.skin.attachments[index])
regions.push(skeleton.skin.attachments[index][name]);
}
}
return {
atlas: atlas,
@ -138,17 +124,19 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
var offset = active.bounds.offset;
var size = active.bounds.size;
var x = offset.x + size.x + 100, offsetY = offset.y;
var x = offset.x + size.x + 100, offsetY = offset.y, zoom = 1;
if (activeSkeleton === "Alien") {
renderer.camera.position.x = offset.x + size.x;
renderer.camera.position.y = offset.y + size.y / 2;
renderer.camera.position.x = offset.x + size.x + 400;
renderer.camera.position.y = offset.y + size.y / 2 + 450;
x += 400;
zoom = 0.31;
} else {
renderer.camera.position.x = offset.x + size.x;
renderer.camera.position.y = offset.y + size.y / 2;
x += 100;
}
renderer.camera.viewportWidth = size.x * 2.4;
renderer.camera.viewportHeight = size.y * 1.4;
renderer.camera.viewportWidth = size.x * 2.4 / zoom;
renderer.camera.viewportHeight = size.y * 1.4 / zoom;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
@ -175,34 +163,21 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
var slotSize = size.y / 3;
var maxSlotWidth = 0;
var j = 0;
for (var i = 0; i < active.regions.length; i++) {
for (var i = 0, n = active.regions.length; i < n; i++) {
var region = active.regions[i].region;
var scale = Math.min(slotSize / region.height, slotSize / region.width);
var scale = Math.min(slotSize / region.height, slotSize / region.width) / zoom;
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
var isVisible = false;
for (var ii = 0; ii < active.slots.length; ii++) {
var slotName = active.slots[ii];
var slotIndex = skeleton.findSlotIndex(slotName);
for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
var slot = skeleton.drawOrder[iii];
if (slot.data.index == slotIndex) {
if (slot.attachment != null) {
if (slot.attachment.name === active.regions[i].name) {
isVisible = true;
var slot = active.slots[ii];
if (slot.attachment && slot.attachment.name === region.name) {
renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR);
break;
}
}
}
}
if (isVisible) break;
}
if (isVisible) renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR);
maxSlotWidth = Math.max(maxSlotWidth, region.width * scale);
y += slotSize;
y += slotSize / zoom + 2;
j++;
if (j == 3) {
x += maxSlotWidth + 10;
@ -213,9 +188,10 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
}
renderer.end();
loadingScreen.draw(true);
}
imageChangesDemo.loadingComplete = loadingComplete;
imageChangesDemo.render = render;
imageChangesDemo.DEMO_NAME = DEMO_NAME;
init();
};

6
spine-ts/webgl/demos/meshes.html
View File

@ -9,7 +9,7 @@
<body>
<center>
<div class="aspect"><div><canvas id="meshes-canvas"></canvas></div></div>
<div class="aspect"></div>
<div id="meshes-timeline" class="slider"></div>
<input id="meshes-playbutton" type="button" value="Pause"></input><br>
<select id="meshes-skeleton" size="3"></select><br>
@ -18,8 +18,8 @@
</center>
<script>
spineDemos.loadSliders();
meshesDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(meshesDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

38
spine-ts/webgl/demos/meshes.js
View File

@ -1,24 +1,18 @@
var meshesDemo = function(loadingComplete, bgColor) {
var meshesDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var timeKeeper, loadingScreen;
var skeletons = {};
var activeSkeleton = "Orange Girl";
var playButton, timeLine, isPlaying = true;
var playButton, timeline, isPlaying = true;
var DEMO_NAME = "MeshesDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("meshes-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = spineDemos.assetManager;
@ -27,22 +21,14 @@ var meshesDemo = function(loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
function loadingComplete () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
setupUI();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI() {
@ -57,8 +43,8 @@ var meshesDemo = function(loadingComplete, bgColor) {
playButton.click(playButtonUpdate);
playButton.addClass("pause");
timeLine = $("#meshes-timeline").data("slider");
timeLine.changed = function (percent) {
timeline = $("#meshes-timeline").data("slider");
timeline.changed = function (percent) {
if (isPlaying) playButton.click();
if (!isPlaying) {
var active = skeletons[activeSkeleton];
@ -82,7 +68,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
activeSkeleton = $("#meshes-skeleton option:selected").text();
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
timeLine.set(active.playTime / animationDuration);
timeline.set(active.playTime / animationDuration);
})
renderer.skeletonDebugRenderer.drawBones = false;
@ -150,10 +136,9 @@ var meshesDemo = function(loadingComplete, bgColor) {
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
active.playTime += delta;
while (active.playTime >= animationDuration) {
while (active.playTime >= animationDuration)
active.playTime -= animationDuration;
}
timeLine.set(active.playTime / animationDuration);
timeline.set(active.playTime / animationDuration);
state.update(delta);
state.apply(skeleton);
@ -164,9 +149,10 @@ var meshesDemo = function(loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton);
renderer.end();
loadingScreen.draw(true);
}
meshesDemo.loadingComplete = loadingComplete;
meshesDemo.render = render;
meshesDemo.DEMO_NAME = DEMO_NAME;
init();
};

5
spine-ts/webgl/demos/skins.html
View File

@ -9,7 +9,7 @@
<body>
<center>
<div class="aspect"><div><canvas id="skins-canvas"></canvas></div></div>
<div class="aspect"></div>
<select id="skins-skin"></select><br>
<button id="skins-randomizeattachments">Random Attachments</button>
<button id="skins-swingsword">Swing Sword</button><br>
@ -17,7 +17,8 @@
</center>
<script>
skinsDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(skinsDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

25
spine-ts/webgl/demos/skins.js
View File

@ -1,4 +1,4 @@
var skinsDemo = function(loadingComplete, bgColor) {
var skinsDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen;
@ -10,13 +10,8 @@ var skinsDemo = function(loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("skins-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
@ -26,13 +21,9 @@ var skinsDemo = function(loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
@ -54,11 +45,6 @@ var skinsDemo = function(loadingComplete, bgColor) {
skeleton.getBounds(offset, bounds, []);
setupUI();
setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupInput (){
@ -218,9 +204,10 @@ var skinsDemo = function(loadingComplete, bgColor) {
var height = scale * texture.getImage().height;
renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
renderer.end();
loadingScreen.draw(true);
}
skinsDemo.loadingComplete = loadingComplete;
skinsDemo.render = render;
skinsDemo.DEMO_NAME = DEMO_NAME;
init();
};

6
spine-ts/webgl/demos/spritesheets.html
View File

@ -9,7 +9,7 @@
<body>
<center>
<div class="aspect"><div><canvas id="spritesheets-canvas"></canvas></div></div>
<div class="aspect"></div>
<button id="spritesheets-roar">Roar</button>
<button id="spritesheets-jump">Jump</button><br>
Time multiplier
@ -17,8 +17,8 @@ Time multiplier
</center>
<script>
spineDemos.loadSliders();
spritesheetsDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(spritesheetsDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

30
spine-ts/webgl/demos/spritesheets.js
View File

@ -1,4 +1,4 @@
var spritesheetsDemo = function(loadingComplete, bgColor) {
var spritesheetsDemo = function(canvas, bgColor) {
var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8);
var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
@ -16,13 +16,8 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("spritesheets-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
@ -32,13 +27,9 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas);
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
function loadingComplete () {
skeletonAtlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
@ -48,6 +39,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
skeleton = new spine.Skeleton(skeletonData);
var stateData = new spine.AnimationStateData(skeleton.data);
stateData.defaultMix = 0.5;
stateData.setMix("jump", "walk", 0.3);
animationState = new spine.AnimationState(stateData);
animationState.setAnimation(0, "walk", true);
animationState.apply(skeleton);
@ -70,11 +62,6 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
$("#spritesheets-overlay").removeClass("overlay-hide");
$("#spritesheets-overlay").addClass("overlay");
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI () {
@ -107,7 +94,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
function resize () {
renderer.camera.position.x = offset.x + viewportWidth / 2 - 25;
renderer.camera.position.y = offset.y + viewportHeight / 2 - 160;
renderer.camera.position.y = offset.y + viewportHeight / 2 - 100;
renderer.camera.viewportWidth = viewportWidth * 1.2;
renderer.camera.viewportHeight = viewportHeight * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit);
@ -142,7 +129,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
animationState.update(delta);
var current = animationState.getCurrent(0);
if (current.animation.name == "walk") current.time = walkLastTimePrecise;
if (current.animation.name == "walk") current.trackTime = walkLastTimePrecise;
animationState.apply(skeleton);
skeleton.updateWorldTransform();
@ -154,9 +141,10 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeletonSeq, true);
renderer.end();
loadingScreen.draw(true);
}
spritesheetsDemo.loadingComplete = loadingComplete;
spritesheetsDemo.render = render;
spritesheetsDemo.DEMO_NAME = DEMO_NAME;
init();
};

5
spine-ts/webgl/demos/stretchyman.html
View File

@ -9,12 +9,13 @@
<body>
<center>
<div class="aspect"><div><canvas id="stretchyman-canvas"></canvas></div></div>
<div class="aspect"></div>
<input id="stretchyman-drawbones" type="checkbox"></input> Display bones
</center>
<script>
stretchymanDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(stretchymanDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

26
spine-ts/webgl/demos/stretchyman.js
View File

@ -1,4 +1,4 @@
var stretchymanDemo = function(loadingComplete, bgColor) {
var stretchymanDemo = function(canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -26,13 +26,8 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("stretchyman-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
@ -42,13 +37,9 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
@ -73,12 +64,6 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
setupUI();
setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI() {
@ -194,9 +179,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
}
renderer.end();
gl.lineWidth(1);
loadingScreen.draw(true);
}
stretchymanDemo.loadingComplete = loadingComplete;
stretchymanDemo.render = render;
stretchymanDemo.DEMO_NAME = DEMO_NAME;
init();
};

6
spine-ts/webgl/demos/tank.html
View File

@ -9,15 +9,15 @@
<body>
<center>
<div class="aspect"><div><canvas id="tank-canvas"></canvas></div></div>
<div class="aspect"></div>
<div id="tank-timeline" class="slider"></div>
<input id="tank-playbutton" type="button" value="Pause"></input><br>
<input id="tank-drawbones" type="checkbox"></input> Display bones
</center>
<script>
spineDemos.loadSliders();
tankDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(tankDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

27
spine-ts/webgl/demos/tank.js
View File

@ -1,7 +1,7 @@
var tankDemo = function(loadingComplete, bgColor) {
var tankDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen;
var timeKeeper;
var playButton, timeLine, isPlaying = true, playTime = 0;
var DEMO_NAME = "TankDemo";
@ -9,13 +9,8 @@ var tankDemo = function(loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("tank-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
@ -24,13 +19,9 @@ var tankDemo = function(loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
@ -54,11 +45,6 @@ var tankDemo = function(loadingComplete, bgColor) {
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI() {
@ -126,9 +112,10 @@ var tankDemo = function(loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, true);
renderer.end();
loadingScreen.draw(true);
}
tankDemo.loadingComplete = loadingComplete;
tankDemo.render = render;
tankDemo.DEMO_NAME = DEMO_NAME;
init();
};

6
spine-ts/webgl/demos/transforms.html
View File

@ -9,7 +9,7 @@
<body>
<center>
<div class="aspect"><div><canvas id="transforms-canvas"></canvas></div></div>
<div class="aspect"></div>
Rotation offset
<div id="transforms-rotationoffset" class="slider filled"></div><br>
Translation mix
@ -17,8 +17,8 @@ Translation mix
</center>
<script>
spineDemos.loadSliders();
transformsDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(transformsDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

28
spine-ts/webgl/demos/transforms.js
View File

@ -1,4 +1,4 @@
var transformsDemo = function(loadingComplete, bgColor) {
var transformsDemo = function(canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -6,7 +6,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var timeKeeper;
var rotateHandle;
var target = null;
var hoverTargets = [null, null, null];
@ -20,13 +20,8 @@ var transformsDemo = function(loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("transforms-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
@ -36,13 +31,9 @@ var transformsDemo = function(loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
@ -69,12 +60,6 @@ var transformsDemo = function(loadingComplete, bgColor) {
setupUI();
setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI() {
@ -183,9 +168,10 @@ var transformsDemo = function(loadingComplete, bgColor) {
}
gl.lineWidth(1);
renderer.end();
loadingScreen.draw(true);
}
transformsDemo.loadingComplete = loadingComplete;
transformsDemo.render = render;
transformsDemo.DEMO_NAME = DEMO_NAME;
init();
};

9
spine-ts/webgl/demos/transitions.html
View File

@ -9,14 +9,15 @@
<body>
<center>
<div class="aspect"><div><canvas id="transitions-canvas"></canvas></div></div>
<div class="aspect"></div>
Time multiplier
<div id="transitions-timeslider" class="slider filled"></div>
<div id="transitions-timeslider" class="slider filled"></div><br>
<button id="transitions-die">Die</button>
</center>
<script>
spineDemos.loadSliders();
transitionsDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(transitionsDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

71
spine-ts/webgl/demos/transitions.js
View File

@ -1,11 +1,10 @@
var transitionsDemo = function(loadingComplete, bgColor) {
var transitionsDemo = function(canvas, loadingComplete, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
var skeleton, skeletonNoMix, state, stateNoMix, bounds;
var timeSlider, timeSliderLabel;
var timeKeeper;
var loadingScreen;
var DEMO_NAME = "TransitionsDemo";
@ -15,13 +14,9 @@ var transitionsDemo = function(loadingComplete, bgColor) {
timeSlider = $("#transitions-timeslider").data("slider");
timeSlider.set(0.5);
timeSliderLabel = $("#transitions-timeslider-label")[0];
canvas = document.getElementById("transitions-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
@ -33,21 +28,16 @@ var transitionsDemo = function(loadingComplete, bgColor) {
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
function loadingComplete () {
skeleton = loadSkeleton("spineboy");
skeletonNoMix = new spine.Skeleton(skeleton.data);
state = createState(0.25);
state.multipleMixing = true;
setAnimations(state, 0);
setAnimations(state, 0, 0);
stateNoMix = createState(0);
setAnimations(stateNoMix, -0.25);
setAnimations(stateNoMix, -0.25, 0);
state.apply(skeleton);
skeleton.updateWorldTransform();
@ -56,43 +46,39 @@ var transitionsDemo = function(loadingComplete, bgColor) {
setupInput();
$("#transitions-overlay").removeClass("overlay-hide");
$("#transitions-overlay").addClass("overlay");
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupInput() {
input.addListener({
down: function(x, y) { },
up: function(x, y) { },
moved: function(x, y) { },
dragged: function(x, y) { }
$("#transitions-die").click(function () {
var entry = state.setAnimation(0, "death", false);
setAnimations(state, 0, true, 0);
entry.next.mixDuration = 0.1;
var entry = stateNoMix.setAnimation(0, "death", false);
setAnimations(stateNoMix, -0.25, -0.25 + -0.1);
});
}
function createState(mix) {
function createState (mix) {
var stateData = new spine.AnimationStateData(skeleton.data);
stateData.defaultMix = mix;
var state = new spine.AnimationState(stateData);
return state;
}
function setAnimations(state, mix) {
state.addAnimation(0, "idle", true, 0.7);
state.addAnimation(0, "walk", true, 0.7);
state.addAnimation(0, "idle", true, 0.8);
state.addAnimation(0, "run", true, 0.7);
state.addAnimation(0, "idle", true, 0.8);
function setAnimations (state, delay, first) {
state.addAnimation(0, "idle", true, first);
state.addAnimation(0, "walk", true, 0.6);
state.addAnimation(0, "run", true, 0.6);
state.addAnimation(0, "jump", false, 0.6);
state.addAnimation(0, "run", true, mix);
state.addAnimation(0, "jump", false, 1);
state.addAnimation(0, "run", true, delay);
state.addAnimation(0, "walk", true, 1.2);
state.addAnimation(0, "run", true, 0.5);
state.addAnimation(0, "jump", false, 1);
state.addAnimation(0, "run", true, delay);
state.addAnimation(0, "jump", true, 0.5);
state.addAnimation(0, "run", true, mix).listener = {
state.addAnimation(0, "walk", true, delay).listener = {
start: function (trackIndex) {
setAnimations(state, mix);
setAnimations(state, delay, 0.6);
}
};
}
@ -134,7 +120,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.x = -300;
skeleton.x = -200;
skeleton.y = -100;
renderer.drawSkeleton(skeleton, true);
@ -145,9 +131,10 @@ var transitionsDemo = function(loadingComplete, bgColor) {
skeletonNoMix.y = -100;
renderer.drawSkeleton(skeletonNoMix, true);
renderer.end();
loadingScreen.draw(true);
}
transitionsDemo.loadingComplete = loadingComplete;
transitionsDemo.render = render;
transitionsDemo.DEMO_NAME = DEMO_NAME;
init();
return render;
};

80
spine-ts/webgl/demos/utils.js
View File

@ -3,9 +3,10 @@ var spineDemos = {
HOVER_COLOR_OUTER: new spine.Color(1, 1, 1, 1),
NON_HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.5),
NON_HOVER_COLOR_OUTER: new spine.Color(1, 0, 0, 0.8),
assetManager: new spine.SharedAssetManager("http://esotericsoftware.com/demos/exports/"),
assetManager: new spine.SharedAssetManager("assets/"),
demos: [],
loopRunning: false
loopRunning: false,
canvases: []
};
(function () {
var timeKeeper = new spine.TimeKeeper();
@ -17,36 +18,77 @@ var spineDemos = {
for (var i = 0; i < demos.length; i++) {
var demo = demos[i];
var canvas = demo.canvas;
var renderFunc = demo.renderFunc;
checkElementVisible(demo);
if (!spineDemos.assetManager.isLoadingComplete(demo.DEMO_NAME)) {
if (demo.visible) {
if (canvas.parentElement != demo.placeholder) {
$(canvas).detach();
demo.placeholder.appendChild(canvas);
}
demo.loadingScreen.draw();
}
} else {
if (!demo.loaded) {
demo.loadingComplete();
demo.loaded = true;
}
if (demo.visible) {
if (canvas.parentElement != demo.placeholder) {
$(canvas).detach();
demo.placeholder.appendChild(canvas);
}
if (spineDemos.log) console.log("Rendering " + canvas.id);
renderFunc();
demo.render();
demo.loadingScreen.draw(true);
}
}
}
}
function checkElementVisible (demo) {
var rect = demo.canvas.getBoundingClientRect();
var x = 0, y = 0;
var width = (window.innerHeight || document.documentElement.clientHeight);
var height = (window.innerWidth || document.documentElement.clientWidth);
demo.visible = rect.left < x + width && rect.right > x && rect.top < y + height && rect.bottom > y;
};
function checkElementVisible(demo) {
const rect = demo.placeholder.getBoundingClientRect();
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
spineDemos.setupRendering = function (canvas, renderFunc) {
var demo = {canvas: canvas, renderFunc: renderFunc, visible: false};
demo.visible = (vertInView && horInView);
}
function createCanvases (numCanvases) {
for (var i = 0; i < numCanvases; i++) {
var canvas = document.createElement("canvas");
canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
canvas.id = "canvas-" + i;
spineDemos.canvases.push(canvas);
}
}
spineDemos.init = function () {
createCanvases(4);
loadSliders();
requestAnimationFrame(loop);
}
spineDemos.addDemo = function (demo, placeholder) {
var canvas = spineDemos.canvases[spineDemos.demos.length % spineDemos.canvases.length];
demo(canvas);
demo.placeholder = placeholder;
demo.canvas = canvas;
demo.visible = false;
var renderer = new spine.webgl.SceneRenderer(canvas, canvas.ctx.gl);
demo.loadingScreen = new spine.webgl.LoadingScreen(renderer);
$(window).on('DOMContentLoaded load resize scroll', function() {
checkElementVisible(demo);
});
checkElementVisible(demo);
if (!spineDemos.loopRunning) {
loop();
spineDemos.loopRunning = true;
}
spineDemos.demos.push(demo);
};
}
spineDemos.loadSliders = function () {
loadSliders = function () {
$(window).resize(function() {
$(".slider").each(function () {
$(this).data("slider").resized();

6
spine-ts/webgl/demos/vine.html
View File

@ -9,15 +9,15 @@
<body>
<center>
<div class="aspect"><div><canvas id="vine-canvas"></canvas></div></div>
<div class="aspect"></div>
<div id="vine-timeline" class="slider"></div>
<input id="vine-playbutton" type="button" value="Pause"></input><br>
<input id="vine-drawbones" type="checkbox"></input> Display bones &amp; path
</center>
<script>
spineDemos.loadSliders();
vineDemo(spineDemos.setupRendering);
spineDemos.init();
spineDemos.addDemo(vineDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>

28
spine-ts/webgl/demos/vine.js
View File

@ -1,4 +1,4 @@
var vineDemo = function(loadingComplete, bgColor) {
var vineDemo = function(canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -6,7 +6,7 @@ var vineDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var timeKeeper;
var target = null;
var hoverTargets = [null, null, null, null, null, null];
var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"];
@ -18,13 +18,8 @@ var vineDemo = function(loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("vine-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas);
@ -34,13 +29,9 @@ var vineDemo = function(loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
@ -66,12 +57,6 @@ var vineDemo = function(loadingComplete, bgColor) {
setupUI();
setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI() {
@ -187,9 +172,10 @@ var vineDemo = function(loadingComplete, bgColor) {
}
gl.lineWidth(1);
renderer.end();
loadingScreen.draw(true);
}
vineDemo.loadingComplete = loadingComplete;
vineDemo.render = render;
vineDemo.DEMO_NAME = DEMO_NAME;
init();
};

13
spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs
View File

@ -120,7 +120,7 @@ namespace Spine.Unity.Editor {
}
if (materials.arraySize == 0) {
EditorGUILayout.HelpBox("Missing materials", MessageType.Error);
EditorGUILayout.HelpBox("No materials", MessageType.Error);
return;
}
@ -133,6 +133,15 @@ namespace Spine.Unity.Editor {
}
}
EditorGUILayout.Space();
if (SpineInspectorUtility.LargeCenteredButton(SpineInspectorUtility.TempContent("Set Mipmap Bias to " + SpineEditorUtilities.DEFAULT_MIPMAPBIAS))) {
foreach (var m in atlasAsset.materials) {
var texture = m.mainTexture;
texture.mipMapBias = SpineEditorUtilities.DEFAULT_MIPMAPBIAS;
}
Debug.Log("Texture mipmap bias set to " + SpineEditorUtilities.DEFAULT_MIPMAPBIAS);
}
EditorGUILayout.Space();
if (atlasFile.objectReferenceValue != null) {
if (SpineInspectorUtility.LargeCenteredButton(SpriteSlicesLabel)) {
@ -142,6 +151,8 @@ namespace Spine.Unity.Editor {
}
}
EditorGUILayout.Space();
#if REGION_BAKING_MESH
if (atlasFile.objectReferenceValue != null) {
Atlas atlas = asset.GetAtlas();

2
spine-unity/Assets/spine-unity/Editor/SpineEditorUtilities.cs
View File

@ -188,6 +188,8 @@ namespace Spine.Unity.Editor {
const string SHOW_HIERARCHY_ICONS_KEY = "SPINE_SHOW_HIERARCHY_ICONS";
public static bool showHierarchyIcons = DEFAULT_SHOW_HIERARCHY_ICONS;
internal const float DEFAULT_MIPMAPBIAS = -0.5f;
public const float DEFAULT_SCENE_ICONS_SCALE = 1f;
public const string SCENE_ICONS_SCALE_KEY = "SPINE_SCENE_ICONS_SCALE";

2
spine-unity/Assets/spine-unity/Modules/AttachmentTools/AttachmentTools.cs
View File

@ -212,6 +212,7 @@ namespace Spine.Unity.Modules.AttachmentTools {
public static class SpriteAtlasRegionExtensions {
internal const TextureFormat SpineTextureFormat = TextureFormat.RGBA32;
internal const float DefaultMipmapBias = -0.5f;
internal const bool UseMipMaps = false;
internal const float DefaultScale = 0.01f;
@ -440,6 +441,7 @@ namespace Spine.Unity.Modules.AttachmentTools {
// Fill a new texture with the collected attachment textures.
var newTexture = new Texture2D(maxAtlasSize, maxAtlasSize, textureFormat, mipmaps);
newTexture.mipMapBias = SpriteAtlasRegionExtensions.DefaultMipmapBias;
newTexture.anisoLevel = texturesToPack[0].anisoLevel;
newTexture.name = newName;
var rects = newTexture.PackTextures(texturesToPack.ToArray(), padding, maxAtlasSize);