Starling Builder editor’s guide

Terminology

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.* .

Basic components

starling.display.Image

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.

starling.text.TextField

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.

starling.display.Button

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

Container can group different components together, using it you can easily set properties such as position, alpha to all the children components.

starling.display.Sprite

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.

feathers.controls.LayoutGroup

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 UI components

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.

Right panel

Properties tab

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

Custom tab provides optional custom control for Starling Builder.

namedescription
customParamsread-only data contains all the custom properties for debugging purposes
constructorParamsread-only data for constructor for debugging purposes
customComponentClassspecify a custom class to create in the game. See this document more info
forEditorused to put place holder art that only be created in the editor by not in the game
localizeKeyspecify key for localization. see this document for more info
tagused for finding assets by tag in the project

Tween tab

Tween tab provides basic tween control that you can play test in the editor. See this document for more info.

Workspace structure

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 loadedtextures
library pathwhere dynamic loaded libs to be loadedlibs
localization pathwhere localization files to be loadedlocalization
background pathwhere background images to be loadedbackgrounds

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.

More Information

  • All textures scale value will default to 1, if you want to customize scale value for specific textures, check this out
  • All the files in asset path(s) including sub folders will be loaded into the editor.
  • You should name your textures correctly before creating the UI, since changing the texture names after creating the layout files won’t update the layout files. You are responsible for updating the dependency yourself.
  • Textures are grouped by atlases. Each atlas corresponds to a group in the asset group list. You can click on the group name to expand or collapse it. So it’s advisable to pack the textures into atlases before editing layouts
  • Background is only seen in the editor, it will be ignored in the game.

Where should I get started?

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

  builder/guide.txt · Last modified: 2017/03/20 01:51 by johannh
 
Powered by DokuWiki