UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-11 09:38:44 +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)
vertices = attachment.updateWorldVertices(slot, true);
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];
minX = Math.min(minX, x);
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)
vertices = attachment.updateWorldVertices(slot, true);
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];
minX = Math.min(minX, x);
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)
vertices = attachment.updateWorldVertices(slot, true);
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];
minX = Math.min(minX, x);
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)
vertices = attachment.updateWorldVertices(slot, true);
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];
minX = Math.min(minX, x);
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)
vertices = attachment.updateWorldVertices(slot, true);
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];
minX = Math.min(minX, x);
minY = Math.min(minY, y);

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

@ -1,41 +1,39 @@
<html>
<script src="../../build/spine-canvas.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>
<center>
<canvas id="canvas" style="width: 640; height: 480"></canvas>
</center>
<canvas id="canvas"></canvas>
</body>
<script>
var lastFrameTime = Date.now() / 1000;
var canvas;
var context;
var canvas, context;
var assetManager;
var skeleton;
var state;
var skeleton, state, bounds;
var skeletonRenderer;
function init () {
canvas = document.getElementById("canvas");
canvas.width = 640;
canvas.height = 480;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context = canvas.getContext("2d");
skeletonRenderer = new spine.canvas.SkeletonRenderer(context);
// enable debug rendering
skeletonRenderer.debugRendering = true;
// 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.loadText("assets/spineboy.json");
assetManager.loadText("assets/spineboy.atlas");
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.atlas");
assetManager.loadTexture("assets/raptor.png");
@ -45,16 +43,17 @@ function init () {
function load () {
if (assetManager.isLoadingComplete()) {
var data = loadSkeleton("spineboy", 0.7, "walk", 320, 460, "default");
var data = loadSkeleton("spineboy", "walk", "default");
skeleton = data.skeleton;
state = data.state;
state = data.state;
bounds = data.bounds;
requestAnimationFrame(render);
} else {
requestAnimationFrame(load);
}
}
function loadSkeleton (name, scale, initialAnimation, positionX, positionY, skin) {
function loadSkeleton (name, initialAnimation, skin) {
if (skin === undefined) skin = "default";
// Load the texture atlas using name.atlas and name.png from the AssetManager.
@ -69,13 +68,11 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, skin
// Create a SkeletonJson instance for parsing the .json file.
var skeletonJson = new spine.SkeletonJson(atlasLoader);
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
skeletonJson.scale = scale;
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
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);
// 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.
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 () {
@ -105,18 +112,46 @@ function render () {
var delta = now - lastFrameTime;
lastFrameTime = now;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
resize();
context.save();
context.setTransform(1, 0, 0, 1, 0, 0);
context.fillStyle = "#cccccc";
context.fillRect(0, 0, canvas.width, canvas.height);
context.restore();
skeletonRenderer.draw(skeleton);
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeletonRenderer.draw(skeleton);
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() {
init();
}());

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

@ -449,7 +449,7 @@ module spine {
else if (attachment instanceof MeshAttachment) //
vertices = (<MeshAttachment>attachment).updateWorldVertices(slot, true);
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];
minX = Math.min(minX, x);
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="../../build/spine-threejs.js"></script>
</head>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body>
<script>
var scene, camera, renderer;
var geometry, material, mesh, skeletonMesh;
var assetManager;
var canvas;
var lastFrameTime = Date.now() / 1000;
function init () {
// 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.position.y = 100;
camera.position.z = 400;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
canvas = renderer.domElement;
// load the assets required to display the Raptor model
assetManager = new spine.threejs.AssetManager();
@ -82,6 +90,9 @@ function render() {
var delta = now - lastFrameTime;
lastFrameTime = now;
// resize canvas to use full page, adjust camera/renderer
resize();
// rotate the cube
mesh.rotation.x = Math.sin(now) * Math.PI * 0.2;
mesh.rotation.y = Math.cos(now) * Math.PI * 0.4;
@ -94,6 +105,21 @@ function 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() {
init();
}());

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

@ -1,12 +1,19 @@
<html>
<script src="../../build/spine-webgl.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>
<canvas id="canvas"></canvas>
<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>Animation:</span><select id="animationList"></select>
<span>Skin:</span><select id="skinList"></select>
<div>
</center>
</body>
<script>
@ -20,21 +27,21 @@ var mvp = new spine.webgl.Matrix4();
var assetManager;
var skeletonRenderer;
var skeletons = {};
var activeSkeleton = "raptor";
var activeSkeleton = "spineboy";
function init () {
// 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.
canvas = document.getElementById("canvas");
canvas.width = 640;
canvas.height = 480;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var config = { alpha: false };
gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
shader = spine.webgl.Shader.newColoredTextured(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);
assetManager = new spine.webgl.AssetManager(gl);
@ -61,11 +68,11 @@ function init () {
function load () {
// Wait until the AssetManager has loaded all resources, then load the skeletons.
if (assetManager.isLoadingComplete()) {
skeletons["spineboy"] = loadSkeleton("spineboy", 0.5, "test", 320, 20, false);
skeletons["raptor"] = loadSkeleton("raptor", 0.4, "walk", 320, 20, false);
skeletons["tank"] = loadSkeleton("tank", 0.3, "drive", 400, 20, false);
skeletons["goblins"] = loadSkeleton("goblins-mesh", 1, "walk", 320, 20, true, "goblin");
skeletons["vine"] = loadSkeleton("vine", 0.5, "animation", 320, 20, false);
skeletons["spineboy"] = loadSkeleton("spineboy", "run", false);
skeletons["raptor"] = loadSkeleton("raptor", "walk", false);
skeletons["tank"] = loadSkeleton("tank", "drive", false);
skeletons["goblins"] = loadSkeleton("goblins-mesh", "walk", true, "goblin");
skeletons["vine"] = loadSkeleton("vine", "animation", false);
setupUI();
requestAnimationFrame(render);
} 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";
// Load the texture atlas using name.atlas and name.png from the AssetManager.
@ -88,12 +95,10 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, prem
// Create a SkeletonJson instance for parsing the .json file.
var skeletonJson = new spine.SkeletonJson(atlasLoader);
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
skeletonJson.scale = scale;
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
var skeleton = new spine.Skeleton(skeletonData);
skeleton.x = positionX;
skeleton.y = positionY;
var bounds = calculateBounds(skeleton);
skeleton.setSkinByName(skin);
// 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.
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 () {
@ -146,6 +161,7 @@ function setupUI () {
var animationName = $("#animationList option:selected").text();
skeleton.setToSetupPose();
state.setAnimation(0, animationName, true);
scaleAndCenter(skeleton);
})
}
@ -184,6 +200,9 @@ function render () {
var delta = now - lastFrameTime;
lastFrameTime = now;
// Update the MVP matrix to adjust for canvas size changes
resize();
gl.clearColor(0.3, 0.3, 0.3, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
@ -211,6 +230,29 @@ function 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() {
init();
})();