UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-20 17:26: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

136
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,15 +39,7 @@
</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) {
@ -70,11 +62,11 @@
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,7 +74,7 @@
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) {
@ -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,7 +129,7 @@
} }
}); });
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;
@ -180,10 +170,8 @@
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
continue; if (!materials) 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
@ -213,15 +201,12 @@
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;
material.meshes[slot.data.name] = mesh;
this.add(mesh); this.add(mesh);
} }
@ -287,88 +272,74 @@
}) (); }) ();
var scene, camera, renderer; var scene, camera, renderer;
var geometry, material, mesh; var geometry, material, mesh;
var anim;
var test; function load (name, scale) {
if (anim) anim.dispose();
function load(animation, scale) { anim = new SpineAnimation(name, 'data/', scale);
if (test) {
test.dispose ();
}
test = new SpineAnimation (animation, 'data/', scale); anim.addEventListener(SpineAnimation.SKELETON_DATA_LOADED, function () {
test.addEventListener( SpineAnimation.SKELETON_DATA_LOADED, function () {
var canvas = renderer.domElement; var canvas = renderer.domElement;
switch (test.name) { switch (anim.name) {
case 'spineboy': case 'spineboy':
test.stateData.setMixByName('walk', 'jump', 0.2); anim.stateData.setMixByName('walk', 'jump', 0.2);
test.stateData.setMixByName('run', 'jump', 0.2); anim.stateData.setMixByName('run', 'jump', 0.2);
test.stateData.setMixByName('jump', 'run', 0.2); anim.stateData.setMixByName('jump', 'run', 0.2);
test.state.setAnimationByName(0, 'walk', true); anim.state.setAnimationByName(0, 'walk', true);
canvas.onmousedown = function () { canvas.onmousedown = function () {
test.state.setAnimationByName(0, 'jump', false); anim.state.setAnimationByName(0, 'jump', false);
test.state.addAnimationByName(0, 'run', true, 0); anim.state.addAnimationByName(0, 'run', true, 0);
} }
break; break;
case 'hero': case 'hero':
test.stateData.defaultMix = 0.2; anim.stateData.defaultMix = 0.2;
test.stateData.setMixByName('Walk', 'Attack', 0); anim.stateData.setMixByName('Walk', 'Attack', 0);
test.stateData.setMixByName('Attack', 'Run', 0); anim.stateData.setMixByName('Attack', 'Run', 0);
test.stateData.setMixByName('Run', 'Attack', 0); anim.stateData.setMixByName('Run', 'Attack', 0);
test.state.setAnimationByName(0, 'Idle', true); anim.state.setAnimationByName(0, 'Idle', true);
canvas.onmousedown = function () { canvas.onmousedown = function () {
var name = test.state.getCurrent(0).animation.name; var name = anim.state.getCurrent(0).animation.name;
if (name == 'Idle') { if (name == 'Idle')
test.state.setAnimationByName(0, 'Crouch', true); anim.state.setAnimationByName(0, 'Crouch', true);
} else if (name == 'Crouch') { else if (name == 'Crouch')
test.state.setAnimationByName(0, 'Walk', true); anim.state.setAnimationByName(0, 'Walk', true);
} else { else {
test.state.setAnimationByName(0, 'Attack', false); anim.state.setAnimationByName(0, 'Attack', false);
test.state.addAnimationByName(0, 'Run', true, 0); anim.state.addAnimationByName(0, 'Run', true, 0);
} }
} }
break; break;
case 'goblins': case 'goblins':
test.skeleton.setSkinByName('goblingirl'); // TODO find why spine.Skeleton.prototype.setSkin does not work anim.skeleton.setSkinByName('goblingirl'); // TODO - spine.Skeleton.prototype.setSkin doesn't work?
test.skeleton.setSlotsToSetupPose(); anim.skeleton.setSlotsToSetupPose();
test.state.setAnimationByName(0, 'walk', true); anim.state.setAnimationByName(0, 'walk', true);
canvas.onmousedown = function () { canvas.onmousedown = function () {
test.skeleton.setSkinByName(test.skeleton.skin.name == 'goblin' ? 'goblingirl' : 'goblin'); anim.skeleton.setSkinByName(anim.skeleton.skin.name == 'goblin' ? 'goblingirl' : 'goblin');
test.skeleton.setSlotsToSetupPose(); anim.skeleton.setSlotsToSetupPose();
} }
break; break;
case 'skeleton': case 'skeleton':
test.state.setAnimationByName(0, 'walk test', true); anim.state.setAnimationByName(0, 'walk test', true);
canvas.onmousedown = function () { canvas.onmousedown = function () {
var name = test.state.getCurrent(0).animation.name; var name = anim.state.getCurrent(0).animation.name;
if (name == 'walk test') { if (name == 'walk test')
test.state.setAnimationByName(0, 'idle test', true); anim.state.setAnimationByName(0, 'idle test', true);
} else { else
test.state.setAnimationByName(0, 'walk test', true); anim.state.setAnimationByName(0, 'walk test', true);
}
} }
break; break;
} }
//test.skeleton.y = -200; //anim.skeleton.y = -200;
}); });
mesh.add( test ); mesh.add(anim);
} }
init();
animate();
function init() { function init() {
spine.Bone.yDown = false;
scene = new THREE.Scene(); scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
@ -386,11 +357,9 @@
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
} }
function animate() { function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
var t = Date.now(); var t = Date.now();
@ -400,14 +369,21 @@
mesh.rotation.x = a * Math.PI * 0.2; mesh.rotation.x = a * Math.PI * 0.2;
mesh.rotation.y = b * Math.PI * 0.4; mesh.rotation.y = b * Math.PI * 0.4;
anim.update();
test.update();
renderer.render(scene, camera); 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