http://blog.csdn.net/honghaier/article/details/8760124点击打开链接

目录(?)[-]

  1. Cocos2d-x相关教程来源于红孩儿的游戏编程之路CSDN博客地址httpblogcsdnnethonghaier 红孩儿Cocos2d-X学习园地QQ3群20510014947870848
  2. 礼物红孩儿引擎内功心法修练与Cocos2d-x之结点系统场景层精灵
    1. 结点系统原理入门
    2. 精灵层场景
    3. 课后题目

[Cocos2d-x相关教程来源于红孩儿的游戏编程之路CSDN博客地址：http://blog.csdn.net/honghaier

礼物：《红孩儿引擎内功心法修练与Cocos2d-x》之结点系统（场景，层，精灵）

另：好吧，我彻底被Cocos2d-x版本的更新速度打败了！我决定停止再对2.0.2版本再做深入分析讲解。本博文实为新书的节选，做为礼物送给大家，望各位仔细阅读后提出批评！
      另：本周末工具箱会更新到0.1.1版本，欢迎下载并到官方论坛提出BUG反馈和使用建议。
  

   

本节的学习目标:

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

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

2.1 结点系统原理入门

2.1.1 结点启蒙：

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

定义:

 

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

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

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

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

如图A:

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

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

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

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

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

如图B:

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

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

试想一下：

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

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

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

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

[cpp] view plaincopy
  1. //结点类
  2. class CNode
  3. {
  4. public:
  5. //构造
  6. CNode();
  7. //析构
  8. virtual ~CNode();
  9. public:
  10. //更新
  11. virtual  inline void    Update();
  12. //渲染
  13. virtual  inline void    Draw();
  14. public:
  15. //设置当前结点名称
  16. void    SetName(const char* szName);
  17. //取得当前结点名称
  18. const string&   GetName();
  19. //加入一个子结点类
  20. void    AddChild(CNode* pChildNode);
  21. //取得子结点
  22. CNode*  GetFirstChild();
  23. //加入一个兄弟结点类
  24. void    AddBorther(CNode* pBortherNode);
  25. //取得兄弟结点
  26. CNode*  GetFirstBorther();
  27. //删除一个结点
  28. bool    DelNode(CNode*  pNode);
  29. //清空所有子结点
  30. void    DelAllChild();
  31. //清空所有兄弟结点
  32. void    DelAllBorther();
  33. //查询某个子结点-- 纵向查询
  34. CNode*  QueryChild(const char* szName);
  35. //查询某个兄弟结点-- 横向查询
  36. CNode*  QueryBorther(const char* szName);
  37. //为了方便检测结点树系统的创建结果，这里增加了一个保存结点树到XML文件的函数。
  38. bool    SaveNodeToXML(const char* szXMLFile);
  39. protected:
  40. //设置父结点
  41. void    SetParent(CNode* pParentNode);
  42. //取得父结点
  43. CNode*  GetParent();
  44. //保存结点树到XML文件，这个函数是只生成本结点的信息。
  45. bool    SaveNodeToXML(FILE* hFile);
  46. private:
  47. //当前结点名称
  48. string  m_strNodeName;
  49. //父结点
  50. CNode*  m_pParentNode;
  51. //第一个子结点
  52. CNode*  m_pFirstChild;
  53. //第一个兄弟结点
  54. CNode*  m_pFirstBorther;
  55. }
  56. ;

对应的实现：

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

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

保存的XML文件打开后：

、

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

2.1.1结点的位置：

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

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

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

[cpp] view plaincopy
  1. //向量
  2. struct stVec3
  3. {
  4. //三向值
  5. float m_fX;
  6. float m_fY;
  7. float m_fZ;
  8. stVec3()
  9. {
  10. m_fX = 0;
  11. m_fY = 0;
  12. m_fZ = 0;
  13. }
  14. //构造
  15. stVec3(float x,float y,float z)
  16. {
  17. m_fX = x;
  18. m_fY = y;
  19. m_fZ = z;
  20. }
  21. //重载赋值操作符
  22. stVec3& stVec3::operator = (const stVec3& tVec3)
  23. {
  24. m_fX = tVec3.m_fX;
  25. m_fY = tVec3.m_fY;
  26. m_fZ = tVec3.m_fZ;
  27. return *this;
  28. }
  29. //重载加法操作符
  30. stVec3 stVec3::operator + (const stVec3& tVec3)
  31. {
  32. stVec3  tResultVec;
  33. tResultVec.m_fX = m_fX + tVec3.m_fX;
  34. tResultVec.m_fY = m_fY + tVec3.m_fY;
  35. tResultVec.m_fZ = m_fZ + tVec3.m_fZ;
  36. return tResultVec;
  37. }
  38. //重载加等操作符
  39. stVec3& stVec3::operator += (const stVec3& tVec3)
  40. {
  41. m_fX += tVec3.m_fX;
  42. m_fY += tVec3.m_fY;
  43. m_fZ += tVec3.m_fZ;
  44. return *this;
  45. }
  46. //重载减法操作符
  47. stVec3 stVec3::operator - (const stVec3& tVec3)
  48. {
  49. stVec3  tResultVec;
  50. tResultVec.m_fX = m_fX - tVec3.m_fX;
  51. tResultVec.m_fY = m_fY - tVec3.m_fY;
  52. tResultVec.m_fZ = m_fZ - tVec3.m_fZ;
  53. return tResultVec;
  54. }
  55. //重载减等操作符
  56. stVec3& stVec3::operator -= (const stVec3& tVec3)
  57. {
  58. m_fX -= tVec3.m_fX;
  59. m_fY -= tVec3.m_fY;
  60. m_fZ -= tVec3.m_fZ;
  61. return *this;
  62. }
  63. }
  64. ;
  65. 然后在结点中加入相应接口:
  66. public:
  67. //设置当前结点相对于父结点位置
  68. void    SetPos(float x,float y,float z);
  69. void    SetPos_X(float x);
  70. void    SetPos_Y(float y);
  71. void    SetPos_Z(float z);
  72. //取得当前结点相对于父结点位置
  73. float   GetPos_X();
  74. float   GetPos_Y();
  75. float   GetPos_Z();
  76. //取得当前结点的世界坐标位置
  77. stVec3  GetWorldPos();
  78. private:
  79. //当前结点相对于父结点的位置
  80. stVec3  m_sPos;
  81. 对应的实现：
  82. //设置当前结点相对于父结点位置
  83. void    CNode::SetPos(float x,float y,float z)
  84. {
  85. m_sPos.m_fX = x;
  86. m_sPos.m_fY = y;
  87. m_sPos.m_fZ = z;
  88. }
  89. void    CNode::SetPos_X(float x)
  90. {
  91. m_sPos.m_fX = x;
  92. }
  93. void    CNode::SetPos_Y(float y)
  94. {
  95. m_sPos.m_fY = y;
  96. }
  97. void    CNode::SetPos_Z(float z)
  98. {
  99. m_sPos.m_fZ = z;
  100. }
  101. //取得当前结点相对于父结点位置
  102. float   CNode::GetPos_X()
  103. {
  104. return m_sPos.m_fX;
  105. }
  106. float   CNode::GetPos_Y()
  107. {
  108. return m_sPos.m_fY;
  109. }
  110. float   CNode::GetPos_Z()
  111. {
  112. return m_sPos.m_fZ;
  113. }
  114. //取得当前结点的世界坐标位置
  115. stVec3  CNode::GetWorldPos()
  116. {
  117. stVec3 tResultPos = m_sPos;
  118. //使用回溯法取得最终的世界位置，这一步是结点系统中父结点固定子结点的关健。
  119. if(m_pParentNode)
  120. {
  121. tResultPos += m_pParentNode->GetWorldPos();
  122. }
  123. return tResultPos;
  124. }

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

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:

[cpp] view plaincopy
  1. #pragma once
  2. #include <windows.h>
  3. //==================================================================
  4. //File:Director.h
  5. //Desc:显示设备类，用于绘制
  6. //==================================================================
  7. class   CDirector
  8. {
  9. public:
  10. ~CDirector();
  11. public:
  12. //获取单件实例指针
  13. static  CDirector* GetInstance();
  14. //设置HDC
  15. void    Init(HWND hWnd);
  16. //绘制矩形
  17. void    FillRect(int x,int y,int width,int height,COLORREF  rgb);
  18. //绘制图像
  19. void    DrawBitMap(int x,int y,int width,int height,HBITMAP hBitmap);
  20. private:
  21. CDirector(){}
  22. private:
  23. //单件实例指针
  24. static  CDirector*  m_pThisInst;
  25. //WINDOWS 窗口句柄
  26. HWND        m_HWnd;
  27. //WINDOWS GDI 绘图所用的设备上下文
  28. HDC         m_HDC;
  29. }
  30. ;

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

Director.cpp:

[cpp] view plaincopy
  1. #include "Director.h"
  2. CDirector*  CDirector::m_pThisInst = NULL;
  3. CDirector* CDirector::GetInstance()
  4. {
  5. if(!m_pThisInst)
  6. {
  7. m_pThisInst = new CDirector ;
  8. if(!m_pThisInst)return NULL;
  9. m_pThisInst->Init(NULL);
  10. }
  11. return m_pThisInst;
  12. }
  13. CDirector::~CDirector()
  14. {
  15. if(m_pThisInst)
  16. {
  17. delete m_pThisInst;
  18. m_pThisInst = NULL;
  19. }
  20. }
  21. void    CDirector::Init(HWND hWnd)
  22. {
  23. if(hWnd)
  24. {
  25. m_HWnd = hWnd ;
  26. m_HDC = ::GetDC(m_HWnd) ;
  27. }
  28. }
  29. void    CDirector::FillRect(int x,int y,int width,int height,COLORREF   rgb)
  30. {
  31. HBRUSH hBrush = ::CreateSolidBrush(rgb);
  32. RECT   tRect;
  33. tRect.left      = x;
  34. tRect.top       = y;
  35. tRect.right     = x + width;
  36. tRect.bottom    = y + height;
  37. ::FillRect(m_HDC,&tRect,hBrush);
  38. ::DeleteObject(hBrush);
  39. }
  40. void    CDirector::DrawBitMap(int x,int y,int width,int height,HBITMAP  hBitmap)
  41. {
  42. HDC hTempHDC = CreateCompatibleDC(m_HDC);
  43. HGDIOBJ hOldObj = SelectObject(hTempHDC,hBitmap);
  44. BitBlt(m_HDC,x,y,width, height,hTempHDC,0,0,SRCCOPY);
  45. DeleteDC(hTempHDC);
  46. }

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

Scene.h:

[cpp] view plaincopy
  1. #pragma once
  2. #include "Node.h"
  3. //==================================================================
  4. //File:Scene.h
  5. //Desc:场景类，用于管理所有的层
  6. //==================================================================
  7. //结点类
  8. class CScene : public CNode
  9. {
  10. public:
  11. //构造
  12. CScene(const char* szName);
  13. };

其对应的CPP：

[cpp] view plaincopy
  1. #include "Scene.h"
  2. //构造
  3. CScene::CScene(const char* szName)
  4. {
  5. SetName(szName);
  6. }

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

Layer.h:

[cpp] view plaincopy
  1. #pragma once
  2. #include "Node.h"
  3. //==================================================================
  4. //File:Layer.h
  5. //Desc:层类，用于存放精灵
  6. //==================================================================
  7. //结点类
  8. class CLayer : public CNode
  9. {
  10. public:
  11. //构造
  12. CLayer(const char* szName);
  13. public:
  14. //更新
  15. virtual     inline  void    Update();
  16. //直接渲染
  17. virtual     inline  void    Draw();
  18. public:
  19. //设置颜色
  20. void        SetColor(COLORREF color);
  21. //取得颜色
  22. COLORREF    GetColor();
  23. //设置高
  24. void        SetWidth(int vWidth);
  25. //取得宽
  26. int         GetWidth();
  27. //设置高
  28. void        SetHeight(int vHeight);
  29. //取得高
  30. int         GetHeight();
  31. private:
  32. //设置颜色
  33. COLORREF    m_LayerColor;
  34. //宽度
  35. int         m_nWidth;
  36. //高度
  37. int         m_nHeight;
  38. };

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

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

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

Sprite.h:

[cpp] view plaincopy
  1. #pragma once
  2. #include "Node.h"
  3. //==================================================================
  4. //File:Sprite.h
  5. //Desc:精灵类，用于显示图片
  6. //==================================================================
  7. //结点类
  8. class CSprite : public CNode
  9. {
  10. public:
  11. //构造
  12. CSprite(const char* szName);
  13. public:
  14. //更新
  15. virtual  inline void    Update();
  16. //直接渲染
  17. virtual  inline void    Draw();
  18. public:
  19. //设置位图句柄
  20. void    SetBitmap(HBITMAP vhBitmap);
  21. //设置位图句柄
  22. void    SetBitmap(HBITMAP vhBitmap,int vWidth,int vHeight);
  23. private:
  24. //所用位图句柄
  25. HBITMAP m_hBitmap;
  26. //位图宽度
  27. int     m_nBitmapWidth;
  28. //位图高度
  29. int     m_nBitmapHeight;
  30. };

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

Sprite.cpp:

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

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

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

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

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

并在InitInstance函数的尾部加入：

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

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

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

[cpp] view plaincopy
  1. case WM_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. case WM_TIMER:
  15. {
  16. //让场景的Layer1层不断向右移动，到像素时重置。
  17. if(g_pMyScene)
  18. {
  19. CNode*  pLayer = g_pMyScene->QueryChild("Layer1");
  20. stVec3  tPos   = 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. case WM_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,310,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,350,0);
  53. }
  54. }
  55. }
  56. }
  57. break;
  58. case WM_DESTROY:
  59. //当窗口销毁时也一并删除定时器并释放场景。
  60. ::KillTimer(hWnd,1);
  61. if(g_pMyScene)
  62. {
  63. //会调用CNode的虚析构函数释放所有子结点。所以不会造成内存泄漏。
  64. delete g_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,publicCCTouchDelegate,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()创建了场景。

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

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

2.3 课后题目

1．在2.1.1结中为结点增加缩放，旋转（当然，如果没有好的数学知识就算了，也可以用一些第三方数学库）的处理，使取得一个子结点在世界坐标系中的大小时会受到其父结点的影响。

2.  将《魂斗罗》之外你玩过的游戏选几个做一个树型分析。

最后，本节所涉及实例工程代码下载：http://download.csdn.net/detail/honghaier/5221534

《红孩儿引擎内功心法修练与Cocos2d-x》之结点系统（场景，层，精灵)(精)相关推荐

  1. python 游戏引擎 cocos2d_2.2 完成一个Cocos2d游戏程序代码

    本视频基于**Python 3.6版本 Python语言之所以受欢迎,很大的原因是有很多可以使用的库,Python社区也有很多游戏开发库,其中较为优秀有:Cocos2d.Pyglet和Pygame,还 ...

  2. 千里眼的修练方法--末法时代即将结束

    现今社会,各公司领导层涌现出了一大批修士,为了帮助大家更好的修行,我来给大家简单介绍一下各种修行方法.各位一定要勤加练习,早日飞升. 1,千里眼 相传古时候有一位叫甘蝇的射箭神手,他有一个弟子叫飞卫, ...

  3. 职场十大自我修练工具

    要想带领你的团队打胜仗,要想在激烈人才的竞争中胜出,你必须有一身好武功.你是在管理上也好,在专业领域上也好,或者在整合资源上也好,你修成好武功就必须掌握自我修练的工具. 自我修练的工具太多了,我们选出 ...

  4. docker修练之windows与linux下实践记录

    docker修练之windows与linux下实践记录 mysql 持久化 mkdir -p /var/own/mysqldata/ docker run --name mmsql -v /var/o ...

  5. 程序员修练之道-笔记

    这是我阅读程序员修练之道时做的一些笔记,那些是我在阅读的过程中,有著不得不把它写下来的冲动,这本书我还在阅读中,它总共有8个章节,我希望可以一天完整一个章节,最迟两星期之内需要把它读完. 2016年1 ...

  6. 深圳嵌入式培训 修练软硬件之功 高薪一路相伴

                                                       修练软硬件之功  高薪一路相伴                                   ...

  7. 虚幻引擎学习之路：渲染模块之光照系统

    原文链接:https://blog.uwa4d.com/archives/Study_unreal4_Rendering_1.html 写在前面 "UWA什么时候可以支持Unreal引擎?& ...

  8. 【iOS-cocos2d游戏引擎开发之一】搭建cocos2d游戏引擎环境，创建第一个HelloWorld！...

    最近几天仔细了解了iOS游戏开发引擎,常用的cocos2d,Unity引擎,那么Unity是非免费的,而cocos2d则是免费开源的: 最后促使我选择cocos2d的原因有两点: 1.最重要的原因是它 ...

  9. 重构修练笔记 Refactoring Xiu Lian Notes (1) - 练气期

    笔记纯属虚构,如有雷同,纯属巧合 万物皆有定数,普通人入门练气期一味求快,只满足身体自身需求,对于后面更高层级没有远见,导致后面越修炼越难,极其不便和难受,从而有人直接崩盘而道陨神消.需要一种新的方法 ...

  10. 修练8年C++面向对象程序设计之体会

    面向对象程序设计语言很多,如Smalltalk.Ada.Eiffel.Object Pascal.Visual Basic.C++等等.C++语言最讨人喜欢,因为它兼容C 语言,并且具备C 语言的性能 ...

最新文章

  1. 蚂蚁财富联手百会CRM全面升级金融服务
  2. Java基础-四要素之一《封装》
  3. (转)计算机网络基础知识总结
  4. oracle求部门请假类别合计_【大话IT】求oracle sql 写法，找出同类的合计，所有的总计...
  5. 又拍云刘平阳，理性竞争下的技术品牌提升之道
  6. Mac 远程命令工具
  7. LeetCode 2000. 反转单词前缀
  8. 从源码分析RocketMQ系列-MQClientInstance类详解
  9. c语言2的1000次方,在网上看到一个求2的10000次方的方法，有个地方看不懂，求大佬...
  10. Serv-U组建个人FTP服务器, ——完全图解教程：FTP架设、端口映射、动态域名申请...
  11. 老罗android开发视频教程 下载地址
  12. 20110614 开机脚本，统一管理员密码，exe,布线
  13. 10道Struts2面试题
  14. 基于三轴加速度传感器的老人摔倒检测
  15. 如何快速求一个数的所有因子数 c/c++
  16. 电脑使用技巧提升篇4：两步实现电脑软件开机自启
  17. java jsp使用flash播放mp4,(jsp/html)网页上嵌入播放器(常用播放器代码整理)
  18. K8S 创建 Deployment
  19. 生物计算机公式,高中生物公式大全.pdf
  20. kaggle 入门：逻辑回归应用之Kaggle泰坦尼克之灾

热门文章

  1. 'C 语言' | 全排列解桥本分数式问题
  2. 合天网安实验室sql注入实验一 WRITE UP
  3. 软件开发常见的开发方向
  4. 计算机重新启动后打印机脱机,重启电脑后打印机脱机怎么办
  5. 批量下载USGS的遥感影像
  6. Linux禁用搜狗输入法的简繁切换快捷键
  7. 项目之间Cookie的共享
  8. android逆向笔记 -- 记一次解决飞天助手未知模拟器方法
  9. 三星手机怎么看html5,三星手机查看硬件信息方法
  10. nagios监控系统