Starling builder 编辑器指南

术语

Starling Builder是基于Starling框架的用户界面编辑器,它建立在Starling/Feathers UI框架之上。Starling是基于Adobe Stage3D的2D渲染/游戏引擎,它负责渲染所有可视化元素到屏幕。Feathers是基于Starling的用户界面库,它提供更多高级的用户界面组件。编辑器支持不同的用户界面组件,你可以从包名知道它们的来源。Starling组件的包名是starling.*,feathers组件的包名是feathers.*,Starling Builder组件的包名是starlingbuilder.*。

基础组件

starling.display.Image

Image是显示纹理的Starling组件。 Starling 2.x之后,Image可以通过scale9Grid属性支持九宫格缩放和tiledGrid(如果你使用Starling 1.x版本,你需要使用Scale3Image,Scale9Image或者TiledImage)添加Image的方法:选择左面板的asset标签,从下拉菜单中选择starling.display.Image,然后拖动一张纹理到画布上。

starling.text.TextField

TextField是显示文本的Starling组件。你可以通过formats属性指定字体,大小和颜色。添加TextField的方法:选择左面板的text标签,拖动一种字体到画布上。

starling.display.Button

Button是包含Image和TextField的按钮组件。它同时支持Image的scale9Grid属性和TextField的format属性。添加按钮的方法:选择左面板的asset标签,从下拉菜单中选择starling.display.Button,然后拖动一张纹理到画布上。

容器

容器用于给不同的组件分组,利用容器你可以很方便的给容器内的所有组件设置位置,透明度等属性。

starling.display.Sprite

Sprite是Starling的容器组件。它是Starling显示对象容器的基础类。添加Sprite的方法:选择左面板的common标签,拖动starling.display.Sprite到画布上。

feathers.controls.LayoutGroup

LayoutGroup是Feathers的容器组件。它提供更多高级布局功能,例如Horizontal/Vertical/Anchor layout。添加LayoutGroup的方法:选择左面板的common标签,拖动feathers.controls.LayoutGroup到画布上。

Feathers组件

Feathers组件可以根据主题选择皮肤。它有利于创建风格一致的用户界面。你在主题里定义皮肤,然后从组件的styleName属性选择皮肤。Feathers还支持更多高级用户界面,例如Tab和List。添加Feathers组件的方法:选择左面板的feathers标签,拖动组件到画布上。

范例工作空间demo workspace包含了一套Feathers UI官方主题,有关自定义主题更多信息请查看主题文档

右面板

Properties标签

Properties标签提供对选择组件的属性控制。如果想知道属性的具体含义,点击属性名右面的问号可以快速查看文档。

Custom标签

Custom标签提供Starling Builder定制的属性控制

名字描述
customParams(只读)包含所有定制属性数据的容器,主要用于调试
constructorParams(只读)包含构造函数数据的容器,主要用于调试
customComponentClass指定一个从游戏中创建的自定义类,可参考这里
forEditor用于只在编辑器中出现不在游戏中出现的占位元素
localizeKey用于本地化的键值,可参考这里
tag用于方便在项目中查找的标记

Tween标签

Tween标签提供基本的补间控制,你可以直接在编辑器里面看到效果。更多信息可参考这里

工作空间workspace结构

工作空间下有以下子目录

路径描述默认目录
asset path(s)纹理/字体/数据目录textures
library path动态加载库目录libs
localization path本地化文件目录localization
background path背景目录backgrounds

你可以在编辑器里通过点击菜单→workspace→workspace setting修改这些路径。 Asset path(s)支持多个目录。路径保存为工作空间相对路径。在Windows上只能添加与工作空间同一盘符下的目录。

更多信息

  • 所有纹理的scale值为1, 如果你需要自定义纹理的scale值,可参考这里
  • 所有的asset path(s)的资源(包括子文件夹)将被加载到编辑器。
  • 在创建UI之前,你需要先正确命名你的纹理,因为在创建布局的之后修改纹理名字将不会自动更新布局。那样你就需要自己手动修改布局更新纹理名
  • 纹理是通过atlas分组的,每个atlas对应一个group,点击group名字可以展开和收起group,所以建议先把纹理打包成atlas再编辑布局文件。
  • 背景只会在编辑器里显示以提供预览,不会在真实游戏中创建

从哪里开始?

你应该从范例工作空间demo workspace开始,它演示了编辑器大部分的功能。当你搞清楚它的工作原理后,你就可以为自己的项目建立工作空间。你还可以从这里查看视频教程 http://starlingbuilder.github.io/tutorial

  builder/guide_cn.txt · Last modified: 2017/03/20 02:53 by johannh
 
Powered by DokuWiki