Cocos2d-x v3.6 Making Archery Game (i)

Recently played a call big Archer Bobby's archery game, feel good play, to this also produced a strong copy complex. So from today onwards, we will start a new chapter, with you to share this game based on cocos2d-x-3.6 engine some of the production experience, I hope to be helpful.

Is the original game, interested in children's shoes can be found on the Internet to play.

PS: I have written a number of tutorials before, now I still feel that writing a beginner's tutorial to be handy (hehe, after all, the ability to limit), but the initial write more times, but also a little bit bored. So, this tutorial we will increase the progress of some of the basic concepts involved in the game we will not make too many statements (of course, the necessary steps will be listed). So little white comrades notice, if the root is not on the progress of the first look at the basic tutorial Oh, here recommended I have previously written the SLG game as an introductory tutorial.

So, let's go into the game development now.

Pre-notice

First of all, the engine version used for this game is cocos2d-x v3.6 , and the development tool is Xcode 5.1.

The development environment is not configured for children's shoes please go here first to configure the environment.

Cocos2d-x 3.6 The way to create a project is no different from several versions before it, open the terminal (open cmd under Windows), go to the Engine folder directory, run setup.py, and then enter the following command line to create a new project.

1	cocos newarrowGame -p com.cocos2dx.rs -l cpp -d /Users/cocos2d-x/workspace/cocos2dx/projects

New:new after the project name
-P: Is the package name after-p
-L: After-L is language (CPP refers to C + +)
-D: After-D is the project build path

Project Initial Configuration

There are already some default files and classes in the new project, such as the Helloworldscene class here. It is useless to us, so you can delete it and then create a new one that you need to play the scene class.

When doing this, we need to modify the corresponding method in the AppDelegate.cpp file to start the new game scene. If we now create a new game scene class and name it Gamescene, then in the AppDelegate.cpp file Applicationdidfinishlaunching () method, we need to start it first, instead of starting the original Helloworldscene. So modify the Runwithscene scenario as shown in the following code:

12	auto scene = GameScene::createScene();director->runWithScene(scene);

In addition, the game resources used in the games are made according to the size of 864 * 480, so in order for this resource to be applied to all kinds of resolution size mobile devices on the market, the next thing we need to do is to do resolution matching.

Resolution adaptation is also done in the Applicationdidfinishlaunching method, just add the following two lines of code:

12	glview->setDesignResolutionSize(480.0f, 320.0f, ResolutionPolicy::FIXED_HEIGHT);director->setContentScaleFactor(480.0f / 320.0f);

I will not explain the specific principles here, please refer to my previous article.

Gamescene Scene Analysis

Gamescene scene is the main scene of this game, before starting the game, we first look at the original game of the game scene to see what we need to do?

• First of all, for the game map, here are some neat tiles, boxes, obstacles and other tiles. See this you are not like me, the first reaction is to use the Tiledmap editor to edit. Whether you are, or not, I am, and I have decided to use it. In this way, the position of the player and the enemy in the game can also be identified by Tiledmap object properties.
• Then, the game of the player shot out of the arrow is a parabolic shot out of the general people will feel that this function as long as the arrow to perform Bezier action can be achieved. But do not forget that the arrow in the curve when the movement of its angle is also constantly changing, so we can not simply think it is very simple, this need to find a way to rewrite their own needs of Bessel action!
• When the arrow is shot out, it will have a certain rebound effect when it touches the bricks and chests, so it is obvious that we need to use the physics engine to realize the function of this module.

Let's take a look at Gamescene's statement here.

Gamescene's statement

In fact, Gamescene and Helloworldscene almost, its initial definition is as follows:

1234567891011121314151617181920

#include "cocos2d.h"USING_NS_CC;class GameScene : public Layer{public:    GameScene();    static cocos2d::Scene* createScene();    virtual bool init();    void addGameBg();    CREATE_FUNC(GameScene);private:    Size winSize;                  // 窗口尺寸    TMXTiledMap *map;              // 地图背景对象    TMXObjectGroup * objectGroup;  // 对象组对象    float objectPosOffX;           // 对象组X方向上的偏移值};

In the ADDGAMEBG method we will load the game background, here we divide the game background into the following two parts, part of the background image, the other part is the map background. This combination is beneficial to the diversity of the level design.

Map background

The map background is made with the Tiledmap editor, which is a combination of 27*15 of the same size (32*32) (there is no tile in the transparent area). As you can see, we have set the approximate layout of the current level topography on the map. In addition, we have not previously agreed to use Tiledmap object properties to identify the position of the player and the enemy, the following is an example of the object added in Tiledmap.

Note: The object is designed to make development more convenient, it does not correspond to a map image, but the location/shape/size of a transparent object, so that developers can get the location of an object through the relevant API, so that the corresponding location to draw the real see Node object. When we make the Tiledmap map, we can think of the same name as the object, so that we can get information about its location by the name of the object. Objects are often used to add game elements other than backgrounds (such as props, obstructions, etc.).

Creating a map in the tutorial can be broadly divided into the following two steps

1. Create a normal layer of "logiclayer", where we place the visible tile on top of it. such as bricks, chests, meadows, etc. in the map. Here we can create various types of map styles according to our own ideas.
2. Create an object-level "object" that creates individual objects at the object layer and adds a name attribute to each object.

For beginners to learn more about the detailed map making process, refer to the Quick-cocos2d-x Beginner's game tutorial (vii) article.

Loading program

After introducing the map background, let's take a look at the implementation of ADDGAMEBG as follows:

1234567891011121314151617

void GameScene::addGameBg(){    // 添加图片背景，把它放在屏幕正中间     Sprite* spGameBg = Sprite::create("bg1.jpg");    spGameBg->setPosition(Vec2(winSize.width/2, winSize.height/2));    this->addChild(spGameBg, -1);    // 添加地图背景，把它放在屏幕正中间        map = TMXTiledMap::create("map1.tmx");    map->setAnchorPoint(Vec2(0.5f, 0.5f));    map->setPosition(Vec2(winSize.width / 2, winSize.height/2));    this->addChild(map, -1);    // 获取 objectGroup 对象（也就是地图中的对象层）    objectGroup = map->getObjectGroup("object");    // 计算对象组在 X 方向上的偏移值    objectPosOffX = -(map->getContentSize().width - winSize.width) / 2;}

The. TMX map file that is produced by Tiledmap is loaded into the game using the Tmxtiledmap class provided by COCOS2DX, which can create tile maps directly from the. tmx file name.
The Tmxtiledmap class has many ways to manipulate our map files, such as the Getobjectgroup method shown in the code above, which can get the object layer of the corresponding name.

What you need to specifically note here is the OBJECTPOSOFFX attribute. Since the position coordinates of the objects in the object group start at the point of the screen (0, 0), when we place the map background in the middle of the screen, the map may be outside the screen or fill the window, and the coordinates of the object may appear as shown in the offset.

So, we need to calculate the offset value of the object so that we can fix its position when we get the object later.

OK, now you can see the game background by calling ADDGAMEBG () in the Init method.

PS: It is not felt that the background is cut, yes, but do not think that the error, because we want this effect, which is the resolution of the selection of Fixed_height mode Sequela. This is why we want to calculate the offset value of the object group in the X direction.

Cocos2d-x v3.6 Making Archery Game (i)