Starling Builder is an UI editor for Starling Framework. It’s built on top of Starling and Feathers UI framework. Starling is a graphics/game engine that renders all the visible element to the screen. Feathers is an UI library with more complex UI components on top of Starling framework. There are different UI components from Starling, Feathers or Starling Builder. The package name before denote where it belongs to. Starling components start with starling.*, Feathers components start with feathers.* and Starling Builder components start with starlingbuilder.* .
Image can display a texture. Starting from Starling 2.x, it can also support 9 slice scaling and tiling using scale9Grid and tileGrid properties. (For Starling 1.x, you need to use Scale3Image, Scale9Image or TiledImage instead) To add an image, switch to asset tab on the left panel, select the drop down to starling.display.Image and drag an asset to the canvas.
TextField can display text with different formats. You can specify the font name, size and color by editing its format property. To add a TextField, go to text tab on the left panel and drag a font to the canvas.
Button is an interactive component with a custom Image and a TextField. it can also support scale9Grid from Image and format from TextField. To add a button, switch to asset tab on the left panel, select the drop down to starling.display.Button and drag an asset to the canvas.
Container can group different components together, using it you can easily set properties such as position, alpha to all the children components.
Sprite is a Starling component. It’s the based class of any Starling display object container. To add a Sprite, switch to common tab on the left panel and drag the starling.display.Sprite item to the canvas.
LayoutGroup is a Feathers UI component, it provides more advanced features such as Horizontal/Vertical/Anchor layout. To add a LayoutGroup, switch to common tab on the left panel and drag the feathers.controls.LayoutGroup item to the canvas.
Feathers components are components that can be skinned in a theme. It’s useful for creating more consistent user interface. You customize the style in a theme and select the style from the styleName property of the component. It also has more advanced user interface like Tab and List. To add a Feathers UI component, switch to feathers tab on the left panel, drag the component you want to add to the canvas.
The demo workspace includes an official theme of Feathers UI library. For more information of how to customize a theme please see this document.
Properties tab provides property control for the selected UI components. For more information of what a property means, click on the question mark button on the right of the class name to open the documentation link.
Custom tab provides optional custom control for Starling Builder.
| name | description |
|---|---|
| customParams | read-only data contains all the custom properties for debugging purposes |
| constructorParams | read-only data for constructor for debugging purposes |
| customComponentClass | specify a custom class to create in the game. See this document more info |
| forEditor | used to put place holder art that only be created in the editor by not in the game |
| localizeKey | specify key for localization. see this document for more info |
| tag | used for finding assets by tag in the project |
Tween tab provides basic tween control that you can play test in the editor. See this document for more info.
There are some sub folders serve as different purposes in the workspace folder:
| path | description | default folder |
|---|---|---|
| asset path(s) | where textures/fonts to be loaded | textures |
| library path | where dynamic loaded libs to be loaded | libs |
| localization path | where localization files to be loaded | localization |
| background path | where background images to be loaded | backgrounds |
You can edit these properties in the editor by click on menu → workspace → workspace setting. Asset path(s) support multiple folders. Paths are saved using relative path to workspace folder. On Windows you can only add paths from the same logical drive of you workspace folder.
You should definitely start with the demo workspace. It has everything you need to play with. Once you figure out how it works, you can create your own workspace for your project to work on. You can also check out the video tutorial in http://starlingbuilder.github.io/tutorial