CitrusEngine系列教程六:使用Tiled Map Editor创建地图
2013-05-19 00:01
477 查看
作者:cls分享站 目前已有教程: CitrusEngine系列教程一:认识CitrusEngineCitrusEngine系列教程二:结合starling和Box2D开发游戏CitrusEngine系列教程三:使用flash cs 设计关卡CitrusEngine系列教程四:Citrus的2D动画和摄像头CitrusEngine系列教程五:使用PhysicsEditor创建box2d刚体CitrusEngine系列教程六:使用Tiled Map Editor创建地图之前 CitrusEngine系列教程三的时候,我们已经探讨如何使用flash cs 设计关卡,现在我们来看一下如何使用Tiled Map Editor创建地图,其实两者所做的事情有些类似,就看游戏需要和开发者如何权衡了~Tiled 地图编辑器是一种用于通用目的的编辑器,可以用来创建2D和2.5D的地图。特点是比较好用,风格类似mini版的photoshop。它可以用于***多种类型的游戏引擎需要,而且支持使用插件读写map、增加用于引擎的map格式。 最重要的开源,且有中文版,哈!另外其相关教程网上也有不少,如: 使用Tiled编辑器***TMX地图导入图块及游戏添加 (译)如何使用cocos2d***基于tile地图的游戏教程:第一部分 Tiled Map Editor 使用说明 这些教程虽然大多是基于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]嵌入使用: 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> 复制代码 |
原文及网盘下载
相关文章推荐
- CitrusEngine系列教程五:使用PhysicsEditor创建box2d刚体
- CitrusEngine系列教程六:使用Tiled Map Editor创建地图
- CitrusEngine系列教程五:使用PhysicsEditor创建box2d刚体
- Flask系列教程(二)--------------使用SQLAlchemy创建数据模型
- 【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
- ArcGIS API for JavaScript开发教程系列(一)之创建地图
- CodeSmith和PowerDesigner的使用安装和数据库创建(原创系列教程)
- 黄聪:CodeSmith和PowerDesigner的使用安装和数据库创建(原创系列教程)
- Google Map开发系列(四)——使用JavaScript创建地图步骤详解
- 黄聪:CodeSmith和PowerDesigner的使用安装和数据库创建(原创系列教程)
- CitrusEngine系列教程三:使用flash cs 设计关卡
- ArcGIS教程:使用概念模型创建地图(一)
- Google Map开发系列(四)——使用JavaScript创建地图步骤详解
- 【转】 CodeSmith和PowerDesigner的使用安装和数据库创建(原创系列教程)
- Web Api系列教程第2季(OData篇)(二)——使用Web Api创建只读的OData服务
- CitrusEngine系列教程三:使用flash cs 设计关卡
- Swift官方入门教程系列--一--使用Swift创建UI【翻译版,源代码】
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十五)地图编辑器的初步使用
- ArcGIS教程:使用概念模型创建地图(二)
- 云星数据---Scala实战系列(精品版)】:Scala入门教程001-使用Intellij IDEA创建scala工程