自定义界面

ui.xml是所有配置文件中内容最多最复杂的文件,这里将简单介绍一下各部分的作用。

 

点击这里打开示例用XML文件:ui.xml

 

- 基本元素

 

在编写剧本时,大多数的操作都是针对对象的操作,如 对话框出现、对话框隐藏、移动图片、图片出现、背景切换 等等

 

同理,GAoProject在执行之前,会把如同 文本框、图片 这类资源打包成一个个基本元素

 

使其在拥有诸如“出现”,“消失”等公有行为的同时,又能拥有自己特有的独立行为(如对话框的输出文字行为

 

 

目前的基本显示元素分类有:

 

LayerUI

层,其他UI的载体,特有行为为管理层内其他UI的景深(遮挡与被遮挡关系),层不能创建,只能使用系统默认的7个层,实际大部分情况都不用修改其他UI的所属层和景深,之后的章节会有详细的介绍。

 

ImageUI

图片元素,每一个在source.xml中注册的image资源都将生成一个对应名称的ImageUI。

 

DialogUI

对话框元素,由一个底层图片,与在图片上的两个文本框组成的元素(一个用于显示姓名,一个用于显示说话的文本),每个游戏都有一个名为UI_DIALOG的默认文本框来对应脚本中的快捷说话命令。

 

ButtonUI

按钮元素,由1~3张图片(普通状态、鼠标放置状态、按下状态)、0~1个文本框(按钮上的文本,若为图片按钮,则可以省略)、0~2个声音(鼠标放置、按下的音效)组成。

 

FlashUI

Flash元素,与图片相同,注册一个Flash即生成一个FlashUI,但与图片不同,生成后的FlashUI在使用前需要在脚本中再次执行“加载”命令,在脚本中会有详细说明。

 

CharUI

角色元素,由1~N张图片(人物立绘)组成,在config.xml中设定的每个角色都会生成一个CharUI,可以通过脚本来控制CharUI之间立绘的切换。

 

OpotionUI

选项UI,需要设定一个带文本框的按钮(ButtonUI)来提供出现选项时所用的按钮。

 

 

 

 

<c name="敏民">

     <cg name="普通" img="img_mm_pt"/>

     <cg name="汗颜" img="img_mm_hy"/>

     <cg name="笑脸" img="img_mm_xl"/>

</c>

 

 

 

 

 

 

- 对话框与按钮

 

在ui.xml中需要修改的常用的内容其实只有设定字体、按钮和对话框

 

实际上大部分情况都可以直接复制粘贴官方设置好的界面代码和UI

 

这里将会说明如何创建对话框、如何创建按钮、以及如何修改鼠标光标

 

 

 

 

 

文本区域(textarea)

 

在界面设定时很多时候都需要使用文本框,如对话框和按钮中,需要提供文字输出的地方,都会有一个文本框。

 

文本框通常的规则是:

 

 

<textarea x="x位置" y="y位置" width="宽度" height="高度" style="样式" filter="滤镜">注释</textarea>

 

样式(style) 通常的格式为 “ 字体颜色,字体大小,对齐方式,字距,行距

 

 

滤镜(filter) 通常的格式为 “ 滤镜类型,滤镜颜色

滤镜类型有: boader(描边) , glow(柔和发光) , light(发光), shadow(投影)

 

 

例子:

 

 

<textarea x="62" y="92" width="675" height="410" style="#ffffff,17,left,1,2" filter="board,#000000"/>

 

效果:

 

 

* 新添加

selectable属性

当该值为true时,文本框的内容将可以被选择。

 

 

了解文本框后即可开始设定对话文本框了。

 

 

 

 

 

对话框(DialogUI )

 

大多数情况,一个游戏只需一个对话文本框即可满足要求,因此通常我们只需设定一个系统默认对话框(UI_DIALOG)

 

 

如图所示,通常对话框只需要一个图片,一个姓名文本框,一个内容文本框即可。

 

对话框的xml形式是:

 

 

虽然这里的文本框标签命名为contentareanamearea,实质一样为textarea,可以通过设定style和filter来设定文本样式。

 

当需要将此对话框设为系统自定义对话框时,将其命名为UI_DIALOG即可。

 

 

* 新添加

sound属性

此为新添加的属性,可以填写一个声音资源的名称,定义了该属性的对话框会在每次开始输出和跳过等待时播放该音效。

 

例:

 

 

<dialog name="UI_DIALOG" img="IMG_DIALOG" sound="dialogsound">
........
</dialog>

 

 

waiticon属性:

此为新添加的属性,可以控制该对话框等待时是否出现等待光标,默认为true,需要关闭请填写false。

 

例:

 

 

<dialog name="UI_DIALOG" img="IMG_DIALOG" waiticon="false">
........
</dialog>

 

 

 

type属性:

此为新添加的属性,可以将对话框作为输入对话框使用,当值为input时,contentarea将变为可选的输入文本框,可配合输入函数scanf()使用。

 

例:

 

 

<dialog name="UI_DIALOG" img="IMG_DIALOG" type="input">
........
</dialog>

 

 

 

 

 

 

 

按钮  ( ButtonUI )

 

界面设定中很多地方都需要使用按钮,最常见的是 制作游戏进入界面 定义选项且至少需要一个系统按钮来提供作为选项、存取档、剧情回顾等界面的系统按钮

 

默认将名为 UI_BTN_OPOTION 的按钮作为选项按钮,将名为 UI_BTN_SYSTEM 的按钮作为系统界面菜单的按钮

 

按钮可以是无文本框的按钮(即图片即为按钮),也可以是有文本框的按钮(图片上方存在一个可以自定义文字的文本框),当作为系统按钮,如上面说的选项和系统菜单按钮时,必须为后者

 

 

 

如上面三个图是一个自定义按钮的素材,并已在source.xml中注册(分别是普通,鼠标滑过,按下三幅图)。

 

用作系统按钮(UI_BTN_SYSTEM)后,使用在剧情回顾界面的效果如下。

 

 

当用作选项按钮(UI_BTN_OPOTION)后的效果如下。

 

 

 

按钮的xml形式是:

 

 

↑点击图片放大

 

 

 

 

 

 

 

- 系统界面

 

这里只有三个小部分设置,系统默认字体样式鼠标光标文本框等待光标

 

 

系统默认字体样式

 

 

<text font="system" style="#000000,19"></text>

 

font为字体,可以选择的有 autosystem

 

system:读入游戏时加载一个由GAo保存在线上的字库(准圆),使用此字库的字体来显示。

 

auto:若系统安装有雅黑字体,择直接使用系统的雅黑字体,无需加载多余的字库,若没有则加载系统字库(准圆)

 

style与设置文本框(textarea)时的style格式相同,style建议只设定颜色和大小即可。

 

与文本框不同的是,这里不支持滤镜属性(filter)

 

 

设置鼠标光标

 

 

<mouse img="IMG_MOUSE" float="-3,-3" display="none" />

 

img:光标图片,默认图片的最左上角为鼠标的尖端

 

float:图片浮动,格式为 (x浮动,y浮动 )

 

display:是否使用,none(不显示)或者 show(显示)

 

 

关于浮动的说明

 

 

例如我要使用上面的图片作为鼠标光标,但当我们放大时发现,默认的图片最左上角的位置并没有对准我们需要的光标位置,如下。

 

 

此时我们需要想象,把图片往左上角移动部分像素,让位置对准光标头部。

浮动参数正是提供了这么一个向量(-3,-4)意为往左移动3像素,上移动4像素。

 

 

 

 

 

设置文本框的等待光标

 

 

<textwait img="IMG_WAIT" float="4,-4" display="show" />

 

提供文本框等待鼠标点击时的光标,同鼠标光标一样的设定格式。

 

如使用图片:

 

 

 

 

 

 

- 基本界面

 

系统将 存档、读档、剧情回顾、CG欣赏、音乐欣赏 这五个基本功能直接以内置模块的方式加入了引擎,你只需设定它们的界面与布局,然后在脚本中直接以函数方式调用即可,而不用考虑如何实现功能。

 

* 了解这部分并不是必须的,实际上大部分情况都可以直接复制粘贴官方设置好的界面代码和UI,这里主要介绍这几个界面的xml基本构成,通常你只需更换界面的背景图片即可。

 

* 当缺少 存档、读档、剧情回顾、CG欣赏、音乐欣赏 中的某个界面定义时,该界面将不会被创建,且功能将被禁用。

 

可以在界面xml标签中添加属性useable,设置值为false来实现相同的禁用效果。

 

禁用的功能(存取档,剧情回顾)在右键菜单中将变为不可选,且在脚本中使用调用代码时会被跳过。

 

 

 

 

存档、取档(使用相同的模块,不同的背景图片)

 

 

额外的,读档取档时的二次确认框设定(若存取档被禁用,该窗口将不被创建)

 

 

剧情回顾

 

 

 

CG欣赏

 

 

 

音乐欣赏