地球人己阻止不了程序猿们学习Cocos2d-X了

1、地球人己阻止不了程序猿们学习cocos2d-x t （第一篇）很早就jf始留意cocos2d,但不人习惯用objective c,同时也考虑到跨平台的问题，所以直没冇ie式用过，後來冇了 cocos2d-x,就 更为关注.老想有空时拿来玩玩写点东西.原贴发表于：/bbs/forum.php?mod=viewthread&tid=775&extra=page%3dl很早就开始留意cocos2d,但不太习惯用objective c,同时也考虑到跨平台的问题，所以一直没有正式用过，後來有 了 cocos2d-x,就更为关注，老想有空时拿來玩

2、玩写点东西.之前下载了 cocos2d-x 看了一下附带的例子,被里边的 scene, layer, cctexturecache, ccspriteframecache等等弄得很是混乱，再加上工作上的事情，就放下了，直到上周无意屮下载了一木书的pdf,决定再好好地学习一下，而我发现有关cocos2d-x的教程并不名，所以我就班门弄斧的和人家分事一下我的学习过程吧.（附带一提,这本书叫learn cocos2d game development with ios 5,这麽好的书当然要买正版支持,我已经在amazon定购了，正在运送途屮）学习一种新技术，一般我会找一木较好的参考书（或资料），先了

3、解一下它的基本概念，再通过实习应用來熟识.我想不少竜鞋可能是被cocos2d超名的功能所吸引而选用它，但其实写个一般的小遊戏并不需要知道得太名，以下就是我想先了解的东西：1）cocos2d的基木架构（像scene, layer等的概念）2）怎样在萤幕画东西（texture处理,sprite等）3）操控4）声效5）菜单处理闵g闯孚nwfx參救岂芳疼艸s耳姜启川冷空耳葢徐耳君，口>cocos2d j±mvc20 一 0 expresstsam1.琮>>mwindows rnbhr血迦養目出去亦詆蝕盜陛os迦android)-lmuned yefnpugy)、wsualc

4、:£win出genem-cocosjdmcst& l-b&ryaclr consoh aefonco3cd$»appuksonson by: - dxaumwn32 comok >2xak53win32 preset-冷艺牛一-一占 temp 一mesvsutc:uae-c;v6£-c:vhu一 c:idkx_-ey§acono£2dwophge app=aeo3v¥-c vaua-c vi- c v6u2l(ype: vfsuslc:an app-icsl-ons-lt 55 cocol2d,x br“ry?

5、$32 p57tfo<mnbmelogan:background.pnggrass block.pngp7.p ngclosenormal.pnghelloworld.pngp8.p ng0closeselected.pngp5.pngp9.pngdirt block.pngp6.p ng把这些图像画到萤幕上，最简单就是把每个图放进一个个的ccsprite然後加到当前的layer上 以下这段代码就是把 background.png, grass block.png 和 p8.png 显示在iffliim:复制代码1ccsize size = ccdirector:shareddirect

6、or()->getwinsize():2.3. ccsprite* psprite = ccsprite:spritewithfi1e("background, png*):4. cc break if(! psprite);5.5. psprite->setposit ion(*(size, width/2, size.height/2);6. this->addchi1d(psprite, 0);&9.psprite = ccsprite:spritewithfi1e("grass block.png"):10cc break if(

7、! psprite);12.psprite->setposition(*(size, width/2, size, height/2);13.this->addchild(psprite, 0):14.15.psprite = ccsprite: spri tcwi thfile(zzp8 png"):16.cc_break if(! psprite):17.18.ccsize dim = psprite->gelconlenlsizeo:19.psprite >setposition(*(size, widlh/2, size.height/2+dim. h

8、eight/2):20.this->addchild(psprite, 0):程序跑起来就会看到下边这个画面:卑 cocos2d: hello world60.01 *7 不过我们最终的目标是把遊戏放到ios或android机子上玩，所以我们不能不考虑一下有关0pengl es优化的问 题，两大关键问题就是内存(显存)运用和速度.先看一下内存问题，opengl es纹理的宽和高都要是2的倍数，以刚才的例子来说，虽然background.png本身是480x320,但在载入内存後,它其实会被变成一张512x512的纹理,而crass block.png则由101x131变成1 28x256

9、,我们可以看到如此这样会造成不少浪费.再看看关於渲染速度方而，opwngl es上来说我们应该尽最减少渲染时切换纹理和gidrawarray的呼叫，刚才的例 子毎画一个图像都会切换-次纹理并呼叫一次gidrawarray ,我们这里只画3样东西，所以不会看到有什麼问题，但 如果我们要渲染儿十个甚至儿百个图像，速度上就会被拖慢.很明显这并不是我们所想要的.那我们应该怎麽解决这些问题呢？答案就是利用纹理地图(texture atlas),比如下而这张纹理就是把我们想用的图像都 合併在一起，而它的大小正好是512x512:如果人手去做这个合併工作就太痛苦了，这里要向犬家推荐一个十分好用的工具：tex

10、turepacker! (http:/www.text首先我们把想要用的图像都放到一个目录里，再用texturepacker的"add folder11功能把目录加进氏texturepa cker的默认输出格式就是cocos2d:为了节省位置,我们可以把border padding和shape padding都设为1,而选了 allow rotation可以让texturepacker更为有效率的摆放图像在纹理里：geometryautosize叼scale1.0000 哥scale modesmoothreduce border artifactsallow rotationzit

11、rimcrop在键入了输出的档案名字後，我们就可以川publish把纹理输出.接下來，我们把输出的两个档案（我们这里的例子是images.plist和images.png）放到resources iii,就可以在程序里用ccspriteframecache把纹理和有关资料载入：复制代码1.cache->addspriteerameswi thl;i 1 e(images pl ist", "images png*); 但现在我们只有一张叫“images.png”的纹理，那麽怎样去调用比如是background.png呢?当然我们还是用ccs prite做渲染图像的丄作

12、但在建立一个ccsprite时，我们换为用spritewithspriteframename而不是spritewithfile:复制代码1.2ccsprite* psprite = ccsprite:spritewithspritel*ramenamec background png):3.4ccspriteframecache *cache = ccspri tcframecache:sharcdspritcfraniecache():5. cache->addspriteframcswi thfileimages plisl", "images png"

13、);6.7./ get window size and place the label upper8ccsize size = ccdirector:shareddirector()->getwinsize():9.10. ccsprite* pspri te = ccsprite: spr i tcwi thspr i teframename (z，backgrou nd. png"):11. cc break if(! psprite):12.12. psprite->setposition(*(size, width/2, size, height/2);13. t

14、his->addchiid(pspri te, 0):15.14. psprite = ccsprite:spri tcwi thspritcframename(*grass block png")：15. cc_break_if(! psprite);18.19.psprite->setposition(*(size, width/2, size.height/2):20this->addchiid(pspri te, 0):21.22. psprite = ccsprite:spritcwithspriteframename(*p& png")

15、;23. cc_break_if(! psprite);25.ccsize dim = pspri tc->getcontenisizeo :26.psprite >setposition(*(size, widlh/2, size.height/2+dim. height/2);27.this->addchild(psprite, 0):28.29.來到这艮 我们己经逹到了节省内存和减少纹理切换，瑕後一个我们想做的优化是减少gidrawarray的次数，而我们所运用的技巧，就是批次渲染(batch rendering), cocos2d提供了 ccspritebatchno

16、de來方便人家做有关的处理，ccspritebatchnode里的ccsprite都是要用同个纹理的,所以我们在建立 个ccspritebatchnode是要给它-个纹理,再把它加到layer里:复制代码1. cctexture2d *texture =cctexturccache:sharedtexturecache() >texturerorkcy c*images png"):2. ccspritebatchnode *spritebatch =ccspr i tcba t chnode:batchnodewi thtcxlure(texture):3. addchild

17、(spritebatch):接下来我们如當的建立各个ccsprite,但不同的地方是我们不把它们加在layer里而是把它们宜接加到ccspritebatchnode 上：貝制代码1.3.ccspr i ieframecache *cache = ccspr i teb'ramecache: sharedspri teeraniecache ():cache->addspri leerameswi thl;i lec"images pl isl". images png");5.cctexlure2d *lexlure =cctexturecachc:

18、sharcdtexturecache()->tcxtureforkcy c*images png":ccspri tebatchnode *spritebatch =ccspr i teba t chnode:batchnodewi thtexlurc(texture):addchiid (spri tebatch):/ get window size and place the label uppcr.ccsize size = ccdirector:sharcddircctor()->getwinsizc():ccspri to* psprite = ccspri t

19、o: spr i tcwi t hspri tcfraniexamc (z，backgrou nd. png"： psprite->setposition(»*«(size, widlh/2, size.hcight/2): spritebalch->addchiid(psprito, 0): psprite = ccsprite:spritcwithspriicfranicnanie(*grass block png")： psprite->setposition(»*«(size, widlh/2, size.h

20、cight/2): spritebalch->addchiid(psprito, 0): psprite = ccsprite:spritcwithspritcfranicname(*p8 png"):ccsize dim = pspritc->getcontcnlsizc():psprite->setposition(»*«(size, widlh/2, size, height/2+dim. hcight/2):spritebalch->addchiid(psprito, 0):本文系cocoachina社区版主dr_watson原创丫

21、习笔记。地球人己阻止不了程序猿们学习cocos2d-x 了二i： -次我们提到在遊戏也耍川纹理地图(texture atlas),除卄:冇其他特殊情况，不然这个呈木i:是必然的选择，所以我们以这个为前提条 件下看看怎样弄动画.感谢cocoachina社区版主dr_watson在cocos2d-x中文网的分享。(内容重点：动価，ccanimation, ccanimate, ccspriteframecache)一个遊戏的角色如果只是静止的，相信不会太招人喜欢，动作流畅自然的遊戏角色，更能让遊戏人放异彩，搞不好受欢 迎了还可以学小鸟去出毛娃娃扯远了，这次让我们看一下在cocos2d-x上怎样处理

22、角色的动画吧.上一次我们捉到在遊戏里要用纹理地图(texture atlas),除作有其他特:殊情况，不然这个基木上是必然的选择，所以我们 以这个为前提条件下看看怎样弄动训.(这次用的动画借用了老gcocos2d-x教程里的小女孩,这里向犬家推荐一下老g的博客和教程http:/4137613.blog.51 老 g 的 animatepacker)卜边就是这次我们会用到的图像：closenormal.pngicloseselected.pn9girll.p nggirl2.pnggirl3.p nggil4.pnghelloworld.pngwalkjeft.p ng如果大家有留总上次的教程，

23、我们在载入纹理地图时是用了 ccspriteframecache:1 ccspriteframecache *cacheccspriteframecache:sharedspriteframecache ();2.cache->addspriteframeswithfile (n images pl istn, 11 images .png11)；由此我们可以推论出这些图像的“存在哄实己被变成了动画帧(ccspriteframe),这样对於我们弄动画可谓是非帘方便,就拿girl1.png girl4.png來说，我们可以用下边这几行代码把它们组成一个动画:1 ccmutablearray

24、<ccspriteframe*> *animframes new ccmutablearray<ccspriteframe*>(4); / 一共有4幀23ccspriteframe * frame = cache->spriteframebyname (,rgirl l.p ng”); / 加 i進第1幀4animframes->addobject(frame);56frame = cache->spriteframebyname (ngirl2 .png11); / 加 i 進第 2 °贞7animframes->addobject(

25、frame);89frame = cache->spriteframebyname ("girl3png") ; / 加i進第 310 animframes->addobject(frame);12 frame = cache->spr it eframebyname (ngirl4 .png11); / 办 i 進第 4 0 贞13 animframes->addobject(frame);14.15. ccanimation *animation = ccanimation:animationwithframes(animframesfo.lf)

26、; /用剛才的勒曲幀生成一 個每一幀的播放長度是01秒复制代码接下來我们可以把这个动画放进一个ccsprite里播放:1 psprite = ccsprite: : spritewithspriteframename ( "girll.png1*);2.4psprite->setposition(ccp(size.width/5# size height/2);psprite->runaction(ccanimate:actionwithanimation(animation, false);j cocos2d: hello worldactionwithanimatio

27、n的第二个参数是brestoreqiginalframe,这个是什麽总思呢？这是指当整套动画播完後，是不是 显示|»'l ccsprite本来的图像，即是我们调用ccspritespritewithspriteframenamec'xxx")时所提供的那个,我们可以 把 spritewithspriteframename(wgirl 1.pngm)的 ngirl1.pngn 换成"closenormal.pngs 再把 false 变成 true 来试一下. 那这个安排有什麼用呢，一个例子是我们的主角有一个静止动态和一个踢腿动画，当我们把静1上动态

28、设定为ccsptite 原图像，在播放完踢腿动画後就可以自动换回静止动态了.我们也可以不断的重複播放动冊i:1 psprite->runaction(ccrepeatforever:actionwithactionccanimate:actionwithanimation(animation, false);复制代码当然每次弄一个动画都这縻大费周章就太烦了，所以我们可以写一个常用函数方便一下:1 ccanimation *spritehelper:animationwithsingleframes(const char *namez int count, float delay)23cc

29、spriteframecache *cache = ccspriteframecache:sharedspriteframecache();45ccmutablearray<ccspriteframe*> *animframes = newccmutablearray<ccspriteframe*>(count);67char str80;8for (int k = 0; k < count; k+)10sprintf (str# m%s%dpngj name, (k + 1);11ccspriteframe *framecache->spriteframe

30、byname(str);12.animframes->addobject(frame);131415ccanimation *animation = ccanimation:animationwithframes(animframes, delay);1617.return animation;复制代码18我们预设的条件是每个动画帧名字的编号，都是山1开始顺序的数卜氏 因此像刚才的小女孩走路动甌 对以用下廁这 句代码生成：1 ccanimation 次animation = spritehelper:animationwithsingleframes("girl4, 0lf);

31、复制代码如果一个动画的每个帧都是像girh.png- girl4.png这样子般独立的，那麽只耍用上面的代码就可以搞定，但有时美术 人员给我们的动画可能是像walkjeft.png这样，是连住一起的，那该怎麽办呢？因为ccspriteframecache只会给我 们一个动倆帆 我们需耍的郤是4个，这个情况下我们只好自己做点手脚把它拆成4个了！首先让我们看一下ccspriteframe到底是什麽，ccspriteframe基本i:就是捉供了一个图像在拼进纹理地图後它的位 置和木身的大小，比如我们拿girll.png的ccspriteframe來看一下:1 ccspriteframe * fram

32、e = cache->spriteframebyname (ngirll .png11)；复制代码可以看到它在纹理地图里的位置是(194, 371)而它的人小是32x48:b / m.obrectorigin二 size二 7 originx= 194.00000 y=371.00000 x194.00000。y371.00000 y sizewidth=32.000000 height二48.000000 w width32.000000 height48.000000再看一下walkjeft.png的帧,它的大小是128x48:日 p mobrectorigin=.size=,. o

33、 originx= 1.0000000 y= 451.00000 3 x1.0000000j y451.00000 “ sizewidth二 128.00000 height=48.000000 0 width128.00000y height48.000000（这里我做了一个艰难的决定，上一次我们提到在用texturepacker制做纹理地图时叮以选用trim/crop来拿掉图像周 围的透明像索用以节省空间，但这样一來在分拆动训帧时就会带來麻烦，所以这里我以一点空间浪费换取程序上的方 便，没有用trim/crop） 它也是4个动画帧，即是每个帧也是32x48!於是我们町以根据这些资料，把它分

34、拆成4个动画帧來生成ccanimation.1 int col = 4;2.ccspriteframe rip cache->spriteframebyname ( w7；alk_lef t png11);4ccsizeoriginalsize = strip->getoriginalsizelnpixels()5ccrectstriprect = strip->getrect();67floatw = originalsize width/col;8floath = originalsize.height;910floatx = striprectorigin x;11.f

35、 loa tystriprect.origin y;12.13ccmutablearray<ccspriteframe*> *animframes = newccmutablearray<ccspriteframe*>(col);7.ccspriteframe * frame = ccspriteframe:framewithtexture (texture.ccrectmake(xz yf w.h);18.animframes >aadobject(frame);19.20.22.ccanimation *animation = ccanim

36、ation:animationwithframes(animframes,复制代码当然可爱的芙术人员除了会把-个动作的动训拼在一起，有时还会把同一个角色的所有动画放在-张图像里给我们，再 加上texturepacker clt'allow rotation"功能，我们最後得到的动画帧在纹理地图町能是以"girl.png"这样的姿态躺著 出现杯具了吧？3啊吟啊我们只好把行和列也计算在内，写个函数來统-处理了:ccanimation *spritehelper:animationwithstrip(const char *namer int counfloat

37、 delay, int col, int row, int startingrow)(ccmutablearray<ccspriteframe*> *animframes = newccmutablearray<ccspriteframe*>(count);ccspriteframecache *cache = ccspriteframecache:sharedspriteframecache();ccspriteframe *strip = cache->spriteframebyname(name);cctexture2d *texture = strip-&

38、gt;gettexture ();ccsize originalsize = strip->getoriginalsizeinpixels();bool rotated = strip->isrotated();ccrect striprect strip->getrect);float w = originalsizewidth/col;float h = originalsizeheight/row;float x striprect.origin x;float y = striprectorigin y;int n = 0;bool done = false;floa

39、t xx;float yy = y;for (intingrow;i<row && !done;i+)if (rotated)xx = (x+originalsize height)-(i + 1)elsefor (int j=0; j<col && !done;j + + )ccspriteframe *frame = ccspriteframe:framewithtexture(texturefccrectmake(xxf yy, wf h);frame->setrotated(rotated);animframes->addobje

40、ct(frame);if (rotated)yy += w;elsexx += w;n+;if (n >= count)done true;if (rotated)yy = y；elseyy += h；ccanimation *animation = ccanimation:animationwithframes(animframesr delay);return animation;复制代码col是指原图像共有多少列，row是指原图像共有多少行，而startingrow则是指山那一行开始拿动画帆 比如我们想耍 背对著我们的小女孩走路动画,就用：1 ccanimation *animat

41、ion = spritehelper:animationwithstrip(mgirl.png', 4. 0lf， 4, 4. 3); 复制代码题外话：我是刚开始学习cocos2d-x的，所以有什麽地方写错了或写的不好，炊迎人家指正赐教，互相交流学习!demo卜敦cocos2d-x 中文 论丘 1 原帖:httd：/cncocos2dxora/bbs/forum.dhd?mod=viewthread&tid=805地球人己阻止不了程序猿们学习cocos2d-x 了三知道r cocos2d-x的 些基本知识，我觉得羌不餌可以开始实习因为我的ii标是想兼顾windows,ios和a

42、ndroid,所以我们先看看怎样建立和设定有关的工程吧.感谢cocoachina社区版主dr_watson在cocos2d-x中文网的分享。（内容重点：win+iosf android兼容）c c知道了 cocos2d-x的一些基木知识，我觉得差不多可以开始实习了卵，因为我的冃标是想兼顾windows, ios（iphone+ipad）和android,所以我们先看看怎样建立和设定有关的工程吧.第一步来说,我们要準备一些图像来用，和第一篇一样，我找来了 daniel cook提供的免费资源，关于dane大家可以看 看这里：/bbs/forum.php

43、?mod=viewthread&tid=851& extra=page%3d10o.png55pngbackgroundinggirh.png2738healthheart.pngstdr.pnq因为想兼容iphone 4 retina和ipad,背景图像我选择了 1024x768的人小（细节稍後再讨论），在用texturepacker 製作纹理时,我们要在档案名字加上m-hdw:outputdata formatdata file匚0匚os2d2ta/de mo03/assets/i mages-hd .plist texture formatimage formatdith

44、eringtexture filepng (.png)rgba8888nearestmeighbour2ta/de mo03/assets/i mages-hd. png 另外耍选上”auto sd”，这样的话texturepacker会口动生成sd的图像和纹理:sum© modesmooth yautosd0我们应该把border padding设为0,不然的话因为背影的宽己是1024,之後产生出来的纹理的宽要变成2048 71border paddingshape padding01e最後按 publish,我们就得到 4 个档案:images-hd.plist, images-

45、hd.png, images.plist 和 images.png.接下來我们如往常般建立一个vc的cocos2d-x项冃，再把刚才成生的榔案取帶resources里的内容，然後打开helloworldscene.cpp,把用不善的代码删去，加上我们自c的东西：1. /2/ add your codes below3./45 ccdirector:shareddirector()->enableretinadisplay(true);67.ccspriteframecache *cache =ccspriteframecache:sharedspriteframecache();8 ca

46、che->addspriteframeswit.hfile ("images plistm r images png");9ccsize size = ccdirector:shareddirector ()->getwinsize ();12ccsprite* psprite =ccsprite: : spritewithspriteframename ('*background png” );13psprite->setposition(ccp(size width/2, size height/2);14 this->addchild(

47、psprite);1516 psprite = ccsprite: : spritewithspritefr*amename (mgirl4 pngw );17psprite >setposition(ccp(size width/2, size height/2);18 .this->addchild(psprite);1920.psprite = ccsprite:spritewithspriteframename(nhealthheartpng”);21psprite->setposition(ccp(size width/2 + 100, size.height/2

48、+ 50);22.this->addchild(psprite);复制代码这里可以看到我们用t enableretinadisplay(true)选择hd画而,这时如果我们在vc里执行项目的话，可以看到整个画面比z前的大了一倍！ cocoizd: fkllo world60.0搞好了 vc这部份，我参考rg的教程http:/4137613.blog.51 了一个叫iosgame的cocos2d-x xcode工程，然後我把卜图这些选择了的档案由工程里删掉并把vc工程里的有关 档案换上去：biosgamc1 urgete ios sdk 5.1 cj iosgame resources&a

49、mp; gosenormal.png fl closeselected.png defaulrpngq helloworld.pngu lcon-72.png-lcon-small-50.png 弓 icon-smallpngu lcon-small2x.pngg icon.png> lcon2x.pngj info.plist* itunesartwork rllibs _ cocos2dx _ cocosdenshion o iosm! main.mh appcontroller.hm! appcontrollecmm hl rootviewcontroller>hmi roo

50、tviewcontrollenmm ci asseshi appdelegate.he appdelegate.cpp 信 helloworldscene-hb helloworldscenexpp> _ supporting files 二frameworksk l products在iphone模拟器上的画面:当然我们别忘了 ipad,所以我们耍选上universal:devices universal再接下去，该是android 了，这里忍不住耍吐糟-下，利用android ndk+sdk+eclipse+cygwin+.來搞android实 在太痛苦了，让我冋忆起以前做symbi

51、an遊戏时的惨痛经验，所以我果断地放弃了 android ndk,投奔marmalade的 怀抱！理论上来说，用了 marmalade,我们一个版本已经可以照顾ios, android, symbian等等等等但考虑到marmalade 不是免费（最少149美刀一年），并不是每个童鞋都想买，而且这中间乂多了一层第三方平台，多了一个"依赖性"，也不是 每个人都喜欢的，所以就只让android版有这个特殊优惠.建立marmalade工程的方法,基本上是把cocos2d-x的helloworld里的marmalade目录抄到我们vc工程的目录 里，把helloworld.mkb改

52、成一个好听点的名字：droidgame.mkb,再根据templatemarmalade里的.mkb内容修改 一下就可以，下边就是在marmalade模拟见到的画面：io3o0w,dauccdmedso* end757 bltfassetsal- f 23a.drop dtsktop jme app-katxxndocumem"vtajud4vnmmp 4e-7v4&o1vc1a :©macx?1 bookamp 5mc5t0n 2 £>$ demo03.wb2vcwpe9 dem90wo£xpr m3 dtmo03 wxwprojcue

53、e osc32vofisii?foscame.m0d*j2emarmfc§ drocame.mtof cfepsn he4l?h kfourthla s?2l istodm>二 am eq 二工 au tody 1024 a* todfy52“ x y&二 0*0 主 todies fm tod<*57fm yodq h £ * yodq 12 2 2 2aj?rou skie 虽 2833j70ssh todq 11 u ac yodq 10 = am tod 支 10 33 am tod曳 io j8ac tgqoyam todyss7amss 681 sj 2= byte" 3bvm w; ss s m«unix e7f-e sle unucwg oumr if xcprog 0m4r c: source chw $og、£ ,optrtyg sxca 一2g. ,opeftv c£我在一开始就捉到为了兼容ipad (暂时先不理new ipad)而选用了-张1024x768的背呆图，但当我们在ipad上测 试时，郤看到它只显示了 sd的小图：这是因为ipad (1 + 2 r)并