文档章节

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

clschen
 clschen
发布于 2013/05/19 00:01
字数 1131
阅读 1095
收藏 0

作者:cls分享站

目前已有教程:

  1.  CitrusEngine系列教程一:认识CitrusEngine

  2. CitrusEngine系列教程二:结合starling和Box2D开发游戏

  3. CitrusEngine系列教程三:使用flash cs 设计关卡

  4. CitrusEngine系列教程四:Citrus的2D动画和摄像头

  5. CitrusEngine系列教程五:使用PhysicsEditor创建box2d刚体 

  6. CitrusEngine系列教程六:使用Tiled Map Editor创建地图

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

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

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

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

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



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

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



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



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



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



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



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



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



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



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



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

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

  1. public class TiledMapState extends State
  2. {
  3. [Embed(source="/../assest/map.tmx",mimeType="application/octet-stream")]
  4. private const _map:Class;

  5. [Embed(source="/../assest/Genetica-tiles.png"]
  6. private const _ImgTiles:Class;

  7. public function TiledMapState()
  8. {
  9. super();
  10. var objects:Array=[Hero,Platform];
  11. }

  12. override public function initialize():void{
  13. super.initialize();

  14. var box2D:Box2D=new Box2D("box2d");
  15. box2D.visible=true;
  16. add(box2D);

  17. var bmp:Bitmap=new _ImgTiles();
  18. //添加name,使我们知道哪张图片呗选择了
  19. bmp.name="Genetica-tiles.png";

  20. ObjectMaker2D.FromTiledMap(XML(new _map()),[bmp]);
  21. var hero:Hero=getObjectByName("hero") as Hero;

  22. view.camera.setUp(hero, new MathVector(stage.stageWidth / 2, 240),
  23. new Rectangle(0, 0, 1280, 640),new MathVector(.25,.25));

  24. (view.getArt(getObjectByName("background-elements")) as SpriteArt).alpha = 0.5;

  25. }
  26. }
复制代码
最后源码奉上,运行的时候报找不到图片的错误,就用文本编辑工具(如:记事本)打开map.tmx,修改image的 source,将其为flex的相对路径,如:
  1. <?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>
复制代码
=> 原文及网盘下载

© 著作权归作者所有

clschen

clschen

粉丝 4
博文 21
码字总数 10662
作品 1
广州
程序员
私信 提问
CitrusEngine系列教程五:使用PhysicsEditor创建box2d刚体

作者:cls分享站 目前已有教程: CitrusEngine系列教程一:认识CitrusEngine CitrusEngine系列教程二:结合starling和Box2D开发游戏 CitrusEngine系列教程三:使用flash cs 设计关卡 Citrus...

clschen
2013/05/15
187
0
CitrusEngine系列教程三:使用flash cs 设计关卡

教程出自 cls分享站 CitrusEngine系列教程一:认识CitrusEngine CitrusEngine系列教程二:结合starling和Box2D开发游戏 CitrusEngine系列教程三:使用flash cs 设计关卡 CitrusEngine系列教程...

clschen
2013/05/07
82
0
CitrusEngine系列教程一:认识CitrusEngine

教程作者:cls分享站 CitrusEngine系列教程一:认识CitrusEngine CitrusEngine系列教程二:结合starling和Box2D开发游戏 CitrusEngine系列教程三:使用flash cs 设计关卡 CitrusEngine系列教...

clschen
2013/05/03
316
0
CitrusEngine系列教程二:结合starling和Box2D开发游戏

教程出自 cls分享站 CitrusEngine系列教程一:认识CitrusEngine CitrusEngine系列教程二:结合starling和Box2D开发游戏 CitrusEngine系列教程三:使用flash cs 设计关卡 CitrusEngine系列教程...

clschen
2013/05/05
361
0
CitrusEngine系列教程七:修改hero的默认动画(修改按键和增减动作)

作者:cls分享站 最近比较忙活,工作和家里都有些烦心的事情要处理,教程已经许久没更新了,感觉有点过不去啊。恰好今天有人问我如何修改hero默认按键和添加动画的问题,于是决定写一篇教程介...

clschen
2013/06/14
81
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中,可以自定义和扩展Java应用程序,自JDK1.6被引入,基于Rhino引擎,JDK1.8后使用Nashorn引擎,支持ECMAScript 5,但后期还可能会换...

阿提说说
45分钟前
5
0
05.深入浅出索引(下)

在下面这个表T中,如果我们执行select * from T where k between 3 and 5,需要执行几次树的搜索操作,会扫描多少行? mysql> create table T ( id int primary key, k int not null default...

scgaopan
昨天
6
0
设计模式-中介者模式

设计模式-中介者模式 定义 用一个中介对象封装一系列的对象交互,中介者使各对象不需要显示地相互作用,从而使其耦合松散,而且可以独立地改变它们之间的交互 UML 组成部分主要包含 Mediat...

木本本
昨天
5
0
Python 周刊第 418 期

新闻 PyCon US 2020 开始接受财务赞助! https://pycon.blogspot.com/2019/10/financial-aid-launches-for-pycon-us-2020.html2020年 Python 美国开发者大会,tips: 中国也有,可以赞助国内的...

iCodeBugs
昨天
5
0
ThreadLocal源码阅读

首先,从set方法入手, // ThreadLocalpublic void set(T value) { Thread t = Thread.currentThread(); ThreadLocalMap map = getMap(t);//这里可以看出,从Threa......

小海bug
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部