UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-20 09:16:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Clean up.

Browse Source
This commit is contained in:
NathanSweet 2016-04-03 18:16:17 +02:00
parent f2f9572ae3
commit cc40f1be93
7 changed files with 149 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -96,3 +96,5 @@ spine-starling/spine-starling-example/bin
spine-starling/spine-starling-example/lib/.spine-starling.swc.stamp spine-starling/spine-starling-example/lib/.spine-starling.swc.stamp
spine-turbulenz/spine-js/spine.js spine-turbulenz/spine-js/spine.js
spine-threejs/spine-js/spine.js

223
spine-threejs/example/data/skeleton.atlas
View File

@ -1,223 +0,0 @@
skeleton.png
size: 512,128
format: RGBA8888
filter: Linear,Linear
repeat: none
hair
rotate: false
xy: 2, 48
size: 44, 69
orig: 44, 69
offset: 0, 0
index: -1
hat
rotate: false
xy: 192, 89
size: 54, 28
orig: 54, 28
offset: 0, 0
index: -1
head
rotate: false
xy: 142, 67
size: 48, 50
orig: 48, 50
offset: 0, 0
index: -1
left-arm-bottom
rotate: false
xy: 41, 8
size: 17, 32
orig: 17, 32
offset: 0, 0
index: -1
left-arm-top
rotate: false
xy: 23, 7
size: 16, 39
orig: 16, 39
offset: 0, 0
index: -1
left-foot
rotate: false
xy: 198, 2
size: 30, 20
orig: 30, 20
offset: 0, 0
index: -1
left-foot-boots
rotate: false
xy: 248, 95
size: 30, 22
orig: 30, 22
offset: 0, 0
index: -1
left-hand
rotate: false
xy: 230, 5
size: 14, 17
orig: 14, 17
offset: 0, 0
index: -1
left-leg-bottom
rotate: false
xy: 276, 35
size: 17, 58
orig: 17, 58
offset: 0, 0
index: -1
left-leg-top
rotate: false
xy: 142, 2
size: 26, 63
orig: 26, 63
offset: 0, 0
index: -1
left-lower-arm-shirt
rotate: false
xy: 60, 10
size: 18, 30
orig: 18, 30
offset: 0, 0
index: -1
left-lower-leg-boots
rotate: false
xy: 80, 10
size: 13, 22
orig: 13, 22
offset: 0, 0
index: -1
left-lower-leg-pants
rotate: false
xy: 254, 32
size: 20, 61
orig: 20, 61
offset: 0, 0
index: -1
right-lower-leg-pants
rotate: false
xy: 254, 32
size: 20, 61
orig: 20, 61
offset: 0, 0
index: -1
left-upper-arm-shirt
rotate: false
xy: 2, 6
size: 19, 40
orig: 19, 40
offset: 0, 0
index: -1
right-upper-arm-shirt
rotate: false
xy: 2, 6
size: 19, 40
orig: 19, 40
offset: 0, 0
index: -1
left-upper-leg-pants
rotate: false
xy: 170, 2
size: 26, 63
orig: 26, 63
offset: 0, 0
index: -1
right-arm-middle
rotate: false
xy: 392, 85
size: 17, 32
orig: 17, 32
offset: 0, 0
index: -1
right-arm-top
rotate: false
xy: 314, 56
size: 16, 39
orig: 16, 39
offset: 0, 0
index: -1
right-foot
rotate: false
xy: 312, 97
size: 30, 20
orig: 30, 20
offset: 0, 0
index: -1
right-foot-boots
rotate: false
xy: 280, 95
size: 30, 22
orig: 30, 22
offset: 0, 0
index: -1
right-hand
rotate: false
xy: 314, 37
size: 14, 17
orig: 14, 17
offset: 0, 0
index: -1
right-leg-bottom
rotate: false
xy: 295, 35
size: 17, 58
orig: 17, 58
offset: 0, 0
index: -1
right-leg-top
rotate: false
xy: 198, 24
size: 26, 63
orig: 26, 63
offset: 0, 0
index: -1
right-lower-arm-shirt
rotate: false
xy: 372, 87
size: 18, 30
orig: 18, 30
offset: 0, 0
index: -1
right-lower-leg-boots
rotate: false
xy: 411, 95
size: 13, 22
orig: 13, 22
offset: 0, 0
index: -1
right-upper-leg-pants
rotate: false
xy: 226, 24
size: 26, 63
orig: 26, 63
offset: 0, 0
index: -1
shirt
rotate: false
xy: 48, 42
size: 30, 75
orig: 30, 75
offset: 0, 0
index: -1
torso
rotate: false
xy: 112, 34
size: 28, 83
orig: 28, 83
offset: 0, 0
index: -1
torso-clothed
rotate: false
xy: 80, 34
size: 30, 83
orig: 30, 83
offset: 0, 0
index: -1
torso-pants
rotate: false
xy: 344, 93
size: 26, 24
orig: 26, 24
offset: 0, 0
index: -1

1
spine-threejs/example/data/skeleton.json
View File

File diff suppressed because one or more lines are too long

BIN
spine-threejs/example/data/skeleton.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

318
spine-threejs/example/index.html
View File

@ -31,7 +31,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>spine-js</title> <title>spine-threejs</title>
<script src="../spine-js/spine.js"></script> <script src="../spine-js/spine.js"></script>
<script src="../three.min.js"></script> <script src="../three.min.js"></script>
@ -39,42 +39,34 @@
</head> </head>
<body> <body>
<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="Gipsy" onclick="load('skeleton', 1)">
&nbsp; &nbsp; Click to change the animation or skin.
<br>
<script> <script>
(function () { (function () {
var loadText = function (url, callback) { var loadText = function (url, callback) {
var req = new XMLHttpRequest (); var req = new XMLHttpRequest();
req.open ("GET", url, true); req.open("GET", url, true);
req.responseType = 'text'; req.responseType = 'text';
req.addEventListener ('error', function (event) {}, false); req.addEventListener('error', function (event) {}, false);
req.addEventListener ('abort', function (event) {}, false); req.addEventListener('abort', function (event) {}, false);
req.addEventListener ('load', function (event) { callback (req.response); }, false); req.addEventListener('load', function (event) { callback(req.response); }, false);
req.send (); req.send();
return req; return req;
}; };
var loadImage = function (url, callback) { var loadImage = function (url, callback) {
var image = new Image (); var image = new Image();
image.addEventListener ('error', function (event) {}, false); image.addEventListener('error', function (event) {}, false);
image.addEventListener ('abort', function (event) {}, false); image.addEventListener('abort', function (event) {}, false);
image.addEventListener ('load', function (event) { callback (image); }, false); image.addEventListener('load', function (event) { callback (image); }, false);
image.src = url; image.src = url;
return image; return image;
}; };
SpineAnimation = function (animation, path, scale) { SpineAnimation = function (name, path, scale) {
THREE.Object3D.call (this); THREE.Object3D.call(this);
this.name = animation; this.name = name;
path = path ? (path + path = path ? (path +
((path.substr(-1) != '/') ? '/' : '') ((path.substr(-1) != '/') ? '/' : '')
@ -82,15 +74,15 @@
var self = this; var self = this;
loadText (path + animation + '.atlas', function (atlasText) { loadText(path + name + '.atlas', function (atlasText) {
self.atlas = new spine.Atlas(atlasText, { self.atlas = new spine.Atlas(atlasText, {
load: function (page, image, atlas) { load: function (page, image, atlas) {
loadImage (path + image, function (image) { loadImage(path + image, function (image) {
// calculate UVs in atlas regions // calculate UVs in atlas regions
page.width = image.width; page.width = image.width;
page.height = image.height; page.height = image.height;
atlas.updateUVs (page); atlas.updateUVs(page);
// propagate new UVs to attachments, if they were already created // propagate new UVs to attachments, if they were already created
if (self.skeleton) { if (self.skeleton) {
@ -101,18 +93,18 @@
var attachment = attachments[k]; var attachment = attachments[k];
if (attachment instanceof spine.RegionAttachment) { if (attachment instanceof spine.RegionAttachment) {
var region = attachment.rendererObject; var region = attachment.rendererObject;
attachment.setUVs (region.u, region.v, region.u2, region.v2, region.rotate); attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate);
} }
} }
} }
} }
// create basic material for the page // create basic material for the page
var texture = new THREE.Texture (image); var texture = new THREE.Texture(image);
texture.needsUpdate = true; texture.needsUpdate = true;
page.rendererObject = [ page.rendererObject = [
new THREE.MeshBasicMaterial ({ new THREE.MeshBasicMaterial({
//color: 0xff00, wireframe: true, //color: 0xff00, wireframe: true,
map : texture, side : THREE.DoubleSide, transparent : true, alphaTest : 0.5 map : texture, side : THREE.DoubleSide, transparent : true, alphaTest : 0.5
}) })
@ -125,9 +117,7 @@
if (material.meshes) { if (material.meshes) {
for (var name in material.meshes) { for (var name in material.meshes) {
var mesh = material.meshes[name]; var mesh = material.meshes[name];
if (mesh.parent) { if (mesh.parent) mesh.parent.remove(mesh);
mesh.parent.remove (mesh);
}
mesh.geometry.dispose(); mesh.geometry.dispose();
} }
} }
@ -139,15 +129,15 @@
} }
}); });
loadText (path + animation + '.json', function (skeletonText) { loadText(path + name + '.json', function (skeletonText) {
var json = new spine.SkeletonJson (new spine.AtlasAttachmentLoader (self.atlas)); var json = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(self.atlas));
json.scale = scale || 1; json.scale = scale || 1;
var skeletonData = json.readSkeletonData (JSON.parse (skeletonText)); var skeletonData = json.readSkeletonData(JSON.parse(skeletonText));
self.skeleton = new spine.Skeleton (skeletonData); self.skeleton = new spine.Skeleton(skeletonData);
self.stateData = new spine.AnimationStateData (skeletonData); self.stateData = new spine.AnimationStateData(skeletonData);
self.state = new spine.AnimationState (self.stateData); self.state = new spine.AnimationState(self.stateData);
self.dispatchEvent({ self.dispatchEvent({
type : SpineAnimation.SKELETON_DATA_LOADED type : SpineAnimation.SKELETON_DATA_LOADED
@ -155,18 +145,18 @@
}); });
}); });
var matrix = new THREE.Matrix4 (); var matrix = new THREE.Matrix4();
// if given, dt must be in ms // if given, dt must be in ms
this.update = function (dt, dz) { this.update = function (dt, dz) {
if (!this.state) return; if (!this.state) return;
this.state.update (dt || (1.0 / 60)); this.state.update(dt || (1.0 / 60));
this.state.apply (this.skeleton); this.state.apply(this.skeleton);
this.skeleton.updateWorldTransform (); this.skeleton.updateWorldTransform();
this.traverse (function (object) { this.traverse(function (object) {
if (object instanceof THREE.Mesh) { if (object instanceof THREE.Mesh) {
object.visible = false; object.visible = false;
} }
@ -180,14 +170,12 @@
if (!(attachment instanceof spine.RegionAttachment)) continue; if (!(attachment instanceof spine.RegionAttachment)) continue;
var materials = attachment.rendererObject.page.rendererObject; var materials = attachment.rendererObject.page.rendererObject;
if (!materials) { // texture was not loaded yet
// texture was not loaded yet if (!materials) continue;
continue;
}
if (slot.data.additiveBlending && (materials.length == 1)) { if (slot.data.additiveBlending && (materials.length == 1)) {
// create separate material for additive blending // create separate material for additive blending
materials.push (new THREE.MeshBasicMaterial ({ materials.push(new THREE.MeshBasicMaterial({
map : materials[0].map, map : materials[0].map,
side : THREE.DoubleSide, side : THREE.DoubleSide,
transparent : true, transparent : true,
@ -209,44 +197,41 @@
mesh.visible = true; mesh.visible = true;
} else { } else {
geometry = new THREE.PlaneGeometry ( geometry = new THREE.PlaneGeometry(
attachment.regionOriginalWidth, attachment.regionOriginalWidth,
attachment.regionOriginalHeight attachment.regionOriginalHeight
); );
geometry.dynamic = true; geometry.dynamic = true;
mesh = new THREE.Mesh (geometry, material); mesh = new THREE.Mesh(geometry, material);
material.meshes[slot.data.name] = mesh;
mesh.matrixAutoUpdate = false; mesh.matrixAutoUpdate = false;
this.add (mesh); material.meshes[slot.data.name] = mesh;
this.add(mesh);
} }
if (mesh.attachmentTime && (slot.getAttachmentTime () > mesh.attachmentTime)) { if (mesh.attachmentTime && (slot.getAttachmentTime () > mesh.attachmentTime)) {
// do nothing // do nothing
} else { } else {
// update UVs // update UVs
geometry.faceVertexUvs[0][0][0].set (attachment.uvs[6], 1- attachment.uvs[7]); geometry.faceVertexUvs[0][0][0].set(attachment.uvs[6], 1- attachment.uvs[7]);
geometry.faceVertexUvs[0][0][1].set (attachment.uvs[4], 1- attachment.uvs[5]); geometry.faceVertexUvs[0][0][1].set(attachment.uvs[4], 1- attachment.uvs[5]);
geometry.faceVertexUvs[0][0][2].set (attachment.uvs[0], 1- attachment.uvs[1]); geometry.faceVertexUvs[0][0][2].set(attachment.uvs[0], 1- attachment.uvs[1]);
geometry.faceVertexUvs[0][1][0].set (attachment.uvs[4], 1- attachment.uvs[5]); geometry.faceVertexUvs[0][1][0].set(attachment.uvs[4], 1- attachment.uvs[5]);
geometry.faceVertexUvs[0][1][1].set (attachment.uvs[2], 1- attachment.uvs[3]); geometry.faceVertexUvs[0][1][1].set(attachment.uvs[2], 1- attachment.uvs[3]);
geometry.faceVertexUvs[0][1][2].set (attachment.uvs[0], 1- attachment.uvs[1]); geometry.faceVertexUvs[0][1][2].set(attachment.uvs[0], 1- attachment.uvs[1]);
geometry.uvsNeedUpdate = true; geometry.uvsNeedUpdate = true;
geometry.vertices[1].set (attachment.offset[0], attachment.offset[1], 0); geometry.vertices[1].set(attachment.offset[0], attachment.offset[1], 0);
geometry.vertices[3].set (attachment.offset[2], attachment.offset[3], 0); geometry.vertices[3].set(attachment.offset[2], attachment.offset[3], 0);
geometry.vertices[2].set (attachment.offset[4], attachment.offset[5], 0); geometry.vertices[2].set(attachment.offset[4], attachment.offset[5], 0);
geometry.vertices[0].set (attachment.offset[6], attachment.offset[7], 0); geometry.vertices[0].set(attachment.offset[6], attachment.offset[7], 0);
geometry.verticesNeedUpdate = true; geometry.verticesNeedUpdate = true;
mesh.attachmentTime = slot.getAttachmentTime (); mesh.attachmentTime = slot.getAttachmentTime();
} }
matrix.makeTranslation ( matrix.makeTranslation(
this.skeleton.x + slot.bone.worldX, this.skeleton.x + slot.bone.worldX,
this.skeleton.y + slot.bone.worldY, this.skeleton.y + slot.bone.worldY,
(dz || 0.1) * Z++ (dz || 0.1) * Z++
@ -255,7 +240,7 @@
matrix.elements[0] = slot.bone.m00; matrix.elements[4] = slot.bone.m01; 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[1] = slot.bone.m10; matrix.elements[5] = slot.bone.m11;
mesh.matrix.copy (matrix); mesh.matrix.copy(matrix);
/* TODO slot.r,g,b,a ?? turbulenz example code: /* TODO slot.r,g,b,a ?? turbulenz example code:
batch.add( batch.add(
@ -279,135 +264,126 @@
SpineAnimation.SKELETON_DATA_LOADED = 'skeletonDataLoaded'; SpineAnimation.SKELETON_DATA_LOADED = 'skeletonDataLoaded';
SpineAnimation.prototype = Object.create (THREE.Object3D.prototype); SpineAnimation.prototype = Object.create(THREE.Object3D.prototype);
SpineAnimation.prototype.dispose = function () { SpineAnimation.prototype.dispose = function () {
if (this.parent) this.parent.remove (this); this.atlas.dispose (); if (this.parent) this.parent.remove(this); this.atlas.dispose();
}; };
}) (); }) ();
var scene, camera, renderer;
var geometry, material, mesh;
var anim;
function load (name, scale) {
if (anim) anim.dispose();
anim = new SpineAnimation(name, 'data/', scale);
anim.addEventListener(SpineAnimation.SKELETON_DATA_LOADED, function () {
var canvas = renderer.domElement;
switch (anim.name) {
case 'spineboy':
anim.stateData.setMixByName('walk', 'jump', 0.2);
anim.stateData.setMixByName('run', 'jump', 0.2);
anim.stateData.setMixByName('jump', 'run', 0.2);
anim.state.setAnimationByName(0, 'walk', true);
canvas.onmousedown = function () {
anim.state.setAnimationByName(0, 'jump', false);
anim.state.addAnimationByName(0, 'run', true, 0);
}
break;
case 'hero':
anim.stateData.defaultMix = 0.2;
anim.stateData.setMixByName('Walk', 'Attack', 0);
anim.stateData.setMixByName('Attack', 'Run', 0);
anim.stateData.setMixByName('Run', 'Attack', 0);
anim.state.setAnimationByName(0, 'Idle', true);
canvas.onmousedown = function () {
var name = anim.state.getCurrent(0).animation.name;
if (name == 'Idle')
anim.state.setAnimationByName(0, 'Crouch', true);
else if (name == 'Crouch')
anim.state.setAnimationByName(0, 'Walk', true);
else {
anim.state.setAnimationByName(0, 'Attack', false);
anim.state.addAnimationByName(0, 'Run', true, 0);
}
}
break;
case 'goblins':
anim.skeleton.setSkinByName('goblingirl'); // TODO - spine.Skeleton.prototype.setSkin doesn't work?
anim.skeleton.setSlotsToSetupPose();
anim.state.setAnimationByName(0, 'walk', true);
canvas.onmousedown = function () {
anim.skeleton.setSkinByName(anim.skeleton.skin.name == 'goblin' ? 'goblingirl' : 'goblin');
anim.skeleton.setSlotsToSetupPose();
}
break;
case 'skeleton':
anim.state.setAnimationByName(0, 'walk test', true);
canvas.onmousedown = function () {
var name = anim.state.getCurrent(0).animation.name;
if (name == 'walk test')
anim.state.setAnimationByName(0, 'idle test', true);
else
anim.state.setAnimationByName(0, 'walk test', true);
}
break;
}
//anim.skeleton.y = -200;
});
var scene, camera, renderer; mesh.add(anim);
var geometry, material, mesh; }
var test; function init() {
scene = new THREE.Scene();
function load(animation, scale) { camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
if (test) { camera.position.z = 400;
test.dispose ();
}
test = new SpineAnimation (animation, 'data/', scale); geometry = new THREE.BoxGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
test.addEventListener( SpineAnimation.SKELETON_DATA_LOADED, function () { mesh = new THREE.Mesh(geometry, material);
var canvas = renderer.domElement; scene.add(mesh);
switch (test.name) { load('spineboy', 0.4);
case 'spineboy':
test.stateData.setMixByName('walk', 'jump', 0.2);
test.stateData.setMixByName('run', 'jump', 0.2);
test.stateData.setMixByName('jump', 'run', 0.2);
test.state.setAnimationByName(0, 'walk', true);
canvas.onmousedown = function () {
test.state.setAnimationByName(0, 'jump', false);
test.state.addAnimationByName(0, 'run', true, 0);
}
break;
case 'hero':
test.stateData.defaultMix = 0.2;
test.stateData.setMixByName('Walk', 'Attack', 0);
test.stateData.setMixByName('Attack', 'Run', 0);
test.stateData.setMixByName('Run', 'Attack', 0);
test.state.setAnimationByName(0, 'Idle', true);
canvas.onmousedown = function () {
var name = test.state.getCurrent(0).animation.name;
if (name == 'Idle') {
test.state.setAnimationByName(0, 'Crouch', true);
} else if (name == 'Crouch') {
test.state.setAnimationByName(0, 'Walk', true);
} else {
test.state.setAnimationByName(0, 'Attack', false);
test.state.addAnimationByName(0, 'Run', true, 0);
}
}
break;
case 'goblins':
test.skeleton.setSkinByName('goblingirl'); // TODO find why spine.Skeleton.prototype.setSkin does not work
test.skeleton.setSlotsToSetupPose();
test.state.setAnimationByName(0, 'walk', true);
canvas.onmousedown = function () {
test.skeleton.setSkinByName(test.skeleton.skin.name == 'goblin' ? 'goblingirl' : 'goblin');
test.skeleton.setSlotsToSetupPose();
}
break;
case 'skeleton':
test.state.setAnimationByName(0, 'walk test', true);
canvas.onmousedown = function () {
var name = test.state.getCurrent(0).animation.name;
if (name == 'walk test') {
test.state.setAnimationByName(0, 'idle test', true);
} else {
test.state.setAnimationByName(0, 'walk test', true);
}
}
break;
}
//test.skeleton.y = -200;
});
mesh.add( test ); renderer = new THREE.WebGLRenderer();
} renderer.setSize(window.innerWidth, window.innerHeight);
init(); document.body.appendChild(renderer.domElement);
animate(); }
function init() { function animate() {
spine.Bone.yDown = false; requestAnimationFrame(animate);
scene = new THREE.Scene(); var t = Date.now();
var a = Math.sin(t * 6e-4);
var b = Math.cos(t * 3e-4);
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 ); mesh.rotation.x = a * Math.PI * 0.2;
camera.position.z = 400; mesh.rotation.y = b * Math.PI * 0.4;
geometry = new THREE.BoxGeometry( 200, 200, 200 ); anim.update();
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material ); renderer.render(scene, camera);
scene.add( mesh ); }
load( 'spineboy', 0.4 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
var t = Date.now ();
var a = Math.sin (t * 6e-4);
var b = Math.cos (t * 3e-4);
mesh.rotation.x = a * Math.PI * 0.2;
mesh.rotation.y = b * Math.PI * 0.4;
test.update();
renderer.render( scene, camera );
}
init();
animate();
</script> </script>
<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)">
&nbsp; &nbsp; Click to change the animation or skin.
</body> </body>
</html> </html>

0
spine-threejs/spine-js/Place spine-js here.txt Normal file
View File

1
spine-threejs/spine-js/spine.js
View File

@ -1 +0,0 @@
../../spine-js/spine.js