Starling Builder是基于Starling的开源用户界面编辑器
它建立在Starling/Feathers UI框架之上. 你可以在Starling Builder编辑你的用户界面,然后导出成JSON的布局文件,最后直接在游戏中创建starling显示对象。它提供了一个通过所见即所得的方式快速创建你的游戏界面。
Starling Builder分两部分:引擎和编辑器。引擎模块负责将布局文件转换成显示对象。游戏和编辑器依赖于它。编辑器是一个创建UI布局的独立程序。
Starling Builder支持以下特性:
当你第一次编辑器运行,你需要选择一个工作区。默认情况下,编辑器将从工作区的textures和fonts文件夹中加载所有资源。你可以把一些预定义的swf运行时库放在libs文件夹。(更多信息) 选择工作区后,如果这些文件夹不存在,编辑器将为你创建空的文件夹。
你可以从http://starlingbuilder.github.io/download.html下载最新的编辑器安装文件(starling-builder.air)和演示工作空间(demo_workspace.zip)。编辑器有两个版本(Starling 1.x和Starling 2.x),你需要确保下载的版本和项目使用的Starling版本一致。
如果要运行演示,你可以将其设置为你的工作区文件夹。演示布局文件位于layout 文件夹,你可以把布局文件保存在任意位置。
当你完成编辑一个布局文件,您可以点击测试按钮来测试ui。您测试的ui是一个根据布局文件重新创建的显示对象列表。你可以在编辑模式和游戏模式下测试它,两种模式的运行效果可能会根据你的设置略显不同。(更多信息)
为了在游戏中使用Starling Builder,你只需要复制引擎代码(starlingbuilder.engine.*) 资产和布局文件到你的游戏里。
建立一个UIBuilder实例,在构造函数里传进AssetMediator。 (AssetMediator是一个实现了IAssetMediator接口的类,它定义了所有UIBuilder需要从游戏里获取的接口,你可以使用默认的DefaultAssetMediator或者扩展它)。
然后,调用UIBuilder.create方法读取布局文件。这个方法会为你生成Starling显示对象,就这么简单!
你可以通过getChildByName获取你想要的用户界面元素并作相应改变。
uiBuilder = new UIBuilder(new DefaultAssetMediator(assetManager)); ... var data:Object = JSON.parse(new EmbeddedLayouts.mail_popup()); var sprite:Sprite = uiBuilder.create(data) as Sprite; addChild(sprite);
你还可以在调用create方法时传入可选的binder对象, 这样布局文件里所有以下划线开头的UI组件将会自动绑定到binder对象的同名属性上。 这样你就可以移除所有类似这样获取引用的代码 _okButton = _root.getChildByName(“_okButton”) as Button;
public class MailPopup extends Sprite { //auto-bind variables public var _root:Sprite; public var _okButton:Button; public function ExamplePopup() { var data:Object = JSON.parse(new EmbeddedLayouts.mail_popup()); addChild(uiBuilder.create(data, true, this)); } }
因为用户界面是动态生成的,你需要确保用户界面类链接进你们的工程。如果没有,你需要通过如下手段手动链接它们。
public static const linkers:Array = [Button, LayoutGroup];
这里是一个示范客户端用例的工程demo。