Cocos2d support for Motion Welder

Hello. This is a first development post from Paper Plane Studio and please bare our poor english.

I am Jack Ng. I would like to shared some experience and codes about making animation on cocos2d.

In this post, i will shared how to use Motion Welder to make animation and how to play it with CCMWSprite. Motion Welder is an animation editor target on J2ME development.

If your game have complicate animation, adding animation using CCAnimation may need lots of code and waste lots of time. Using Motion welder has following advantages.
- clean code, only several line of code need
- motion welder handle the anchor point, you will never need to set anchor point any more
- what artist see is what will come out on iPhone, the workflow can be more smooth
- z order is handled by Motion Welder

If you know nothing about Motion Welder, check this link and try it  http://www.motionwelder.com/. If you are using Windows simply click the MotionWelder.exe to open it. If you are using mac, you can click the lib.jar to open it.

After you download Motion Welder, load the project test.asd from the file MWTutorial.zip.

Play with it.
You can also find a tutorial in the offical website of Motion Welder.
http://www.motionwelder.com/tutorial.php.  Read through Step1-Step5.

After you export a .anu file.  You can load the file, say test.anu using following code.
//test sprite with two image source, and clips from two images
NSArray* imageSourceList = [NSArray arrayWithObjects:@"uggy.png",@"platform.png",nil];
mwsprite1 = [[CCMWSprite alloc] initWithMWFile:@"test.anu" withImageList:imageSourceList withAnimationIndex:0];
mwsprite1.shouldLoop = true;
mwsprite1.scale = 2.0f;
mwsprite1.rotation = 30;
mwsprite1.position = ccp(240,160);
mwsprite1.delegate = self;


uggy.png and platform.png are the SpriteSheet use in Motion Welder. You need to follow the order you import in Motion Welder.

You also need to schedule a timer to call tick function in CCMWSprite. This is need if you are going make it automatically change frame for you.
Automatically handle playing of animation
[mwsprite1 schedule:@selector(tick:)]


or you can manually switch the frame by
[mwsprite1 setFrameIndex:0]

 How the animation will play can be controlled from Motion Welder using delay frame count for individual frame.

It is advised to use the delay frame count from Motion Welder since you can preview the animation. What you see in motion welder is what you will get on iDevice. The default delay frame duration of Motion Welder is 0.1s, you can change it from Option. You will also need to change the minimum frame interval for CCMWSprite.
mwsprite2.minFrameInterval = 0.2;
       
For every CCMWSprite which extends CCNode, there will be corresponding CCSpriteSheet created and added ass a child CCMWSprite. If you got 10 CCMWSprite, there will at least 10 CCSpriteSheet created. This is not really a good practice. However, CCMWSprite can set a external CCSpriteSheet to shared between different CCMWSprite.

CCSpriteSheet* spriteSheet = [CCSpriteSheet spriteSheetWithFile:@"uggy.png"];
[self addChild:spriteSheet];

 //test sprite with two image source, and clips from two images
NSArray* imageSourceList = [NSArray arrayWithObjects:@"uggy.png",@"platform.png",nil];
mwsprite1 = [[CCMWSprite alloc] initWithMWFile:@"test.anu" withImageList:imageSourceList withAnimationIndex:0];
mwsprite1.shouldLoop = true;
mwsprite1.scale = 2.0f;
mwsprite1.rotation = 30;
mwsprite1.position = ccp(240,160);
mwsprite1.delegate = self;
[self addChild:mwsprite1];

//can set a external sprite sheet
//this can share the SpriteSheet for all CCMWSprite with same image souceto increase performance
[mwsprite1 setExternalSpriteSheet:spriteSheet forImageIndex:0];


In the source file, there is a CCAnimatedSprite which load animation from a .plist file. If anyone is interest at that part and do not understand the code. Plz tell me and i am willing to write a simple tutorial. Hope you enjoy this post.

FTP: Download Source Here
HTTP: Download Source Here