I am 99% done with my first simple Starling app and wanted to take a moment to share with everyone my approach as well as get any feedback from those more experienced.
My environment is:
Adobe Air 15
Citrus Engine with Starling
as3commons-collections (data structures)
as3corelib (to encode PNG)
The first thing I did was to create a project structure that would let me execute the various Adobe Air targets.
The "Shared" module contains the application code and resources. The other modules depend on "Shared" and contain their environment specific details. The "Screenshots" module is special in that it automatically runs through the app collecting screenshots for use on the App or Play Store.
[!(http://intref.com/ll/starlingForum/Project Modules.png)](http://intref.com/ll/starlingForum/Project Modules.png)
There are many Run configurations that target one of the target modules along with a target device resolution.
Here you can see the Android-specific icons, and the main CitrusEngine subclass that is run.
It took me some trial and error, but I finally figured out how the resources should be added to the package. iOS does the same thing.
Lessons and Experiences
Width and Height
Through testing I decided to use stage.fullScreenWidth/fullScreenHeight instead of stage.stageWidth/stageHeight because it was more consistent. I think Android presents the stageHeight minus the Android Status Bar initially. I also listen for the InvokeEvent.INVOKE event before I do anything (except in SWF). If I attempt to read stage.stageWidth/stageHeight before this, the value is a default value of 500x375.
For the "Desktop" module, I used to hard-code the resolution in the application descriptor, but now pass-in the desired width and height as program arguments and explicit set the NativeApplication.nativeApplication.activeWindow's width and height. This lets me create many Desktop Run configurations with different width and heights, instead of creating many application descriptors.
For "SWF" and "Screenshots" modules, I hardcode the width and height in the SWF annotation on the primary class:
[SWF(width="480", height="720", frameRate="30", backgroundColor="#0000AA")]
I don't like the multi-resolution support recommendation to create fixed scale versions of textures because there are so many different resolutions and aspect ratios. I want my apps to be full screen, as sharp as possible, and not require too much maintenance overhead.
My first app is very simple so I decided to avoid the complexity by creating high resolution textures that can be scaled by each device. This can sometimes result in scaling artifacts, but satisfied my needs. I plan on tackling this problem better in the future (perhaps through vector graphics that get rasterized per device).
ADL Resource Path
When packaging my app, the IDEA IDE has a feature to add files/folders into the package; but when running the ADL there wasn't an option for this so I had to resort to creating ANT scripts to copy the /Shared/media directory to the "root directory" parameter provided to ADL by IDEA.
I would love to have a better solution for this, because I have two options: either copy the media directory every time I run the ADL or trigger this ANT script manually every time I clean my project or modify any media.
iOS displays a launch image before starting the app. Creating a seamless transition between that iOS launch image and my app's first screen didn't work seamlessly within Starling. Instead I had to immediately create non-Starling Bitmaps and add them to the non-Starling stage.
Unfortunately, trying to use the Starling.current.stage.drawToBitmapData() method to take a screenshot of the splash screen didn't work because the images weren't within Starling. Therefore I also created a method to transfer the splash screen to a Starling sprite. This also let me use the Citrus futureState transition to create a nice state transition-- but ultimately took too long to transfer the state to Starling on slower devices, so I removed the transition. I kept the method to transfer the images to Starling because of my Screenshots module.
The splash image itself is a square 1:1 2048x2048 pixel JPEG that gets scaled to the device while maintaining its aspect ratio-- meaning that the sides or the top&bottom get clipped, while the logo near the center is shown.
This is the basic template with my logo and art removed. The outer gray area is expected to be clipped depending on the aspect ratio, while the middle area should always be visible.
For iOS I took screenshots of the splash screen as it was rendered on each iOS device and saved that back into the iOS Launch Images to create a seamless transition.
I used Littera to create my font. It's free and easy to use. So big thanks to them.
I used the Starling AssetManager class, but found it difficult to debug when it failed to load "paired" files (like font maps and texture atlases). The enqueue method assumes the filename is the name to use as the reference, and that the "paired" files share the same name as well. I attempted to use enqueueWithName, but had trouble pairing up the "paired" files that way.
At the time I was trying to have different DPI versions of a font, "Arial50.fnt/png" "Arial100.fnt/png", then only load one under the name "Arial", so the rest of the code could just use "Arial". Ran into difficulty and decided to create a single high resolution font anyway.
There is too much "magic" happening within the enqueue method, that made it difficult to follow from a simple API perspective.
This is my attempt to give back something to the community. These are just some of the things that I experienced and wanted to share. I'm happy to entertain questions. Feedback is also appreciated, as I know I have much to learn.
Thanks to those that make Starling, and Adobe Air for that matter, a competitive choice for low-cost indie development.