CitrusEngine系列教程六：使用Tiled Map Editor创建地图

最新推荐文章于 2025-01-27 16:10:02 发布

clschen

最新推荐文章于 2025-01-27 16:10:02 发布

阅读量1.6k

点赞数

分类专栏： CitrusEngine 文章标签： Flex4 actionscript CitrusEngine 游戏 Tiled Map Editor

本文链接：https://blog.csdn.net/clschen/article/details/8945978

版权

CitrusEngine 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Tiled Map Editor创建2D游戏地图，并详细讲解了从新建地图到导入纹理图集的过程，以及如何将地图文件整合到CitrusEngine游戏引擎中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：cls分享站

之前 CitrusEngine系列教程三的时候，我们已经探讨如何使用flash cs 设计关卡，现在我们来看一下如何使用Tiled Map Editor创建地图，其实两者所做的事情有些类似，就看游戏需要和开发者如何权衡了~

Tiled 地图编辑器是一种用于通用目的的编辑器，可以用来创建2D和2.5D的地图。特点是比较好用，风格类似mini版的photoshop。它可以用于制作多种类型的游戏引擎需要，而且支持使用插件读写map、增加用于引擎的map格式。

最重要的开源，且有中文版，哈！另外其相关教程网上也有不少，如：

这些教程虽然大多是基于cocos2d或其他游戏平台，但创建地图的步骤基本上是一样的，所以同样有很好的参考价值。因此，我这里将把重点放在探讨编辑后的地图（.tmx文件）在CitrusEngine的使用方法上~

那么在开始前，我们需要一张纹理图集和软件（=>官网下载），以下是我从Citrus官网例子弄来的纹理图集（Genetica-tiles.png）：

http://www.chenlinsheng.com/?p=509

是不是跟我们系列教程四提到的Sprite Sheet的位图序列很像，其实应该也可以说是一样的东西吧，这种图片可以用ps，flash和TexturePackerGUI等工具来生成，具体做法，会在后续教程介绍….

现在我们先看一下软件界面：

http://www.chenlinsheng.com/?p=509

1.首先点击1处新建地图，同时会弹出一个框设置地图相关信息，以下是我的设置：

http://www.chenlinsheng.com/?p=509

2.导入纹理图集，操作步骤：地图》新图块。同时弹出导入框：

http://www.chenlinsheng.com/?p=509

3.导入之后，你可以看到在图块界面上，Genetica-tiles.png被按照64*64切成了一块块

http://www.chenlinsheng.com/?p=509

4.现在我们将图块里面的图片拖到舞台上的不同图层上进行平铺，所以我们先点4处新建背景层，平台层等，双击图层的名字可以改名：

http://www.chenlinsheng.com/?p=509

5.编辑地图，将图块放在相应图层，具体做法可以参照上面的教程（文章末也有源文件下载）：

http://www.chenlinsheng.com/?p=509

6.添加对象层，操作步骤：对象》4处，同时将对象层成命名为object。

http://www.chenlinsheng.com/?p=509

7,.选中object层，点击3处开始绘制对象位置：

http://www.chenlinsheng.com/?p=509

8.将对象与CitrusEngine相关联，关联方法与“使用flash cs 设计关卡”时基本一致，关联Hero类时添加了名称“hero”，同样是为了可以在代码中通过name进行访问设置。顺便一提，同样可以通过图层的名字对图层进行设置，在下面代码也有示例

http://www.chenlinsheng.com/?p=509

9.保存，我将其命名为map.tmx。

10.将map.tmx与Genetica-tiles.png复制至flex项目，通过[Embed]嵌入使用：

public class TiledMapState extends State
{
[Embed(source="/../assest/map.tmx",mimeType="application/octet-stream")]
private const _map:Class;
[Embed(source="/../assest/Genetica-tiles.png"]
private const _ImgTiles:Class;
public function TiledMapState()
{
super();
var objects:Array=[Hero,Platform];
}
override public function initialize():void{
super.initialize();
var box2D:Box2D=new Box2D("box2d");
box2D.visible=true;
add(box2D);
var bmp:Bitmap=new _ImgTiles();
//添加name，使我们知道哪张图片呗选择了
bmp.name="Genetica-tiles.png";
ObjectMaker2D.FromTiledMap(XML(new _map()),[bmp]);
var hero:Hero=getObjectByName("hero") as Hero;
view.camera.setUp(hero, new MathVector(stage.stageWidth / 2, 240),
new Rectangle(0, 0, 1280, 640),new MathVector(.25,.25));
(view.getArt(getObjectByName("background-elements")) as SpriteArt).alpha = 0.5;
}
}

复制代码

最后源码奉上，运行的时候报找不到图片的错误，就用文本编辑工具（如：记事本）打开map.tmx，修改image的 source，将其为flex的相对路径，如：

<?xml version="1.0" encoding="UTF-8"?><map version="1.0" orientation="orthogonal" width="20" height="10" tilewidth="64" tileheight="64"><tileset firstgid="1" name="Genetica-tiles" tilewidth="64" tileheight="64"><image source="Genetica-tiles.png" width="640" height="256"/></tileset>

复制代码

=> 原文及网盘下载