【v2.x OGE教程 12】

关卡编辑器帮助文档

一、简单介绍

关卡编辑器用于游戏关卡界面元素的可视化编辑,包含元素的位置、尺寸以及其他自己定义属性。通过解析生成的数据文件就可以获取关卡信息，并能随时调整。以降低开发工作量，提高开发效率。

二、界面

主界面

图01_主界面

1) 画布

①　简单介绍

画布用于关卡元素的预览，并提供元素选择和坐标设置等功能；画布的尺寸与其正在显示的关卡的尺寸同样

图02_画布

②　选择元素

a. 单选：鼠标左键单击就可以选中单个元素，选中后的元素周围出现蓝色的方框，未选中的则为灰色虚线框

b. 多选：按住Ctrl键不放，再依次点击要多选的元素就可以多选

c. 取消选择：点击画布的随意空白区域就可以取消选中

③　移动元素

选中要移动的元素。用鼠标拖拽或者借助键盘的方向按键均可移动所选元素，也能够通过在属性列表中直接输入元素的坐标来移动元素

2) 菜单条

①　简单介绍

菜单条是编辑器经常使用操作的集合，包含“文件”和“帮助”菜单两大类。

图03_菜单条

②　文件菜单

a. 新建项目

用于打开“新建项目”窗体，在该窗体中输入新项目名称后点击确定button就可以创建一个新项目

图04_新建项目

注意：新项目名称不能与已有项目的名称反复

b. 打开项目

用于打开已有项目。

点击菜单button，在弹出窗体中选择要打开的项目配置文件（xml格式的）就可以打开项目

图05_打开项目

c. 保存项目 

用于保存对项目的改动

d. 导出项目

用于导出项目所生成的关卡数据文件。

点击菜单,在弹出窗体中选择要导出的目标文件夹。再点击确定后将在指定文件夹下 生成关卡数据文件

图06_导出项目

③　帮助菜单

打开帮助

3) 快捷工具栏

①　简单介绍

快捷工具栏是经常使用功能button的集合

图07_快捷工具栏

②　项目相关button

用于新建、打开和保存项目

③　对齐button组

用于对齐界面元素，仅当画布中已选中了多个元素时有效；对齐时，以多选时第一个选中的元素为标准

a. 顶端对齐

将全部选中元素的纵坐标设为第一个选中的元素的纵坐标

b. 底端对齐

将全部选中元素的底端与第一个选中的元素的底端对齐

c. 左对齐

将全部选中元素的横坐标设为第一个选中的元素的横坐标

d. 右对齐

将全部选中元素的右端与第一个选中的元素的右側对齐

e. 横向居中对齐

将全部选中元素的中心点的纵坐标设为第一个选中的元素的中心点的纵坐标

f. 纵向居中对齐

将全部选中元素的中心点的横坐标设为第一个选中的元素的中心点的横坐标

g. 中心对齐

将全部选中元素的中心点的坐标设为第一个选中的元素的中心点的坐标

④　布局button组

用于高速设置界面元素的位置。仅仅对单个元素有效

a. 置顶

将选中元素的纵坐标设为0

b. 置底

将选中元素的底端与画布的底端对齐

c. 左置

将选中元素的横坐标设为0

d. 右置

将选中元素的右端与画布右端对齐

e. 横向居中

将选中元素的中心点的纵坐标设置为画布中心点的纵坐标

f. 纵向居中

将选中元素的中心点的横坐标设置为画布中心点的横坐标

g. 居中

将选中元素的中心点的坐标设置为画布中心点的坐标

⑤　删除button

用于删除画布中选中的元素，支持多选

4) 元素列表

①　简单介绍

元素列表区域显示精灵列表和关卡元素列表

②　精灵列表

精灵列表显示项目的全部精灵。选中某个精灵后，“属性列表”和“自己定义属性列表”

将显示该精灵的属性信息

图08_精灵列表

a. 精灵简单介绍

精灵指关卡编辑器中能够在关卡内或者关卡间复用的界面元素。将精灵加入到关卡后，关卡中将生成一个与精灵的各项属性同样的关卡元素

b. 加入精灵button

点击后加入一个新的精灵

c. 删除精灵button

点击后删除选中的精灵

d. 将精灵加入到关卡中

选择要加入的精灵，将其用鼠标拖拽到画布中就可以将该精灵加入到当前的关卡中

5) 关卡列表

关卡列表显示项目中的全部关卡及关卡的元素列表，是一个树形结构

图09_关卡列表

①　关卡

树形结构的第一层显示项目中的关卡列表，选中某个关卡后，“属性列表”和“自己定义属性列表”将显示其相关属性。画布将切换到该关卡的布局

②　元素

树形结构的第二层显示关卡的元素列表，选中某个元素后。“属性列表”和“自己定义属性列表”将显示其相关属性，画布将切换到该元素所属关卡的布局，并框选该元素相应的画布元素

③　加入关卡button

点击后加入一个新的关卡

④　删除关卡button

点击后删除选中的关卡

6) 属性列表

①　简单介绍

属性列表区域用于显示和改动精灵、关卡及关卡元素的基本信息（假设“元素列表”区域中选中的选项卡为“精灵列表”。则显示当前选中的精灵信息，反之则显示关卡或者关卡元素信息）。包含坐标和尺寸等

图10_属性列表

②　名称

用于显示和改动当前对象的名称（注：名称仅用于方便编辑器的显示，在引擎中无意义）

③　位置

用于显示和改动当前对象的坐标。仅当显示对象为关卡元素时有效

④　尺寸

用于显示和改动当前对象的宽和高,假设改动了关卡的尺寸,画布将同步更新

⑤　类型

用于显示和改动当前对象的类型值，仅当显示对象为精灵和关卡元素时有效

⑥　图片

用于设置该元素的背景图片（仅用于方便编辑器的显示。在引擎中无意义），仅当显示对象为精灵或者关卡元素时有效，点击右側的button能够导入图片资源

7) 自己定义属性列表

①　简单介绍

自己定义属性列表区域用于显示和改动精灵、关卡及关卡元素的扩展信息（假设“元素列表”区域中选中的选项卡为“精灵列表”。则显示当前选中的精灵信息，反之则显示关卡或者关卡元素信息）

图11_自己定义属性

②　改动自己定义属性

用鼠标选中要改动的单元格，再单击单元格或按下F2就可以改动自己定义属性的名称或者值

③　加入自己定义属性

在标有“*”的行（一般为列表的最后一行）中依次输入属性名称和值就可以加入一个自己定义属性

④　删除自己定义属性

选则要删除的属性所在的行，按Delete键就可以删除

注意：自己定义属性的名称不能反复，假设输入了反复的名称。将会被自己主动设置为一个不反复的默认值Property_N

三、演示样例

1. 新建项目

1) 点击文件菜单，选择新建项目

2) 在弹出的对话框中输入项目名称，点击确定

2. 创建精灵

1) 选中程序右上角的“精灵列表”选项卡

2) 点击“加入精灵”button，将创建一个新的精灵。如图12

图12_演示样例_创建精灵

3) 依次改动精灵的名称、尺寸和类型

4) 设置精灵的图片，假设列表中没有须要的图片，能够通过点击右側的“+”button来导入

5) 反复上述步骤。创建须要的精灵

3. 创建关卡

1) 选中程序右上角的“关卡列表”选项卡

2) 点击“加入关卡”button，将创建一个新的关卡。如图13

图13_演示样例_加入关卡

3) 依次设置关卡的名称和尺寸

4. 加入关卡元素

1) 选中“精灵列表”

2) 选中须要的精灵。将其拖拽到“画布”中，如图14

图14_演示样例_加入元素

3) 反复上述步骤,加入须要的关卡元素

5. 改动元素属性

1) 选中“关卡列表”选项卡

2) 展开指定的关卡,选中指定元素(也能够用鼠标左键单击画布中的图片来选中指定的关卡元素)如图15

图15_演示样例_选择元素

3) 设置自己定义属性

①　选中“自己定义属性”列表中，最左标识有“*”的行

②　选中“名称”单元格。再用鼠标左键单击一次该单元格

③　输入新的名称

④　选中“值”单元格。再用鼠标左键单击一次该单元格

⑤　输入新的值

⑥　反复上述步骤

四、在项目中使用

1. 导出为数据文件

在关卡编辑器中将关卡导出，生成对应的xml数据文件。然后将数据文件复制到项目的合适位置

2. 载入关卡数据文件并使用

注:关卡载入器已集成到引擎中,所在包名:com.orange.util.level

//自己定义属性的名称

public static final String TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_BOX = "box";

public static final String TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_CIRCLE = "circle";

public static final String TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_TRIANGLE = "triangle";

public static final String TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_HEXAGON = "hexagon";

@Override

public void onSceneCreate(SceneBundle bundle) {

// TODO Auto-generated method stub

super.onSceneCreate(bundle);

final String FACE_BOX = "face_box.png";

RegionRes.loadBitmapTextureFromAssets(FACE_BOX);

//关卡的容器

final EntityGroup entityGroup = new EntityGroup(this);

this.attachChild(entityGroup);

//初始化关卡载入器对象

final LevelLoader levelLoader = new LevelLoader();

//关卡元素的容器

levelLoader.registerEntityLoader(LevelConstants.TAG_LEVEL, new IEntityLoader() {

@Override

public IEntity onLoadEntity(final String pEntityName, final Attributes pAttributes) {

final int width = SAXUtils.getIntAttributeOrThrow(pAttributes, LevelConstants.TAG_LEVEL_ATTRIBUTE_WIDTH);

final int height = SAXUtils.getIntAttributeOrThrow(pAttributes, LevelConstants.TAG_LEVEL_ATTRIBUTE_HEIGHT);

entityGroup.setWidth(width);

entityGroup.setHeight(height);

return entityGroup;

}

});

//关卡元素

levelLoader.registerEntityLoader(LevelConstants.TAG_ENTITY, new IEntityLoader() {

@Override

public IEntity onLoadEntity(final String pEntityName, final Attributes pAttributes) {

final int x = SAXUtils.getIntAttributeOrThrow(pAttributes, LevelConstants.TAG_ENTITY_ATTRIBUTE_X);

final int y = SAXUtils.getIntAttributeOrThrow(pAttributes, LevelConstants.TAG_ENTITY_ATTRIBUTE_Y);

final int width = SAXUtils.getIntAttributeOrThrow(pAttributes, LevelConstants.TAG_ENTITY_ATTRIBUTE_WIDTH);

final int height = SAXUtils.getIntAttributeOrThrow(pAttributes, LevelConstants.TAG_ENTITY_ATTRIBUTE_HEIGHT);

final String type = SAXUtils.getAttributeOrThrow(pAttributes, LevelConstants.TAG_ENTITY_ATTRIBUTE_TYPE);

Debug.d("x=" + x);

Debug.d("y=" + y);

final VertexBufferObjectManager vertexBufferObjectManager = LevelScene.this.getVertexBufferObjectManager();

final AnimatedSprite face;

if(type.equals(TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_BOX)) {

face = new AnimatedSprite(x, y, FACE_BOX, vertexBufferObjectManager);

} else if(type.equals(TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_CIRCLE)) {

face = new AnimatedSprite(x, y, FACE_BOX, vertexBufferObjectManager);

} else if(type.equals(TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_TRIANGLE)) {

face = new AnimatedSprite(x, y, FACE_BOX, vertexBufferObjectManager);

} else if(type.equals(TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_HEXAGON)) {

face = new AnimatedSprite(x, y, FACE_BOX, vertexBufferObjectManager);

} else {

throw new IllegalArgumentException();

}

face.animate(200);

return face;

}

});

try {

//開始载入

levelLoader.loadLevelFromAsset("Level_1.lvl");

} catch (final IOException e) {

Debug.e(e);

}

}