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

Added clipping demo.

Browse Source
This commit is contained in:
Nathan Sweet 2017-09-11 21:53:45 +02:00
parent e00803b2c7
commit b493b0ad67
3 changed files with 163 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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><canvas id="clipping-canvas"></canvas></div></div>
<div id="clipping-timeline" class="slider"></div>
<input id="clipping-playbutton" type="button" value="Pause"></input><br>
<input id="clipping-drawtriangles" type="checkbox"></input> Draw triangles<br>
</center>
<script>
spineDemos.loadSliders();
clippingDemo(spineDemos.setupRendering);
</script>
</body>
</html>

133
spine-ts/webgl/demos/clipping.js Normal file
View File

@ -0,0 +1,133 @@
var clippingDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, assetManager;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
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 = document.getElementById("clipping-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;
}
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();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
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();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
}
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.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();
loadingScreen.draw(true);
}
init();
};

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

@ -4,7 +4,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
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";
@ -57,8 +57,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 +82,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 +150,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);