Cocos2d-x 在版本3开始已经支持了3D游戏开发的特性，我在官网文档看到3D开发的部分，觉得有必要记录一下，权当做学习笔记。因为只花了半天时间翻译，而且能力有限，各位看官勿喷。
本博客虽然水分很足，但是也算是博主的苦劳了，
如需转载，请附上本文链接http://blog.csdn.net/cyh_24/article/details/45702343，不甚感激！
相信，你已经对Cocos2d-x有所了解，并且将它作为一种2D游戏引擎来看待。但是，从版本3开始，我们已经将3D一些特性添加到了Cocos2d-x里面。因为3D游戏是一个巨大的市场，所以，为了方便您进行3D游戏的开发，Cocos2d-x向您提供了所有你开发3D游戏时所需要的特性。或许对你而言，3D开发是一个新的领域，这里有一些软件、工具是你所需要了解了。
深吸一口气，不要紧张，我们将一步一步地带你走进3D开发的奇妙之旅！
1. Sprite3D
跟2D游戏一样，3D游戏开发同样也需要Sprite对象。Sprite对象是所有游戏的一个基础构件。3D Sprite相比于2D，除了x轴跟y轴，还多了一个z轴。Sprite3D的大部分用法都跟图片的Sprite没有两样。加载并显示一个Sprite3D对象非常简单，看代码：
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">auto sprite <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Sprite3D<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"boss.c3b"</span>);sprite<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>setScale(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5.</span>f);sprite<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>setPosition(Vec2(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>));scene<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>addChild(sprite);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
以上代码，非常简单的就创建了一个Sprite3D对象，显示效果如下：
2. 专有名词
虽然并不涉及语言范畴，但是，在使用3D特性的时候，你还是需要了解这个领域的一些被广泛使用的专有名词。
- Mesh - 这是当你进行渲染的时候，构造形状和纹理所用的顶点。
- Model - 这是一个可以被渲染的对象，它是mesh的集合。在外面的引擎中，它就是Sprite3D。
- Camera - 因为，3D世界不是一个平面，所以你需要从一个视角去看它。这个视角就是Camera，当你使用不同的Camera的参数（即使用了不同的视角），你看到的场景是不同的。
- Light - 光照的作用是为了让场景看起来更具真实感。为了让对象看起来更真实，你需要根据光照的情况来改变颜色。很简单，光线照射的地方是亮的，背对光照的地方是暗的。
3. 使用Sprite3D
3.1 将3D模型载入到Sprite3D对象
上文已经提到，3D模型是一系列的mesh集合。你可以将一个3D模型附加到另一个3D模型中，以此来产生一些丰富的特效。比如，你可以将一个武器模型附加到任务模型中。为了达到这个效果，你需要找到武器需要附加的位置。在代码中，你可以使用 getAttachNode() 来进行添加。
例子：将一个3D模型附加到另一个3D模型中：
<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">auto sp = <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">Sprite3D</span>::create(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"axe.c3b"</span>);sprite->getAttachNode<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Bip001 R Hand"</span>)</span>-></span>addChild(sp);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
代码显示的效果如下：
3.2 互换 3D Model
当进行3D开发的时候，你可以想要对模型进行动态的修改。比如，当人物能力值的变化，服装的改变，或者你想要通过模型在视觉上的变化来提醒用户状态的改变。如果你的3D模型是由mesh构成的，那么你可以使用getMeshByIndex() 和 getMeshByName() 轻松的访问这些mesh。通过这些函数，你可以实现人物更换武器或者服装的效果。
我们来看一个关于女孩更换外套的例子：
我们可以通过改变一系列mesh对象，来更换女孩穿着的外套。下面的代码演示了如何实现这一功能：
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">auto sprite <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Sprite3D<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ReskinGirl.c3b"</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// display the first coat</span>auto girlTop0 <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> sprite<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>getMeshByName(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Girl_UpperBody01"</span>);girlTop0<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>setVisible(<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>);auto girlTop1 <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> sprite<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>getMeshByName(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Girl_UpperBody02"</span>);girlTop1<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>setVisible(<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// swap to the second coat</span>girlTop0<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>setVisible(<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>);girlTop1<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>setVisible(<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
上述代码的演示效果如下：
4. Animation
Sprite3D 对象是构成游戏最本质的对象。我们已经在前面学会了如何操作它们。但是，你可能还想要一些更丰富的效果体验。加入一些动画效果吧！为了执行了一个动画效果，你需要使用 Animation3D 和 Animation3D 对象。然后，你可以使用 Animation3D 对象来创建一个Animate3D动作效果。来看例子：
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// the animation is contained in the .c3b file</span>auto animation <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Animation3D<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"orc.c3b"</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// creates the Action with Animation object</span>auto animate <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Animate3D<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(animation);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// runs the animation</span>sprite<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>runAction(RepeatForever<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(animate));</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>
文字无法展示动画效果，所以，你还是使用”Programmer Guide Sample”中的代码，来亲自体验这个动画特效吧！需要注意的是，3D动画和2D动画有共通之处，可以回到第4章再仔细研读一番。
4.1 多个动作
如果你想要在同一时间执行多重动作效果的时候，你该怎么做？
通过动画开始时间和动画序列长度这两个参数，你可以创建多重动画特效的叠加效果。这两个参数的单位都是秒，例子如下：
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">auto animation <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Animation3D<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(fileName);auto runAnimate <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Animate3D<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(animation, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>);sprite<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>runAction(runAnimate);auto attackAnimate <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Animate3D<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(animation, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>);sprite<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>runAction(attackAnimate);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
在上面的例子中，有两个动画特效得到了执行。第一个动作立刻执行，并执行了2秒钟。第二个在开始后的三秒钟才开始执行，并持续了5秒钟。
4.2 动画执行速度
动画的速度属性是一个正数，当然也有负数的速度，表示反方向。在这个例子中，速度被设定为10，这表示动画长度是10秒。
4.3 动画混合
当你使用多重动画的时候，每个动画之间的融合协调是自动进行的。动画融合的目的是在不同动画效果之间进行平滑过度。给定两个动画，A和B，在动画A的最后几帧，和B的前几帧会重叠，使得动画看起来的效果更自然。
Cocos2d-x 中默认的平滑过渡时间是0.1秒。你也可以通过 Animate3D::setTransitionTime 来设置这个时间长短。
Cocos2d-x 目前只提供帧间的线性差值。它能填充间断的曲线，使得路径能够平滑。如果你在模型的制作过程中使用其他的差值方法，我们的内置工具–fbx-conv 将会生成额外的帧间补偿。这种补偿的是与目标帧相一致的。为了获取更多的信息，请参看本章最后的讨论部分。
5. Camera
Camera对象是3D开发中非常重要的一个部分。因为3D世界并不是平面的，所以你需要一个Camera来观察、导航，这就像你正在看一场电影，通过不同的镜头看到不同的场景。在使用Camera对象的时候，你需要有这样的概念。Camera对象是从Node继承而来的，因此，它同样可以支持大多数的动作对象。需要注意的是，Camera对象分为两种，一种是透视Camera，另一种是正交投影Camera.
透视Camera是用来观察对象由近到远的变化。一个透视Camera试图可以是如下：
通过这个透视Camera，你可以看到物体越近看起来越大，反之看起来更小。
而正交投影Camera则被用来在远距离中观察物体。你可以将它的作用理解为将一个3D世界投影成一个二维的表达。正交投影Camera可能长成如下模样：
你可以看到不管物体有多远，它的尺寸还是一样的。例如，如果游戏的地图很小，通常会使用正交投影Camera来渲染。
5.1 Camera 的使用
不要紧张，可能Camera对象听起来很复杂，但是放心，我们已经确保你使用它进行开发的时候会很轻松。实际上，当使用3D的开发的时候，你完全不需要做什么来创建一个Camera对象。每一个场景都会根据Director对象的映射属性自动生成一个默认的Camera。如果你需要不止一个Camera，你可以使用下面的代码来再创建一个：
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">auto s <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Director<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::getInstance</span>()<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>getWinSize();auto camera <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Camera<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::createPerspective</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>, (GLfloat)s<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>width/s<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>height, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// set parameters for camera</span>camera<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>setPosition3D(Vec3(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>));camera<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>lookAt(Vec3(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>), Vec3(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>));addChild(camera); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//add camera to the scene</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>
5.2 创建一个正交投影Camera
默认的Camera是透视Camera。如果你想要创建一个正交投影的Camera，也非常简单，只需要使用 Camera::createOrthographic(). 例如:
<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">auto s = <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">Director</span>::getInstance<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>-></span>getWinSize();auto camera = <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">Camera</span>::createOrthographic(s.width, s.height, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
5.3 Hide objects from camera
有时候，你并不想将所有的物体都显示到视野中。在Cocos2d-x 中，想要隐藏一个物体非常简单，使用如下操作即可:
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//Camera</span>camera<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>setCameraFlag(CameraFlag<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::USER1</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//Node</span>node<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-></span>setCameraMask(CameraFlag<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::USER1</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
6. Light
如果你想要你的游戏更精美，画面的氛围更真实，控制好Light同样是一件非常重要的事情。目前Cocos2d-x支持4中光照技术。你可以根据你的需要，选择最适合你的光照技术。每一种光照效果都是不同的。
6.1 Ambient Light（环境光）
环境光没有固定的位置，也没有具体的方向。使用环境光可以为模型的每个表面都提供相同的照明，每个表面都显示出同样的亮度。想象一下你在办公室的环境中，所有地方都有光，你看到的所有物体的光照情况都是一样的。想要使用环境光照，可以按如下做法：
<code class="hljs rsl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">auto <span class="hljs-shader" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">light</span> = AmbientLight::create (</span>Color3B::RED);addChild (<span class="hljs-shader" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">light</span>);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
它产生的效果如下：
6.2 Directional Light（定向光/平行光）
定向光通常被用来模拟类似太阳光的光源。定向光源是沿着同一方向发射的平行光线，因此定向光光也没有固定的位置，而是沿着指定的方向无限延伸。当你使用定向光的时候，你需要意思到对于每一个被定向光照射的表面，其光线强度都与光源处相同。想象一下，你在晴朗的户外，当你直视太阳的方向，即使你走了几步，光照还是一样强烈。使用定向光可以如下操作：
<code class="hljs cpp has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">auto</span> light = DirectionLight::create(Vec3(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0f</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0f</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0f</span>), Color3B::RED);addChild (light);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
它产生的效果如下：
6.3 Point Light（点光源）
点光源通常被用来模拟灯泡，灯或者火炬的光照效果。点光源从一点出发向所有方向发射光线，类似于灯泡所发出的光线。点光源的位置决定了光线与模型各个表面的夹角，因此可以在不同位置指定多个点光源，提供不同的光照效果。此外，点光源的强度可以随着距离的增加而进行衰减，并且可以使用不同的衰减方式，从而可以更加逼真地模拟实际的光照效果。使用点光源可以如下操作：
<code class="hljs cpp has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">auto</span> light = PointLight::create(Vec3(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0f</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0f</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0f</span>), Color3B::RED, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10000.0f</span>);addChild (light);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
它产生的效果如下：
6.4 Spot Light（聚光灯）
聚光灯通常被用作模拟手电筒的效果。聚光灯从一点出发，沿指定的方向和范围发射具有方向性的圆锥形光束。聚光灯所产生的圆锥形光锥分为两部分：内部光锥是光束中最亮的部分，其顶角称为聚光角；整个光锥的顶角称为照射角，在照射角和聚光角之间的光锥部分，光的强度将会产生衰减，这一区域称为快速衰减区。同点光源一样，聚光灯的强度也可以从光源开始，随着光线传播距离的增加而逐渐衰减，并且可以使用不同的衰减方式。使用聚光灯可以如下操作：
<code class="hljs cpp has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">auto</span> spotLight = SpotLight::create(Vec3(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0f</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0f</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0f</span>), Vec3(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0f</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0f</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0f</span>),Color3B::RED, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10000.0f</span>) ;addChild (spotLight);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
它产生的效果如下：
6.5 Light Masking（光罩）
你在你的厨房或者卧室使用什么样的照明？可能是几盏灯？你是否注意到，或许你只使用了一个灯就能把整个房间照亮？那是因为你使用了灯罩！
当你有一个Node需要一个特定的光照源的时候，你需要使用灯罩。比如，在一个场景中有三个光照源，但是一个Node只能别其中的一个光照作用。这时，你就可以使用 setLightFlag 来人为控制Node受哪个光照源作用。由于移动平台的性能问题，我们并不建议使用多个光照源。默认的光照源数量是1个。如果你想要开启多个光照源，你需要修改info.plist中的参数，如下所示：
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">key</span>></span> cocos2d.x.3d.max_dir_light_in_shader <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">key</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">integer</span>></span> 1 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">integer</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">key</span>></span> cocos2d.x.3d.max_point_light_in_shader <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">key</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">integer</span>></span> 1 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">integer</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">key</span>></span> cocos2d.x.3d.max_spot_light_in_shader <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">key</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">integer</span>></span> 1 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">integer</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
7. 3D 软件包
7.1 3D 编辑器
3D编辑器包含了你创建3d图形的各种工具。这里提供包括商业版和免费版的一下主流的编辑器：
- Blender (免费)
- 3DS Max
- Cinema4D
- Maya
大部分3D编辑器，通常保存的文件可以在各个编辑器之间互用，而且也可以导入到游戏引擎中使用的。
7.2 Cocos2d-x 提供的工具
Cocos2d-x 提供一些工具来帮你将你的3D模型转化成Cocos2d-x能够访问的文件格式。
7.3 fbx-conv 命令行工具
fbx-conv 能够帮你将FBX文件转换成Cocos2d-x 特有的格式（c3t,c3b）。FBX是最流行的3D文件格式，主流的3D编辑器基本都支持这一文件格式。使用 fbx-conv 非常简单，你只需要提供几个参数即可：
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">fbx<span class="hljs-attribute" style="box-sizing: border-box;">-conv</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">[</span><span class="hljs-attribute" style="box-sizing: border-box;">-a</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">|-</span>b<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">|-</span>t<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">]</span><span class="hljs-markup" style="box-sizing: border-box;"> FBXFile</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
可供选择使用的参数如下：
- -?: 显示帮助文档
- -a: 导出文本格式和二进制格式
- -b: 导出二进制格式
- -t: 导出文本格式
例如：
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">fbx<span class="hljs-attribute" style="box-sizing: border-box;">-conv</span> <span class="hljs-attribute" style="box-sizing: border-box;">-a</span> boss<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>FBX</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
这里还需要注意一些小细节：模型需要有一个至少包含一个纹理图案的材质；而且目前只支持一个骨骼动画，多个骨骼对象现在还不能被支持。但是，你可以创建一个3d场景，然后后导出多个静态模型。mesh最多支持的顶点数是32767.
8. 3D 文件格式
Cocos2d-x 目前提供两种3d文件格式：
- 通用的格式（Wavefront Object files）: .obj 文件
- Cocos2d-x 特有的格式:c3t, c3b 文件.
Wavefront文件格式是一种应用十分广泛的格式，主流的3D编辑器都支持它，而且它能够很简单被解析。但是，它也有局限性，比如它不支持动画特性。
另一方面，c3t和c3b是Cocos3d-x特有的文件格式，它允许动画、材质和其它3d特性。c3t的后缀t代表text（文本），c3b的后缀b表示binary（二进制文件）。建议开发者使用c3b进行开发，因为它的性能更高。如果，你想要调试文件，或者跟踪它在git或者其他VCS（版本控制系统）上的变化，那么你需要c3t。而且，你可以通过.c3b或者.c3t来创建Animation3D对象，但是.obj文件就无法创建动画了。
9. 高级模块
9.1 BillBoard
或许，在此之前，你根本没有听说过BillBoard（翻译为广告牌）。不要误会，我不是再说你在高速路上总是看到的令人厌恶的广告牌。我说的BillBoard是一个特殊的Sprite，它总是面对着Camera。当你旋转Camera的时候，BillBoard对象也会随之一起旋转。使用BillBoard是一个十分普遍的渲染技术。举个例子：高山滑雪游戏。在这种游戏中，滑雪者道路上出现的任何树、石头或者其他问题都是BillBoard对象。下图演示了Camera跟BillBoard对象之间的关系：
9.2 BillBoard的使用
Billboard 对象可以被很轻松地创建。BillBoard衍生自Sprite，所以Sprite拥有的大部分特性，它也都支持。我们可以使用以下方法来创建BillBoard：
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">auto billboard <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> BillBoard<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Blue_Front1.png"</span>, BillBoard<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::Mode</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::VIEW_POINT_ORIENTED</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
通过改变BillBoard对象的类型，你可以创建一个XOY平面上的BillBoard对象：
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">auto billboard <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> BillBoard<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::create</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Blue_Front1.png"</span>, BillBoard<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::Mode</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">::VIEW_PLANE_ORIENTED</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
上面的两种方法，差异只在于传递了不同的 BillBoard::Mode 类型，一个是 _VIEW_POINT_ORIENTED 第二个是 VIEW_PLANE_ORIENTED.
VIEW_POINT_ORIENTED 表示BillBoard对象是朝向Camera的，其效果如下：
VIEW_PLANE_ORIENTED 表示BillBoard对象是朝向XOY平面的，其效果如下：
同样，你可以BillBoard对象设置其他属性，就像你对其他Node所做的一样。这些属性包括到不完全是：scale，position，rotation，例如：
<code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">billboard-><span class="hljs-function" style="box-sizing: border-box;">setScale(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>f)</span>;billboard-><span class="hljs-function" style="box-sizing: border-box;">setPosition3D(<span class="hljs-function" style="box-sizing: border-box;">Vec3(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f)</span>)</span>;billboard-><span class="hljs-function" style="box-sizing: border-box;">setBlendFunc(BlendFunc::ALPHA_NON_PREMULTIPLIED)</span>;<span class="hljs-function" style="box-sizing: border-box;">addChild(billboard)</span>;</code><code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"></code><code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"></code><code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">from: http://blog.csdn.net/cyh_24/article/details/45702343</code>
0 0
