文章目录
  1. 1. 瓦片地图
  2. 2. 编辑器
  3. 3. 导入游戏
    1. 3.1. 导入流程
  4. 4. 实现层次感
  5. 5. 预定义属性

对于游戏的背景图片,我们想要实现三个特性:

  1. 更反复的背景元素,加入更多元素
  2. 多个可供玩家切换的场景
  3. 超过屏幕大小的地图,实现滚动。

如果为不同场景准备一张背景图,势必造成资源浪费。我们可以使用瓦片地图来解决上面的问题。

瓦片地图

一张大的世界地图或背景图片往往可由屈指可数的几种地形来表示,每种地形对应于一张小的图片,我们称这些小的地形图片为瓦片。把这些瓦片拼接到一起,一个完整的地图就组合出来啦,这就是瓦片地图的原理。

在cocos2dx中,瓦片地图的实现是TileMap方案。其支持三种不同视图:

  1. 正交视图(orthogonal view,瓦片水平垂直排列)
  2. 六边形视图(hexagonal view,六边形瓦片紧密连接)
  3. 等轴视图(isonetric view,45度斜视排列)

编辑器

cocos2dx支持由瓦片地编辑器Tiled Map Editor制作并保持为TMX格式的地图。

TileMap中层级关系和cocos2dx中的是类似的,地图可以包含多个不同的图层。

TileMap的坐标系原点位于左上角,和UI坐标系类似。

TileMap中的每一个瓦片拥有一个唯一的编号GID,用于在地图中查找某个瓦片。

导入游戏

我们将导出的TMX文件加载到游戏中(也要将瓦片用到的纹理图片等资源导入进来)。

Cocos2dx为我们提供了CCTMXTileMap和CCTMXLayer两个类来处理瓦片地图。其中

CCTMXTileMap:继承自CCNode,代表一个完整的地图,它负责地图文件的载入、管理和呈现。
CCTMXLayer:代表一个瓦片地图中的图层,可以从图层对象获取信息。CCTMXLayer隶属于CCTMXTileMap。

导入流程

  1. 为了方便其他部分访问背景地图,将它定义为一个属性,并添加一个setter访问器:

    void SpriteLayer::setBackgroundLayer(CCTMXTileMap* bg){
        if(m_pBackgroundLayer){
            m_pBackgroundLayer->removeFromParentAndCleanup(true);
        }
        m_pBackgroundLayer = bg;
        this->addChild(bg,0);        
    }
    
  2. 在游戏场景中初始化方法中添加:

    m_pBackGroundLayer = NULL;
    this->setBackgroundLayer(CCTMXTileMap::create("background.tmx"));
    
  3. 允许玩家卷动地图:

    void SpriteLayer::singeTouchDragging(CCPoint startPoint,CCPoint now) {
        CCPoint delta = ccpSub(now,startPoint);
        CCPoint newPosition = ccpAdd(m_pBackgroundLayer->getPosition(),delta);
        m_pBackgroundLayer->setPosition(newPosition);
    }
    

    其中startPoint和now分别表示触摸开始点和当前拖动位置。

实现层次感

比如实现鱼在水草中的游动,可以使用多张水草图层,然后各个层Z顺序值不相同,然后让鱼的Z顺序值处于水草图层的Z顺序值之间,就会呈现出层次感。

预定义属性

TileMap中的每一个元素都附带一个属性字典,用于设置一些额外的信息,我们把这些信息叫做预定义属性。例如,我们可以在层中存放黑洞的坐标,然后在游戏中读取出来,相关代码如下:

CCTMXLayer* layer = m_pBackgroundLayer->layerNamed("rock");
CCString* x = layer->propertyNamed("dead_x");
CCString* y = layer->propertyNamed("dead_y");
CCPoint position = ccp(x->intValue(),y->intValue());
文章目录
  1. 1. 瓦片地图
  2. 2. 编辑器
  3. 3. 导入游戏
    1. 3.1. 导入流程
  4. 4. 实现层次感
  5. 5. 预定义属性