Cocos2D-X2.2.3学习笔记19(地图系统)

坚持一下，还有最后三个重要的环节，Cocos2dx的基础教程就宣告结束了，一个地图系统，一个Box2D，还有一个chipmunk。

还有音频系统和cocosbuild工具。其中地图系统和两个物理引擎是比较重要的，得学好。

进入正题，首先我们创建一个项目，把该删的都删了。

然后呢，Copy我们的图片资源到Resources

这里，我们先来介绍一个地图编辑工具，Tiled

下载地址:http://www.mapeditor.org/download.html

各种版本的，我的电脑是win7的所有下载了windows版。安装的时候安装成汉语的。因为英语不行啊   硬伤。。。。。

1.使用Tiled

ok，打开软件，选择文件-->新建文件

如下图

这里，地图的方向有正常和斜45度的，区别在于什么，大家百度一下

这里我们就来建 30X20块的地图，块大小都是32

Ctrl++可以放大   Ctrl+-缩小

如果看不到网格，可以下视图-->显示网格

图层有了，接着，我们来新建图块

地图，新图块，浏览。找到我们的资源目录，选择我们的图片  tmw_desert_spacing.png

图块名称，自动帮我们取好了，下面的配置，都是中文的，应该看得懂，我这里配置如下

接着我们刷背景。

背景好了，接下来我新键一个障碍物的图层，

这时候地图已经做好了，ok

我们文件，保存，到Resouces目录下，这里取个名字  TestMap吧

2.加载tmx

#ifndef __HELLOWORLD_SCENE_H__#define __HELLOWORLD_SCENE_H__#include "cocos2d.h"USING_NS_CC;class  HelloWorld : public cocos2d::CCLayer{public:HelloWorld();    virtual bool init();      static cocos2d::CCScene* scene();        void menuCloseCallback(CCObject* pSender);        CREATE_FUNC(HelloWorld);private:CC_SYNTHESIZE_RETAIN(CCTMXTiledMap*,m_testmap,TestMap);};#endif 

#include "HelloWorldScene.h"HelloWorld::HelloWorld():m_testmap(NULL){}CCScene* HelloWorld::scene(){    CCScene *scene = CCScene::create();        HelloWorld *layer = HelloWorld::create();    scene->addChild(layer);    return scene;}bool HelloWorld::init(){    if ( !CCLayer::init() )    {        return false;    }        CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();this->setTestMap( CCTMXTiledMap::create("TestMap.tmx"));m_testmap->setPosition(CCPointZero);this->addChild(m_testmap);    return true;}void HelloWorld::menuCloseCallback(CCObject* pSender){}

代码很简单，注意头文件，我们用了getset宏

加了构造函数用来初始化，这是个很好的习惯哦

效果如下图

这里，我们发现的是，地图并没有因我们的屏幕小而缩小，只显示了左下角一点点

至于怎么让地图动起来，我们稍后再介绍，

现在我们需要在左下角添加一个主角，

然后添加上下左右四个按钮，

最后我们在让主角在地图上跑动起来

#ifndef __HELLOWORLD_SCENE_H__#define __HELLOWORLD_SCENE_H__#include "cocos2d.h"USING_NS_CC;class  HelloWorld : public cocos2d::CCLayer{public:HelloWorld();    virtual bool init();      static cocos2d::CCScene* scene();        void menuCloseCallback(CCObject* pSender);        CREATE_FUNC(HelloWorld);private:CC_SYNTHESIZE_RETAIN(CCTMXTiledMap*,m_testmap,TestMap);CC_SYNTHESIZE_RETAIN(CCSprite*,m_player,Player);};#endif 

#include "HelloWorldScene.h"#define TMXBLOCKSIZE 32//宏，图块的大小HelloWorld::HelloWorld():m_testmap(NULL),m_player(NULL){}CCScene* HelloWorld::scene(){    CCScene *scene = CCScene::create();        HelloWorld *layer = HelloWorld::create();    scene->addChild(layer);    return scene;}bool HelloWorld::init(){    if ( !CCLayer::init() )    {        return false;    }        CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();this->setTestMap( CCTMXTiledMap::create("TestMap.tmx"));m_testmap->setPosition(CCPointZero);this->addChild(m_testmap);//添加主角this->setPlayer(CCSprite::create("Player.png"));m_player->setPosition(ccp(TMXBLOCKSIZE/2,TMXBLOCKSIZE/2));//注意:这里是把主角加到地图上m_testmap->addChild(m_player);    return true;}void HelloWorld::menuCloseCallback(CCObject* pSender){}

效果图

呃，我们在增加四个按钮菜单

#include "HelloWorldScene.h"#define TMXBLOCKSIZE 32//宏，图块的大小enum MENUENUM{TOPMENUITEM=100,BUTTOMMENUITEM,LEFTMENUITEM,RIGHTMENUITEM};HelloWorld::HelloWorld():m_testmap(NULL),m_player(NULL){}CCScene* HelloWorld::scene(){    CCScene *scene = CCScene::create();        HelloWorld *layer = HelloWorld::create();    scene->addChild(layer);    return scene;}bool HelloWorld::init(){    if ( !CCLayer::init() )    {        return false;    }        CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();this->setTestMap( CCTMXTiledMap::create("TestMap.tmx"));m_testmap->setPosition(CCPointZero);this->addChild(m_testmap);//添加主角this->setPlayer(CCSprite::create("Player.png"));m_player->setPosition(ccp(TMXBLOCKSIZE/2,TMXBLOCKSIZE/2));//注意:这里是把主角加到地图上m_testmap->addChild(m_player);//增加菜单CCMenuItemImage*  topItem=CCMenuItemImage::create("top_press.png","top.png",this,menu_selector(HelloWorld::menuCallback));CCMenuItemImage*  buttomItem=CCMenuItemImage::create("buttom_press.png","buttom.png",this,menu_selector(HelloWorld::menuCallback));CCMenuItemImage*  leftItem=CCMenuItemImage::create("left_press.png","left.png",this,menu_selector(HelloWorld::menuCallback));CCMenuItemImage*  rightItem=CCMenuItemImage::create("right_press.png","right.png",this,menu_selector(HelloWorld::menuCallback));CCMenu* menu=CCMenu::create(topItem,buttomItem,leftItem,rightItem,NULL);menu->setPosition(CCPointZero);this->addChild(menu);topItem->setPosition(ccp(visibleSize.width/2,visibleSize.height-50));buttomItem->setPosition(ccp(visibleSize.width/2,50));leftItem->setPosition(ccp(50,visibleSize.height/2));rightItem->setPosition(ccp(visibleSize.width-50,visibleSize.height/2));topItem->setTag(TOPMENUITEM);buttomItem->setTag(BUTTOMMENUITEM);leftItem->setTag(LEFTMENUITEM);rightItem->setTag(RIGHTMENUITEM);    return true;}void HelloWorld::menuCallback(CCObject* pSender){}

这里用到了枚举来设置几个菜单的tag

现在，我们需要点击相应的按钮得让我们的主角动起来才行

void HelloWorld::menuCallback(CCObject* pSender){CCMenuItemImage* item=(CCMenuItemImage*)pSender;switch (item->getTag()){case TOPMENUITEM:m_player->setPosition(ccp(m_player->getPositionX(),m_player->getPositionY()+TMXBLOCKSIZE));break;case BUTTOMMENUITEM:m_player->setPosition(ccp(m_player->getPositionX(),m_player->getPositionY()-TMXBLOCKSIZE));break;case LEFTMENUITEM:m_player->setPosition(ccp(m_player->getPositionX()-TMXBLOCKSIZE,m_player->getPositionY()));break;case RIGHTMENUITEM:m_player->setPosition(ccp(m_player->getPositionX()+TMXBLOCKSIZE,m_player->getPositionY()));break;default:break;}}

最后的效果图

这里大家看，有BUG的，遇到障碍物能穿墙   这要是玩CF就爽爆了

还有，这只是主角在动，地图并没有动

而且，到了最边缘任然可以移动。

所以，这部分的问题，我们下次再来解决。

块下班咯！

附源码