Cocos2d-x之瓦片地图 Tiled

Cocos2d-x之瓦片地图 Tiled

首先使用 瓦片地图编辑器(Tiled) 制作一个瓦片地图,并将其放入工程的Resources目录下

功能实现:

将地图显示在窗体中

将精灵添加到地图定义的对象层中的一个对象上

移动精灵,使其可以和碰撞图层上的精灵发生碰撞

碰撞后碰撞图层上的精灵消失,label字体改变

代码部分:

HelloWorldScene.h

 1 #ifndef __HELLOWORLD_SCENE_H__
 2 #define __HELLOWORLD_SCENE_H__
 3
 4 #include "cocos2d.h"
 5
 6 class HelloWorld : public cocos2d::Layer
 7 {
 8 public:
 9     // there‘s no ‘id‘ in cpp, so we recommend returning the class instance pointer
10     static cocos2d::Scene* createScene();
11
12     // Here‘s a difference. Method ‘init‘ in cocos2d-x returns bool, instead of returning ‘id‘ in cocos2d-iphone
13     virtual bool init();
14
15     // a selector callback
16     void menuCloseCallback(cocos2d::Ref* pSender);
17
18     // implement the "static create()" method manually
19     CREATE_FUNC(HelloWorld);
20
21     virtual bool onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *event);
22
23     // 坐标转换,opgl 坐标转换为 Tiled 地图坐标(每块小地图的坐标)
24     cocos2d::Vec2 tileCoordForPosition(cocos2d::Vec2 position);
25
26     void judgeCollide();    // 判断碰撞
27
28 private:
29     cocos2d::Size visibleSize;
30     cocos2d::Sprite *sprite;
31     cocos2d::TMXTiledMap *map;
32     cocos2d::LabelTTF *label;
33 };
34
35 #endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

  1 #include "HelloWorldScene.h"
  2
  3 USING_NS_CC;
  4
  5 Scene* HelloWorld::createScene()
  6 {
  7     // ‘scene‘ is an autorelease object
  8     auto scene = Scene::create();
  9
 10     // ‘layer‘ is an autorelease object
 11     auto layer = HelloWorld::create();
 12
 13     // add layer as a child to scene
 14     scene->addChild(layer);
 15
 16     // return the scene
 17     return scene;
 18 }
 19
 20 // on "init" you need to initialize your instance
 21 bool HelloWorld::init()
 22 {
 23     //////////////////////////////
 24     // 1. super init first
 25     if ( !Layer::init() )
 26     {
 27         return false;
 28     }
 29
 30     visibleSize = Director::getInstance()->getVisibleSize();
 31     Vec2 origin = Director::getInstance()->getVisibleOrigin();
 32
 33
 34
 35     /////////////////////////////
 36     // 2. add a menu item with "X" image, which is clicked to quit the program
 37     //    you may modify it.
 38
 39     // add a "close" icon to exit the progress. it‘s an autorelease object
 40     auto closeItem = MenuItemImage::create(
 41                                            "CloseNormal.png",
 42                                            "CloseSelected.png",
 43                                            CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
 44
 45     closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
 46                                 origin.y + closeItem->getContentSize().height/2));
 47
 48     // create menu, it‘s an autorelease object
 49     auto menu = Menu::create(closeItem, NULL);
 50     menu->setPosition(Vec2::ZERO);
 51     this->addChild(menu, 1);
 52
 53     /////////////////////////////
 54     // 3. add your codes below...
 55
 56     // add a label shows "Hello World"
 57     // create and initialize a label
 58
 59     label = LabelTTF::create("Hello World", "Arial", 24);
 60
 61     // position the label on the center of the screen
 62     label->setPosition(Vec2(origin.x + visibleSize.width/2,
 63                             origin.y + visibleSize.height - label->getContentSize().height));
 64
 65     // add the label as a child to this layer
 66     this->addChild(label, 1);
 67
 68
 69
 70     ///////////////     瓦片地图 Tiled     ///////////////
 71
 72
 73     map = TMXTiledMap::create("map.tmx");
 74     addChild(map);    // 默认添加的位置是左下角
 75
 76     // 获取 objLayer 对象层
 77     TMXObjectGroup *objGroup = map->objectGroupNamed("objLayer");
 78     // 获取 hero 对象
 79     auto vm = objGroup->objectNamed("hero");
 80
 81     // 获取 hero 对象的 x,y 坐标
 82     float x = vm.at("x").asFloat();
 83     float y = vm.at("y").asFloat();
 84
 85     //// 获取 hero 的 id 属性值
 86     //auto id = vm.at("id").asInt();
 87     //log("  sprite id is   %d  ", id);
 88
 89     // 获取 hero 的名字
 90     String name = vm.at("name").asString();
 91     log(" name %s ", name);
 92
 93     // 在 hero 的位置处添加精灵
 94     sprite = Sprite::create("button.png");
 95     sprite->setPosition(Vec2(x, y));
 96     // 因为地图的锚点是左下角,所以设置精灵的锚点也为左下角,这样位置才能对应上
 97     sprite->setAnchorPoint(Vec2::ZERO);
 98     addChild(sprite);
 99
100     // 设置可以获取触摸
101     setTouchEnabled(true);
102     setTouchMode(Touch::DispatchMode::ONE_BY_ONE);
103
104     return true;
105 }
106
107 bool HelloWorld::onTouchBegan(Touch *touch, Event *event){
108
109     Vec2 pos = touch->getLocation();
110     ActionInstant *func = CallFunc::create(this, callfunc_selector(HelloWorld::judgeCollide));
111     sprite->runAction(Sequence::create(MoveTo::create(1, pos), func, nullptr));
112     return true;
113 }
114
115
116 Vec2 HelloWorld::tileCoordForPosition(Vec2 position){
117
118     // 用 x 坐标(opgl中的)除以 每个小地图的宽度,就可以得出 这个点 的 x 轴坐标(瓦片地图中的)
119     int x = position.x / map->getTileSize().width;
120     // 使用 瓦片地图的高度 * 瓦片地图每个的高度 - 点的 y 坐标) / 每个瓦片地图的高
121     int y = (map->getMapSize().height * map->getTileSize().height - position.y) / map->getTileSize().height;
122
123     return Vec2(x, y);
124 }
125
126 void HelloWorld::judgeCollide(){
127
128     TMXLayer *collisionLayer = map->layerNamed("collisionLayer");    // 获取瓦片地图的碰撞层
129     Vec2 tiledPos = tileCoordForPosition(sprite->getPosition());    // 将精灵坐标转换为瓦片地图的坐标
130
131     if (collisionLayer->tileGIDAt(tiledPos)){
132         collisionLayer->removeTileAt(tiledPos);
133         log("collisionLayer->tileGIDAt(tiledPos)  =  %d ", collisionLayer->tileGIDAt(tiledPos));
134         label->setString("you eat me");
135     }
136     else{
137         label->setString("HelloWorld ~~~ ");
138     }
139
140 }
141
142
143 void HelloWorld::menuCloseCallback(Ref* pSender)
144 {
145 #if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
146     MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
147     return;
148 #endif
149
150     Director::getInstance()->end();
151
152 #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
153     exit(0);
154 #endif
155 }

时间: 2024-12-25 18:48:22

Cocos2d-x之瓦片地图 Tiled的相关文章

Cocos2d-X研究之v3.x瓦片地图具体解释

在游戏开发过程中,我们会遇到超过屏幕大小的地图,比如即时战略游戏,使得玩家能够在地图中滚动游戏画面.这类游戏一般会有丰富的背景元素,假设直接使用背景图切换的方式,须要为每一个不同的场景准备一张背景图,并且每一个背景图都不小,这样会造成资源浪费. 瓦片地图就是为了解决这问题而产生的.一张大的世界地图或者背景图能够由几种地形来表示,每种地形相应一张小的的图片,我们称这些小的地形图片为瓦片.把这些瓦片拼接在一起,一个完整的地图就组合出来了,这就是瓦片地图的原理. TileMap方案 在Cocos2d-

关于Cocos2d-x的瓦片地图

1.cocos2d-x的瓦片地图是用Tiled地图编辑器做的,这个软件开源,免费,一般都是用它制作瓦片地图. 2.瓦片地图是由块层和对象组成的,块层的作用是显示和一些重叠的时候覆盖角色的作用,而对象是可以进行一些事件的触发和处理的.可以从制作好的plist文件中获取主角对象的坐标,这个坐标可以作为精灵创建时的初始坐标. 3.第一层块层可以是背景层,第二层块层可以是事物层,然后再加一个主角对象,打包成plist文件就可以了. 4.地图随主角的移动,其实是屏幕的移动,瓦片地图本身没有动,主角在动,动

(12)瓦片地图

在游戏开发过程中,我们会遇到超过屏幕大小的地图,例如即时战略游戏,使得玩家可以在地图中滚动游戏画面.这类游戏通常会有丰富的背景元素,如果直接使用背景图切换的方式,需要为每个不同的场景准备一张背景图,而且每个背景图都不小,这样会造成资源浪费. 瓦片地图就是为了解决这问题而产生的.一张大的世界地图或者背景图可以由几种地形来表示,每种地形对应一张小的的图片,我们称这些小的地形图片为瓦片.把这些瓦片拼接在一起,一个完整的地图就组合出来了,这就是瓦片地图的原理. TileMap方案 在Cocos2d-x中

cocos2dx[3.4](25)——瓦片地图TiledMap

[唠叨] 还记得我们小时候玩的小霸王里面的游戏吗?大部分都是基于Tile地图的游戏,如坦克大战.冒险岛.魂斗罗.吞食天地等.而在手游中,基于瓦片地图的游戏也很常见.如:<保卫萝卜>. 瓦片地图有专门的地图编辑器:Tiled Map Editor . 先给大家看个酷炫的图吧. 此图来自:http://blog.csdn.net/aa4790139/article/details/8135831 [参考] http://cn.cocos2d-x.org/tutorial/lists?id=70 

瓦片地图

在游戏开发过程中,我们会遇到超过屏幕大小的地图,例如即时战略游戏,使得玩家可以在地图中滚动游戏画面.这类游戏通常会有丰富的背景元素,如果直接使用背景图切换的方式,需要为每个不同的场景准备一张背景图,而且每个背景图都不小,这样会造成资源浪费. 瓦片地图就是为了解决这问题而产生的.一张大的世界地图或者背景图可以由几种地形来表示,每种地形对应一张小的的图片,我们称这些小的地形图片为瓦片.把这些瓦片拼接在一起,一个完整的地图就组合出来了,这就是瓦片地图的原理. TileMap方案 在Cocos2d-x中

在Cocos2d-X3.0中使用瓦片地图中的对象层

在Cocos2d-X中使用瓦片地图是非常常见的,例如在跑酷和塔防游戏中通常会用到瓦片地图,在前面的博客中我也介绍了瓦片地图的使用,这篇博客主要介绍在Cocos2d-X3.0中使用瓦片地图中的对象层,因为3.0和2.0中调用瓦片地图的对象层的方式有所不同 对于瓦片地图的使用可以参考我的博客 瓦片地图编辑器的使用:http://blog.csdn.net/u010105970/article/details/41118191 在Cocos2d-X中使用瓦片地图<一>:http://blog.csd

Cocos2d-X研究之v3.x瓦片地图详解

在游戏开发过程中,我们会遇到超过屏幕大小的地图,例如即时战略游戏,使得玩家可以在地图中滚动游戏画面.这类游戏通常会有丰富的背景元素,如果直接使用背景图切换的方式,需要为每个不同的场景准备一张背景图,而且每个背景图都不小,这样会造成资源浪费. 瓦片地图就是为了解决这问题而产生的.一张大的世界地图或者背景图可以由几种地形来表示,每种地形对应一张小的的图片,我们称这些小的地形图片为瓦片.把这些瓦片拼接在一起,一个完整的地图就组合出来了,这就是瓦片地图的原理. TileMap方案 在Cocos2d-x中

Cocos2d-x使用瓦片地图

图所示的复杂地图可以使用瓦片地图技术,瓦片地图是用一些小图片(瓦片)拼接而成,这样可以大大地减少内存消耗.如图所示的瓦片地图,只需要如图所示的三个瓦片就可以了. 瓦片地图 地图中的瓦片 瓦片地图的分类瓦片地图可以有三种分类:直角地图.斜角地图和六边形地图.1.直角地图直角地图,如图所示是使用方形瓦片构建,看上去是垂直向下观察的鸟瞰图,构成瓦片地图的瓦片不一定是正方形,也可以是长方形瓦片. 2.斜角地图斜角地图,如图所示是使用菱形瓦片构建.斜角地图是将视角旋转到45度,斜角地图能够使我们的大脑错误

瓦片地图技术总结

两个月以来,开始涉入WebGIS这块领域,发现GIS的东西确实挺多,每个方向需要研究的东西也很多,现把瓦片地图这一块的内容进行下总结.本文主要是对这个技术进行一个总体的介绍,目前,从事的是瓦片地图客户端方面的开发,后续会对其技术的具体实现做一个详细的介绍. 瓦片地图的定义 瓦片地图现状 瓦片地图设计涉及方向 瓦片地图定义: 瓦片地图:其实就是WebGIS中的一部分吧,我暂时这么理解,而且,应该是属于WebGIS中比较重要的一块.顾名思义,瓦片地图就是由一块块固定大小的“小图片”地图拼接而成的网络