点击这里给我发消息 点击这里给我发消息
首页 > 行业资讯 > flash>详细内容

tile - base 地图编辑器0.5版制作略解

添加时间:2010-1-5
    相关阅读: 页面 flash 制作 系统
所有文件打包在此
闪吧论坛详细讨论
点击浏览该文件
需要flash7才能打开。
这是一个实用型的地图编辑器。你可以创建多个图层,使用自己定义的地图模块制作地图。地图模块还包含智能编辑功能。其附带的图形引擎, OxSlgLib,是我为之自豪的高速图形引擎。不只是slg,它适合任何需要超大地图的场合,因为它的运算速度与地图大小无关。目前只完成了核心,全部做完之后会写教程的。
首先把那个zip解压缩到一个文件夹,里面应当包括以下6个文件:
mapEditer.fla 编辑器文件
OxGameStdLib.txt Ox游戏标准库,底层支持
OxSlgLib.txt OxSlg库,二维数组支持、tileBase图形支持
S-标准地图.fla 地图图块文件1号,这是一个很完善的地图模块,支持智能地图
S-春天平原.fla 地图图块文件2号,这是个老文件了,从上一版编辑器就开始用。很一般的地图模块。
S-角色.fla 地图图块文件3号,这是一个包含角色的地图模块

首先,打开 S-标准地图.fla 、S-春天平原.fla 、S-角色.fla 都编译一次,各生成一个swf文件。我们的地图编辑器需要加载这些swf作为模块。
然后把mapEditer.fla 也编译一次。如果你愿意的话,直接在flash编辑器里使用也ok。编译器里使用,请钩选禁用快捷键。
(调试时, Control -> Disable Keybroad Shortcuts)
好了,现在我们开始演示魔术一般的地图制作过程。
编辑地图
运行地图编辑器 mapEditer.swf, Ctrl + N 新建一张地图,大小随便。不过太大的话初始化有点慢。你会看到一个全是数字的地图。鼠标中键拖动地图,滚轴缩放。
现在给当前图层设定地图模块。点击如图的文件夹按钮,输入"S-标准地图.swf",确定。
按此在新窗口浏览图片

你在右端Tile面板上选择不同的图块,用画笔工具(B)开始绘制地图了。
界面如下:
按此在新窗口浏览图片


Tile面板上有3个页面,数字/标准/高级。 S-标准地图支持高级图块,所以默认显示高级编辑页面。其中的深色草地、树林和城墙都使用了标准16模块方式,你绘画的时候会发现他们会根据周围情况自动变化。
如果不需要让他们自动变化,可以把下方的“自动运算”上的勾去掉。
图中的地图有两个图层。我们点击Layer面板下方的新建背景图层按钮,新建一个图层。同样点击文件夹图标绑定模块,输入"S-角色.swf",然后可以绘制角色了。(注意,以后角色应当建立角色层,不过目前角色层部分未开放)
导出地图代码
地图编辑完成之后选择 文件->导出地图 就可以看到导出的地图代码。目前可以导出分图层数组和 AS代码两种。选择“AS代码(OxSlgLib支持)”,可以看到生成的代码。
点击“复制到剪切板”,贴到一个新fla的主时间轴上。
然后把需要的库复制到新文件中,比如使用了 S-标准地图,那么就打开 S-标准地图.fla,把里面的 S-标准地图那个mc复制到新文件的库里面。
把新文件存到和其他文件相同的文件夹,因为这些代码需要 OxGameStdLib 和 OxSlgLib支持。好了,把fps调成30以上,运行看看吧。单层地图,550*400的画面 在我的机器上能跑到80fps 。
建议按照这些步骤试一次,就知道这个地图编辑器怎么用了。
制作自己的地图模块
如何制作自己的地图模块呢?
打开任意一个 "S-" 开头的fla参考。
和java类似,模块库中必须有一个同连接名的MC,比如 "S-春天平原.fla" 的库里面必须有一个MC,他的连接名是"S-春天平原"。选中那个MC,右键选连接(Linkage) 就可以看见linkName,确保 为AS导出(Export for action script) 是钩选上的。
编辑那个MC,观察它的格式。他的第一帧是空的,以后每一帧画面大小都是100x100,注册点在画面中心。

注册点就是这个地方:
按此在新窗口浏览图片
生成swf文件就ok了,你就可以用这个比如 S-冬天雪地.swf 制作地图了。
注意,如果某帧是一个循环mc动画(比如 S-春天平原中的水面),为了保证所有mc同步播放,请把那一帧的mc命名为pic。

生成无接缝地图
地图编辑器使用模块 S-春天平原 生成地图看看。去掉网格(察看->网格),缩放一下画面,你会看见严重的接缝。
如果画面保持很整的缩放率,比如50之类,那么就不需要考虑接缝问题。但是如果画面需要常常缩放,那么就需要制作一个稍大的地图了。
比如 S-标准地图 就是无接缝地图。他的每个图块都是 102 * 102大小的,比正常地图稍大。拼接的时候仍然按100x100计算,所以两边会多出一点点,避免了接缝。恩,基本知识部分说完了。
你已经可以用编辑器制作地图,并且导出二维数组了。做过slg等tileBase游戏的话,相信便知道这些数组代码有什么用吧
下面谈谈高级设置部分。这部分以后看也行~不影响使用。
另外,后面一贴会稍微解释一下 OxSlgLib中的图形引擎的用法。同样不是必看的—— 
引擎没有完成,而且你完全可以自己写脚本利用这个数组。
>v< 我对这个引擎速度很有自信,不过这里写的东西有限,想尝鲜的话可以试试。( 地图编辑器自己就可以生成基于那个库的代码,仔细看的话会发现用起来很方便)
图块的高级设置
使用一下 S-春天平原 , 里面有一堆图块是水面。
按此在新窗口浏览图片

为了产生一片完整的水面,必须自己手动选出不同的边缘图块画上去。定义一个完备的水面部分到底需要多少个tile呢?能不能自动选择呢? 高级设置就是为了这一目的而出现的。使用 S-标准地图, 里面的深色草地、深色草地上的树林、城墙都是应用了高级模式的例子。

bgDef16
经研究发现,一般来说,我们只需要考虑一个图块的上、左、下、右相邻图块是否与自己相同。这样共有2^4 = 16种情况。
为了方便起见,我们把图块从上开始逆时针编号,依次是 上坐下右,相同为1不同为0。比如,1000 表示只有上方向同; 0110 表示左下相同。这样16个tile是这个样子的:(建议下载下面的文件作为参考)
点击浏览该文件
点击开新窗口欣赏该FLASH动画![全屏欣赏]
把这些tile从0000~ 1111在时间轴上顺序排放,我们就可以想办法让地图编辑器自动识别了。
function initMap
高级模式的开启与否是通过 是否存在 initMap 函数判断的。这个函数应当写在地图模块的主时间轴上,参考 S-标准地图.fla
它应当返回一个数组,其每一项是这样的:

{start, [icon,] type, groundType, [nearType]}

start:Number 表示这个组的起始帧如果组中有很多帧的话,可以设置 icon:Number表示这个组的图标用哪个tile。

type 表示这个组的高级模式。
不填或者null表示他没有高级模式,也不会引起周围地板应用高级模式
"normal" 表示他没有高级模式,但是会引起周围地板应用高级模式
"bgDef16" 表示为上述的 bgDef16 模式。 groundType 地板类型。bgDef16模式是根据地板类型来确认同类/非同类模块的。
比如 S-标准地图 中房子和树木都 分为浅草地 和 深草地两种,他们混合绘制的时候使用 groundType 确认对方类型。

nearType 旁边的地板类型。如果不填的话,他会认为所有其他种类地板都是异类。
如果填写的话,他就只会认为 nearType是不同类。比如深草地的边缘是绿色的草地,所以他的nearType是"浅草地",而城墙边缘没有显示其他图像,所以没有填写nearType

未来的特性

目前高级模式仅仅有 BgDef16,以后还会支持更多高级模式。BgDef16已经可以描述一些问题,不过还是不完善,比如制作水面就需要更多的tile才能完整(未来的BgDef31)
目前界面有些小Bug会清除的,角色层也没有制作完成,存档部分以后也会加入。恩... 就这么多了,希望大家用得着
地图编辑器所有的东西都在上面了。你可以绘制一张地图,然后导出二维数组,或者OxSlgLib支持的代码。
OxSlgLib还没有完成,不过已经可以使用了。如果想尝试一下这个引擎,那么就看看这一楼。这里讲解了OxSlgLib的图形引擎的一部分。
地图编辑器自动生成的代码是OxSlgLib的一个简单应用。他产生一个场景,在enterframe中控制场景的运动。
在哪里找到需要的代码信息:
在OxSlgLib.txt的开头部分有很长的注释,里面说明了大量类和其方法。
如何使用OxSlgLib的图形引擎:

myTileScene = new OxSlgLib.TileScene2D(32, 24);
bg_layer0 = new OxSlgLib.TileScene2D.BgLayer(bg_layer0LinkName, bg_layer0Map, myTileSceneBaseDepth + 0);
myTileScene.addLayer(bg_layer0);

这段as创建了一个32 * 24格的场景myTileScene 。 然后创建了一个BgLayer图层,并且把它添加到 myTileScene 中去。
具体参考TileScene2D类的构造函数、TileScene2D.BgLayer 类的构造函数
控制TileScene2D很简单,直接修改TileScene2D的 x y scale 属性就可以了。
x,y 表示“画面中心落在哪一个格上”,比如 x = 24.2, y = 13,那么画面中心就在 (24, 13)偏右的地方。
scale是缩放率,也是每一个格子的尺寸。scale =56表示每个格子大小 56x56像素
TileScene2D并没有注册任何东西刷新自己。建议在主enterframe中调用TileScene2D.refresh() 每帧刷新画面。
还有一些可能用到的方法,比如:
如果需要控制角色的话,使用 TileScene2D.indexToScene(x, y)可以 由角色所在的格子(不需要是整数)获得角色在屏幕上的坐标。
用sceneToIndex(screenPosx, screenPosy)可以得到鼠标点击的格子。
关卡结束之后执行TileScene2D.clear() 可以释放所有资源
附录(复制自OxSlgLib注释):
new TileScene2D(width, height, scale)
width,height 地图的大小,单位:格数
scale 每格的长宽,单位:像素。可缺省,默认50
new TileScene2D.BgLayer (baseLinkName, map, depthOrCurrentMC)
baseTileLinkName 基本模块的linkName
模块应当是一个多帧 100x100 mc,注册点在中心。
每帧表示一种地形。如果该地形是一个循环动画mc,那么该mc应被命名为pic
这样系统会确保全画面动画同步。
TileScene2D.setClip (left, top, right, bottom, centerX, centerY)
设置画面剪辑的范围和中心点。都是相对屏幕的绝对坐标。单位:像素。
每一项都可以缺省。如果centerX 和 Y缺省,那么中心自动定为画面剪辑的中心。
但是注意,每次设置该值画面都会强制刷新,即使你并没有修改任何一个值。
TileScene2D.sceneToIndex(screenPosx, screenPosy);
屏幕坐标(screenPosx, screenPosy)转成 tile下标{x,y,flag}。
比如你可以用这个得到鼠标指向的 tile下标。
下标(x,y)是浮点数, 如果需要整数下标请用Math.round原整。
flag = false 表示该位置超过地图范围。
TileScene2D.indexToScene(x, y)
tile下标(x, y)转成在屏幕坐标{screenPosx, screenPosy,flag}。
flag表示该格是否在剪辑范围内。(注意与上个函数的flag区别)
数据都是浮点数。
该函数是sceneToIndex()的逆运算。
TileScene2D.clear(); 他会释放所有实际资源。这是不可恢复的。
注意,他会删除所有layer以及其中的的mc,即使那个mc是构造函数中分配给他的。
比如本关卡结束,删除地图的时候就应该调用这个函数以便释放mc。
执行这个之后这个TileScene2D实例就可以不用管了。
一个已经clear的TileScene2D的大部分方法直接返回null,toString则返回TileScene已清除的信息

把上面说的缩水一下:
1 全部编译一遍
2 打开地图编辑器 Ctrl + N 新建一张图,点击文件夹按钮导入"S-标准地图",确认,开始画图。
3 画完之后 文件-〉导出地图,他就生成代码了。如果你准备制作SLG或者RPG,只需要一个直观的地图编辑器,那么这里的二维数组不正是你要的吗?
4 如果想试试OxSlgLib,那么复制代码贴到新文件中去,把需要的库MC也复制到新文件中(比如 S-标准地图),文件保存到同一个目录下,执行就OK
5 自制地图模块看5楼。场景空着,做一个和文件同名的mc,钩上连接,第一帧空上,以后每帧图块100x100 注册点在中心就ok。
6 OxSlgLib很容易使用。保持原来的代码不变,myTileScene就是场景对象,直接控制其 x , y , scale就可以让他动了。

本文作者:
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册