Our new app Playbox is released.

We have released an app called Playbox on Google Play few days ago.

This app let your children play songs on your phone or tablet. A player that is both child and parent friendly. A song player that has a child mode and a parent mode.

Playbox – a fun kids audio player where you control the playlist, and your kids enjoy the songs!

In parent mode use the auto song finder to make a playlist of songs for your children. Then switch the app to child mode and let your kids play the songs in the children’s audio player.

Your children have fun playing music and audio at home or when you’re travelling. You retain parental control over what they play and when.

Parent mode:
★ Auto-find songs from your device – a hassle free way to find music on your phone or tablet
★ Auto-filter children’s songs and create a playlist in a couple of taps
★ Create song lists for your children that you control

The kids music player:
★ We’ve made a child friendly music player with simple controls perfect for children (and friendly to your ears and sanity – no repeat and rewind buttons!).
★ A fun player for children’s music featuring an animated playlist
★ Lots of fun characters to enjoy and identify with each child song

We developed this app using Starling, Feathers UI framework and Starling fullscreen extension. We developed an ANE that returns all the music in the device. It is available only on Android for now and we will release iOS version soon.

Links:

https://play.google.com/store/apps/details?id=air.com.believecreative.playbox

http://playboxplayer.com/

 

 

True fullscreen for Android games developed in AS3

I came across this awesome extension, to enable true full screen mode for android applications developed in AS3. You can find the extension here.

Sample code:

import com.mesmotronic.ane.AndroidFullScreen;
AndroidFullScreen.isSupported; // Is this ANE supported?
AndroidFullScreen.isImmersiveModeSupported; // Is immersive mode supported?
AndroidFullScreen.immersiveWidth; // The width of the screen in immersive mode
AndroidFullScreen.immersiveHeight; // The height of the screen in immersive mode

AndroidFullScreen.hideSystemUI(); // Hide system UI until user interacts
AndroidFullScreen.showSystemUI(); // Show system UI
AndroidFullScreen.showUnderSystemUI(); // Extend app underneath system UI (Android 4.4+)
AndroidFullScreen.immersiveMode(); // Hide system UI and keep it hidden (4.4+)
AndroidFullScreen.immersiveMode(false); // Hide system UI until user swipes from top (4.4+)

Note: You need to set ‘fullscreen’ to  false in the application descriptor to prevent clipping of flash graphics in place of system UI.

Use immersiveWidth and immersiveHeight property of the extension to get the width and height of the screen after UI is hidden.

If you are using Starling fullscreen extension, you have to pass the immersiveWidth, immersiveHeight as the values for width and height.

var mStarling:Starling = FullScreenExtension.createStarling(Game, stage, AndroidFullscreen.immersiveWidth, AndroidFullscreen.immersiveHeight, HAlign.LEFT, VAlign.TOP);

Starling draw calls explained!

One of the key factors for the performance in mobile apps is to keep the number of draw calls as less as possible. A draw call is considered when starling needs to switch the texture to draw a particular Image. If you are drawing everything from a single atlas, it will be considered as a single draw call. So it’s always best to use atlases rather than normal images.

For small applications or games, a single atlas will be sufficient for most cases. If you need to use multiple texture atlases, it is important to decide which texture to place in which atlas to reduce number of draw calls. Starling uses painting algorithm to draw screen on each frame. It draws element from the last element to the top most element in the display list. So while performing this operation, we need to create the atlases so that there will be less number of atlas switches will be needed.

I will explain this with a situation that I have faced last week. I have been working on a music player using Feathers and Starling. In that I needed to display songs list in a scroll container. I have album arts for all the songs in an atlas. My initial idea was to store all the album arts in an atlas and the other UI assets in another atlas. The song list has several items, each item has an album art and a background image with some text. The album art comes from one atlas, the background image comes from another atlas and the text is bitmap text loaded from image. When I tested the application, I realized that the draw calls are around 270. That is too much and the app crashed in the device.

What actually happened was Starling had to switch the atlases each time when it was to draw background, text and album art. This happened for all the items. So 4 calls per item and there are around 60 items, resulted in 240 draw calls in total . So I moved the background and another assets to album arts atlas, which reduced the draw calls to 110. But that is also a huge number. The problem now is with the text, which is being loaded from a image. I added this image too to the atlas. But the draw calls remained same. I did a bit of searching and found that we need to set the “batchable” property of textfield to true.
So this did the trick.

textfield.batchable = true;

After this, the draw calls were reduced to 11 and app was running without any problems on the device.

Conclusion: So it is always best to keep the assets that are added to a single sprite or added to a single screen into one atlas to keep the draw calls low. Hope this helps others facing similar situation.