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

最新推荐文章于 2020-02-27 23:31:32 发布
最新推荐文章于 2020-02-27 23:31:32 发布
阅读量906 收藏
点赞数
分类专栏： Cocos2d-X2.2.3学习笔记 文章标签： tiledmap小游戏 Tiled添加障碍物 TiledMapEditor的使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hucblog/article/details/37657041
版权

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


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


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


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


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


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


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


1.使用Tiled


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


如下图


TiledMap新建地图


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

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


Tiled块层

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

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


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


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


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

Tiled新图块


接着我们刷背景。


Tiled编辑地图


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

Tiled添加障碍物


这时候地图已经做好了，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宏

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

效果如下图

加载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);
	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)
{

}

效果图

新增npc到地图上


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

#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;
	}
}
最后的效果图

tiledmap小游戏

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

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

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

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

块下班咯！


q269399361
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cocos2dx[3.4](25)——瓦片地图TiledMap
weixin_33936401的博客
02-11 2633
【唠叨】还记得我们小时候玩的小霸王里面的游戏吗？大部分都是基于Tile地图的游戏，如坦克大战、冒险岛、魂斗罗、吞食天地等。而在手游中，基于瓦片地图的游戏也很常见。如：《保卫萝卜》。瓦片地图有专门的地图编辑器：Tiled Map Editor 。先给大家看个酷炫的图吧。此图来自：http://blog.csdn.net/aa4790139/article...
cocos2d-x瓦片地图制作详解
田螺姑娘的博客
03-12 6941
瓦片地图制作详解   瓦片地图的原理是把图片中的元素进行单位化，将大图片拆成一张张小图块，然后通过组合拼接的方式，重新拼出整个地图。其流程为：项目定好游戏中瓦片的大小，然后美术绘制瓦片并制作成瓦片图集，再由策划或美术根据项目需求通过瓦片地图编辑器制作出瓦片地图，最后将生成的地图数据文件和瓦片图集交予程序处理即可。   下面分别是美术制作好的瓦片图集，看上去似乎每个瓦片之间没有任何的关系，然而可以通过瓦片地图编辑器将其编辑为另一张有模有样的游戏地图。 Tiled Map Editor简介   在开发中，我
【cocos2d-x官方文档】瓦片地图 Tiled Map
Colin丶
02-09 3474
【cocos2d-x官方文档】瓦片地图 Tiled Map  分享3 瓦片地图(Tiled Map) 瓦片地图(Tile Map) 不但生成简单，并且可以灵活的用于Cocos2d-x引擎。不论你的游戏是角色扮演游戏, 平台动作游戏或仿打砖块游戏，这些游戏地图可以使用开源的瓦片地图编辑器Tiled Map Editor生成并保存为TMX文件格式，被Cocos
【cocos2d-x 手游研发----地图活起来了】
weixin_34050005的博客
10-29 193
谈到地图不少人都说要做地图编辑器了，但是我暂时绕过这一步，如果不用寻路地图就不能移动？寻路就是会绕过障碍物的算法。 我做了一个简单的地图的思想，就是地图分层3层：背景层、可行区域层、遮罩层，但是地图就不寻路了，通过设置可行区域层来 实现地图障碍物的方法。下面看一个视图，我把地图详细的分层了：   OK，有了这个思路，大家应该也知道我要怎么做了？代码实现上怎么处理呢？ 重点：可行区域层...
CCSimplePathFinding:使用A *寻路算法为简单世界寻找简单路径。 对于cocos2dx v3
05-17
CCSimplePathFinding 使用A *寻路算法为简单世界寻找简单路径。 对于cocos2dx v3 文档： 感谢Ray Wenderlich： 如何使用： 1.创建一个二维矩阵世界： 例子：```c ++ std :: vector>矩阵std :: vector row1 = {1,1,1,1,1}; std :: vector row2 = {1,0,1,0,1}; std :: vector row3 = {1,0,0,0,1}; std :: vector row4 = {1,0,1,0,1}; std :: vector row5 = {1,1,1,1,1}; matrix.push_back（row1）; matrix.push_back（row2）; matrix.push_back（row3）; matrix.push_back（row4）; matrix.
Cocos2D-X2.2.3学习笔记5(UI系统)
05-12
Cocos2D-X2.2.3学习笔记5(UI系统)http://blog.csdn.net/hucblog/article/category/2242181
Cocos2D-X2.2.3学习笔记3(内存管理)
05-07
Cocos2D-X2.2.3学习笔记3(内存管理) http://blog.csdn.net/hucblog/article/category/2242181
Cocos2D-X2.2.3学习笔记6(UI系统)
05-13
Cocos2D-X2.2.3学习笔记6(UI系统)http://blog.csdn.net/hucblog/article/category/2242181
Cocos2D-X2.2.3学习笔记20(地图系统)
07-14
Cocos2D-X2.2.3学习笔记20(地图系统)http://blog.csdn.net/hucblog/article/category/2242181
cocos2d-x 地图的缩放和拖动
12-02
cocos2d-x 地图的缩放 拖动 ，这是个android项目
cocos2dx使用TiledMap创建斜45度地图场景
01-02
博文 cocos2dx使用TiledMap创建斜45度地图场景 资源
Cocos2d-x 地图行走的实现2
08-08
本代码的解释：http://blog.csdn.net/stevenkylelee/article/details/38440663
cocos2dx实现地图迷雾的效果
12-29
使用cocos2dx C++开发实现 感兴趣的可以下载下来看看 相互学习
cocos2dx-3.10 45度地图 tiledmap+A*寻路
iuoon的博客
04-27 6859
转载请注明出处45度地图 寻路主要参考了某位博客文章，链接如下： cocos2dx 45度Staggered格式A*寻路 曼哈顿算法(待优化) 另外也参考了某位作者的正方形A* 寻路，所以这套A* 算法是可以兼正方形寻路也可以45度菱形寻路的。 现贴下代码： 地图类：#ifndef _MAP_LAYER_H_ #define _MAP_LAYER_H_ #include <cocos2d.h
cocos2dx使用TiledMap模拟3D地图场景----斜45度2D地图的靠墙直线移动
Ben_OnceMore
01-24 8137
基于cocos2dx引擎的第三人称射击游戏，角色使用3D模型，地图采用2.5D。  定制地图编辑系统抛开不谈，这里最大可能的挖掘现有工具TiledMap的潜力，完成超2.5D地图的实现。  使用2D地图高度模拟3D场景，主要有两个要点需要解决：       1.地图和角色的层级问题，类似3D场景的深度。 在某些障碍物附近，角色可以被障碍物遮挡，也可以遮挡住障碍物。       2.
Cocos2dx 瓦片地图学习笔记
qq_39457234的博客
02-27 391
1、演示使用Tiled地图示例： Size visibleSize = Director::getInstance()->getVisibleSize(); Vec2 origin = Director::getInstance()->getVisibleOrigin(); // 关闭菜单 auto closeItem = MenuItemImage::cr...
cocos2dx学习之路-------如何实现map地图适配（仅供参考）
u010097616的专栏
12-18 1270
CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName("pic.png"); CCSprite* p1 = CCSprite::createWithSpriteFrame(frame); p1->setPosition(100,100); p1->setAnchorPoin
cocos2d-x 4.0 学习之路
最新发布
06-28
1. 学习基础知识：了解cocos2d-x的基本概念、架构和工作原理，掌握cocos2d-x的编程语言和开发环境。 2. 学习API：熟悉cocos2d-x的API，包括场景管理、精灵、动画、音频、物理引擎等。 3. 学习示例代码：通过阅读和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值