01. 什么是Coco2d-x.

Started in 2010, Cocos2d-x is an open source, cross-platform game engine. It is loaded with powerful features that allows developers to createspectacular games with ease.

02. spectacular

蔚为壮观的

02. 为什么选择Coco2d-x.

1. Modern C++ API

2. Cross-platform-desktop and mobile

3. A vast API of functionality including sprites, actions, animations, particles, transitions, timers, event (touch, keyboard, accelerometer, mouse), sound, file IO, persistence, skeletal animations, 3D

03. Coco2d-x 内容

1. Coco2d-x - this is the game engine, itself. It includes the engine and the cocos command-line tool

2. Cocos Creator - is a unified game development tool

3. Cocos Launcher

04. Cocos2d-x基本概念

Cocos2d-x is a cross-platform game engine. A game engine is a piece of software that provides common functionality that all games need.

05. 基础件

Coco2d-x provides Scene, Transition, Sprite, Menu, Sprite3D, Audio objects and much more.

06. Director

Coco2d-x uses the concept of a Director, just like in a movie! The Director controls the flow of operations and tells the necessary recipient what to do.

One common Director task is to control Scene replacements and transitions.

The Director is a shared singleton object that you can call from anywhere in your code.

game flow

07. Scene

A scene graph is a data structure that arranges a graphical scene. A scene graph contains Node objects in a tree structure.

Since the Scene is a tree; you can walk the tree. Coco2d-x uses the in-order walk algorithm.

An in-order walk is the left side of the tree being walked, then the root node then the right side of the tree.

08. Broken down

Another point to think about is elements with a negative z-order are on the left side of the tree, while elements with a positive z-order are on the right side.

Keep this in consideration when ordering your elements!

08. Sprite

Sprites are the objects that you move around the screen.

以下是一些Sprite的属性设置

// This is how to create a sprite
auto mySprite = 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);

09. anchor point 定位点

You can think of anchor point as a way of specify what part of the sprite will be used as a base coordinate when setting the position of it.

mySprite->setAnchorPoint(Vec2(0, 0);

10. Action

Action allow the transofmation of Node objects in time space. Want to move a Sprite from one Point to another and use a callback when complete.

You can even create a sequence of Action items to performed on a Node.

auto mySprite = Sprite::create("Bule_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);

11. 绝对位移

Move a sprite to a specific location over 2 seconds

audo moveTo = MoveTo::create(2, Vec2(50, 10));

12. spawn

大量生产

13. Sequences and Spawns

Just like it sounds, a Sequence is multiple Action objects run in a specified order.

系列动作

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));

大量生产不不理解。

14. 父类属性的变化会对子类产生影响。

15. 增加log，其余的变量类似，也可以使用std::cout。

double dd = 42;

log("double is %f", dd);

16. 总结

We have gone through a lot of  Coco2d-x concepts. Take a deep breath. Don't worry. Just dive in with your ideas and take it one step at a time. Cocos2d-x and programming in general are not skills that are learn overnight. These take practice and understanding. Remember that the forums are also there to help you with questions.

Sprites

17. Sprites

A Sprite is a 2D image that can be animated or transformed by changing its properties, including rotation, position, scale, color, etc.

There are different ways to creates Sprites depending upon what you need to accomplish. You can create a Sprite from an image with various graphic formats including: PNG, JPEG, TIFF, and others.

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

If the image file is 200 * 200 the resulting Sprite is 200 * 200.

18. 使用矩形创建Sprites

Rect has 4 values: origin x, origin y, width and height.

auto mySprite = Sprite::create("mysprite.png", Rect(0, 0, 50, 50));

19. Sprite Sheet　难

使用texture packer

A sprite sheet is a way to combine sprites into a single file.

Using a sprite sheet helps achieve better performance by batching the draw calls.

When using a sprite sheet it is first loaded, in its entirety, into the SpriteFrameCache. SpriteFrameCache is a caching class that retains the SpriteFrame objects added to it, for future quicker access.

The SpriteFrame is loaded once and retained in the SpriteFrameCache.

20. 读取一个Sprite

// load the Sprite Sheet
auto spritecache = SpriteFrameCache::getInstance();
// the .plist file can be generated with any of the tools mentioned below
spritecache->addSpriteFramesWithFile("sprites.plist");
// Our .plist file has names for each of the sprites in it.
// We'll grab the sprite named, "mysprite" from the sprite sheet.
auto mysprite = Sprite::createWithSpriteFrameName("mysprite.png");

21. 另外一种读取方法

auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByName("Blue_Front1.png");
auto newSprite = Sprite::createWithSpriteFrame(newspriteFrame);

22. Anchor point

default anchor point (0.5, 0.5)

Using anchor point effects only properties that can be transformed.

This includes scale, rotation, skew.

23. 颜色

An RGB color is a 3 byte value from 0 - 255. Cocos2d-x also provides pre-defined colors that your can pick from.

Using these will be a bit faster since they are pre-defined.

A few examples: Color3B::White and Color3B::Red.

24. 透明度

This property expects a value from 0 to 255, where 255 means fully opaque and 0 means fully transparent.

25. by and to

A By is relative to the current state of the Note. A To action is absolute, meaning it doesn't take into account the current state of the Node.

26. 基本动作

move

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

rotate

auto rotateTo = RotateTo::create(2.0f, 40.0f);

Scale

Fade In/Out

Tint

Tint a Node that implements the NodeRGB protocol from current the tint to a custom tine.

Animate

With Animate it is possible to do simple flipbook animation with your Sprite objects.

This is simply replacing the display frame at set intervals for the duration of the animation.

Programmer Guide Sample.

Animation

动画效果

Easing

Easing is animating with a specified acceleration to make the animations smooth.

A few things to keep in mind is that regardless of speed, ease actions always start and finish at the same time.

Programmer Guide Sample.

Spawn

Spawn is very similar to Sequence, exception that all actions will run at the same time.

Clone克隆

Reverse

// create a Sprite
auto mySprite = Sprite::create("mysprite.png");
mySprite->setPosition(50, 56);
// create a few Actions
auto moveBy = MoveBy::create(2.0f, Vec2(500,0));
auto scaleBy = ScaleBy::create(2.0f, 2.0f);
auto delay = DelayTime::create(2.0f);
// create a sequence
auto delaySequence = Sequence::create(delay, delay->clone(), delay->clone(), delay->clone(), nullptr);
auto sequence = Sequence::create(moveBy, delay, scaleBy, delaySequence, nullptr);//
// run it
mySprite->runAction(sequence);
// reverse it
mySprite->runAction(sequence->reverse());

// position a sprite to a specific position of x = 100, y = 200
mySprite->setPosition(Vec(100, 200));

晚上回去实践，真是好教材。

Building and Transitioning Scenes

27. A Scene is a container that holds Sprites, Labels, Nodes and other objects that your game needs.

A Scene is responsible for running game logic and rendering the content on a per-frame basis.

The Scene is what is running and users see what is happening in real-time.

auto myScene = Scene::create();

28. Label

Coco2d-x provides a Label object  that can create labels using true type, bitmap or the build-in system font.

Label BMFont

Label TTF

Label SystemFont

auto myLabel = Label::createWithTTF("myFont.ttf", "My Label Text", 16);

// shadow effect is supported by all Label types
myLabel->enableShadow();