Basic Concepts in the Cocos2d-x

Basic Concepts in the Cocos2d-x

Respect for the original: http://cn.cocos2d-x.org/tutorial/show?id=1926

You may know a little bit about cocos2d-x before you read this section, but you may want to know more about how to use cocos2d-x to make your own dream game.

No problem, let's start from now.

Cocos2d-x is a cross-platform game engine. What is a game engine? Don't be intimidated by this problem now!

A game engine is a piece of software that can provide the most common features of a game. You might have heard it called an API or a framework before. But in this book we will use the more formal terminology of the game engine.

The game engine includes a number of components that combine them to facilitate game performance improvements and shorten the development cycle.

These components are usually included in the game engine, such as: renderer, 2d/3d graphics, collision detection, physics engine, sound, controller, animation, etc.

The game engine usually supports multiple platforms, so it's easier to port the game and move the game to other platforms with a small amount of work.

Since Cocos2d-x is a game engine, it provides a simplified API for developing cross-platform mobile and desktop games.

With built-in packaged and easy-to-use APIs, you can focus on developing games without having to worry about the implementation of internal technologies.

Cocos2d-x will provide more free space for game developers as much as possible.

Cocos2d-x provides,,,, Scene Transition , and Sprite Menu Sprite3D Audio so many objects. Everything you need to create the game is here.

Main components

It seems complicated, but it's easy to start using Cocos2d-x.

Before we go any further, we need to understand some of the concepts in cocos2d-x.

The core classes of Cocos2d-x are,,, Scene Node Sprite Menu and Action objects. Look closely at the games you've played and you'll find all these parts!

Let's take a look at an example. This looks like a very popular game that you may have played:

Can you find these parts? Let's take a look at the analysis:

Maybe you have a rough picture of your game? Compare the above examples to see which parts of your game are included.

Director class

Cocos2d-x uses Director the concept of (director). Yes, it's like making a movie!

Directorclass controls the overall gameplay and informs the game what needs to be done next.

Think of yourself as the producer of the film, and you will certainly inform Director the director how to do it!

DirectorA general function of the Director is to control the Scene switching and switching effects.

The director ( Director ) is a shared singleton object that you can call from anywhere in the code.

Here is a flowchart of a typical game. The director ( Director ) uses this flowchart to transfer the game and determine the standard of the game:

You are the director of the game. You decide what is going to happen in the game, when it happens, and how it happens.

You're all responsible for this!

Scene

In the game you may need a main menu, several levels and an end scene.

How do you separate the content? Yes, that's what it takes Scene .

Think back to the movie you like, and you'll find that it shows a number of scenarios, or individual story plots.

If we follow this approach to the game, no matter how simple the game is, we should think of at least a few scenes.

Look at this picture:

This is a stand-alone main interface scenario Scene . This scenario is the combination of components to form a final scenario.

The scene is Renderer drawn by. Renderercan be used to draw sprites or other objects into the scene. In order to understand this better, we need to know some knowledge about _scene Graph_.

Scene map

_scene Graph_ is a data structure used to store scene graphics.

_scene Graph_ are composed of tree nodes. (It's called Screne graph, but it's actually stored in a tree-shaped structure).

It looks like it's complicated. I'm sure you'll ask why we need to understand these underlying technologies, and is this not a violation of Cocos2d-x's principles? In fact, it is necessary to understand how the scene is drawn. When you add a node, Sprite, or animation to a game, you're sure you want the end result to be what you expect. But what if the expected effect is not achieved?

What if you add a Sprite object in the background layer but what do you want them to do in the front? Go back to the previous step by putting the scene on a background and then running, I'm sure you'll soon find yourself making the mistake.

Since _scene Graph_ is a tree structure, you can traverse it. Cocos2d-x uses the _in-order walk_ algorithm. _in-order the flow of the walk algorithm, starting from the root node and then to the tree on the right. Since the node on the right is last drawn, it is first displayed in the scene.

_scene Graph_ is easy to understand, let's break down the scene shown in the diagram:

The above scene is represented as a tree, which can be simplified as follows:

Another area to note is that elements with negative _z-order_z axes appear on the left side of the tree, while the _z-order_z axis is positive and appears on the right side of the tree.

You need to be aware of this when adding nodes to your scene. Of course you can add node elements anywhere they are automatically sorted by the size of the button's z-axis.

On the basis of this concept, we can think Scene of it as an Node object.

First of all, don't look at a scene, to see how _scene graph_ Use the _z axis _ to Layout Scene :

The left scene in the diagram is made up of many node objects, but each object is on a different _z-order_z axis.

In Cocos2d-x, you can addChild() create _scene graph_ scenes from the methods in the API.

1

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

Elves

All the games have _sprites_ elves, you may know or don't know what they are. A sprite is an object that moves in a scene in a game.

You can manipulate them. Sprites are probably the most important characters in the game. I know what you're thinking-is every graphic object a sprite? Sprite

Of course not! Why? When you manipulate an elf, it is an elf. If you do not manipulate it, it is a node Node .

Look at a piece, let's explain what a genie is, what a node is:

Elves are the key to every game. To write a game, you may need to use some images with common features. This is an Sprite elf.

_sprites_ Wizard is easy to create, it has a lot of properties, such as: coordinates position , flip rotation , zoom scale , transparency opacity , color and color so on.

1	// This is how to create an 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); // sets scale X and Y uniformly mySprite->setAchorVec2(0, 0);

Let's explain what each property does, and consider the following from the sample code in this chapter:

The mySprite->setPosition(Vec2(500, 0)); coordinates are reset by code,

Take a look at what happened. Spritecoordinates are moved from its original coordinates to the new coordinates we set.

The mySprite->setRotation(40); Sprite's flip is set by the code,

Take a look at what happened. The Sprite genie is flipped over the angle we set.

The mySprite->setScale(2.0); sprite is scaled by the code,

In the same way, we can see that the size of the sprite has been changed.

Finally, all the node Node objects (note that the Sprite Sprite class is a Node subclass of the node Class) have a value called the anchor point. We haven't mentioned this concept before, and it's just the right time. You can think of the anchor point as the coordinate point that the sprite uses when setting the coordinate point of the sprite.

By using code to mySprite->setAchorVec2(0, 0); set the game's Sprite anchor to (0,0) coordinates, all sprites that use the code for setPosition() coordinate settings are aligned in their own lower-left corner. Let's try it out:

Watch for the red dots in each image. This red dot is the location of the ELF's anchor point!

You will find that the anchor point is very useful for the node. You can even simulate dynamic effects by adjusting the sprite's anchor points.

Now we're ready to use the genie. So how do you get these sprites to play automatically at a certain time interval? Keep looking down.

Action

Creating Scene scenes, adding Sprite Sprite objects to the screen is just a part of it.

The game is called the game is we need to let the elves move up! Actionpart of the action game. The _actions_ action class allows Node the node object to move by time.

Want to Sprite move an elf from one coordinate point to another and invoke the callback function at the end? No problem!

You can create an Actions action sequence Sequence and play it sequentially. You can zoom by changing the Node node genus, coordinates, angles, and so on. For example, these actions: MoveBy , Rotate , Scale . All games use action actions.

Look at the sample code for this chapter, and here is a demonstration of _actions_:

After 5 seconds, the genie moves to the new coordinate point:

_actions_ is easy to create using:

1

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

Is it the final result that we want the sprite to move in the screen? Of course not. Is it possible to run multiple actions? Yes, no problem, cocos2d-x in several ways to support this kind of operation.

Just like its name, a sequence Sequence is the order in which multiple action buttons are arranged. Need to play the sequence action in the opposite direction? No problem, Cocos2d-x also supports this operation.

Take a look at the following example, Sequence moving a sprite through a sequence Sprite :

This Sequence is easy to create:

1

auto mySprite = Node::create()// move to point 50,10 over 2 seconds auto moveTo1 = MoveTo::create(2, Vec2(50,10)); // move from current postion 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));

In this example, in order to play each of the actions in a sequence, how do you synchronize these actions together? Cocos2d-x also supports this operation, which it is called to do Spawn . Spawnall the specified actions are played at the same time. Some may be slightly longer than others, so the playback of this behavior will not be done at the same time.

1	auto myNode = Node::create()auto moveTo1 = MoveTo::create(2, Vec2(50,10)); auto moveBy1 = MoveTo::create(2, Vec2(100,10)); auto moveTo2 = MoveTo::create(2, Vec2(150,10)); myNode->runAction(Spawn::create(moveTo1, moveBy1, moveTo2, nullptr));

Why should I use Spawn it? What's the reason? Of course! When the protagonist gains the ability to play multiple actions. When the final stage of the boss battle needs to play multiple actions at the same time to end.

Inheritance relationships between parent and child classes

Cocos2d-x uses Parent and Child inheritance. This means that the attributes in the parent class also apply to their subclasses. Consider an Sprite object and its sub-class objects Sprite :

When you change the angle of the sprite in the parent class, the angle of the subclass changes as well:

1	auto myNode = Node::create();// rotating by settingmyNode->setRotation(50);

Not only the angle, if you scale the parent class, the sprite of the subclass will also scale:

1	auto myNode = Node::create();// scaling by setting myNode->setScale(2.0); // scales uniformly by 2.0

Summarize

We have introduced some of the concepts in cocos2d-x. Relax, don't worry too much. Step by step according to his own ideas. Cocos2d-x and programming is not a skill that can be learned by staying up late. These all need to be practiced and thought out.

Basic Concepts in the Cocos2d-x