Adde animation state to example.

spine-cocos2dx/example/Classes/ExampleLayer.cpp

@@ -15,16 +15,24 @@ CCScene* ExampleLayer::scene () {
 bool ExampleLayer::init () {
 	if (!CCLayer::init()) return false;
 
+    // Load atlas, skeleton, and animations.
 	atlas = Atlas_readAtlasFile("spineboy.atlas");
 	SkeletonJson* json = SkeletonJson_create(atlas);
 	json->scale = 0.75;
 	skeletonData = SkeletonJson_readSkeletonDataFile(json, "spineboy-skeleton.json");
-	animation = SkeletonJson_readAnimationFile(json, "spineboy-walk.json", skeletonData);
+	walkAnimation = SkeletonJson_readAnimationFile(json, "spineboy-walk.json", skeletonData);
+	jumpAnimation = SkeletonJson_readAnimationFile(json, "spineboy-jump.json", skeletonData);
 	SkeletonJson_dispose(json);
 
-	CCSkeleton* skeletonNode = CCSkeleton::create(skeletonData);
+	// Configure mixing.
+	AnimationStateData* stateData = AnimationStateData_create();
+	AnimationStateData_setMix(stateData, walkAnimation, jumpAnimation, 0.4f);
+	AnimationStateData_setMix(stateData, jumpAnimation, walkAnimation, 0.4f);
+
+	skeletonNode = CCSkeleton::create(skeletonData, stateData);
 	Skeleton_setToBindPose(skeletonNode->skeleton);
-	AnimationState_setAnimation(skeletonNode->state, animation, true);
+	AnimationState_setAnimation(skeletonNode->state, walkAnimation, true);
+	skeletonNode->timeScale = 0.3f;
 	skeletonNode->debugBones = true;
 
 	skeletonNode->runAction(CCRepeatForever::create(CCSequence::create(CCFadeOut::create(1),
@@ -36,11 +44,23 @@ bool ExampleLayer::init () {
 	skeletonNode->setPosition(ccp(windowSize.width / 2, 20));
 	addChild(skeletonNode);
 
+	scheduleUpdate();
+
 	return true;
 }
 
+void ExampleLayer::update (float deltaTime) {
+    if (skeletonNode->state->animation == walkAnimation) {
+        if (skeletonNode->state->time > 2) AnimationState_setAnimation(skeletonNode->state, jumpAnimation, false);
+    } else {
+        if (skeletonNode->state->time > 1) AnimationState_setAnimation(skeletonNode->state, walkAnimation, true);
+    }
+}
+
 ExampleLayer::~ExampleLayer () {
 	SkeletonData_dispose(skeletonData);
-	Animation_dispose(animation);
+	Animation_dispose(walkAnimation);
+	Animation_dispose(jumpAnimation);
 	Atlas_dispose(atlas);
 }
+

spine-cocos2dx/example/Classes/ExampleLayer.h

@@ -8,13 +8,16 @@ class ExampleLayer: public cocos2d::CCLayer {
 private:
 	spine::Atlas *atlas;
 	spine::SkeletonData *skeletonData;
-	spine::Animation *animation;
+	spine::Animation *walkAnimation;
+	spine::Animation *jumpAnimation;
+	spine::CCSkeleton* skeletonNode;
 
 public:
 	static cocos2d::CCScene* scene ();
 	~ExampleLayer ();
 
 	virtual bool init ();
+	virtual void update (float deltaTime);
 
 	CREATE_FUNC (ExampleLayer);
 };

spine-cocos2dx/example/Resources/common/spineboy-jump.json

@@ -0,0 +1,410 @@
+{
+"bones": {
+	"hip": {
+		"rotate": [
+			{ "time": 0, "angle": 0, "curve": "stepped" },
+			{ "time": 0.9333, "angle": 0, "curve": "stepped" },
+			{ "time": 1.3666, "angle": 0 }
+		],
+		"translate": [
+			{ "time": 0, "x": -11.57, "y": -3 },
+			{ "time": 0.2333, "x": -16.2, "y": -19.43 },
+			{
+				"time": 0.3333,
+				"x": 7.66,
+				"y": -8.48,
+				"curve": [ 0.057, 0.06, 0.712, 1 ]
+			},
+			{ "time": 0.3666, "x": 15.38, "y": 5.01 },
+			{ "time": 0.4666, "x": -7.84, "y": 57.22 },
+			{
+				"time": 0.6,
+				"x": -10.81,
+				"y": 96.34,
+				"curve": [ 0.241, 0, 1, 1 ]
+			},
+			{ "time": 0.7333, "x": -7.01, "y": 54.7 },
+			{ "time": 0.8, "x": -10.58, "y": 32.2 },
+			{ "time": 0.9333, "x": -31.99, "y": 0.45 },
+			{ "time": 1.0666, "x": -12.48, "y": -29.47 },
+			{ "time": 1.3666, "x": -11.57, "y": -3 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"left upper leg": {
+		"rotate": [
+			{ "time": 0, "angle": 17.13 },
+			{ "time": 0.2333, "angle": 44.35 },
+			{ "time": 0.3333, "angle": 16.46 },
+			{ "time": 0.4, "angle": -9.88 },
+			{ "time": 0.4666, "angle": -11.42 },
+			{ "time": 0.5666, "angle": 23.46 },
+			{ "time": 0.7666, "angle": 71.82 },
+			{ "time": 0.9333, "angle": 65.53 },
+			{ "time": 1.0666, "angle": 51.01 },
+			{ "time": 1.3666, "angle": 17.13 }
+		],
+		"translate": [
+			{ "time": 0, "x": -3, "y": -2.25, "curve": "stepped" },
+			{ "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" },
+			{ "time": 1.3666, "x": -3, "y": -2.25 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"left lower leg": {
+		"rotate": [
+			{ "time": 0, "angle": -16.25 },
+			{ "time": 0.2333, "angle": -52.21 },
+			{ "time": 0.4, "angle": 15.04 },
+			{ "time": 0.4666, "angle": -8.95 },
+			{ "time": 0.5666, "angle": -39.53 },
+			{ "time": 0.7666, "angle": -27.27 },
+			{ "time": 0.9333, "angle": -3.52 },
+			{ "time": 1.0666, "angle": -61.92 },
+			{ "time": 1.3666, "angle": -16.25 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"left foot": {
+		"rotate": [
+			{ "time": 0, "angle": 0.33 },
+			{ "time": 0.2333, "angle": 6.2 },
+			{ "time": 0.3333, "angle": 14.73 },
+			{ "time": 0.4, "angle": -15.54 },
+			{ "time": 0.4333, "angle": -21.2 },
+			{ "time": 0.5666, "angle": -7.55 },
+			{ "time": 0.7666, "angle": -0.67 },
+			{ "time": 0.9333, "angle": -0.58 },
+			{ "time": 1.0666, "angle": 14.64 },
+			{ "time": 1.3666, "angle": 0.33 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"right upper leg": {
+		"rotate": [
+			{ "time": 0, "angle": 25.97 },
+			{ "time": 0.2333, "angle": 46.43 },
+			{ "time": 0.3333, "angle": 22.61 },
+			{ "time": 0.4, "angle": 2.13 },
+			{
+				"time": 0.4666,
+				"angle": 0.04,
+				"curve": [ 0, 0, 0.637, 0.98 ]
+			},
+			{ "time": 0.6, "angle": 65.55 },
+			{ "time": 0.7666, "angle": 64.93 },
+			{ "time": 0.9333, "angle": 41.08 },
+			{ "time": 1.0666, "angle": 66.25 },
+			{ "time": 1.3666, "angle": 25.97 }
+		],
+		"translate": [
+			{ "time": 0, "x": 5.74, "y": 0.61 },
+			{ "time": 0.2333, "x": 4.79, "y": 1.79 },
+			{ "time": 0.3333, "x": 6.05, "y": -4.55 },
+			{ "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" },
+			{ "time": 1.0666, "x": 4.79, "y": 1.79 },
+			{ "time": 1.3666, "x": 5.74, "y": 0.61 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"right lower leg": {
+		"rotate": [
+			{ "time": 0, "angle": -27.46 },
+			{ "time": 0.2333, "angle": -64.03 },
+			{ "time": 0.4, "angle": -48.36 },
+			{ "time": 0.5666, "angle": -76.86 },
+			{ "time": 0.7666, "angle": -26.89 },
+			{ "time": 0.9, "angle": -18.97 },
+			{ "time": 0.9333, "angle": -14.18 },
+			{ "time": 1.0666, "angle": -80.45 },
+			{ "time": 1.3666, "angle": -27.46 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"right foot": {
+		"rotate": [
+			{ "time": 0, "angle": 1.08 },
+			{ "time": 0.2333, "angle": 16.02 },
+			{ "time": 0.3, "angle": 12.94 },
+			{ "time": 0.3333, "angle": 15.16 },
+			{ "time": 0.4, "angle": -14.7 },
+			{ "time": 0.4333, "angle": -12.85 },
+			{ "time": 0.4666, "angle": -19.18 },
+			{ "time": 0.5666, "angle": -15.82 },
+			{ "time": 0.6, "angle": -3.59 },
+			{ "time": 0.7666, "angle": -3.56 },
+			{ "time": 0.9333, "angle": 1.86 },
+			{ "time": 1.0666, "angle": 16.02 },
+			{ "time": 1.3666, "angle": 1.08 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"torso": {
+		"rotate": [
+			{ "time": 0, "angle": -13.35 },
+			{ "time": 0.2333, "angle": -48.95 },
+			{ "time": 0.4333, "angle": -35.77 },
+			{ "time": 0.6, "angle": -4.59 },
+			{ "time": 0.7666, "angle": 14.61 },
+			{ "time": 0.9333, "angle": 15.74 },
+			{ "time": 1.0666, "angle": -32.44 },
+			{ "time": 1.3666, "angle": -13.35 }
+		],
+		"translate": [
+			{ "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" },
+			{ "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" },
+			{ "time": 1.3666, "x": -3.67, "y": 1.68 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"neck": {
+		"rotate": [
+			{ "time": 0, "angle": 12.78 },
+			{ "time": 0.2333, "angle": 16.46 },
+			{ "time": 0.4, "angle": 26.49 },
+			{ "time": 0.6, "angle": 15.51 },
+			{ "time": 0.7666, "angle": 1.34 },
+			{ "time": 0.9333, "angle": 2.35 },
+			{ "time": 1.0666, "angle": 6.08 },
+			{ "time": 1.3, "angle": 21.23 },
+			{ "time": 1.3666, "angle": 12.78 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"head": {
+		"rotate": [
+			{ "time": 0, "angle": 5.19 },
+			{ "time": 0.2333, "angle": 20.27 },
+			{ "time": 0.4, "angle": 15.27 },
+			{ "time": 0.6, "angle": -24.69 },
+			{ "time": 0.7666, "angle": -11.02 },
+			{ "time": 0.9333, "angle": -24.38 },
+			{ "time": 1.0666, "angle": 11.99 },
+			{ "time": 1.3, "angle": 4.86 },
+			{ "time": 1.3666, "angle": 5.19 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"left shoulder": {
+		"rotate": [
+			{
+				"time": 0,
+				"angle": 0.05,
+				"curve": [ 0, 0, 0.62, 1 ]
+			},
+			{
+				"time": 0.2333,
+				"angle": 279.66,
+				"curve": [ 0.218, 0.67, 0.66, 0.99 ]
+			},
+			{
+				"time": 0.5,
+				"angle": 62.27,
+				"curve": [ 0.462, 0, 0.764, 0.58 ]
+			},
+			{ "time": 0.9333, "angle": 28.91 },
+			{ "time": 1.0666, "angle": -8.62 },
+			{ "time": 1.1666, "angle": -18.43 },
+			{ "time": 1.3666, "angle": 0.05 }
+		],
+		"translate": [
+			{ "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" },
+			{ "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" },
+			{ "time": 1.3666, "x": -1.76, "y": 0.56 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"left hand": {
+		"rotate": [
+			{ "time": 0, "angle": 11.58, "curve": "stepped" },
+			{ "time": 0.9333, "angle": 11.58, "curve": "stepped" },
+			{ "time": 1.3666, "angle": 11.58 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"left arm": {
+		"rotate": [
+			{ "time": 0, "angle": 0.51 },
+			{ "time": 0.4333, "angle": 12.82 },
+			{ "time": 0.6, "angle": 47.55 },
+			{ "time": 0.9333, "angle": 12.82 },
+			{ "time": 1.1666, "angle": -6.5 },
+			{ "time": 1.3666, "angle": 0.51 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"right shoulder": {
+		"rotate": [
+			{
+				"time": 0,
+				"angle": 43.82,
+				"curve": [ 0, 0, 0.62, 1 ]
+			},
+			{
+				"time": 0.2333,
+				"angle": -8.74,
+				"curve": [ 0.304, 0.58, 0.709, 0.97 ]
+			},
+			{
+				"time": 0.5333,
+				"angle": -208.02,
+				"curve": [ 0.462, 0, 0.764, 0.58 ]
+			},
+			{ "time": 0.9333, "angle": -246.72 },
+			{ "time": 1.0666, "angle": -307.13 },
+			{ "time": 1.1666, "angle": 37.15 },
+			{ "time": 1.3666, "angle": 43.82 }
+		],
+		"translate": [
+			{ "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" },
+			{ "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" },
+			{ "time": 1.3666, "x": -7.84, "y": 7.19 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"right arm": {
+		"rotate": [
+			{ "time": 0, "angle": -4.02 },
+			{ "time": 0.6, "angle": 17.5 },
+			{ "time": 0.9333, "angle": -4.02 },
+			{ "time": 1.1666, "angle": -16.72 },
+			{ "time": 1.3666, "angle": -4.02 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"right hand": {
+		"rotate": [
+			{ "time": 0, "angle": 22.92, "curve": "stepped" },
+			{ "time": 0.9333, "angle": 22.92, "curve": "stepped" },
+			{ "time": 1.3666, "angle": 22.92 }
+		],
+		"translate": [
+			{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+			{ "time": 1.3666, "x": 0, "y": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	},
+	"root": {
+		"rotate": [
+			{ "time": 0, "angle": 0 },
+			{ "time": 0.4333, "angle": -14.52 },
+			{ "time": 0.8, "angle": 9.86 },
+			{ "time": 1.3666, "angle": 0 }
+		],
+		"scale": [
+			{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+			{ "time": 1.3666, "x": 1, "y": 1 }
+		]
+	}
+}
+}

spine-cocos2dx/src/spine/spine-cocos2dx.cpp

@@ -69,8 +69,8 @@ Skeleton* _Cocos2dxSkeleton_create (SkeletonData* data, CCSkeleton* node) {
 	return SUPER(self);
 }
 
-CCSkeleton* CCSkeleton::create (SkeletonData* skeletonData) {
+CCSkeleton* CCSkeleton::create (SkeletonData* skeletonData, AnimationStateData* stateData) {
-	CCSkeleton* node = new CCSkeleton(skeletonData);
+	CCSkeleton* node = new CCSkeleton(skeletonData, stateData);
 	node->autorelease();
 	return node;
 }
@@ -94,7 +94,7 @@ CCSkeleton::~CCSkeleton () {
 
 void CCSkeleton::update (float deltaTime) {
 	Skeleton_update(skeleton, deltaTime);
-	AnimationState_update(state, deltaTime);
+	AnimationState_update(state, deltaTime * timeScale);
 	AnimationState_apply(state, skeleton);
 	Skeleton_updateWorldTransform(skeleton);
 }

spine-cocos2dx/src/spine/spine-cocos2dx.h

@@ -50,12 +50,13 @@ class CCSkeleton: public cocos2d::CCNodeRGBA, public cocos2d::CCBlendProtocol {
 public:
 	Skeleton* skeleton;
 	AnimationState* state;
+	float timeScale;
 	bool debugSlots;
 	bool debugBones;
 	cocos2d::CCTextureAtlas* atlas; // All region attachments for a skeleton must use the same texture.
 	unsigned int quadCount;
 
-	static CCSkeleton* create (SkeletonData* skeletonData);
+	static CCSkeleton* create (SkeletonData* skeletonData, AnimationStateData* stateData = 0);
 	CCSkeleton (SkeletonData* skeletonData, AnimationStateData* stateData = 0);
 	virtual ~CCSkeleton ();