Skip to content
This repository has been archived by the owner on Dec 11, 2020. It is now read-only.

Resource management overview

Jump to bottom
SamYStudiO edited this page Mar 19, 2017 · 10 revisions

Flair greatly improves resource management using an Android like approach.

Common resources are located in these folders :

  • src/main/assets contains any files that will be packaged into application but you'll need to load manually at runtime. Any files in this folder wil not be load into memory at startup in contrary to files in resources (res) folder.
  • src/main/fonts contains all font files.
  • src/main/res contains all resources files that will be loaded into memory at startup with Starling AssetManager, this works pretty much the same as Android.

You may add same directories from each platform/variant folder to add specific resources, for example :

  • src/ios/res
  • src/debug/fonts
  • src/android/assets
  • ...

ASSETS

Files under assets folder are packaged into your app but need to be loaded manually using Loader, URLLoader or FileStream classes. Folder structure is the same when packaged !

// load image under assets folder
var loader : Loader = new Loader();
var request : URLRequest = new URLRequest( "assets/image.png" );
loader.load( request );

// load image under assets subfolder
var loader : Loader = new Loader();
var request : URLRequest = new URLRequest( "assets/subfolder/image.png" );
loader.load( request );

FONTS

Adding fonts in this folder will auto generate Fonts.as under src/main/generated folder using generated/generateFontsClass task. This means once you add a font here you'll be able to access it through your code. For example adding Arial.ttf will generate :

public static const ARIAL : String = "Arial";
[Embed(source="/Arial.ttf",fontFamily="Arial",fontWeight="normal",fontStyle="normal",mimeType="application/x-font",embedAsCFF="false")]
private static var ARIAL_CLASS : Class;

You may then execute generated/generateFontsClass task and get back to your code :

var tf : TextFormat = new TextFormat( Fonts.ARIAL );

You may set explicitly Bold, Italic, Cff in your font file name to configure it properly, for example adding ArialBold.ttf will generate :

public static const ARIAL : String = "Arial";
[Embed(source="/ArialBold.ttf",fontFamily="Arial",fontWeight="bold",fontStyle="normal",mimeType="application/x-font",embedAsCFF="false")]
private static var ARIAL_BOLD_CLASS : Class;

Note fontweight is now bold.

Adding ArialBoldItalicCff.ttf :

public static const ARIAL : String = "Arial";
[Embed(source="/ArialBoldItalicCff.ttf",fontFamily="Arial",fontWeight="bold",fontStyle="italic",mimeType="application/x-font",embedAsCFF="true")]
private static var ARIAL_BOLD_ITALIC_CFF_CLASS : Class;

For better generation always use CamelCase with your font name :

  • ArialBold > ok
  • VerdanaBoldItalic > ok
  • VerdanaItalicBold > ok
  • arialitaliccff > avoid this
  • verdanabold >avoid this

RESOURCES

Reading Providing Resources from Android documentation is a great start to understand how Flair works. Flair works pretty much the same but with some restrictions. Resource folders supported are:

  • drawable png or jpg only (does not support .9.png as Android since Starling already support scale 9 images)
  • raw
  • values Flair supports:
    • bool
    • color
    • dimen (supports dp, px, mm and in)
    • integer
    • string
  • xml

Qualifiers supported are:

  • Language and region (en, fr, en-rUS, fr-rCA, ...)
  • smallestWidth (sw320dp , sw720dp, ...)
  • Screen pixel density (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi, tvdpi)

As when adding fonts once you add a resource file it will auto generate src/main/generated/R.as using generated/generateResourcesClass task so you get quick access to that resource. For example adding a image image.png in a drawable folder will generate in your R.as class:

public const image : Texture = getDrawable( "image" );

After executing generated/generateFontsClass task, in your code you may then do as following:

var image : Image = new Image( R.drawable.image );

Examples for each resource type:

var sound : SoundChannel = R.sound.sound_id; // (sound file from raw folder)
var object : Object = R.object.object_id; // (json file from raw folder)
var bytesArray : BytesArray = R.raw.raw_id; // (any other file from raw folder)
var xml : XML = R.xml.xml_id; // (xml file from xml folder)
var bool : Boolean = R.bool.bool_id; // (bool value from a xml inside values folder)
var color : uint = R.color.color_id;  // (color value from a xml inside values folder)
var dimen : Number = R.dimen.dimen_id;  // (dimen value from a xml inside values folder)
var integer : int = R.integer.integer_id;  // (integer value from a xml inside values folder)
var string : String = R.string.string_id;  // (string value from a xml inside values folder)

Note accessing resource in Flair give you direct typed reference to that resource, this is different from Android that gives you an id as reference.

AUTO GENERATE FONTS AND RESOURCES CLASSES

If you don't want to run generateFontsClass and generateResourcesClass each time you add/edit files in your fonts and res folders you may use gradle continuous build. From your terminal run:

gradlew -t generateFontsClass generateResourcesClass

This will add a watcher for fonts and res folders so each time changes are detected these tasks will be executed automatically.

WARNING

If you add a product flavor or a build type after running continuous build, you'll need to stop it and restart it so these new variant folders are under watch as well.

Clone this wiki locally