【本节内容】

       1、程序的基本组成:CCSprite(精灵)、CCLayer(层)、CCScene(场景)、CCDirector(导演)

       2、分析HelloWorld源码。


参考文献】

http://gl.paea.cn/contents/175b392d0558882c.html



一、基本组成


    cocos2d-x引擎主要有六个部分组成,分别为导演(CCDirector)、摄像机(CCCamera)、场景(CCScene)、布景(CCLayer)、精灵(CCSprite)、以及动作(CCAction)六个部分组成。看到这些名词,第一反应就是好像在拍戏一样。是的,就是在拍戏。这就是cocos2d-x想要的结果,让游戏就像拍戏一样将游戏建立起来。


(1)CCSprite(精灵)

       精灵其实就是我们说的元素。比如一个游戏里的角色、NPC、怪物、物品等,乃至连随机掠过的鸟、飘过的风,从理论来说,也是精灵。这个很好理解的。


(2)CCLayer(层)

       层在cocos2dx项目里是精灵以外出现的最多的元素。比如一个游戏,你需要背景层,一个精灵要运动,就要单独一个层,游戏有暂停的页面,那就来个暂停页面的层。层就像是一张透明的玻璃一样,把他们画上东西,摞在一起,俯视来看,就是一个完整的游戏了。用过PS的就直接理解成PS里的图层,和那个基本是异曲同工之处。还是不理解的我画了个图示一起来看看。

       这是一个完整的图片。

cocos2dx基础篇(3)——第一个程序HelloWorld_第1张图片


       这是一个背景层,它只用来显示背景。

cocos2dx基础篇(3)——第一个程序HelloWorld_第2张图片


       这个是一个鱼层。

cocos2dx基础篇(3)——第一个程序HelloWorld_第3张图片


       最后我们把这些层摞在一起。。。就成了一个图。

       背景图在第 0 层 , 第 1 层和第 2 层分别都有一条鱼。

cocos2dx基础篇(3)——第一个程序HelloWorld_第4张图片


(3)CCScene(场景)

       如果我们把层理解为玻璃片,那么场景就是一个箱子,我们把玻璃片放在这个箱子里,去组建游戏。一个游戏会有很多的场景,比如,主界面,游戏界面,载入界面等等都是一个场景。

       由此看出,一个场景包含多个层,一个层可能包含多个精灵。


(4)CCDirector(导演)

       就和现实中的导演一样,这里的导演也是起到指导的作用的,导演在这里负责的就是让不同的场景切换pushScene、popScene等,同时它也是游戏的核心,控制整个游戏的流程,包括开始,继续,暂停等。另外,它还控制着屏幕大小,FPS的显示和隐藏,游戏的进入和退出,关卡场景的切换,以及获取正在运行的场景等等。

    注意:一般整个游戏只有唯一的一个导演。


(5)相互之间的关系框架如下图所示

       导演控制场景,场景控制图层,图层控制精灵,精灵控制动作。

cocos2dx基础篇(3)——第一个程序HelloWorld_第5张图片

    由此看出:

        (1)整个游戏一般只有一个导演。

        (2)一个游戏可以由多个场景组成(菜单界面、游戏界面、游戏结束界面等),但是每次导演只能指导一个场景的运作。

        (3)一个场景可以由多个图层组成(背景层、道具层、英雄层、怪物层等,每个图层都可以由多个精灵元素组成(标签、按钮、菜单等)。

        (4)对于图层上的每个精灵元素,一般都附带相应的动作,可以带多个动作。如挥刀、使用魔法、跑、跳,以及放大、缩小、旋转等动作。


二、HelloWorld


       我们打开程序下的MyScene.h文件(这个只是我把HelloWorld的名字改掉了而已),我们可以看到以下内容。

       这里,最上面3行都是在引用文件我们就不多说了。然后我们看到的是类的创建。

       当然,这里的MyLayer是个层类,所以直接继承cocos2d下的CCLayer方法。

cocos2dx基础篇(3)——第一个程序HelloWorld_第6张图片


       之后我们去看看MyScene.cpp文件。


       创建静态的场景。

cocos2dx基础篇(3)——第一个程序HelloWorld_第7张图片


       初始化函数。

       一般情况下,我们大部分的操作都是在初始化函数init()进行编写的。

cocos2dx基础篇(3)——第一个程序HelloWorld_第8张图片

cocos2dx基础篇(3)——第一个程序HelloWorld_第9张图片


       回调函数,退出程序。

cocos2dx基础篇(3)——第一个程序HelloWorld_第10张图片



三、代码中的一些困惑


1、setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width - 20, 20));

       这里可能大家会郁闷设置关闭的菜单项,我看的的是在右下角啊,X坐标可以理解,为啥Y是20呢?这里要说明的是cocos2dx的零坐标是左下角,而不是其他软件常用的左上角。

       另外如果有人细心可能就会发现为啥才20呢?那个图片大约是40像素啊?

这里还要说明的是,cocos2dx的对象坐标起点就是这个对象的正中心点,就是两条对角线的交叉点。

wKiom1NnWv2yQy55AAAWXwgngAQ126.jpgcocos2dx基础篇(3)——第一个程序HelloWorld_第11张图片


2、this->addChild(pMenu, 1);

       前面的能看懂,最后的那个“1”是个啥玩意儿啊?

       这个啊,是层内部的Z 坐标。大家回到教程头部看看那张运行图,文字是不是在图片的上面。

       这就是这个参数的作用,数字越大,就越靠上,文字的是“1” 椰子图片的是“0”,所以文字在椰子图片上面。


3、一些函数的用法;


CCSize 屏幕大小; height=320 , width=480

CCPoint 坐标点


getVisibleSize()获得视口(可视区域)的大小,若是DesignResolutionSize跟屏幕尺寸一样大,则getVisibleSize便是getWinSize。

getVisibleOrigin()获得可视区域的出发点坐标,在处理相对位置时,确保节点在不同分辨率下的位置一致。

getWinSize()获取屏幕尺寸大小。

getContentSize()获得节点原始的大小。只是逻辑尺寸,不是像素

boundingBox()获得经过缩放和旋转之后的外框盒大小。

getContentSizeInPixels()获得的是像素点大小

P.S.像素点和逻辑点关系:逻辑点大小 = 像素大小/contentScaleFactor.


ccp(x,y)是用来创建坐标的; CCPoint

setPosition()设置坐标位置。