Use custom feathers theme with Starling Builder

If you want your user interface to use a theme, there is a problem.

The UI uses a theme, Starling Builder itself runs with another theme. without property handling they will collide into each other.

Unfortunately, Feathers is not designed to support 2 themes at the same time.Our workaround is to compile a modified version of the UI theme to a swf file and load it as a runtime library.

Here’s how it works

  • This is an sample project that compiled a modified version of MetalMobileTheme into a swf.
  • You can replace TestGameTheme with your own theme, but it needs to also extend from UIEditorTheme
  • Open change the TestGameTheme to your theme
  • Build the project to make the swf
  • Put the swf inside YOUR_WORKSPACE/libs and restart the editor
  • Copy your theme to your game, change BaseTestGameMobileTheme extends UIEditorTheme to BaseTestGameMobileTheme extends StyleNameFunctionTheme, remove the themeMediator param from the constructor, and then you will have the same theme in the game.

Here’s a working example where the UI editor and the canvas are running with different themes

Tips for Feathers 3.x themes

In Feathers 3.x, mobile themes have one major change: The theme texture is loaded with a default scale of 2 instead of 1. While this change works with ScreenDensityScaleFactoryManager, it doesn’t play nice with Starling Builder multiple resolution approach. To solve this problem you have 2 choices:

  1. Don't use ScreenDensityScaleFactoryManager. However you will need to change the feathers theme in your app default scale to 1 instead of 2. This will make the themes work just like those in Feathers 2.x, which is already implemented in the demo project as an example. You can check out how to alter MetalMobileTheme from here.
  2. Don't use Starling Builder multiple resolution approach, use ScreenDensityScaleFactoryManager instead. This way you don’t need to change the scale of the theme in your app, but you will need to build a different theme extension for your editor, or simply replace the default EmbeddedTheme.swf with this one. For more information check out the Fee Splitter app
optiontheme extension scaletheme scale
Starling Builder multiple resolution approach11

It’s your decision to choose which one to use. The 1st approach scales the stage based on design and device resolution, which is best for games independent to physical size and resolution. The 2nd approach scales the stage based on screen density, which is best for apps dependent on device DPI.

  builder/theme.txt · Last modified: 2017/02/05 07:29 by johannh
Powered by DokuWiki