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/

 

 

Learn Something That Nobody Else Has Learned Yet.

Up until now, you have primarily been learning things that are already known; things that you can find out by reading other people’s code, or books, or academic papers; things that are good to know, but not novel.

Now it is time to break free of the boundaries, and truly ascend to mastery. Now it is time to blaze a trail into territory that nobody else has ventured into yet.

Make no mistake; this is something you won’t want to tackle until well after your “tenth year” of experience, mainly because until then you are far more likely to just be reinventing a wheel than actually doing original, novel research. But once you have a good grasp on the field, it isn’t exactly difficult to find the sweeping frontiers of untapped knowledge that await computer science.

Chances are, this will take you another ten years, if not forever. Don’t give up; remember, this should still be fun. If at any point in time you stop enjoying it, go do something else. Life is far too short to waste time trying to do something you don’t want to do anymore.

Not everyone will succeed here, but everyone who makes an attempt will benefit from the effort. Don’t let the odds get you down. Even if you never win the Turing Award, your continued growth as a programmer and your journey towards ultimate mastery depends on you constantly stretching – and, to that end, tackling hard, unsolved problems is the best way to stretch.

Truth And Beauty

Once a man who was very powerful and strongly built but whose character was very doubtful fell in love with a beautiful girl. The girl was not only beautiful in appearance but  also saintly in character, and as such she did not like the man’s advances. The man, how ever insistent because of his lustful desires, and therefore the girl requested him to wait for seven days after that when he could meet her. The man agreed, and with high expectations he began waiting for the appointed time.

The saintly girl, however, in order to manifest the real beauty of absolute truth, adopted a method very instructive.She took very strong doses of laxatives and purgatives, and for seven days she continually passed loose stool and vomited all that she ate. Moreover, she stored all the loose stool and vomit in suitable pots. As a result of the purgatives the so-called beautiful girl became lean and thin like skeleton, her complexion turned blackish, and her beautiful eyes sank into the sockets of her skull. Thus at the appointed hour she waited anxiously to receive the eager man.

The man appeared on the scene well dressed and well-behaved and asked the ugly girl he found waiting there about the beautiful girl he was to meet. The man could not recognize the girl he saw as the same beautiful girl for whom he was asking; indeed, although she repeatedly asserted her identity, because of her pitiable condition he was unable to recognize her.

At last the girl told the powerful man that she had separated the ingredients of beauty and stored them in pots. She also told him that he could enjoy those juices of beauty. When the mundane poetic man asked to see these juices of beauty, he was directed to the store of loose stool and liquid vomit, which were emanating an unbearable bad smell. Thus the whole story of the beauty-liquid was disclosed to him. Finally, by the grace of the saintly girl, the man of low character was able to distinguish between the shadow and the substance, and thus he came to his senses.

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.

Flash Games Optimization Techniques by Zynga

http://adobe.ly/16KZlYf
This is is the video I came across few minutes ago. It is an interesting presentation of Zynga’s Ben Cooley on optimization techniques and it explained different optimization techniques very neatly. I already knew some of the techniques he mentioned in the video and I have been implementing them in my games and some of them I knew it now and I will implement them in my next projects!

CreateJs Bitmap Text

createjs is a great library for creating games in HTML5. It’s flash like syntax makes it more easier for flash developers to create HTML5 games.

One of the ways to add text to createjs games is using createjs textfield class. The built in textfield class depends on webfont which behaves differently across browsers and does not look smooth.

Another approach is using bitmap fonts but there is no built-in support for bitmap fonts in createjs.  There is one great article for creating bitmap fonts in createjs. It explained how to create a bitmap text field in createjs. But the disadvantage with this method is that all the letters need to be of fixed size and there is no support for kerning. It means we can not follow this approach for creating bitmap fonts with regular font like Arial.

So I ported bitmap text class in starling to createjs.

Here is the git repository for the source and the example.

The demo can be found here.

Features:

• Multiline text
• Horizontal and Vertical alignments
• Kerning
• Change color of the text using setColor method [Updated!]

If you found any bugs or want to leave some feedback please leave a comment!

Hello World!

Hi,

I am Vikram Kumar, and I am a game developer. I develop games with flash and HTML 5.
Being a flash developer for the past 5 years and HTML5 game development, I would like to
share my experiences and leanings  so that they could be helpful to someone.

Please stay tuned for the tutorials and the tips.