cocos node sceen

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了cocos node sceen，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本节的学习目标:

(1)了解结点系统，学会自行构建结点系统。

(2)了结场景，层，精灵的组织关系与各自功能



2.1 结点系统原理入门

2.1.1 结点启蒙：

在介绍Cocos2d-x的结点系统之前，我们需要首先做一些启蒙，什么是树？


定义:

一棵树（tree）是由n（n>0）个元素组成的有限集合，其中：

（1）每个元素称为结点（node）；

（2）有一个特定的结点，称为根结点或根（root）；

（3）除根结点外，其余结点被分成m（m>=0）个互不相交的有限集合，而每个子集又都是一棵树（称为原树的子树）

如图A:



对于树结构有几个概念要记一下：

度：树的度——也即是宽度，简单地说，就是结点的分支数。以组成该树各结点中最大的度作为该树的度，如上图的树，其度为3;树中度为零的结点称为叶结点或终端结点。树中度不为零的结点称为分枝结点或非终端结点。除根结点外的分枝结点统称为内部结点。

@L_502_1@

深度：树的深度——组成该树各结点的最大层次，如上图，其深度为3；

层次：根结点的层次为1，其他结点的层次等于它的父结点的层次数加1.

请仔细观察上图这棵树，这里A是根结点，其余结点均是属于A的不同层级的子结点。我们由此图进一步进行想像，人的身体其实也是一棵树。

如图B:



上图详细表现了人体树结构的组织结构，左边是人形的结构，右边是层级关系展开。它作为骨骼动画的基础理论被广泛的应用于各类游戏动画中。

我们看一下这张图，首先有一个根骨（脊椎），这个根骨即是树结构中的根结点。根骨下有三根子骨骼（左胯，右胯，颈背），这三根子骨骼也各自有属于自已的子骨骼树结构，同时它们由父骨骼牵引并牵引着子骨骼，与父骨骼和第一层子骨骼保持着固定的距离。

试想一下：

当我们想把这个人移动到一个位置点时，只需要把根骨移动到相应位置，即这个人的所有骨骼都会被这种牵引关系移动到这个世界位置的相对骨骼位置。但如果我们把左胯这根骨骼去掉的话，则在移动根骨后，左胯仍停留在原地，它已经不再属于当前骨骼树了，而成了一棵独立的骨骼树。

看完这张图，已经比较接近我们所要讲述的内容了，对于骨骼结构的理解将有助于我们掌握远大于骨骼动画本身的结构模式，因为由此理论基础我们将学会一切基于结点树结构的系统。

下面我们来用C++的代码构建这样一套系统。

首先，我们创建一个基类，称之为结点。

@H_502_138@
[cpp] view plain copy
  1. //结点类
  2. classCNode
  3. {
  4. public:
  6. //构造
  7. CNode();
  8. //析构
  9. virtual~CNode();
  11. public:
  13. //更新
  14. virtualinlinevoidUpdate();
  15. //渲染
  16. virtualinlinevoidDraw();
  18. public:
  19. //设置当前结点名称
  20. voidSetName(constchar*szName);
  21. //取得当前结点名称
  22. conststring&GetName();
  24. //加入一个子结点类
  25. voidAddChild(CNode*pChildNode);
  26. //取得子结点
  27. CNode*GetFirstChild();
  29. //加入一个兄弟结点类
  30. voidAddBorther(CNode*pBortherNode);
  31. //取得兄弟结点
  32. CNode*GetFirstBorther();
  34. //删除一个结点
  35. boolDelNode(CNode*pNode);
  36. //清空所有子结点
  37. voidDelAllChild();
  38. //清空所有兄弟结点
  39. voidDelAllBorther();
  42. //查询某个子结点--纵向查询
  43. CNode*QueryChild(constchar*szName);
  44. //查询某个兄弟结点--横向查询
  45. CNode*QueryBorther(constchar*szName);
  48. //为了方便检测结点树系统的创建结果，这里增加了一个保存结点树到XML文件的函数。
  49. boolSaveNodeToXML(constchar*szXMLFile);
  51. protected:
  53. //设置父结点
  54. voidSetParent(CNode*pParentNode);
  55. //取得父结点
  56. CNode*GetParent();
  58. //保存结点树到XML文件，这个函数是只生成本结点的信息。
  59. boolSaveNodeToXML(FILE*hFile);
  60. private:
  62. //当前结点名称
  63. stringm_strNodeName;
  64. //父结点
  65. CNode*m_pParentNode;
  66. //第一个子结点
  67. CNode*m_pFirstChild;
  68. //第一个兄弟结点
  69. CNode*m_pFirstBorther;
  70. }
  71. ;

对应的实现：

@H_502_138@
[cpp] view plain copy
  1. #include"Node.h"
  2. //构造
  3. CNode::CNode()
  4. {
  5. m_strNodeName[0]='\0';
  6. m_pParentNode=NULL;
  7. m_pFirstChild=NULL;
  8. m_pFirstBorther=NULL;
  9. }
  11. //析构
  12. CNode::~CNode()
  13. {
  14. DelAllChild();
  15. }
  17. //更新
  18. voidCNode::Update()
  19. {
  20. if(m_pFirstChild)
  21. {
  22. m_pFirstChild->Update();
  23. }
  24. //在这里增加你更新结点的处理
  25. …
  26. if(m_pFirstBorther)
  27. {
  28. m_pFirstBorther->Update();
  29. }
  30. }
  31. //直接渲染
  32. voidCNode::Draw()
  33. {
  34. if(m_pFirstChild)
  35. {
  36. m_pFirstChild->Draw();
  37. }
  38. //在这里增加你渲染图形的处理
  39. …
  40. if(m_pFirstBorther)
  41. {
  42. m_pFirstBorther->Draw();
  43. }
  44. }
  45. //设置当前结点名称
  46. voidCNode::SetName(constchar*szName)
  47. {
  48. m_strNodeName=szName;
  49. }
  50. //取得当前结点名称
  51. conststring&CNode::GetName()
  52. {
  53. returnm_strNodeName;
  54. }
  55. //加入一个子结点类
  56. voidCNode::AddChild(CNode*pChildNode)
  57. {
  58. if(pChildNode)
  59. {
  60. if(m_pFirstChild)
  61. {
  62. m_pFirstChild->AddBorther(pChildNode);
  63. }
  64. else
  65. {
  66. m_pFirstChild=pChildNode;
  67. m_pFirstChild->SetParent(this);
  68. }
  69. }
  70. }
  71. //取得子结点
  72. CNode*CNode::GetFirstChild()
  73. {
  74. returnm_pFirstChild;
  75. }
  77. //加入一个兄弟结点类
  78. voidCNode::AddBorther(CNode*pBortherNode)
  79. {
  80. if(pBortherNode)
  81. {
  82. if(m_pFirstBorther)
  83. {
  84. m_pFirstBorther->AddBorther(pBortherNode);
  85. }
  86. else
  87. {
  88. m_pFirstBorther=pBortherNode;
  89. m_pFirstBorther->SetParent(m_pParentNode);
  90. }
  91. }
  92. }
  93. //取得兄弟结点
  94. CNode*CNode::GetFirstBorther()
  95. {
  96. returnm_pFirstBorther;
  97. }
  98. //删除一个子结点类
  99. boolCNode::DelNode(CNode*pTheNode)
  100. {
  101. if(pTheNode)
  102. {
  103. if(m_pFirstChild)
  104. {
  105. if(m_pFirstChild==pTheNode)
  106. {
  107. m_pFirstChild=pTheNode->GetFirstBorther();
  108. deletepTheNode;
  109. returntrue;
  110. }
  111. else
  112. {
  113. if(true==m_pFirstChild->DelNode(pTheNode))returntrue;
  114. }
  115. }
  116. if(m_pFirstBorther)
  117. {
  118. if(m_pFirstBorther==pTheNode)
  119. {
  120. m_pFirstBorther=pTheNode->GetFirstBorther();
  121. deletepTheNode;
  122. returntrue;
  123. }
  124. else
  125. {
  126. if(true==m_pFirstBorther->DelNode(pTheNode))returntrue;
  127. }
  128. }
  129. }
  130. returnfalse;
  131. }
  132. //清空所有子结点
  133. voidCNode::DelAllChild()
  134. {
  135. if(m_pFirstChild)
  136. {
  137. CNode*pBorther=m_pFirstChild->GetFirstBorther();
  138. if(pBorther)
  139. {
  140. pBorther->DelAllBorther();
  141. deletepBorther;
  142. pBorther=NULL;
  143. }
  144. deletem_pFirstChild;
  145. m_pFirstChild=NULL;
  146. }
  147. }
  149. //清空所有兄弟结点
  150. voidCNode::DelAllBorther()
  151. {
  152. if(m_pFirstBorther)
  153. {
  154. m_pFirstBorther->DelAllBorther();
  155. deletem_pFirstBorther;
  156. m_pFirstBorther=NULL;
  157. }
  158. }
  160. //查询某个子结点--纵向查询
  161. CNode*CNode::QueryChild(constchar*szName)
  162. {
  163. if(szName)
  164. {
  165. if(m_pFirstChild)
  166. {
  167. //如果是当前子结点，返回子结点。
  168. if(0==strcmp(szName,m_pFirstChild->GetName().c_str()))
  169. {
  170. returnm_pFirstChild;
  171. }
  172. else
  173. {
  174. //如果不是，查询子结点的子结点。
  175. CNode*tpChildChild=m_pFirstChild->QueryChild(szName);
  176. if(tpChildChild)
  177. {
  178. returntpChildChild;
  179. }
  180. //如果还没有，查询子结点的兄弟结点。
  181. returnm_pFirstChild->QueryBorther(szName);
  182. }
  183. }
  184. }
  185. returnNULL;
  186. }
  188. //查询某个兄弟结点--横向查询
  189. CNode*CNode::QueryBorther(constchar*szName)
  190. {
  191. if(szName)
  192. {
  193. if(m_pFirstBorther)
  194. {
  195. if(0==strcmp(szName,m_pFirstBorther->GetName().c_str()))
  196. {
  197. returnm_pFirstBorther;
  198. }
  199. else
  200. {
  201. //如果不是，查询子结点的子结点。
  202. CNode*tpChildChild=m_pFirstBorther->QueryChild(szName);
  203. if(tpChildChild)
  204. {
  205. returntpChildChild;
  206. }
  207. returnm_pFirstBorther->QueryBorther(szName);
  208. }
  209. }
  210. }
  211. returnNULL;
  212. }
  215. //设置父结点
  216. voidCNode::SetParent(CNode*pParentNode)
  217. {
  218. m_pParentNode=pParentNode;
  219. }
  221. //取得父结点
  222. CNode*CNode::GetParent()
  223. {
  224. returnm_pParentNode;
  225. }
  227. //保存结点树到XML
  228. boolCNode::SaveNodeToXML(constchar*szXMLFile)
  229. {
  230. FILE*hFile=fopen(szXMLFile,"wt");
  231. if(!hFile)
  232. {
  233. returnfalse;
  234. }
  235. fprintf(hFile,TEXT("<?xmlversion=\"1.0\"encoding=\"UTF-8\"?>\n"));
  236. fprintf(hFile,TEXT("<!DOCTYPEplistPUBLIC\"-//AppleComputer//DTDPLIST1.0//EN\"\"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">\n"));
  237. fprintf(hFile,TEXT("<!--HonghaierGameTutorial-->\n"));
  239. fprintf(hFile,TEXT("<plistversion=\"1.0\">\n"));
  240. fprintf(hFile,TEXT("<dict>\n"));
  241. //========================================================
  242. fprintf(hFile,TEXT("<key>NodeTree</key>"));
  243. fprintf(hFile,TEXT("<dict>"));
  244. if(false==SaveNodeToXML(hFile))
  245. {
  246. fclose(hFile);
  247. returnfalse;
  248. }
  250. fprintf(hFile,TEXT("</dict>"));
  251. //========================================================
  252. fprintf(hFile,TEXT("</dict>"));
  253. fprintf(hFile,TEXT("</plist>\n"));
  254. fclose(hFile);
  255. returntrue;
  256. }
  257. //保存结点树到XML
  258. boolCNode::SaveNodeToXML(FILE*hFile)
  259. {
  260. //========================================================
  261. //fprintf(hFile,TEXT("<key>NodeName</key>"));
  262. //fprintf(hFile,TEXT("<string>%s</string>"),m_strNodeName.c_str());
  263. fprintf(hFile,TEXT("<key>%s</key>"),m_strNodeName.c_str());
  264. //========================================================
  265. fprintf(hFile,TEXT("<dict>"));
  266. if(m_pFirstChild)
  267. {
  268. if(false==m_pFirstChild->SaveNodeToXML(hFile))
  269. {
  270. fclose(hFile);
  271. returnfalse;
  272. }
  273. }
  274. fprintf(hFile,TEXT("</dict>"));
  276. if(m_pFirstBorther)
  277. {
  278. if(false==m_pFirstBorther->SaveNodeToXML(hFile))
  279. {
  280. fclose(hFile);
  281. returnfalse;
  282. }
  283. }
  284. returntrue;
  285. }

这样，一个最基本的结点就建立起来了，我们将可以由它来建立一棵树，比如下图这样一个程序:我们有一个TreeCtrl。初始情况下只有一个Root结点，通过在树控件上右键弹出菜单中进行选项操作来增加或删除子结点和兄弟结点。当我们创建了一个结点树后可以调用SaveNodeToXML函数来讲结点树保存下来。


保存的XML文件打开后：

、

学到这里，您已经掌握了一个结点系统的基本设计思想，它将在日后成为一个强大的武器来帮助您在游戏开发过程中解决一些相关的设计问题。

2.1.1结点的位置：

上面的结点系统代码中，只有结点的父子关系，并不能实现父结点移动同时带动子结点移动。这又是怎么做到的呢？

这里有一个关键的核心算法：即一个结点的位置，由本结点相对于父结点位置加上父结点的世界位置来取得，而父结点又会通过父结点与其父结点（即爷爷结点）的相对位置加上其父结点（即爷爷结点）的世界位置来取得。这里有一个层层回溯的思想在里面。

我们在代码中加入一个表示空间位置的结构。

@H_502_138@
[cpp] view plain copy
  1. //向量
  2. structstVec3
  3. {
  4. //三向值
  5. floatm_fX;
  6. floatm_fY;
  7. floatm_fZ;
  9. stVec3()
  10. {
  11. m_fX=0;
  12. m_fY=0;
  13. m_fZ=0;
  14. }
  15. //构造
  16. stVec3(floatx,floaty,floatz)
  17. {
  18. m_fX=x;
  19. m_fY=y;
  20. m_fZ=z;
  21. }
  23. //重载赋值操作符
  24. stVec3&stVec3::operator=(conststVec3&tVec3)
  25. {
  26. m_fX=tVec3.m_fX;
  27. m_fY=tVec3.m_fY;
  28. m_fZ=tVec3.m_fZ;
  29. return*this;
  30. }
  31. //重载加法操作符
  32. stVec3stVec3::operator+(conststVec3&tVec3)
  33. {
  34. stVec3tResultVec;
  35. tResultVec.m_fX=m_fX+tVec3.m_fX;
  36. tResultVec.m_fY=m_fY+tVec3.m_fY;
  37. tResultVec.m_fZ=m_fZ+tVec3.m_fZ;
  38. returntResultVec;
  39. }
  40. //重载加等操作符
  41. stVec3&stVec3::operator+=(conststVec3&tVec3)
  42. {
  43. m_fX+=tVec3.m_fX;
  44. m_fY+=tVec3.m_fY;
  45. m_fZ+=tVec3.m_fZ;
  46. return*this;
  47. }
  48. //重载减法操作符
  49. stVec3stVec3::operator-(conststVec3&tVec3)
  50. {
  51. stVec3tResultVec;
  52. tResultVec.m_fX=m_fX-tVec3.m_fX;
  53. tResultVec.m_fY=m_fY-tVec3.m_fY;
  54. tResultVec.m_fZ=m_fZ-tVec3.m_fZ;
  55. returntResultVec;
  56. }
  57. //重载减等操作符
  58. stVec3&stVec3::operator-=(conststVec3&tVec3)
  59. {
  60. m_fX-=tVec3.m_fX;
  61. m_fY-=tVec3.m_fY;
  62. m_fZ-=tVec3.m_fZ;
  63. return*this;
  64. }
  65. }
  66. ;
  67. 然后在结点中加入相应接口:
  69. public:
  71. //设置当前结点相对于父结点位置
  72. voidSetPos(floatx,floatz);
  73. voidSetPos_X(floatx);
  74. voidSetPos_Y(floaty);
  75. voidSetPos_Z(floatz);
  77. //取得当前结点相对于父结点位置
  78. floatGetPos_X();
  79. floatGetPos_Y();
  80. floatGetPos_Z();
  82. //取得当前结点的世界坐标位置
  83. stVec3GetWorldPos();
  84. private:
  85. //当前结点相对于父结点的位置
  86. stVec3m_sPos;
  88. 对应的实现：
  90. //设置当前结点相对于父结点位置
  91. voidCNode::SetPos(floatx,floatz)
  92. {
  93. m_sPos.m_fX=x;
  94. m_sPos.m_fY=y;
  95. m_sPos.m_fZ=z;
  96. }
  98. voidCNode::SetPos_X(floatx)
  99. {
  100. m_sPos.m_fX=x;
  101. }
  102. voidCNode::SetPos_Y(floaty)
  103. {
  104. m_sPos.m_fY=y;
  105. }
  106. voidCNode::SetPos_Z(floatz)
  107. {
  108. m_sPos.m_fZ=z;
  109. }
  111. //取得当前结点相对于父结点位置
  112. floatCNode::GetPos_X()
  113. {
  114. returnm_sPos.m_fX;
  115. }
  117. floatCNode::GetPos_Y()
  118. {
  119. returnm_sPos.m_fY;
  120. }
  122. floatCNode::GetPos_Z()
  123. {
  124. returnm_sPos.m_fZ;
  125. }
  127. //取得当前结点的世界坐标位置
  128. stVec3CNode::GetWorldPos()
  129. {
  130. stVec3tResultPos=m_sPos;
  131. //使用回溯法取得最终的世界位置，这一步是结点系统中父结点固定子结点的关健。
  132. if(m_pParentNode)
  133. {
  134. tResultPos+=m_pParentNode->GetWorldPos();
  135. }
  136. returntResultPos;
  137. }

经过这些代码的建立，我们就可以取得一个受父结点位置固定的子结点的世界位置了。同样，缩放和旋转的关系也可以由此建立，在此就不一一赘述了，有兴趣的同学可以在本节作用中完成它。

2.2 精灵，层，场景

2.2.1魂斗罗的场景：

在Cocos2d-x中，大量的物体都是基于结点系统的，这些类均是由最基本的结点类CCNode来派生的。其中最为重要的是精灵-CCSprite，层-CCLayer，场景- CCScene。

一个游戏的一个关卡，可以想象为一棵树，其中场景是树干，层是树枝，精灵是树叶。一棵树只有一个树干，树干上有多个树枝，树枝上又有多个树叶。从功能性上来讲，树干的作用是管理树枝，树枝的作用是固定其上长出的树叶，树叶的作用是吸收阳光…NO，不是这个意思，树叶的作用是表现力，是观赏，是用来看的。表现在Cocos2d-x的游戏中，场景用来管理所有的层，而层则是用来区分具有不同排序分类的精灵集合，并能响应触屏事件，而精灵就是显示图片和动画的。当游戏要切换场景时，就像是换一棵树。作为一个游戏设计师，要能够很好的设计游戏的这些树。当然，我们要很清楚的知道如何来种下一棵树，这很重要！

首先，我们先要确定游戏都需要哪些场景。作为树的根结点，它构成了游戏的骨架。比如我们小时候玩的FC游戏-《魂斗罗》。

我们可以将开始界面和后面每一个关卡都当作是一个场景。那简单来说这个游戏是由两类场景构成的。第一类场景就是开始界面，如下图：


这个开始界面做为一个场景是简单了点，但很清晰。游戏开始时首先要运行的场景就是它。我们以三级树形结点来表示这个场景。




在这个三级树形结点图示中，“开始界面”即为场景，“界面层”即为层，再下面的四个结点可以算为界面层下的精灵，当然，菜单其实也可以分为几个精灵构成。

第二类场景就是关卡了。如图：

这是熟悉的第一关，我们仍以三级树形结点来表示这个场景。


在这里，“第一关”即为场景，为了区分具有不同排序分类的精灵集合。我将游戏中的层由远及近观看，由先及后绘制，划分为“远景层”，“近景层”，“人物层”，“效果层”，“界面层”等五个层，再将各种精灵分布到这些层中。

继续这样子分析，我们可以得出所有的关卡树：

在这里“Root”代表了游戏程序。它共种有十棵树。分别为“开始界面”，“第一关”…“通关界面”，每完成一个关卡，就将进行场景的切换，也就是显示一棵新树。

到这里，精灵，层与场景的结点关系原理已经讲解完成。我们现在来看一下Cocos2d-x中是如何具体实现和应用的。

以开始界面为例，咱们接着上一节中所讲的节点类来进行扩展，为了更好的讲述理论，这部分内容完全不涉及任何渲染引擎的使用，我们只使用VS创建一个简单的WIN32窗口程序，并使用GDI来进行绘制。

我们将创建的工程命名为ShowNodeTree，编译运行只有一个空白窗口，它工作的很好。OK，现在我们创建一个工程筛选目录NodoTree,并将之前创建的Node放入其中，并依次创建好Scene,Layer,Spriet及Director等类。

顾名思义，上面这些文件分别为：

Director.h/cpp:win32绘制管理类CDirector，绘图用。

Node.h/cpp:结点基类CNode，用于构建结点树。

Layer.h/cpp: 层类CLayer。

Scene.h/cpp:场景类CScene。

Sprite.h/cpp:精灵类CSprite。

我们来看一下具体实现：

首先是win32绘制管理类CDirector：

Director.h:

@H_502_138@
[cpp] view plain copy
  1. #pragmaonce
  2. #include<windows.h>
  3. //==================================================================
  4. //File:Director.h
  5. //Desc:显示设备类，用于绘制
  6. //==================================================================
  7. classCDirector
  8. {
  9. public:
  10. ~CDirector();
  11. public:
  12. //获取单件实例指针
  13. staticCDirector*GetInstance();
  14. //设置HDC
  15. voidInit(HWNDhWnd);
  16. //绘制矩形
  17. voidFillRect(intx,inty,intwidth,intheight,COLORREFrgb);
  18. //绘制图像
  19. voidDrawBitMap(intx,HBITMAPhBitmap);
  20. private:
  21. CDirector(){}
  22. private:
  23. //单件实例指针
  24. staticCDirector*m_pThisInst;
  25. //WINDOWS窗口句柄
  26. HWNDm_HWnd;
  27. //WINDOWSGDI绘图所用的设备上下文
  28. HDCm_HDC;
  30. }
  31. ;

可以看到，CDirector类是一个单例，我们为其创建了两个函数来进行绘制指定色的矩形和绘制位图的功能。没错，足够用了。

Director.cpp:

@H_502_138@
[cpp] view plain copy
  1. #include"Director.h"
  2. CDirector*CDirector::m_pThisInst=NULL;
  4. CDirector*CDirector::GetInstance()
  5. {
  6. if(!m_pThisInst)
  7. {
  8. m_pThisInst=newCDirector;
  9. if(!m_pThisInst)returnNULL;
  10. m_pThisInst->Init(NULL);
  11. }
  12. returnm_pThisInst;
  13. }
  15. CDirector::~CDirector()
  16. {
  17. if(m_pThisInst)
  18. {
  19. deletem_pThisInst;
  20. m_pThisInst=NULL;
  21. }
  22. }
  23. voidCDirector::Init(HWNDhWnd)
  24. {
  25. if(hWnd)
  26. {
  27. m_HWnd=hWnd;
  28. m_HDC=::GetDC(m_HWnd);
  29. }
  30. }
  31. voidCDirector::FillRect(intx,COLORREFrgb)
  32. {
  33. HBRUSHhBrush=::CreateSolidBrush(rgb);
  34. RECTtRect;
  35. tRect.left=x;
  36. tRect.top=y;
  37. tRect.right=x+width;
  38. tRect.bottom=y+height;
  39. ::FillRect(m_HDC,&tRect,hBrush);
  40. ::DeleteObject(hBrush);
  41. }
  43. voidCDirector::DrawBitMap(intx,HBITMAPhBitmap)
  44. {
  46. HDChTempHDC=CreateCompatibleDC(m_HDC);
  47. HGdioBJhOldObj=SelectObject(hTempHDC,hBitmap);
  48. BitBlt(m_HDC,x,y,width,height,hTempHDC,SRCCOPY);
  49. DeleteDC(hTempHDC);
  50. }

都是最基本的GDI绘制操作，这样我们的设备就建立好了。下面我们来创建场景。

Scene.h:

@H_502_138@
[cpp] view plain copy
  1. #pragmaonce
  2. #include"Node.h"
  3. //==================================================================
  4. //File:Scene.h
  5. //Desc:场景类，用于管理所有的层
  6. //==================================================================
  7. //结点类
  8. classCScene:publicCNode
  9. {
  10. public:
  11. //构造
  12. CScene(constchar*szName);
  13. };

其对应的CPP：

@H_502_138@
[cpp] view plain copy
  1. #include"Scene.h"
  2. //构造
  3. CScene::CScene(constchar*szName)
  4. {
  5. SetName(szName);
  6. }

没什么可解释的，就是一个结点类。然后是层：

Layer.h:

@H_502_138@
[cpp] view plain copy
  1. #pragmaonce
  2. #include"Node.h"
  3. //==================================================================
  4. //File:Layer.h
  5. //Desc:层类，用于存放精灵
  6. //==================================================================
  7. //结点类
  8. classCLayer:publicCNode
  9. {
  10. public:
  11. //构造
  12. CLayer(constchar*szName);
  13. public:
  14. //更新
  15. virtualinlinevoidUpdate();
  16. //直接渲染
  17. virtualinlinevoidDraw();
  18. public:
  19. //设置颜色
  20. voidSetColor(COLORREFcolor);
  21. //取得颜色
  22. COLORREFGetColor();
  23. //设置高
  24. voidSetWidth(intvWidth);
  25. //取得宽
  26. intGetWidth();
  27. //设置高
  28. voidSetHeight(intvHeight);
  29. //取得高
  30. intGetHeight();
  31. private:
  32. //设置颜色
  33. COLORREFm_LayerColor;
  34. //宽度
  35. intm_nWidth;
  36. //高度
  37. intm_nHeight;
  38. };

可以看到，层有了宽高和颜色的设置，对应的Layer.cpp:

@H_502_138@
[cpp] view plain copy
  1. #include"Layer.h"
  2. #include"Director.h"
  3. //构造
  4. CLayer::CLayer(constchar*szName):
  5. m_nWidth(0),
  6. m_nHeight(0)
  7. {
  8. SetName(szName);
  9. m_LayerColor=RGB(255,255,255);
  10. }
  11. //更新
  12. voidCLayer::Update()
  13. {
  14. CNode::Update();
  15. }
  16. //直接渲染
  17. voidCLayer::Draw()
  18. {
  19. stVec3tPos=GetWorldPos();
  20. CDirector::GetInstance()->FillRect(tPos.m_fX,tPos.m_fY,m_nWidth,m_nHeight,m_LayerColor);
  21. CNode::Draw();
  22. }
  23. //设置颜色
  24. voidCLayer::SetColor(COLORREFcolor)
  25. {
  26. m_LayerColor=color;
  27. }
  28. //取得颜色
  29. COLORREFCLayer::GetColor()
  30. {
  31. returnm_LayerColor;
  32. }
  33. //设置宽
  34. voidCLayer::SetWidth(intvWidth)
  35. {
  36. m_nWidth=vWidth;
  37. }
  38. //取得宽
  39. intCLayer::GetWidth()
  40. {
  41. returnm_nWidth;
  42. }
  43. //设置高
  44. voidCLayer::SetHeight(intvHeight)
  45. {
  46. m_nHeight=vHeight;
  47. }
  48. //取得高
  49. intCLayer::GetHeight()
  50. {
  51. returnm_nHeight;
  52. }


层已经可以显示了，通过取得设备并调用FillRect来显示一个色块矩形。最后我们来看一下精灵：

Sprite.h:

@H_502_138@
[cpp] view plain copy
  1. #pragmaonce
  2. #include"Node.h"
  3. //==================================================================
  4. //File:Sprite.h
  5. //Desc:精灵类，用于显示图片
  6. //==================================================================
  7. //结点类
  8. classCSprite:publicCNode
  9. {
  10. public:
  11. //构造
  12. CSprite(constchar*szName);
  14. public:
  15. //更新
  16. virtualinlinevoidUpdate();
  17. //直接渲染
  18. virtualinlinevoidDraw();
  19. public:
  20. //设置位图句柄
  21. voidSetBitmap(HBITMAPvhBitmap);
  22. //设置位图句柄
  23. voidSetBitmap(HBITMAPvhBitmap,intvWidth,intvHeight);
  24. private:
  25. //所用位图句柄
  26. HBITMAPm_hBitmap;
  27. //位图宽度
  28. intm_nBitmapWidth;
  29. //位图高度
  30. intm_nBitmapHeight;
  31. };

我们为精灵增加了位图句柄，以使它可以绘制相应的位图。

Sprite.cpp:

@H_502_138@
[cpp] view plain copy
  1. #include"Sprite.h"
  2. #include"Director.h"
  3. //构造
  4. CSprite::CSprite(constchar*szName):
  5. m_hBitmap(NULL),
  6. m_nBitmapWidth(0),
  7. m_nBitmapHeight(0)
  8. {
  9. SetName(szName);
  10. }
  12. //更新
  13. voidCSprite::Update()
  14. {
  15. CNode::Update();
  16. }
  17. //直接渲染
  18. voidCSprite::Draw()
  19. {
  20. if(m_hBitmap)
  21. {
  22. stVec3tPos=GetWorldPos();
  23. CDirector::GetInstance()->DrawBitMap(tPos.m_fX,m_nBitmapWidth,m_nBitmapHeight,m_hBitmap);
  24. }
  25. CNode::Draw();
  26. }
  27. //设置位图句柄
  28. voidCSprite::SetBitmap(HBITMAPvhBitmap)
  29. {
  30. BITMAPbmp;
  31. GetObject(vhBitmap,sizeof(BITMAP),&bmp);//得到一个位图对象
  32. m_hBitmap=vhBitmap;
  33. m_nBitmapWidth=bmp.bmWidth;
  34. m_nBitmapHeight=bmp.bmHeight;
  35. }
  36. //设置位图句柄
  37. voidCSprite::SetBitmap(HBITMAPvhBitmap,intvHeight)
  38. {
  39. m_hBitmap=vhBitmap;
  40. m_nBitmapWidth=vWidth;
  41. m_nBitmapHeight=vHeight;
  42. }

OK,就这样，我们就建立了一套可以进行场景，层，精灵管理和绘制的类。现在我们来具体的实现一下开始界面。我将开始界面分为

这里共有一个层和八个精灵。层嘛，就是一纯黑背景色块，八个精灵嘛，就如上图所示分别用来显示不同的位图：

我们现在打开程序的主源文件ShowNodeTree.cpp，在文件顶部加入：

@H_502_138@
[cpp] view plain copy
  1. #include"Sprite.h"
  2. #include"Layer.h"
  3. #include"Scene.h"
  4. #include"Director.h"
  5. //唯一使用的场景
  6. CScene*g_pMyScene=NULL;

并在InitInstance函数的尾部加入：

@H_502_138@
[cpp] view plain copy
  1. //初始化设备
  2. CDirector::GetInstance()->Init(hWnd);
  3. //增加层
  4. CLayer*pNewLayer=newCLayer("Layer1");
  5. pNewLayer->SetPos(100,40,0);
  6. pNewLayer->SetColor(RGB(0,0));
  7. pNewLayer->SetWidth(497);
  8. pNewLayer->SetHeight(434);
  10. //增加精灵
  11. charszCurrDir[_MAX_PATH];
  12. ::GetCurrentDirectory(_MAX_PATH,szCurrDir);
  13. charszImagePathName[_MAX_PATH];
  14. wsprintf(szImagePathName,"%s\\knm.bmp",szCurrDir);
  15. HBITMAPhbmp=(HBITMAP)LoadImage(NULL,szImagePathName,IMAGE_BITMAP,LR_LOADFROMFILE|LR_CREATEDIBSECTION);
  16. CSprite*pNewSprite=newCSprite("knm");
  17. pNewSprite->SetBitmap(hbmp);
  18. pNewSprite->SetPos(130,0);
  19. //将精灵放入到层
  20. pNewLayer->AddChild(pNewSprite);
  22. wsprintf(szImagePathName,"%s\\logo.bmp",szCurrDir);
  23. hbmp=(HBITMAP)LoadImage(NULL,LR_LOADFROMFILE|LR_CREATEDIBSECTION);
  24. CSprite*pNewSprite2=newCSprite("logo");
  25. pNewSprite2->SetBitmap(hbmp);
  26. pNewSprite2->SetPos(90,100,0);
  27. //将精灵放入到层
  28. pNewLayer->AddChild(pNewSprite2);
  30. wsprintf(szImagePathName,"%s\\player.bmp",LR_LOADFROMFILE|LR_CREATEDIBSECTION);
  31. CSprite*pNewSprite3=newCSprite("player");
  32. pNewSprite3->SetBitmap(hbmp);
  33. pNewSprite3->SetPos(260,230,0);
  34. //将精灵放入到层
  35. pNewLayer->AddChild(pNewSprite3);
  38. wsprintf(szImagePathName,"%s\\menu_title.bmp",szCurrDir);
  39. hbmp=(HBITMAP)LoadImage(NULL,LR_LOADFROMFILE|LR_CREATEDIBSECTION);
  40. CSprite*pNewSprite4=newCSprite("menu_title");
  41. pNewSprite4->SetBitmap(hbmp);
  42. pNewSprite4->SetPos(40,270,0);
  43. //将精灵放入到层
  44. pNewLayer->AddChild(pNewSprite4);
  46. wsprintf(szImagePathName,"%s\\menu_1.bmp",LR_LOADFROMFILE|LR_CREATEDIBSECTION);
  47. CSprite*pNewSprite5=newCSprite("menu_1");
  48. pNewSprite5->SetBitmap(hbmp);
  49. pNewSprite5->SetPos(100,310,0);
  50. //将精灵放入到层
  51. pNewLayer->AddChild(pNewSprite5);
  53. wsprintf(szImagePathName,"%s\\menu_2.bmp",LR_LOADFROMFILE|LR_CREATEDIBSECTION);
  54. CSprite*pNewSprite6=newCSprite("menu_2");
  55. pNewSprite6->SetBitmap(hbmp);
  56. pNewSprite6->SetPos(100,350,0);
  57. //将精灵放入到层
  58. pNewLayer->AddChild(pNewSprite6);
  60. wsprintf(szImagePathName,"%s\\menu_cursor.bmp",LR_LOADFROMFILE|LR_CREATEDIBSECTION);
  61. CSprite*pNewSprite7=newCSprite("menu_cursor");
  62. pNewSprite7->SetBitmap(hbmp);
  63. pNewSprite7->SetPos(60,0);
  64. //将精灵放入到层
  65. pNewLayer->AddChild(pNewSprite7);
  68. wsprintf(szImagePathName,"%s\\copyright.bmp",LR_LOADFROMFILE|LR_CREATEDIBSECTION);
  69. CSprite*pNewSprite8=newCSprite("copyright");
  70. pNewSprite8->SetBitmap(hbmp);
  71. pNewSprite8->SetPos(120,390,0);
  72. //将精灵放入到层
  73. pNewLayer->AddChild(pNewSprite8);
  75. //将层放入场景
  76. g_pMyScene=newCScene("HDL");
  77. g_pMyScene->AddChild(pNewLayer);
  79. //设定每毫秒刷新一帧
  80. ::SetTimer(hWnd,1,20,NULL);

看，经过上面的代码之后，我们就创建了相应的层，精灵和场景。最后创建一个定时器来进行屏幕重绘，FPS嘛，就设为50好了。

我们在窗口消息处理函数中加入：

@H_502_138@
[cpp] view plain copy
  1. caseWM_PAINT:
  2. {
  3. hdc=BeginPaint(hWnd,&ps);
  4. //TODO:在此添加任意绘图代码..
  5. if(g_pMyScene)
  6. {
  7. //更新和绘制场景
  8. g_pMyScene->Update();
  9. g_pMyScene->Draw();
  10. }
  11. EndPaint(hWnd,&ps);
  12. }
  13. break;
  14. caseWM_TIMER:
  15. {
  16. //让场景的Layer1层不断向右移动，到像素时重置。
  17. if(g_pMyScene)
  18. {
  19. CNode*pLayer=g_pMyScene->QueryChild("Layer1");
  20. stVec3tPos=pLayer->GetWorldPos();
  21. tPos.m_fX+=1;
  22. if(tPos.m_fX>400)
  23. {
  24. tPos.m_fX=0;
  25. }
  26. pLayer->SetPos_X(tPos.m_fX);
  27. }
  28. //响应刷新
  29. ::InvalidateRect(hWnd,NULL,TRUE);
  30. }
  31. break;
  32. caseWM_KEYDOWN:
  33. {
  34. if(wParam==VK_UP)
  35. {//按上时选人菜单光标置在第一项前面。
  36. if(g_pMyScene)
  37. {
  38. CSprite*pNewSprite7=(CSprite*)g_pMyScene->QueryChild("menu_cursor");
  39. if(pNewSprite7)
  40. {
  41. pNewSprite7->SetPos(60,0);
  42. }
  43. }
  44. }
  45. if(wParam==VK_DOWN)
  46. {//按下时选人菜单光标置在第二项前面。
  47. if(g_pMyScene)
  48. {
  49. CSprite*pNewSprite7=(CSprite*)g_pMyScene->QueryChild("menu_cursor");
  50. if(pNewSprite7)
  51. {
  52. pNewSprite7->SetPos(60,0);
  53. }
  54. }
  55. }
  56. }
  57. break;
  58. caseWM_DESTROY:
  59. //当窗口销毁时也一并删除定时器并释放场景。
  60. ::KillTimer(hWnd,1);
  61. if(g_pMyScene)
  62. {
  63. //会调用CNode的虚析构函数释放所有子结点。所以不会造成内存泄漏。
  64. deleteg_pMyScene;
  65. g_pMyScene=NULL;
  66. }
  67. PostQuitMessage(0);
  68. break;

这样我们的开始界面就算完成了，编译运行一下吧：

怎么样？不错吧。一个开始界面层展现在我们面前，所有精灵做为层的子结点而随着层保持运动。虽然这种方式还有一些闪屏，但，那并不是重点，关键是你彻彻底底的理解了结点系统对于引擎架构的作用和设计思想。好了，喝口水歇一会儿开始进入到Cocos2d-x中去看看。

2.1.2 Cocos2d-x中的精灵，层，场景与结点：

在Cocos2d-x中，结点的基类是CCNode，它的实现远远超越了上面结点代码的复杂度，不过没关系，随着后面相关代码接触的加深，你可以很明白它的全部接口函义，但现在，你所需要的只是明白它就不过是个结点，它不过是咱们上面结点类的演变，说的通俗点：不要以为你穿个马甲哥就认不出你了！

在CCNode中，有一个指针容器成员m_pChildren ，它存放了当前结点下的所有子结点，我们通过addChild来增加子结点到其中。我们并没有发现所谓的兄弟结点，为什么呢？那时因为兄弟结点被“扁平化”处理了。为了提升效率，减少递归调用的次数，可以将所有子结点的指针都存放在当前结点的容器中，所以子结点的兄弟结点就不必出现了。

有了结点CCNode，我们来看一下精灵CCSprite，它在libcocos2d的sprite_nodes分类下。

打开CCSprite.h：

CCSprite :publicCCNode,public CCTextureProtocol,public CCRGBAProtocol

很明显，精灵是由结点CCNode派生出来的子类。它的主要功能就是显示图形。在其函数中，涉及纹理加载和OpenGL相关的顶点和颜色，纹理寻址的操作。

层CCLayer和场景CCScene是被存放在libcocos2d的layers_scenes_transitions_nodes分类下。

打开CCLayer.h:

CC_DLLCCLayer : public CCNode,public CCTouchDelegate,publicCCAccelerometerDelegate,publicCCKeypadDelegate

可以看到，CCLayer除了由结点CCNode派生外，还增加了用户输入事件的响应接口。如CCTouchDelegate是触屏事件响应接口类，CCAccelerometerDelegate是加速键消息事件响应接口类，CCKeypadDelegate是软键盘消息事件响应接口类。

打开CCScene.h:

class CC_DLL CCScene :publicCCNode

好吧，真是简单明了，场景就是专门管理子结点的，或者说就是专门管理层结点的。

现在我们来看一些它们的具体应用。

打开HelloCpp工程。在Classes下我们看到有两个类:

1 . AppDelegate:由CCApplication派生，即Cocos2d-x的程序类。可以把它当作上面图示中的”Root”。它的作用就是启动一个程序，创建主窗口并初始化游戏引擎并进入消息循环。

2 . HelloWorld：由CCLayer派生,即Cocos2d-x的层。对应上面图示中“开始界面”场景中的“界面层”。它的作用是显示背景图和菜单及退出按钮等精灵。在这个类里有一个静态函数HelloWorld::scene()创建了所用到的场景并创建HelloWorld这个层放入到场景中。

在程序的main函数中创建了AppDelegate类的实例对象并调用run运行。 之后会在AppDelegate的函数applicationDidFinishLaunching（代表程序启动时的处理）中结尾处调用HelloWorld::scene()创建了场景。

游戏运行起来是个什么样子呢？没错，我看跟魂斗罗的“开始界面”也差不到哪去嘛。当然，只是指组织关系。

嗯，到此，本节的知识算是讲述完毕！做为一个有上进心的程序员，咱们来做些课后题吧？

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签