[Wood Cocos2d-x] Game instance-"running" production tutorial (the first) -- load map

Cocos2d-x game instance-"running" production tutorial

 

What do you mean? Flowers? No, it's your heart ~

Reprinted please note, original address: http://blog.csdn.net/musicvs/article/details/8186323

 

Body:

 

 

First of all, after reading the following four articles, I want to train my hands and develop a series of tutorials. If you don't like my tutorials, you can take a look at the following four Tutorials, benefits:

Http://blog.csdn.net/fengyun1989/article/details/7526333

Http://blog.csdn.net/fengyun1989/article/details/7529606

Http://blog.csdn.net/fengyun1989/article/details/7534784

Http://blog.csdn.net/fengyun1989/article/details/7537602

 

 

The above four articles are a good tutorial. We strongly recommend that you take a look at them.

My tutorials in this series will be a little tedious, because I want to write a little more maintainability.

Come on, start ~!

 

This tutorial uses Cocos2d-x 2.0.4.

 

Source code + resources of the first version of "run and run:

Cloud disk download: http://yunpan.cn/lk/sV2K9ZKSnIVMC? SID = 1, 301

Csdn download (later): http://download.csdn.net/detail/musicvs/4769412

 

Cocos2d-x game instance-"Run" production tutorial (the first) -- load map

 

What I want to do in this article is to use tiledmap to create a long map. For example, I will not consider the memory occupation. I still don't know how to optimize the loading of a large map.

1. Create a project

I want to name it runrunrun. Yes, we are going to be a running game. We 've been a little tired recently. Just have a try ~

2. slightly adjust some parameters. I set the screen size to 800*500:

I won't tell you where to change it. I will find the following two sentences:

CCEGLView* eglView = CCEGLView::sharedOpenGLView();eglView->setFrameSize(800, 500);

 

Setframesize (800,500); OK ~

3. Create Several folders to classify our code:

Haha, yes. Next I will build three important modules: scenario, entity, and controller.

 

4. No matter what else, let's first create a scenario-a running scenario.

For example, you can create a new toll1_scene. cpp file and the header file toll1_scene. h.

// TollgateScene.h#ifndef __TOLLGATE_SCENE_H__#define __TOLLGATE_SCENE_H__#include "cocos2d.h"using namespace cocos2d;class TollgateScene : public CCLayer {public:    CREATE_FUNC(TollgateScene);    virtual bool init();    static CCScene* scene();};#endif

 

// TollgateScene.cpp#include "TollgateScene.h"CCScene* TollgateScene::scene(){    CCScene* mScene = CCScene::create();    TollgateScene* mLayer = TollgateScene::create();    mScene->addChild(mLayer);    return mScene;}bool TollgateScene::init(){    CCTMXTiledMap* map = CCTMXTiledMap::create("map/level01.tmx");    this->addChild(map);    return true;}

 

 

The code is very simple. I will not explain it too much. I will mainly look at the init function.

Cctmxtiledmap is provided by the cocos2d-x for us to load the tmx map file, where does the tmx map file come from? I want to introduce a very powerful software:
Tiled map editor. The official website is:

Http://www.mapeditor.org/

You can download it and use it to create our map, that is, the level01.tmx file in the code above.

 

5. Use tiled map editor to create a map file

Open the software and create a new file. We set the map to a little longer, 120 in width, 20 in height, and 32 in width and height.

 

We need some materials (Please download the game demo source code. The resource folder contains materials ):

 

 

Drag the ground.png image to the image block area of the software:

 

The block width and height are 32 pixels. Click OK ~

 

Now we can start to create our map. Select an element in the graph block and then draw the map in the map area:

 

Below is what I drew (ugly, don't mind ~ Labels ):

 

6. Prepare to run the project

Now, put our level01.tmxto the ground.png file under the Project Resource Directory. I created a map directory: Resources \ map, where all the map resources are stored.

Then, remember how we loaded the map?

bool TollgateScene::init(){    CCTMXTiledMap* map = CCTMXTiledMap::create("map/level01.tmx");    this->addChild(map);    return true;}

 

 

Then, set the default startup scenario to toll1_scene:

 

bool AppDelegate::applicationDidFinishLaunching(){    // initialize director    CCDirector *pDirector = CCDirector::sharedDirector();    pDirector->setOpenGLView(CCEGLView::sharedOpenGLView());    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(1024, 640, kResolutionExactFit);    // turn on display FPS    pDirector->setDisplayStats(true);    // set FPS. the default value is 1.0/60 if you don't call this    pDirector->setAnimationInterval(1.0 / 60);    // create a scene. it's an autorelease object    CCScene *pScene = TollgateScene::scene();    // run    pDirector->runWithScene(pScene);    return true;}

 

 

OK, compile and run. We will see our map... That's strange ~! Ugly ~

 

7. Some friends may report an error

Some people may report an error when running the project. It doesn't matter if the PNG image cannot be found. Open the level01.tmx file in a text editor and find the following data:

<tileset firstgid="1" name="ground" tilewidth="32" tileheight="32">  <image source="ground.png" width="420" height="316"/> </tileset>

 

Check whether the ground.png in our image sourceis an absolute path. If yes, change it to a relative path.

 

 

In the next article, we will join our leading role. This is not very simple, because we need to design better maintenance.

(Release Date: Maybe this evening, No, it must be this evening ~)