====== 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官方主题，有关自定义主题更多信息请查看[[builder:theme_cn|主题]]文档

===== 右面板 =====

=== Properties标签 ===

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

=== Custom标签 ===

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

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

=== Tween标签 ===

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

===== 工作空间workspace结构 =====

工作空间下有以下子目录

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

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


=== 更多信息 ===


  * 所有纹理的scale值为1, 如果你需要自定义纹理的scale值，可参考[[builder:texture_scale_cn|这里]]

  * 所有的asset path(s)的资源（包括子文件夹）将被加载到编辑器。

  * 在创建UI之前，你需要先正确命名你的纹理，因为在创建布局的之后修改纹理名字将不会自动更新布局。那样你就需要自己手动修改布局更新纹理名
  * 纹理是通过atlas分组的，每个atlas对应一个group，点击group名字可以展开和收起group，所以建议先把纹理打包成atlas再编辑布局文件。
  * 背景只会在编辑器里显示以提供预览，不会在真实游戏中创建


===== 从哪里开始? =====

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