Cocos2d-X使用CCAnimation创建动画

http://blog.csdn.net/u010105970/article/details/40593059

动画在游戏中是非常常见的

程序1：创建一个简单的动画

首先需要在工程目录下的Resource文件夹中放一张有各种不同动作的图片

在程序中添加下面的代码

[cpp]  view plain copy

1. #include "Animation.h"  
2.   
3. CCScene* Animation::scene()  
4. {  
5.     CCScene* s = CCScene::create();  
6.   
7.     Animation* layer = Animation::create();  
8.   
9.     s->addChild(layer);  
10.   
11.     return s;  
12. }  
13.   
14. bool Animation::init()  
15. {  
16.   CCLayer::init();  
17.   
18.     CCSize winSize = CCDirector::sharedDirector()->getWinSize();  
19.   
20.     //创建精灵  
21.     CCSprite* sp = CCSprite::create();  
22.     sp->setPosition(ccp(winSize.width / 2, winSize.height / 2));  
23.     addChild(sp);  
24.   
25.     //精灵放大4倍  
26.     sp->setScale(4);  
27.   
28.     //创建纹理  
29.     CCTexture2D* texture = CCTextureCache::sharedTextureCache()->addImage("walkLeft.png");  
30.   
31.     //创建一个数组  
32.     CCArray* arr = CCArray::create();  
33.   
34.     //从纹理中扣了10帧frame,组成数组  
35.     for(int i = 0; i < 10; i++)  
36.     {  
37.         //使用纹理创建精灵帧  
38.         //第一个参数：纹理  
39.         //第二个参数：矩形  
40.         CCSpriteFrame* frame = CCSpriteFrame::createWithTexture(texture,  
41.              
42.             //第一个参数：矩形的x坐标  
43.             //第二个参数：矩形的y坐标  
44.             //第三个参数：矩形的宽度  
45.             //第四个参数：矩形的高度  
46.             CCRect(i*18, 0, 18, 32));  
47.   
48.         arr->addObject(frame);  
49.     }  
50.   
51.     //使用精灵帧创建动画  
52.     //第一个参数：数组  
53.     //第二个参数：动画的帧数(播放两张图片的间隔时间)  
54.     CCAnimation* animation = CCAnimation::createWithSpriteFrames(arr, 0.1f);  
55.     CCAnimate* animate = CCAnimate::create(animation);  
56.   
57.     //播放动画  
58.     //CCRepeatForever::create动画播放无限次  
59.     sp->runAction(CCRepeatForever::create(animate));  
60.   
61.     return true;  
62. }  

执行结果：

程序2：有plist文件的动画加载

首先需要在工程目录下的Resource文件夹中放一张有各种不同动作的图片和一个plist文件

                        

plist格式的文件实际上是一个XML文件，文件中的内容

[cpp]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">  
3. <plist version="1.0">  
4.     <dict>  
5.         <key>frames</key>  
6.         <dict>  
7.             <key>Boom_1.png</key>  
8.             <dict>  
9.                 <key>frame</key>  
10.                 <string>{{204,305},{99,99}}</string>  
11.                 <key>offset</key>  
12.                 <string>{0,0}</string>  
13.                 <key>rotated</key>  
14.                 <false/>  
15.                 <key>sourceColorRect</key>  
16.                 <string>{{0,0},{99,99}}</string>  
17.                 <key>sourceSize</key>  
18.                 <string>{99,99}</string>  
19.             </dict>  
20.             <key>Boom_10.png</key>  
21.             <dict>  
22.                 <key>frame</key>  
23.                 <string>{{103,307},{99,99}}</string>  
24.                 <key>offset</key>  
25.                 <string>{0,0}</string>  
26.                 <key>rotated</key>  
27.                 <false/>  
28.                 <key>sourceColorRect</key>  
29.                 <string>{{0,0},{99,99}}</string>  
30.                 <key>sourceSize</key>  
31.                 <string>{99,99}</string>  
32.             </dict>  
33.             <key>Boom_11.png</key>  
34.             <dict>  
35.                 <key>frame</key>  
36.                 <string>{{103,206},{99,99}}</string>  
37.                 <key>offset</key>  
38.                 <string>{0,0}</string>  
39.                 <key>rotated</key>  
40.                 <false/>  
41.                 <key>sourceColorRect</key>  
42.                 <string>{{0,0},{99,99}}</string>  
43.                 <key>sourceSize</key>  
44.                 <string>{99,99}</string>  
45.             </dict>  
46.             <key>Boom_12.png</key>  
47.             <dict>  
48.                 <key>frame</key>  
49.                 <string>{{105,2},{99,99}}</string>  
50.                 <key>offset</key>  
51.                 <string>{0,0}</string>  
52.                 <key>rotated</key>  
53.                 <false/>  
54.                 <key>sourceColorRect</key>  
55.                 <string>{{0,0},{99,99}}</string>  
56.                 <key>sourceSize</key>  
57.                 <string>{99,99}</string>  
58.             </dict>  
59.             <key>Boom_13.png</key>  
60.             <dict>  
61.                 <key>frame</key>  
62.                 <string>{{103,105},{99,99}}</string>  
63.                 <key>offset</key>  
64.                 <string>{0,0}</string>  
65.                 <key>rotated</key>  
66.                 <false/>  
67.                 <key>sourceColorRect</key>  
68.                 <string>{{0,0},{99,99}}</string>  
69.                 <key>sourceSize</key>  
70.                 <string>{99,99}</string>  
71.             </dict>  
72.             <key>Boom_14.png</key>  
73.             <dict>  
74.                 <key>frame</key>  
75.                 <string>{{2,2},{101,101}}</string>  
76.                 <key>offset</key>  
77.                 <string>{0,0}</string>  
78.                 <key>rotated</key>  
79.                 <false/>  
80.                 <key>sourceColorRect</key>  
81.                 <string>{{0,0},{101,101}}</string>  
82.                 <key>sourceSize</key>  
83.                 <string>{101,101}</string>  
84.             </dict>  
85.             <key>Boom_15.png</key>  
86.             <dict>  
87.                 <key>frame</key>  
88.                 <string>{{2,408},{99,99}}</string>  
89.                 <key>offset</key>  
90.                 <string>{0,0}</string>  
91.                 <key>rotated</key>  
92.                 <false/>  
93.                 <key>sourceColorRect</key>  
94.                 <string>{{0,0},{99,99}}</string>  
95.                 <key>sourceSize</key>  
96.                 <string>{99,99}</string>  
97.             </dict>  
98.             <key>Boom_16.png</key>  
99.             <dict>  
100.                 <key>frame</key>  
101.                 <string>{{2,307},{99,99}}</string>  
102.                 <key>offset</key>  
103.                 <string>{0,0}</string>  
104.                 <key>rotated</key>  
105.                 <false/>  
106.                 <key>sourceColorRect</key>  
107.                 <string>{{0,0},{99,99}}</string>  
108.                 <key>sourceSize</key>  
109.                 <string>{99,99}</string>  
110.             </dict>  
111.             <key>Boom_17.png</key>  
112.             <dict>  
113.                 <key>frame</key>  
114.                 <string>{{2,206},{99,99}}</string>  
115.                 <key>offset</key>  
116.                 <string>{0,0}</string>  
117.                 <key>rotated</key>  
118.                 <false/>  
119.                 <key>sourceColorRect</key>  
120.                 <string>{{0,0},{99,99}}</string>  
121.                 <key>sourceSize</key>  
122.                 <string>{99,99}</string>  
123.             </dict>  
124.             <key>Boom_18.png</key>  
125.             <dict>  
126.                 <key>frame</key>  
127.                 <string>{{2,105},{99,99}}</string>  
128.                 <key>offset</key>  
129.                 <string>{0,0}</string>  
130.                 <key>rotated</key>  
131.                 <false/>  
132.                 <key>sourceColorRect</key>  
133.                 <string>{{0,0},{99,99}}</string>  
134.                 <key>sourceSize</key>  
135.                 <string>{99,99}</string>  
136.             </dict>  
137.             <key>Boom_2.png</key>  
138.             <dict>  
139.                 <key>frame</key>  
140.                 <string>{{204,204},{99,99}}</string>  
141.                 <key>offset</key>  
142.                 <string>{0,0}</string>  
143.                 <key>rotated</key>  
144.                 <false/>  
145.                 <key>sourceColorRect</key>  
146.                 <string>{{0,0},{99,99}}</string>  
147.                 <key>sourceSize</key>  
148.                 <string>{99,99}</string>  
149.             </dict>  
150.             <key>Boom_3.png</key>  
151.             <dict>  
152.                 <key>frame</key>  
153.                 <string>{{406,103},{99,99}}</string>  
154.                 <key>offset</key>  
155.                 <string>{0,0}</string>  
156.                 <key>rotated</key>  
157.                 <false/>  
158.                 <key>sourceColorRect</key>  
159.                 <string>{{0,0},{99,99}}</string>  
160.                 <key>sourceSize</key>  
161.                 <string>{99,99}</string>  
162.             </dict>  
163.             <key>Boom_4.png</key>  
164.             <dict>  
165.                 <key>frame</key>  
166.                 <string>{{305,103},{99,99}}</string>  
167.                 <key>offset</key>  
168.                 <string>{0,0}</string>  
169.                 <key>rotated</key>  
170.                 <false/>  
171.                 <key>sourceColorRect</key>  
172.                 <string>{{0,0},{99,99}}</string>  
173.                 <key>sourceSize</key>  
174.                 <string>{99,99}</string>  
175.             </dict>  
176.             <key>Boom_5.png</key>  
177.             <dict>  
178.                 <key>frame</key>  
179.                 <string>{{204,103},{99,99}}</string>  
180.                 <key>offset</key>  
181.                 <string>{0,0}</string>  
182.                 <key>rotated</key>  
183.                 <false/>  
184.                 <key>sourceColorRect</key>  
185.                 <string>{{0,0},{99,99}}</string>  
186.                 <key>sourceSize</key>  
187.                 <string>{99,99}</string>  
188.             </dict>  
189.             <key>Boom_6.png</key>  
190.             <dict>  
191.                 <key>frame</key>  
192.                 <string>{{408,2},{99,99}}</string>  
193.                 <key>offset</key>  
194.                 <string>{0,0}</string>  
195.                 <key>rotated</key>  
196.                 <false/>  
197.                 <key>sourceColorRect</key>  
198.                 <string>{{0,0},{99,99}}</string>  
199.                 <key>sourceSize</key>  
200.                 <string>{99,99}</string>  
201.             </dict>  
202.             <key>Boom_7.png</key>  
203.             <dict>  
204.                 <key>frame</key>  
205.                 <string>{{307,2},{99,99}}</string>  
206.                 <key>offset</key>  
207.                 <string>{0,0}</string>  
208.                 <key>rotated</key>  
209.                 <false/>  
210.                 <key>sourceColorRect</key>  
211.                 <string>{{0,0},{99,99}}</string>  
212.                 <key>sourceSize</key>  
213.                 <string>{99,99}</string>  
214.             </dict>  
215.             <key>Boom_8.png</key>  
216.             <dict>  
217.                 <key>frame</key>  
218.                 <string>{{206,2},{99,99}}</string>  
219.                 <key>offset</key>  
220.                 <string>{0,0}</string>  
221.                 <key>rotated</key>  
222.                 <false/>  
223.                 <key>sourceColorRect</key>  
224.                 <string>{{0,0},{99,99}}</string>  
225.                 <key>sourceSize</key>  
226.                 <string>{99,99}</string>  
227.             </dict>  
228.             <key>Boom_9.png</key>  
229.             <dict>  
230.                 <key>frame</key>  
231.                 <string>{{103,408},{99,99}}</string>  
232.                 <key>offset</key>  
233.                 <string>{0,0}</string>  
234.                 <key>rotated</key>  
235.                 <false/>  
236.                 <key>sourceColorRect</key>  
237.                 <string>{{0,0},{99,99}}</string>  
238.                 <key>sourceSize</key>  
239.                 <string>{99,99}</string>  
240.             </dict>  
241.         </dict>  
242.         <key>metadata</key>  
243.         <dict>  
244.             <key>format</key>  
245.             <integer>2</integer>  
246.             <key>realTextureFileName</key>  
247.             <string>PFBoom.png</string>  
248.             <key>size</key>  
249.             <string>{512,512}</string>  
250.             <key>textureFileName</key>  
251.             <string>PFBoom.png</string>  
252.         </dict>  
253.     </dict>  
254. </plist>  

程序代码：

[cpp]  view plain copy

1. #include "Animation.h"  
2.   
3. CCScene* Animation::scene()  
4. {  
5.     CCScene* s = CCScene::create();  
6.   
7.     Animation* layer = Animation::create();  
8.   
9.     s->addChild(layer);  
10.   
11.     return s;  
12. }  
13.   
14. //有plist文件的动画加载  
15. bool Animation::init()  
16. {  
17.     CCLayer::init();  
18.   
19.     CCSize winSize = CCDirector::sharedDirector()->getWinSize();  
20.   
21.     //创建精灵  
22.     CCSprite* sp = CCSprite::create();  
23.     sp->setPosition(ccp(winSize.width / 2, winSize.height / 2));  
24.     addChild(sp);  
25.   
26.     //精灵放大4倍  
27.     sp->setScale(4);  
28.   
29.   
30.     //创建精灵帧缓存  
31.     CCSpriteFrameCache* frameCache = CCSpriteFrameCache::sharedSpriteFrameCache();  
32.       
33.     //创建数组  
34.     CCArray* arr = CCArray::create();  
35.       
36.     //添加Plist文件  
37.     frameCache->addSpriteFramesWithFile("PFBoom.plist");  
38.   
39.     for (int i = 1; i <= 18; i++)  
40.     {  
41.         char key[128];  
42.   
43.         //通过名字获取精灵帧所在的图片  
44.         sprintf(key, "Boom_%d.png", i);  
45.   
46.         //将图片添加到精灵帧中  
47.         CCSpriteFrame* frame = frameCache->spriteFrameByName(key);  
48.   
49.         //将精灵帧添加到数组中  
50.         arr->addObject(frame);  
51.     }  
52.   
53.     //使用数组创建动画  
54.     CCAnimation* animation = CCAnimation::createWithSpriteFrames(arr, 0.1f);  
55.     CCAnimate* animate = CCAnimate::create(animation);  
56.   
57.     //动画消失  
58.     CCCallFunc* callfunc = CCCallFunc::create(sp, callfunc_selector(CCSprite::removeFromParent));  
59.     CCSequence* seq = CCSequence::create(animate, callfunc, NULL);  
60.       
61.     //播放动画  
62.    sp->runAction(seq);  
63.      
64.     return true;  
65. }  

执行结果：

程序3：通过鼠标实现动画切换

首先创建一个Animation类

在AnimationPreload.h中添加下面代码

[cpp]  view plain copy

1. #ifndef __AnimationPreload_H__  
2. #define __AnimationPreload_H__  
3.   
4. #include "cocos2d.h"  
5. USING_NS_CC;  
6.   
7. class AnimationPreload : public CCLayer  
8. {  
9. public:  
10.     static CCScene* scene();  
11.       
12.     bool init();  
13.   
14.     CREATE_FUNC(AnimationPreload);  
15.       
16.     bool ccTouchBegan(CCTouch*, CCEvent*);  
17.   
18.     CCSprite* sp;  
19. };  
20.   
21. #endif  

在AnimationPreload.cpp中添加下面的代码

[cpp]  view plain copy

1. #include "AnimationPreload.h"  
2.   
3. CCScene* AnimationPreload::scene()  
4. {  
5.     CCScene* s = CCScene::create();  
6.   
7.     AnimationPreload* layer = AnimationPreload::create();  
8.   
9.     s->addChild(layer);  
10.   
11.     return s;  
12. }  
13.   
14. bool AnimationPreload::init()  
15. {  
16.     //chushihu  
17.     CCLayer::init();  
18.   
19.     //获取窗口的大小  
20.     CCSize winSize = CCDirector::sharedDirector()->getWinSize();  
21.   
22.     //(创建纹理)从纹理里扣了10帧frame，组成数组  
23.     CCTexture2D* texture = CCTextureCache::sharedTextureCache()->addImage("walkLeft.png");  
24.       
25.     //创建数组  
26.     CCArray* arr = CCArray::create(); //retain  
27.       
28.     for (int i = 9; i >= 0; i--)  
29.     {  
30.         //创建精灵帧  
31.         CCSpriteFrame* frame = CCSpriteFrame::createWithTexture(texture,  
32.             CCRect(i*18, 0, 18, 32));  
33.   
34.         //将精灵帧添加到数组中  
35.         arr->addObject(frame);  
36.     }  
37.   
38.     // 通过数组创建动画  
39.     CCAnimation* animation = CCAnimation::createWithSpriteFrames(arr, 0.05f);  
40.   
41.     // 加入到缓存  
42.     CCAnimationCache::sharedAnimationCache()->addAnimation(animation, "MarioRun");  
43.       
44.   
45.     /***************************************************************/  
46.     /** 有plist文件的动画加载 **/  
47.   
48.     //创建精灵帧缓存  
49.     CCSpriteFrameCache* frameCache = CCSpriteFrameCache::sharedSpriteFrameCache();  
50.   
51.     //创建数组  
52.     arr = CCArray::create();  
53.   
54.     //将plist文件添加到精灵帧缓存中  
55.     frameCache->addSpriteFramesWithFile("PFBoom.plist");  
56.   
57.     for (int i = 1; i <= 18; i++)  
58.     {  
59.         char key[128];  
60.   
61.          //通过名字获取精灵帧所在的图片    
62.         sprintf(key, "Boom_%d.png", i);  
63.   
64.         //将图片添加到精灵帧中  
65.         CCSpriteFrame* frame = frameCache->spriteFrameByName(key);  
66.   
67.         //将精灵帧添加到数组中  
68.         arr->addObject(frame);  
69.     }  
70.       
71.     //创建动画  
72.     animation = CCAnimation::createWithSpriteFrames(arr, 0.1f);  
73.       
74.     // 加入到缓存  
75.     CCAnimationCache::sharedAnimationCache()->addAnimation(animation, "PlaneBOOM");  
76.   
77.     sp = CCSprite::create();  
78.     sp->setPosition(ccp(winSize.width / 2, winSize.height / 2));  
79.     addChild(sp);  
80.   
81.     //精灵方法4倍  
82.     sp->setScale(4);  
83.       
84.     // setTouch  
85.     setTouchEnabled(true);  
86.     setTouchMode(kCCTouchesOneByOne);  
87.   
88.     return true;  
89. }  
90.   
91. bool AnimationPreload::ccTouchBegan(CCTouch*, CCEvent*)  
92. {  
93.    sp->stopAllActions();  
94.   
95.     static int i = 1;  
96.       
97.     if (i == 1)  
98.     {  
99.         sp->runAction(CCAnimate::create(  
100.             CCAnimationCache::sharedAnimationCache()->animationByName("PlaneBOOM")  
101.             ));  
102.     }  
103.     else  
104.     {  
105.         sp->runAction(CCAnimate::create(  
106.             CCAnimationCache::sharedAnimationCache()->animationByName("MarioRun")  
107.             ));  
108.     }  
109.   
110.     i = 1 - i;  
111.       
112.     return 0;  
113. }  

执行结果：