Fixed spine-starling meshes with a Starling atlas. Better examples.

This commit is contained in:
NathanSweet 2014-07-25 19:39:45 +02:00
parent e6ba25c59b
commit 4eb73738c2
9 changed files with 162 additions and 142 deletions

View File

@ -1,14 +1,13 @@
package {
import spine.Event;
import spine.SkeletonData;
import spine.SkeletonJson;
import spine.animation.AnimationStateData;
import spine.atlas.Atlas;
import spine.attachments.AtlasAttachmentLoader;
import spine.starling.StarlingTextureLoader;
import spine.attachments.AttachmentLoader;
import spine.starling.SkeletonAnimation;
import spine.starling.StarlingAtlasAttachmentLoader;
import spine.starling.StarlingTextureLoader;
import starling.core.Starling;
import starling.display.Sprite;
@ -19,21 +18,37 @@ import starling.textures.Texture;
import starling.textures.TextureAtlas;
public class GoblinsExample extends Sprite {
[Embed(source = "goblins-ffd.atlas", mimeType = "application/octet-stream")]
static public const SpineboyAtlasFile:Class;
[Embed(source = "goblins-ffd.png")]
static public const SpineboyAtlasTexture:Class;
[Embed(source = "goblins-ffd.json", mimeType = "application/octet-stream")]
static public const SpineboyJson:Class;
static public const GoblinsJson:Class;
[Embed(source = "goblins-ffd.atlas", mimeType = "application/octet-stream")]
static public const GoblinsAtlas:Class;
[Embed(source = "goblins-ffd.png")]
static public const GoblinsAtlasTexture:Class;
[Embed(source = "goblins-ffd-starling.xml", mimeType = "application/octet-stream")]
static public const GoblinsStarlingAtlas:Class;
[Embed(source = "goblins-ffd-starling.png")]
static public const GoblinsStarlingAtlasTexture:Class;
private var skeleton:SkeletonAnimation;
public function GoblinsExample () {
var atlas:Atlas = new Atlas(new SpineboyAtlasFile(), new StarlingTextureLoader(new SpineboyAtlasTexture()));
var json:SkeletonJson = new SkeletonJson(new AtlasAttachmentLoader(atlas));
var skeletonData:SkeletonData = json.readSkeletonData(new SpineboyJson());
var attachmentLoader:AttachmentLoader;
if (Main.useStarlingAtlas) {
var texture:Texture = Texture.fromBitmap(new GoblinsStarlingAtlasTexture());
var xml:XML = XML(new GoblinsStarlingAtlas());
var starlingAtlas:TextureAtlas = new TextureAtlas(texture, xml);
attachmentLoader = new StarlingAtlasAttachmentLoader(starlingAtlas);
} else {
var spineAtlas:Atlas = new Atlas(new GoblinsAtlas(), new StarlingTextureLoader(new GoblinsAtlasTexture()));
attachmentLoader = new AtlasAttachmentLoader(spineAtlas);
}
var json:SkeletonJson = new SkeletonJson(attachmentLoader);
var skeletonData:SkeletonData = json.readSkeletonData(new GoblinsJson());
skeleton = new SkeletonAnimation(skeletonData, true);
skeleton.x = 320;

View File

@ -8,12 +8,13 @@ import starling.core.Starling;
[SWF(width = "640", height = "480", frameRate = "60", backgroundColor = "#dddddd")]
public class Main extends Sprite {
private var _starling:Starling;
static public var useStarlingAtlas:Boolean;
public function Main () {
var example:Class;
//example = AtlasExample;
//example = StarlingAtlasExample;
//example = SpineboyExample;
example = GoblinsExample;
useStarlingAtlas = true;
_starling = new Starling(example, stage);
_starling.enableErrorChecking = true;

View File

@ -1,14 +1,14 @@
package {
import flash.display.Bitmap;
import spine.Event;
import spine.SkeletonData;
import spine.SkeletonJson;
import spine.animation.AnimationStateData;
import spine.atlas.Atlas;
import spine.attachments.AtlasAttachmentLoader;
import spine.attachments.AttachmentLoader;
import spine.starling.SkeletonAnimation;
import spine.starling.StarlingAtlasAttachmentLoader;
import spine.starling.StarlingTextureLoader;
import starling.core.Starling;
@ -17,28 +17,46 @@ import starling.events.Touch;
import starling.events.TouchEvent;
import starling.events.TouchPhase;
import starling.textures.Texture;
import starling.textures.TextureAtlas;
public class SpineboyExample extends Sprite {
[Embed(source = "spineboy.json", mimeType = "application/octet-stream")]
static public const SpineboyJson:Class;
public class AtlasExample extends Sprite {
[Embed(source = "spineboy.atlas", mimeType = "application/octet-stream")]
static public const SpineboyAtlasFile:Class;
static public const SpineboyAtlas:Class;
[Embed(source = "spineboy.png")]
static public const SpineboyAtlasTexture:Class;
[Embed(source = "spineboy.json", mimeType = "application/octet-stream")]
static public const SpineboyJson:Class;
[Embed(source = "spineboy-starling.xml", mimeType = "application/octet-stream")]
static public const SpineboyStarlingAtlas:Class;
[Embed(source = "spineboy-starling.png")]
static public const SpineboyStarlingAtlasTexture:Class;
private var skeleton:SkeletonAnimation;
public function AtlasExample () {
var atlas:Atlas = new Atlas(new SpineboyAtlasFile(), new StarlingTextureLoader(new SpineboyAtlasTexture()));
var json:SkeletonJson = new SkeletonJson(new AtlasAttachmentLoader(atlas));
public function SpineboyExample () {
var attachmentLoader:AttachmentLoader;
if (Main.useStarlingAtlas) {
var texture:Texture = Texture.fromBitmap(new SpineboyAtlasTexture());
var xml:XML = XML(new SpineboyStarlingAtlas());
var starlingAtlas:TextureAtlas = new TextureAtlas(texture, xml);
attachmentLoader = new StarlingAtlasAttachmentLoader(starlingAtlas);
} else {
var spineAtlas:Atlas = new Atlas(new SpineboyAtlas(), new StarlingTextureLoader(new SpineboyAtlasTexture()));
attachmentLoader = new AtlasAttachmentLoader(spineAtlas);
}
var json:SkeletonJson = new SkeletonJson(attachmentLoader);
json.scale = 0.6;
var skeletonData:SkeletonData = json.readSkeletonData(new SpineboyJson());
var stateData:AnimationStateData = new AnimationStateData(skeletonData);
stateData.defaultMix = 0.2;
stateData.setMixByName("jump", "run", 0.3);
stateData.setMixByName("run", "jump", 0.2);
stateData.setMixByName("jump", "run", 0.4);
stateData.setMixByName("jump", "jump", 0.2);
skeleton = new SkeletonAnimation(skeletonData, false, stateData);
skeleton.x = 320;
@ -58,7 +76,7 @@ public class AtlasExample extends Sprite {
+ event.data.name + ": " + event.intValue + ", " + event.floatValue + ", " + event.stringValue);
});
skeleton.state.setAnimationByName(0, "walk", true);
skeleton.state.setAnimationByName(0, "run", true);
skeleton.state.addAnimationByName(0, "jump", false, 3);
skeleton.state.addAnimationByName(0, "run", true, 0);

View File

@ -1,79 +0,0 @@
package {
import spine.Event;
import spine.SkeletonData;
import spine.SkeletonJson;
import spine.animation.AnimationStateData;
import spine.starling.SkeletonAnimation;
import spine.starling.StarlingAtlasAttachmentLoader;
import starling.core.Starling;
import starling.display.Sprite;
import starling.events.Touch;
import starling.events.TouchEvent;
import starling.events.TouchPhase;
import starling.textures.Texture;
import starling.textures.TextureAtlas;
public class StarlingAtlasExample extends Sprite {
[Embed(source = "spineboy-starling.xml", mimeType = "application/octet-stream")]
static public const SpineboyAtlasXml:Class;
[Embed(source = "spineboy-starling.png")]
static public const SpineboyAtlasTexture:Class;
[Embed(source = "spineboy-starling.json", mimeType = "application/octet-stream")]
static public const SpineboyJson:Class;
private var skeleton:SkeletonAnimation;
public function StarlingAtlasExample () {
var texture:Texture = Texture.fromBitmap(new SpineboyAtlasTexture());
var xml:XML = XML(new SpineboyAtlasXml());
var atlas:TextureAtlas = new TextureAtlas(texture, xml);
var json:SkeletonJson = new SkeletonJson(new StarlingAtlasAttachmentLoader(atlas));
var skeletonData:SkeletonData = json.readSkeletonData(new SpineboyJson());
var stateData:AnimationStateData = new AnimationStateData(skeletonData);
stateData.setMixByName("walk", "jump", 0.2);
stateData.setMixByName("jump", "walk", 0.4);
stateData.setMixByName("jump", "jump", 0.2);
skeleton = new SkeletonAnimation(skeletonData, false, stateData);
skeleton.x = 320;
skeleton.y = 420;
skeleton.state.onStart.add(function (trackIndex:int) : void {
trace(trackIndex + " start: " + skeleton.state.getCurrent(trackIndex));
});
skeleton.state.onEnd.add(function (trackIndex:int) : void {
trace(trackIndex + " end: " + skeleton.state.getCurrent(trackIndex));
});
skeleton.state.onComplete.add(function (trackIndex:int, count:int) : void {
trace(trackIndex + " complete: " + skeleton.state.getCurrent(trackIndex) + ", " + count);
});
skeleton.state.onEvent.add(function (trackIndex:int, event:Event) : void {
trace(trackIndex + " event: " + skeleton.state.getCurrent(trackIndex) + ", "
+ event.data.name + ": " + event.intValue + ", " + event.floatValue + ", " + event.stringValue);
});
skeleton.state.setAnimationByName(0, "walk", true);
skeleton.state.addAnimationByName(0, "jump", false, 3);
skeleton.state.addAnimationByName(0, "walk", true, 0);
addChild(skeleton);
Starling.juggler.add(skeleton);
addEventListener(TouchEvent.TOUCH, onClick);
}
private function onClick (event:TouchEvent) : void {
var touch:Touch = event.getTouch(this);
if (touch && touch.phase == TouchPhase.BEGAN) {
skeleton.state.setAnimationByName(0, "jump", false);
skeleton.state.addAnimationByName(0, "walk", true, 0);
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

View File

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with TexturePacker http://www.codeandweb.com/texturepacker-->
<!-- $TexturePacker:SmartUpdate:f68bf4c346737170377644079d2ad6c4:9a192cf6a7e1162a41e47cd5b4f91d60:bd0257f46142cc1d3e967d306d329226$ -->
<TextureAtlas imagePath="goblins.png">
<SubTexture name="dagger" x="2" y="372" width="26" height="108"/>
<SubTexture name="goblin/eyes-closed" x="157" y="426" width="34" height="12"/>
<SubTexture name="goblin/head" x="26" y="85" width="103" height="66"/>
<SubTexture name="goblin/left-arm" x="145" y="442" width="37" height="35"/>
<SubTexture name="goblin/left-foot" x="134" y="285" width="65" height="31"/>
<SubTexture name="goblin/left-hand" x="204" y="123" width="36" height="41"/>
<SubTexture name="goblin/left-lower-leg" x="65" y="370" width="33" height="70"/>
<SubTexture name="goblin/left-shoulder" x="196" y="408" width="29" height="44"/>
<SubTexture name="goblin/left-upper-leg" x="30" y="370" width="33" height="73"/>
<SubTexture name="goblin/neck" x="201" y="80" width="36" height="41"/>
<SubTexture name="goblin/pelvis" x="131" y="100" width="62" height="43"/>
<SubTexture name="goblin/right-arm" x="171" y="374" width="23" height="50"/>
<SubTexture name="goblin/right-foot" x="134" y="318" width="63" height="33"/>
<SubTexture name="goblin/right-hand" x="107" y="442" width="36" height="37"/>
<SubTexture name="goblin/right-lower-leg" x="96" y="153" width="36" height="76"/>
<SubTexture name="goblin/right-shoulder" x="201" y="240" width="39" height="45"/>
<SubTexture name="goblin/right-upper-leg" x="98" y="296" width="34" height="63"/>
<SubTexture name="goblin/torso" x="26" y="153" width="68" height="96"/>
<SubTexture name="goblin/undie-straps" x="100" y="421" width="55" height="19"/>
<SubTexture name="goblin/undies" x="201" y="287" width="36" height="29"/>
<SubTexture name="goblingirl/eyes-closed" x="184" y="454" width="37" height="21"/>
<SubTexture name="goblingirl/head" x="26" y="2" width="103" height="81"/>
<SubTexture name="goblingirl/left-arm" x="30" y="445" width="37" height="35"/>
<SubTexture name="goblingirl/left-foot" x="134" y="217" width="65" height="31"/>
<SubTexture name="goblingirl/left-hand" x="199" y="318" width="35" height="40"/>
<SubTexture name="goblingirl/left-lower-leg" x="169" y="145" width="33" height="70"/>
<SubTexture name="goblingirl/left-shoulder" x="196" y="360" width="28" height="46"/>
<SubTexture name="goblingirl/left-upper-leg" x="134" y="145" width="33" height="70"/>
<SubTexture name="goblingirl/neck" x="204" y="166" width="35" height="41"/>
<SubTexture name="goblingirl/pelvis" x="26" y="325" width="62" height="43"/>
<SubTexture name="goblingirl/right-arm" x="100" y="361" width="28" height="50"/>
<SubTexture name="goblingirl/right-foot" x="134" y="250" width="63" height="33"/>
<SubTexture name="goblingirl/right-hand" x="69" y="442" width="36" height="37"/>
<SubTexture name="goblingirl/right-lower-leg" x="201" y="2" width="36" height="76"/>
<SubTexture name="goblingirl/right-shoulder" x="130" y="374" width="39" height="45"/>
<SubTexture name="goblingirl/right-upper-leg" x="98" y="231" width="34" height="63"/>
<SubTexture name="goblingirl/torso" x="131" y="2" width="68" height="96"/>
<SubTexture name="goblingirl/undie-straps" x="134" y="353" width="55" height="19"/>
<SubTexture name="goblingirl/undies" x="204" y="209" width="36" height="29"/>
<SubTexture name="shield" x="26" y="251" width="70" height="72"/>
<SubTexture name="spear" x="2" y="2" width="22" height="368"/>
</TextureAtlas>

View File

@ -1,28 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with TexturePacker http://texturepacker.com-->
<!-- $TexturePacker:SmartUpdate:facbb1aeb75a8d9232523760a3e1920f$ -->
<!-- Created with TexturePacker http://www.codeandweb.com/texturepacker-->
<!-- $TexturePacker:SmartUpdate:8ea0251acc356491e9a6f72df2f73636:074436a8c81d0728682274bde39d8bb8:676322d6615ca6a250a9e93de5572f1e$ -->
<TextureAtlas imagePath="spineboy.png">
<SubTexture name="eyes-closed" x="149" y="320" width="34" height="27"/>
<SubTexture name="eyes" x="195" y="314" width="34" height="27"/>
<SubTexture name="head" x="2" y="345" width="121" height="132"/>
<SubTexture name="left-ankle" x="220" y="395" width="25" height="32"/>
<SubTexture name="left-arm" x="219" y="42" width="35" height="29"/>
<SubTexture name="left-foot" x="71" y="479" width="65" height="30"/>
<SubTexture name="left-hand" x="219" y="2" width="35" height="38"/>
<SubTexture name="left-lower-leg" x="204" y="158" width="49" height="64"/>
<SubTexture name="left-pant-bottom" x="195" y="290" width="44" height="22"/>
<SubTexture name="left-shoulder" x="219" y="73" width="34" height="53"/>
<SubTexture name="left-upper-leg" x="185" y="343" width="33" height="67"/>
<SubTexture name="neck" x="214" y="128" width="34" height="28"/>
<SubTexture name="pelvis" x="149" y="96" width="63" height="47"/>
<SubTexture name="right-ankle" x="125" y="429" width="25" height="30"/>
<SubTexture name="right-arm" x="231" y="314" width="21" height="45"/>
<SubTexture name="right-foot-idle" x="149" y="145" width="53" height="28"/>
<SubTexture name="right-foot" x="2" y="479" width="67" height="30"/>
<SubTexture name="right-hand" x="220" y="361" width="32" height="32"/>
<SubTexture name="right-lower-leg" x="203" y="224" width="51" height="64"/>
<SubTexture name="right-pant-bottom" x="149" y="228" width="46" height="18"/>
<SubTexture name="right-shoulder" x="149" y="175" width="52" height="51"/>
<SubTexture name="right-upper-leg" x="149" y="248" width="44" height="70"/>
<SubTexture name="torso" x="149" y="2" width="68" height="92"/>
<SubTexture name="eye_indifferent" x="424" y="253" width="56" height="53"/>
<SubTexture name="eye_surprised" x="429" y="198" width="56" height="53"/>
<SubTexture name="front_bracer" x="401" y="345" width="35" height="48"/>
<SubTexture name="front_fist_closed" x="300" y="353" width="45" height="49"/>
<SubTexture name="front_fist_open" x="347" y="344" width="52" height="52"/>
<SubTexture name="front_foot" x="36" y="346" width="76" height="41"/>
<SubTexture name="front_foot_bend1" x="432" y="112" width="77" height="42"/>
<SubTexture name="front_foot_bend2" x="267" y="183" width="65" height="56"/>
<SubTexture name="front_shin" x="289" y="241" width="49" height="110"/>
<SubTexture name="front_thigh" x="398" y="183" width="29" height="67"/>
<SubTexture name="front_upper_arm" x="2" y="346" width="32" height="58"/>
<SubTexture name="goggles" x="2" y="244" width="157" height="100"/>
<SubTexture name="gun" x="161" y="244" width="126" height="122"/>
<SubTexture name="head" x="267" y="2" width="163" height="179"/>
<SubTexture name="mouth_grind" x="424" y="308" width="56" height="35"/>
<SubTexture name="mouth_oooo" x="242" y="368" width="56" height="35"/>
<SubTexture name="mouth_smile" x="184" y="368" width="56" height="35"/>
<SubTexture name="muzzle" x="2" y="2" width="263" height="240" frameX="-5" frameY="0" frameWidth="277" frameHeight="240"/>
<SubTexture name="neck" x="487" y="198" width="22" height="25"/>
<SubTexture name="rear_bracer" x="438" y="345" width="34" height="43"/>
<SubTexture name="rear_foot" x="114" y="368" width="68" height="36"/>
<SubTexture name="rear_foot_bend1" x="432" y="156" width="70" height="40"/>
<SubTexture name="rear_foot_bend2" x="334" y="183" width="62" height="50"/>
<SubTexture name="rear_shin" x="340" y="235" width="45" height="107"/>
<SubTexture name="rear_thigh" x="387" y="252" width="35" height="62" frameX="-4" frameY="0" frameWidth="39" frameHeight="62"/>
<SubTexture name="rear_upper_arm" x="474" y="345" width="28" height="52"/>
<SubTexture name="torso" x="432" y="2" width="59" height="108"/>
</TextureAtlas>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 253 KiB

After

Width:  |  Height:  |  Size: 204 KiB

View File

@ -66,9 +66,24 @@ public class StarlingAtlasAttachmentLoader implements AttachmentLoader {
attachment.regionHeight = texture.height;
attachment.regionOriginalWidth = frame ? frame.width : texture.width;
attachment.regionOriginalHeight = frame ? frame.height : texture.height;
var subTexture:SubTexture = texture as SubTexture;
if (subTexture) {
var root:Texture = subTexture.root;
var rectRegion:Rectangle = atlas.getRegion(path);
attachment.regionU = rectRegion.x / root.width;
attachment.regionV = rectRegion.y / root.height;
attachment.regionU2 = (rectRegion.x + subTexture.width) / root.width;
attachment.regionV2 = (rectRegion.y + subTexture.height) / root.height;
attachment.setUVs(attachment.regionU, attachment.regionV, attachment.regionU2, attachment.regionV2, atlas.getRotation(path));
} else {
attachment.regionU = 0;
attachment.regionV = 1;
attachment.regionU2 = 1;
attachment.regionV2 = 0;
}
return attachment;
}
public function newMeshAttachment (skin:Skin, name:String, path:String) : MeshAttachment {
var texture:Texture = atlas.getTexture(path);
if (texture == null)
@ -77,12 +92,12 @@ public class StarlingAtlasAttachmentLoader implements AttachmentLoader {
attachment.rendererObject = new SkeletonImage(Texture.fromTexture(texture)); // Discard frame.
var subTexture:SubTexture = texture as SubTexture;
if (subTexture) {
var matrix:Matrix = subTexture.transformationMatrix;
var root:Texture = subTexture.root;
attachment.regionU = matrix.tx / root.width;
attachment.regionV = matrix.ty / root.height;
attachment.regionU2 = (matrix.tx + subTexture.width) / root.width;
attachment.regionV2 = (matrix.tx + subTexture.height) / root.height;
var rectRegion:Rectangle = atlas.getRegion(path);
attachment.regionU = rectRegion.x / root.width;
attachment.regionV = rectRegion.y / root.height;
attachment.regionU2 = (rectRegion.x + subTexture.width) / root.width;
attachment.regionV2 = (rectRegion.y + subTexture.height) / root.height;
} else {
attachment.regionU = 0;
attachment.regionV = 1;
@ -107,12 +122,12 @@ public class StarlingAtlasAttachmentLoader implements AttachmentLoader {
attachment.rendererObject = new SkeletonImage(Texture.fromTexture(texture)); // Discard frame.
var subTexture:SubTexture = texture as SubTexture;
if (subTexture) {
var matrix:Matrix = subTexture.transformationMatrix;
var root:Texture = subTexture.root;
attachment.regionU = matrix.tx / root.width;
attachment.regionV = matrix.ty / root.height;
attachment.regionU2 = (matrix.tx + subTexture.width) / root.width;
attachment.regionV2 = (matrix.tx + subTexture.height) / root.height;
var rectRegion:Rectangle = atlas.getRegion(path);
attachment.regionU = rectRegion.x / root.width;
attachment.regionV = rectRegion.y / root.height;
attachment.regionU2 = (rectRegion.x + subTexture.width) / root.width;
attachment.regionV2 = (rectRegion.y + subTexture.height) / root.height;
} else {
attachment.regionU = 0;
attachment.regionV = 1;