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

[ts] Fixed examples to use full page size and scale animations automatically

Browse Source
This commit is contained in:
badlogic 2016-08-19 12:18:26 +02:00
parent 24404b4adf
commit 1a24433403
9 changed files with 152 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spine-ts/build/spine-all.js
View File

@ -2593,7 +2593,7 @@ var spine;
else if (attachment instanceof spine.MeshAttachment) else if (attachment instanceof spine.MeshAttachment)
vertices = attachment.updateWorldVertices(slot, true); vertices = attachment.updateWorldVertices(slot, true);
if (vertices != null) { if (vertices != null) {
for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) { for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
var x = vertices[ii], y = vertices[ii + 1]; var x = vertices[ii], y = vertices[ii + 1];
minX = Math.min(minX, x); minX = Math.min(minX, x);
minY = Math.min(minY, y); minY = Math.min(minY, y);

2
spine-ts/build/spine-core.js
View File

@ -2593,7 +2593,7 @@ var spine;
else if (attachment instanceof spine.MeshAttachment) else if (attachment instanceof spine.MeshAttachment)
vertices = attachment.updateWorldVertices(slot, true); vertices = attachment.updateWorldVertices(slot, true);
if (vertices != null) { if (vertices != null) {
for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) { for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
var x = vertices[ii], y = vertices[ii + 1]; var x = vertices[ii], y = vertices[ii + 1];
minX = Math.min(minX, x); minX = Math.min(minX, x);
minY = Math.min(minY, y); minY = Math.min(minY, y);

2
spine-ts/build/spine-threejs.js
View File

@ -2351,7 +2351,7 @@ var spine;
else if (attachment instanceof spine.MeshAttachment) else if (attachment instanceof spine.MeshAttachment)
vertices = attachment.updateWorldVertices(slot, true); vertices = attachment.updateWorldVertices(slot, true);
if (vertices != null) { if (vertices != null) {
for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) { for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
var x = vertices[ii], y = vertices[ii + 1]; var x = vertices[ii], y = vertices[ii + 1];
minX = Math.min(minX, x); minX = Math.min(minX, x);
minY = Math.min(minY, y); minY = Math.min(minY, y);

2
spine-ts/build/spine-webgl.js
View File

@ -2351,7 +2351,7 @@ var spine;
else if (attachment instanceof spine.MeshAttachment) else if (attachment instanceof spine.MeshAttachment)
vertices = attachment.updateWorldVertices(slot, true); vertices = attachment.updateWorldVertices(slot, true);
if (vertices != null) { if (vertices != null) {
for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) { for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
var x = vertices[ii], y = vertices[ii + 1]; var x = vertices[ii], y = vertices[ii + 1];
minX = Math.min(minX, x); minX = Math.min(minX, x);
minY = Math.min(minY, y); minY = Math.min(minY, y);

2
spine-ts/build/spine-widget.js
View File

@ -2351,7 +2351,7 @@ var spine;
else if (attachment instanceof spine.MeshAttachment) else if (attachment instanceof spine.MeshAttachment)
vertices = attachment.updateWorldVertices(slot, true); vertices = attachment.updateWorldVertices(slot, true);
if (vertices != null) { if (vertices != null) {
for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) { for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
var x = vertices[ii], y = vertices[ii + 1]; var x = vertices[ii], y = vertices[ii + 1];
minX = Math.min(minX, x); minX = Math.min(minX, x);
minY = Math.min(minY, y); minY = Math.min(minY, y);

81
spine-ts/canvas/example/index.html
View File

@ -1,41 +1,39 @@
<html> <html>
<script src="../../build/spine-canvas.js"></script> <script src="../../build/spine-canvas.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body> <body>
<center> <canvas id="canvas"></canvas>
<canvas id="canvas" style="width: 640; height: 480"></canvas>
</center>
</body> </body>
<script> <script>
var lastFrameTime = Date.now() / 1000; var lastFrameTime = Date.now() / 1000;
var canvas; var canvas, context;
var context;
var assetManager; var assetManager;
var skeleton; var skeleton, state, bounds;
var state;
var skeletonRenderer; var skeletonRenderer;
function init () { function init () {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = 640; canvas.width = window.innerWidth;
canvas.height = 480; canvas.height = window.innerHeight;
context = canvas.getContext("2d"); context = canvas.getContext("2d");
skeletonRenderer = new spine.canvas.SkeletonRenderer(context); skeletonRenderer = new spine.canvas.SkeletonRenderer(context);
// enable debug rendering // enable debug rendering
skeletonRenderer.debugRendering = true; skeletonRenderer.debugRendering = true;
// enable the triangle renderer, supports meshes, but may produce artifacts in some browsers // enable the triangle renderer, supports meshes, but may produce artifacts in some browsers
skeletonRenderer.triangleRendering = true; skeletonRenderer.triangleRendering = false;
assetManager = new spine.canvas.AssetManager(); assetManager = new spine.canvas.AssetManager();
assetManager.loadText("assets/spineboy.json"); assetManager.loadText("assets/spineboy.json");
assetManager.loadText("assets/spineboy.atlas"); assetManager.loadText("assets/spineboy.atlas");
assetManager.loadTexture("assets/spineboy.png"); assetManager.loadTexture("assets/spineboy.png");
assetManager.loadText("assets/test.json");
assetManager.loadText("assets/test.atlas");
assetManager.loadTexture("assets/test.png");
assetManager.loadText("assets/raptor.json"); assetManager.loadText("assets/raptor.json");
assetManager.loadText("assets/raptor.atlas"); assetManager.loadText("assets/raptor.atlas");
assetManager.loadTexture("assets/raptor.png"); assetManager.loadTexture("assets/raptor.png");
@ -45,16 +43,17 @@ function init () {
function load () { function load () {
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var data = loadSkeleton("spineboy", 0.7, "walk", 320, 460, "default"); var data = loadSkeleton("spineboy", "walk", "default");
skeleton = data.skeleton; skeleton = data.skeleton;
state = data.state; state = data.state;
bounds = data.bounds;
requestAnimationFrame(render); requestAnimationFrame(render);
} else { } else {
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function loadSkeleton (name, scale, initialAnimation, positionX, positionY, skin) { function loadSkeleton (name, initialAnimation, skin) {
if (skin === undefined) skin = "default"; if (skin === undefined) skin = "default";
// Load the texture atlas using name.atlas and name.png from the AssetManager. // Load the texture atlas using name.atlas and name.png from the AssetManager.
@ -70,12 +69,10 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, skin
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
// Set the scale to apply during parsing, parse the file, and create a new skeleton. // Set the scale to apply during parsing, parse the file, and create a new skeleton.
skeletonJson.scale = scale;
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json")); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
var skeleton = new spine.Skeleton(skeletonData); var skeleton = new spine.Skeleton(skeletonData);
skeleton.x = positionX;
skeleton.y = positionY;
skeleton.flipY = true; skeleton.flipY = true;
var bounds = calculateBounds(skeleton);
skeleton.setSkinByName(skin); skeleton.setSkinByName(skin);
// Create an AnimationState, and set the initial animation in looping mode. // Create an AnimationState, and set the initial animation in looping mode.
@ -97,7 +94,17 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, skin
}) })
// Pack everything up and return to caller. // Pack everything up and return to caller.
return { skeleton: skeleton, state: animationState }; return { skeleton: skeleton, state: animationState, bounds: bounds };
}
function calculateBounds(skeleton) {
var data = skeleton.data;
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds(offset, size);
return { offset: offset, size: size };
} }
function render () { function render () {
@ -105,18 +112,46 @@ function render () {
var delta = now - lastFrameTime; var delta = now - lastFrameTime;
lastFrameTime = now; lastFrameTime = now;
resize();
context.save();
context.setTransform(1, 0, 0, 1, 0, 0);
context.fillStyle = "#cccccc";
context.fillRect(0, 0, canvas.width, canvas.height);
context.restore();
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
context.fillStyle = "#cccccc";
context.fillRect(0, 0, canvas.width, canvas.height);
skeletonRenderer.draw(skeleton); skeletonRenderer.draw(skeleton);
requestAnimationFrame(render); requestAnimationFrame(render);
} }
function resize () {
var w = canvas.clientWidth;
var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
}
// magic
var centerX = bounds.offset.x + bounds.size.x / 2;
var centerY = bounds.offset.y + bounds.size.y / 2;
var scaleX = bounds.size.x / canvas.width;
var scaleY = bounds.size.y / canvas.height;
var scale = Math.max(scaleX, scaleY) * 1.2;
if (scale < 1) scale = 1;
var width = canvas.width * scale;
var height = canvas.height * scale;
context.resetTransform();
context.scale(1 / scale, 1 / scale);
context.translate(-centerX, -centerY);
context.translate(width / 2, height / 2);
}
(function() { (function() {
init(); init();
}()); }());

2
spine-ts/core/src/Skeleton.ts
View File

@ -449,7 +449,7 @@ module spine {
else if (attachment instanceof MeshAttachment) // else if (attachment instanceof MeshAttachment) //
vertices = (<MeshAttachment>attachment).updateWorldVertices(slot, true); vertices = (<MeshAttachment>attachment).updateWorldVertices(slot, true);
if (vertices != null) { if (vertices != null) {
for (let ii = 0, nn = vertices.length; ii < nn; ii += 5) { for (let ii = 0, nn = vertices.length; ii < nn; ii += 8) {
let x = vertices[ii], y = vertices[ii + 1]; let x = vertices[ii], y = vertices[ii + 1];
minX = Math.min(minX, x); minX = Math.min(minX, x);
minY = Math.min(minY, y); minY = Math.min(minY, y);

28
spine-ts/threejs/example/index.html
View File

@ -5,23 +5,31 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
<script src="../../build/spine-threejs.js"></script> <script src="../../build/spine-threejs.js"></script>
</head> </head>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body> <body>
<script> <script>
var scene, camera, renderer; var scene, camera, renderer;
var geometry, material, mesh, skeletonMesh; var geometry, material, mesh, skeletonMesh;
var assetManager; var assetManager;
var canvas;
var lastFrameTime = Date.now() / 1000; var lastFrameTime = Date.now() / 1000;
function init () { function init () {
// create the THREE.JS camera, scene and renderer (WebGL) // create the THREE.JS camera, scene and renderer (WebGL)
var width = 640, height = 480; var width = window.innerWidth, height = window.innerHeight;
camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000); camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
camera.position.y = 100;
camera.position.z = 400; camera.position.z = 400;
scene = new THREE.Scene(); scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer(); renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); renderer.setSize(width, height);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
canvas = renderer.domElement;
// load the assets required to display the Raptor model // load the assets required to display the Raptor model
assetManager = new spine.threejs.AssetManager(); assetManager = new spine.threejs.AssetManager();
@ -82,6 +90,9 @@ function render() {
var delta = now - lastFrameTime; var delta = now - lastFrameTime;
lastFrameTime = now; lastFrameTime = now;
// resize canvas to use full page, adjust camera/renderer
resize();
// rotate the cube // rotate the cube
mesh.rotation.x = Math.sin(now) * Math.PI * 0.2; mesh.rotation.x = Math.sin(now) * Math.PI * 0.2;
mesh.rotation.y = Math.cos(now) * Math.PI * 0.4; mesh.rotation.y = Math.cos(now) * Math.PI * 0.4;
@ -94,6 +105,21 @@ function render() {
requestAnimationFrame(render); requestAnimationFrame(render);
} }
function resize () {
var w = window.innerWidth;
var h = window.innerHeight;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
}
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize(w, h);
}
(function() { (function() {
init(); init();
}()); }());

72
spine-ts/webgl/example/index.html
View File

@ -1,12 +1,19 @@
<html> <html>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body> <body>
<canvas id="canvas"></canvas>
<center> <center>
<canvas id="canvas" style="width: 640; height: 480"></canvas></br> <div style="color: #fff; position: fixed; top: 0; width: 100%">
<span>Skeleton:</span><select id="skeletonList"></select> <span>Skeleton:</span><select id="skeletonList"></select>
<span>Animation:</span><select id="animationList"></select> <span>Animation:</span><select id="animationList"></select>
<span>Skin:</span><select id="skinList"></select> <span>Skin:</span><select id="skinList"></select>
<div>
</center> </center>
</body> </body>
<script> <script>
@ -20,21 +27,21 @@ var mvp = new spine.webgl.Matrix4();
var assetManager; var assetManager;
var skeletonRenderer; var skeletonRenderer;
var skeletons = {}; var skeletons = {};
var activeSkeleton = "raptor"; var activeSkeleton = "spineboy";
function init () { function init () {
// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when // Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
// loading textures. That is handled separately by PolygonBatcher. // loading textures. That is handled separately by PolygonBatcher.
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = 640; canvas.width = window.innerWidth;
canvas.height = 480; canvas.height = window.innerHeight;
var config = { alpha: false }; var config = { alpha: false };
gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config); gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer. // Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
shader = spine.webgl.Shader.newColoredTextured(gl); shader = spine.webgl.Shader.newColoredTextured(gl);
batcher = new spine.webgl.PolygonBatcher(gl); batcher = new spine.webgl.PolygonBatcher(gl);
mvp.ortho2d(0, 0, 639, 479); mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl); skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
assetManager = new spine.webgl.AssetManager(gl); assetManager = new spine.webgl.AssetManager(gl);
@ -61,11 +68,11 @@ function init () {
function load () { function load () {
// Wait until the AssetManager has loaded all resources, then load the skeletons. // Wait until the AssetManager has loaded all resources, then load the skeletons.
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
skeletons["spineboy"] = loadSkeleton("spineboy", 0.5, "test", 320, 20, false); skeletons["spineboy"] = loadSkeleton("spineboy", "run", false);
skeletons["raptor"] = loadSkeleton("raptor", 0.4, "walk", 320, 20, false); skeletons["raptor"] = loadSkeleton("raptor", "walk", false);
skeletons["tank"] = loadSkeleton("tank", 0.3, "drive", 400, 20, false); skeletons["tank"] = loadSkeleton("tank", "drive", false);
skeletons["goblins"] = loadSkeleton("goblins-mesh", 1, "walk", 320, 20, true, "goblin"); skeletons["goblins"] = loadSkeleton("goblins-mesh", "walk", true, "goblin");
skeletons["vine"] = loadSkeleton("vine", 0.5, "animation", 320, 20, false); skeletons["vine"] = loadSkeleton("vine", "animation", false);
setupUI(); setupUI();
requestAnimationFrame(render); requestAnimationFrame(render);
} else { } else {
@ -73,7 +80,7 @@ function load () {
} }
} }
function loadSkeleton (name, scale, initialAnimation, positionX, positionY, premultipliedAlpha, skin) { function loadSkeleton (name, initialAnimation, premultipliedAlpha, skin) {
if (skin === undefined) skin = "default"; if (skin === undefined) skin = "default";
// Load the texture atlas using name.atlas and name.png from the AssetManager. // Load the texture atlas using name.atlas and name.png from the AssetManager.
@ -89,11 +96,9 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, prem
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
// Set the scale to apply during parsing, parse the file, and create a new skeleton. // Set the scale to apply during parsing, parse the file, and create a new skeleton.
skeletonJson.scale = scale;
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json")); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
var skeleton = new spine.Skeleton(skeletonData); var skeleton = new spine.Skeleton(skeletonData);
skeleton.x = positionX; var bounds = calculateBounds(skeleton);
skeleton.y = positionY;
skeleton.setSkinByName(skin); skeleton.setSkinByName(skin);
// Create an AnimationState, and set the initial animation in looping mode. // Create an AnimationState, and set the initial animation in looping mode.
@ -115,7 +120,17 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, prem
}) })
// Pack everything up and return to caller. // Pack everything up and return to caller.
return { skeleton: skeleton, state: animationState, premultipliedAlpha: premultipliedAlpha }; return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
}
function calculateBounds(skeleton) {
var data = skeleton.data;
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds(offset, size);
return { offset: offset, size: size };
} }
function setupUI () { function setupUI () {
@ -146,6 +161,7 @@ function setupUI () {
var animationName = $("#animationList option:selected").text(); var animationName = $("#animationList option:selected").text();
skeleton.setToSetupPose(); skeleton.setToSetupPose();
state.setAnimation(0, animationName, true); state.setAnimation(0, animationName, true);
scaleAndCenter(skeleton);
}) })
} }
@ -184,6 +200,9 @@ function render () {
var delta = now - lastFrameTime; var delta = now - lastFrameTime;
lastFrameTime = now; lastFrameTime = now;
// Update the MVP matrix to adjust for canvas size changes
resize();
gl.clearColor(0.3, 0.3, 0.3, 1); gl.clearColor(0.3, 0.3, 0.3, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
@ -211,6 +230,29 @@ function render () {
requestAnimationFrame(render); requestAnimationFrame(render);
} }
function resize () {
var w = canvas.clientWidth;
var h = canvas.clientHeight;
var bounds = skeletons[activeSkeleton].bounds;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
}
// magic
var centerX = bounds.offset.x + bounds.size.x / 2;
var centerY = bounds.offset.y + bounds.size.y / 2;
var scaleX = bounds.size.x / canvas.width;
var scaleY = bounds.size.y / canvas.height;
var scale = Math.max(scaleX, scaleY) * 1.2;
if (scale < 1) scale = 1;
var width = canvas.width * scale;
var height = canvas.height * scale;
mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
gl.viewport(0, 0, canvas.width, canvas.height);
}
(function() { (function() {
init(); init();
})(); })();