mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-21 01:36:02 +08:00
spine-js updated to v3.1. Also spine-threejs and spine-turbulenz.
This commit is contained in:
parent
f42d6afece
commit
2d03ac50a6
@ -4,7 +4,7 @@ The spine-js runtime provides functionality to load and manipulate [Spine](http:
|
||||
|
||||
# spine-canvas
|
||||
|
||||
The spine-canvas runtime extends spine-js to perform rendering using an HTML5 canvas. Because it renders rectangular images, nonuniform scaling and mesh attachments are not supported.
|
||||
The spine-canvas runtime extends spine-js and is a basic example of how to perform rendering using an HTML5 canvas. Because spine-canvas renders rectangular images, nonuniform scaling and mesh attachments are not supported.
|
||||
|
||||
## Licensing
|
||||
|
||||
@ -14,9 +14,9 @@ The Spine Runtimes are developed with the intent to be used with data exported f
|
||||
|
||||
## Spine version
|
||||
|
||||
spine-js works with data exported from Spine 2.1.27. Updating spine-js to [v3.0](https://trello.com/c/tF8UykBM/72-update-runtimes-to-support-v3-0-skewing-scale) and [v3.1](https://trello.com/c/bERJAFEq/73-update-runtimes-to-support-v3-1-linked-meshes) is in progress.
|
||||
spine-js works with data exported from the latest version of Spine.
|
||||
|
||||
spine-js supports all Spine features.
|
||||
spine-js supports all Spine features. spine-canvas does not support mesh attachments or nonuniform scaling.~
|
||||
|
||||
spine-js does not yet support loading the binary format.
|
||||
|
||||
@ -32,3 +32,4 @@ spine-js does not yet support loading the binary format.
|
||||
## Runtimes Extending spine-js
|
||||
|
||||
- [spine-turbulenz](https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-turbulenz)
|
||||
- [spine-threejs](https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-threejs)
|
||||
|
||||
@ -83,11 +83,10 @@ spine.SkeletonRenderer.prototype = {
|
||||
var attachment = slot.attachment;
|
||||
if (!(attachment instanceof spine.RegionAttachment)) continue;
|
||||
var bone = slot.bone;
|
||||
|
||||
var x = bone.worldX + attachment.x * bone.m00 + attachment.y * bone.m01;
|
||||
var y = bone.worldY + attachment.x * bone.m10 + attachment.y * bone.m11;
|
||||
var rotation = -(bone.worldRotation + attachment.rotation) * Math.PI / 180;
|
||||
var w = attachment.width * bone.worldScaleX, h = attachment.height * bone.worldScaleY;
|
||||
var x = attachment.x * bone.a + attachment.y * bone.b + bone.worldX;
|
||||
var y = attachment.x * bone.c + attachment.y * bone.d + bone.worldY;
|
||||
var rotation = (bone.getWorldRotationX() - attachment.rotation) * Math.PI / 180;
|
||||
var w = attachment.width * bone.getWorldScaleX(), h = attachment.height * bone.getWorldScaleY();
|
||||
context.translate(x, y);
|
||||
context.rotate(rotation);
|
||||
context.drawImage(attachment.rendererObject, -w / 2, -h / 2, w, h);
|
||||
@ -116,4 +115,4 @@ spine.SkeletonRenderer.prototype = {
|
||||
};
|
||||
renderFrame();
|
||||
}
|
||||
};
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,7 @@ The Spine Runtimes are developed with the intent to be used with data exported f
|
||||
|
||||
## Spine version
|
||||
|
||||
spine-threejs works with data exported from Spine 2.1.27. Updating spine-threejs to [v3.0](https://trello.com/c/tF8UykBM/72-update-runtimes-to-support-v3-0-skewing-scale) and [v3.1](https://trello.com/c/bERJAFEq/73-update-runtimes-to-support-v3-1-linked-meshes) is in progress.
|
||||
spine-threejs works with data exported from the latest version of Spine.
|
||||
|
||||
spine-threejs supports all Spine features except for rendering meshes.
|
||||
|
||||
|
||||
@ -237,8 +237,8 @@
|
||||
(dz || 0.1) * Z++
|
||||
);
|
||||
|
||||
matrix.elements[0] = slot.bone.m00; matrix.elements[4] = slot.bone.m01;
|
||||
matrix.elements[1] = slot.bone.m10; matrix.elements[5] = slot.bone.m11;
|
||||
matrix.elements[0] = slot.bone.a; matrix.elements[4] = slot.bone.b;
|
||||
matrix.elements[1] = slot.bone.c; matrix.elements[5] = slot.bone.d;
|
||||
|
||||
mesh.matrix.copy(matrix);
|
||||
|
||||
@ -342,7 +342,8 @@ function load (name, scale) {
|
||||
function init() {
|
||||
scene = new THREE.Scene();
|
||||
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
|
||||
var width = 640, height = 480;
|
||||
camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
|
||||
camera.position.z = 400;
|
||||
|
||||
geometry = new THREE.BoxGeometry(200, 200, 200);
|
||||
@ -354,11 +355,12 @@ function init() {
|
||||
load('spineboy', 0.4);
|
||||
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setSize(width, height);
|
||||
|
||||
document.body.appendChild(renderer.domElement);
|
||||
}
|
||||
|
||||
var lastTime = Date.now();
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
@ -369,7 +371,8 @@ function animate() {
|
||||
mesh.rotation.x = a * Math.PI * 0.2;
|
||||
mesh.rotation.y = b * Math.PI * 0.4;
|
||||
|
||||
anim.update();
|
||||
anim.update((t - lastTime) / 1000);
|
||||
lastTime = t;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
@ -378,11 +381,10 @@ init();
|
||||
animate();
|
||||
</script>
|
||||
|
||||
<br>
|
||||
<br><br>
|
||||
<input type="button" value="Spineboy" onclick="load('spineboy', 0.6)">
|
||||
<input type="button" value="Hero" onclick="load('hero', 1)">
|
||||
<input type="button" value="Goblins" onclick="load('goblins', 1)">
|
||||
<input type="button" value="Gypsy" onclick="load('gypsy', 1)">
|
||||
Click to change the animation or skin.
|
||||
|
||||
</body>
|
||||
|
||||
@ -10,7 +10,7 @@ The Spine Runtimes are developed with the intent to be used with data exported f
|
||||
|
||||
## Spine version
|
||||
|
||||
spine-turbulenz works with data exported from Spine 2.1.27. Updating spine-turbulenz to [v3.0](https://trello.com/c/tF8UykBM/72-update-runtimes-to-support-v3-0-skewing-scale) and [v3.1](https://trello.com/c/bERJAFEq/73-update-runtimes-to-support-v3-1-linked-meshes) is in progress.
|
||||
spine-turbulenz works with data exported from the latest version of Spine.
|
||||
|
||||
spine-turbulenz supports all Spine features except for rendering meshes.
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user