in Cocos2d-x ~ read.

章节2:Cocos2d-x的基本概念

本文地址:https://www.chihoc.com/concept-of-cocos2d-x/
欢迎转载,请注明出处,谢谢

Cocos2d-x是一个跨平台的游戏引擎。

游戏引擎是一个提供了所有游戏都拥有的通用功能的软件。

一个游戏引擎包含了很多组件,例如:a renderer, 2d/3d graphics, collision detection, a physics engine, sound, controller support, animations and more。使用这些组件能够帮助提升表现力缩短你的开发时间。游戏引擎一般都提供支持多平台,所以你可以简单地开发你的游戏,并做一些必要的工作来部署到不同的平台。

因此,Cocos2d-x提供了一系列开发跨桌面和手机平台游戏的API。它们内置强大功能,而且都被封装成简单的接口,因此你可以专注于开发你的游戏,不用担心实现的技术和基础。

Coco2d-x 提供了所有你需要在游戏中创建的对象,如:SceneTransitionSpriteMenuSprite3DAudio 等。

主要的组件


Cocos2d-x的核心部分是 SceneNodeSpriteMenu 和 Action 这些对象。

img

Director


Coco2d-x有一个概念叫 Director。像电影一样,导演控制这一系列的操作和告诉接受者要做什么。而你就是制片人,你来告诉 Director要做什么。一个普通 Director的工作就是来控制Scene切换和过渡。Director是一个单例,因此你可以在代码的任何一个地方调用。

下图是一个典型的游戏流程,Director负责按照你的游戏标准来进行过渡。

img

事实上你就是游戏的导演,你来决定何时,如何发生何事。

Scene


在你的游戏中你可能想要一个主菜单,一些关卡和一个结束场景。怎么去组织所有这些分离的东西呢?没错!就是Scene了。当你回想一下你喜欢的电影,你可以看到整个故事线可以清楚地分为几个场景或几个分离的部分。把这个想法应用到游戏中,不管多简单的游戏,我们至少都能分出几个场景。

img

这是游戏的主菜单,它是一个简单的Scene。这个场景可以分成几个部分,它们共同组成最后这个效果。场景由 Renderer渲染。Renderer负责渲染精灵和屏幕上一些对象。想要深入了解的话,我们需要谈谈Scene Graph

Scene Graph


场景图像是安排一个场景的数据结构。一个场景图像包含一棵有Node 的树。(没错,它称作场景图像,但事实上由一棵树结构来表现)

img

了解场景是怎样由渲染器渲染是很重要的。因为一旦你开始为游戏添加结点,精灵和动画,你需要确定你所想的和最后出来的可视界面是一致的。如果不一致,你需要在一张纸上回溯你的场景图像,这样就能简单找到你的错误所在。

Cocos2d-x是用的中序遍历。左-中-右的过程。

img

上面的游戏场景可以化成树

img

另一方面你可以把树中的元素看做各有个z轴的值,它们是从负到正,因此当你添加元素的时候它们会自动基于z轴的值排序。

基于这个概念,你可以把Scene看做的 Node的一个集合。下面看看场景视图使用z轴排序的展示方式:

img

每个结点的不同z轴的值组成一个栈来展示不同层次。

在Cocos2d-x中,你可以使用addChild() API来创建场景视图

// Adds a child with the z-order of -2, that means`
// it goes to the "left" side of the tree (because it is negative)
scene->addChild(title_node, -2);

// When you don't specify the z-order, it will use 0
scene->addChild(label_node);

// Adds a child with the z-order of 1, that means
// it goes to the "right" side of the tree (because it is positive)
scene->addChild(sprite_node,1);

Sprites


所有的游戏都拥有精灵。精灵是纳西在屏幕移来移去的物体。你可以操作它。你的游戏中的主要角色可能就是一个精灵。也许你会想,是不是所有的可视物体都是精灵?不是!精灵应该是你会让他移动的物体,静止的物体只是一个结点。

看看上图中的分析:

img

精灵是所有游戏的关键。在设计的时候,你应该有一个由图片创建的主要角色。这就是 Sprite.

创建一个精灵很简单,它们有一些可变的属性如: positionrotation,scaleopacitycolor 等。

// This is how to create a sprite
automySprite = Sprite::create("mysprite.png");

// this is how to change the properties of the sprite
mySprite->setPosition(Vec2(500,0));

mySprite->setRotation(40);

mySprite->setScale(2.0);

// sets scale X and Y uniformly
mySprite->setAnchorPoint(Vec2(0,0));

下面说明一下每一个属性,下图是这个角色的初始状态。

img

如果我们使用mySprite->setPosition(Vec2(500, 0));来设置位置。

img

精灵的位置从它的原始位置变成了我们设置的位置了。

如果我们现在使用mySprite->setPosition(Vec2(500, 0));来设置旋转度。

img

精灵旋转到我们设置的角度啦!

如果我们使用mySprite->setScale(2.0);来设置一个新的缩放值。

img

还无疑问,精灵变成大只了。

最后,所有的Node 对象(精灵也是Node的一个子类)都有一个anchor point。当设置精灵的位置时,锚点用来指定精灵的哪部分会做参考。

当我们使用mySprite->setAnchorPoint(Vec2(0, 0));来设置锚点0,0时,精灵的左下方会用来作为setPosition()的响应。

img

img

img

图中的红点就是锚点的所在。

可以看出,锚点对于结点移动是非常有用的。你可以动态调整锚点来模拟一些效果。

相信我们能够很好的使用精灵了。那如果我们想一些自动或者时间触发的变化动作呢?继续看下文。

Actions


在屏幕中创建场景和添加精灵只是一部分的工作。为了游戏成为真正的游戏,我们需要让一些物体移动。Action 对象一个游戏必不可少的部分。动作可以让Node对象有时空的变换。想要一个Sprite从一个position移到另一个并在完成时点用回调方法?没问题!你甚至可以创建 a Sequence of Action 来展示一个Node。你可以改变Node如位置,旋转度,缩放度等属性。如: MoveByRotateScale。所有游戏都会使用到动作。

例子:

img

5秒之后精灵移到一个新的位置:

img

创建动作相当简单:

auto mySprite = Sprite::create("Blue_Front1.png");

// Move a sprite 50 pixels to the right, and 10 pixels to the top over 2 seconds.
auto moveBy = MoveBy::create(2, Vec2(50,10));
mySprite->runAction(moveBy);

// Move a sprite to a specific location over 2 seconds.
auto moveTo = MoveTo::create(2, Vec2(50,10));
mySprite->runAction(moveTo);

Sequences and Spawns


当我们放好精灵在屏幕上我们就创建好游戏了吗?不全对。加入一些动作?这就对了。Cocos2d-x提供几种不同方式处理他们。

像名字一样,一个Sequence 是一系列有序的动作。如果需要倒叙?没问题。Cocos2d-x让你不用额外工作就能完成。

看看下面逐步移动一个精灵的流程。

img

实现它很简单:

auto mySprite = Node::create()

// move to point 50,10 over 2 seconds
auto moveTo1 = MoveTo::create(2, Vec2(50,10));

// move from current position by 100,10 over 2 seconds
auto moveBy1 = MoveBy::create(2, Vec2(100,10));

// move to point 150,10 over 2 seconds
auto moveTo2 = MoveTo::create(2, Vec2(150,10));

// create a delay
auto delay = DelayTime::create(1);

mySprite->runAction(Sequence::create(moveTo1, delay, moveBy1, delay->clone(), moveTo2,nullptr));

上面的例子是顺序执行一个队列,但是如果我要同时执行所有动作呢?Cocos2d-x也提供了这个功能叫做SpawnSpawn.会同时执行所有指定的动作。也许有一些动作会特别长,那么他们就不会同一时间完成动作。

auto myNode = Node::create()

auto moveTo1 = MoveTo::create(2, Vec2(50,10));
auto moveBy1 = MoveBy::create(2, Vec2(100,10));
auto moveTo2 = MoveTo::create(2, Vec2(150,10));

myNode->runAction(Spawn::create(moveTo1, moveBy1, moveTo2,nullptr));

Parent Child Relationship


Cocos2d-x会使用Parent and Child 关系。这意味着父结点的属性和变化会应用到子结点。想象有一个精灵有一些子对象:

img

当父对象的旋转值修改也会使得子对象旋转:

img

auto myNode = Node::create();

// rotating by setting
myNode->setRotation(50);

同理,缩放也一样:

img

auto myNode = Node::create();

// scaling by setting
myNode->setScale(2.0);// scales uniformly by 2.0