November, 2013

Nov 13

OpenFL multidensity screens

The multiscreen assets management could be a pain, if not well handled.

Here is some of my guidelines, for creating an universal app who will work on any OS / device / platform, and who will look great.

We gonna focus on Android & iOs, but all those tips are universal and will work on any other platform.

A bit of background:

For more background on dpi / ppi / screen buckets / density you should read :

- That article:
It’s android related, but it’s quite universal and teach you the essentials things you need to know.

- And this one:
The article is not updated for xxhdpi & ldpi, but gives you basis knowledge on how to scale yours assets for each density.


Assets management:

For iOS it’s quite easy you have only two assets size to handle ( retina and non-retina )

For Android, if you target a truly universal app you need 5 assets sizes:
- xxhdpi ( @3.0x )
- xhdpi ( @2.0x )
- hdpi ( @1.5x )
- mdpi ( @1.0x )
- ldpi ( @0.75x )
You’ve probably notice than the mdpi & xhdpi are the same density than the iOS retina / non-retina display so we gonna use the same assets for both os.

For iOS:

Like i’ve said early, it’s quite easy all you have to do is to know if your device is retina or not.
To do so, you can use the “dpiScale” property on the Stage class ( if dpiScale == 2 then it’s retina ).

For Android:

All you need to know is which screenbucket you device uses.
There is no NME / OpenFL method to do so, i the use “getScreen_bucket” method of my HypSystem native extension.┬áIt return a string ( xhdpi , hdpi… )

Ok and now ?

Now than you know which screen bucket you must use, the easier way to do is to extends the “openfl.Assets” class.
By example a method to retrieve a bitmapdata:

public function getBitmapData( sName : String , useCache:Bool = true):BitmapData{
return Assets.getBitmapData( PATH + sName , useCache );