Dependency Injection - Simplest tutorial ever!

Posted by Rajavanya Subramaniyan Comments

I have been hearing about Dependency Injection often. So I googled and found this very useful post by James Shore. The article begins with the below excerpt.

When I first heard about dependency injection, I thought, "Dependendiwhatsit?" and promptly forgot about it. When I finally took the time to figure out what people were talking about, I laughed. "That'sall it is?"
"Dependency Injection" is a 25-dollar term for a 5-cent concept. That's not to say that it's a bad term... and it's a good tool. But the top articles on Google focus on bells and whistles at the expense of the basic concept. I figured I should say something, well, simpler.

Read the rest of the article here

Storing and retrieving AS3 'Class' in SharedObjects

Posted by Rajavanya Subramaniyan Comments
I recently wanted to store and retrieve AS3 Classes in SharedObjects. This could be particularly useful when dealing with an embedded resource. The key functions which help you achieve this are getQualifiedClassName getDefinitionByName


Labels:

Bejeweled, Candy crush like Match-3 game clone source code jam

Posted by Rajavanya Subramaniyan Comments
Today I had to make an assignment for this company I had applied for. After passing round 1, the second round was an assignment. The task was to make a clone of Bejeweled which auto-plays itself, until no more matches can be made.

The game can be stopped using a button or when no more matches are available. When it is stopped either way the user can click on any 3 gems to convert it to a wildcard gem. So the game can be played forever without any end.

The whole thing took about 5 hours, with about 40 mins break in between and few other miniature breaks. I have always wanted to participate in game jams and make a time lapse video, so I took this opportunity and made one.

Also I am giving away the source code on Github. It is made with Starling framework using AS3, so it should be portable to iOS, Android, Mac, Windows and Web without any hassles.

Screenshot




Play online
Click here to play the game online (hosted on my Dropbox)
https://dl.dropboxusercontent.com/u/1389278/Assignment/bin-debug/AutoGems.html


Source code
The source code is available on my Github. It has a 5 x 5 grid, but position and dimensions of the grid and dimensions of the gems can be changed easily as I have used const variables at the needed places.

https://github.com/quakeboy/Bejeweled-Clone


Time-lapse Video
Check out the time-lapse video below to see how I coded the whole thing



References
How to make time-lapse video
How to install ffmpeg on Mountain Lion

What are the best fonts for programming ?

Posted by Rajavanya Subramaniyan Comments
Good page with example and screenshots. I am about to try Ubuntu Mono.

http://www.slant.co/topics/67/~what-are-the-best-programming-fonts

Labels:

Testing your Flash AS3 games simulating slow internet connection

Posted by Rajavanya Subramaniyan Comments
Flash IDE used to have an option where you can test your flash movie with different kinds of modem speeds. It was very useful to see how loading external resources worked, for testing some funky pre-loaders I made back in those days.

Today I had to test my AS3 game which I coded with Flash builder 4.6. Finally after some work managed to test the preloader I created based on this article.

Here are the steps I followed (Works only for Windows, tested with Chrome)

1. You need a web server. I didn't want to download and install anything huge. So search for a portable as small as possible web server and found something called MicroApache.

= Download it from here = (click File > Download after the page loads)
Then run it by clicking on go.bat after extracting it somewhere, anywhere.
Test it by typing http://localhost:8800

If that link gets taken down in the future you have other alternatives
http://httpd.apache.org/
http://www.aprelium.com/downloads/
http://www.brswebweaver.com/

2. Once you have a working webserver, put your bin-debug or bin-release folder where it seeks the contents. In the MicroApache, it was a sub-folder called "www"

3. Next download Fiddler2. Launch it. Go to Rules > Performance > Simulate Modem Speeds

4. Now open the following link in your browser
http://<yourmachinename>:8800/bin-release/<yourgamehtmlfilename>.html

You have to use the machine name, not the IP address or localhost for it to work.
Let me know if there are any questions.
Labels:

Porting my AS3 game (engine) to Starling

Posted by Rajavanya Subramaniyan Comments
I started working on my first Indie game really long ago. Probably even before Stage3d was announced. But my day job kept me busy and the development happened only on and off. Here are a few details about it

  • - Has a resolution of 720 x 480 (3:2 aspect ratio, had old iPhone screens in mind)
  • - Not based on Blitting like Flixel does. I used the display list.
  • - A lot of procedural artwork with AS3 filters, but with cacheAsBitmap enabled.
  • - Heavy usage of  'Graphics' class, to create the elements via code.
  • - Also has usual PNG frame animated graphics.
Having worked on Robokill for the iOS, I got to read a lot of the original AS3 code. But little did I realize that even though that game had a resolution of 800 x 600, had lot of graphics and still ran smoothly, that game was designed in such a way that not the entire screen needed to be redrawn each frame. It never had parallax scrolling backgrounds, or full screen effects. It was written with a home-grown AS3 game engine and was not based on blitting like Flixel was. This is what influenced me to make the decisions for my game too. Everything went well until I added scrolling parallax backgrounds and the sound effects, then the frame rates dropped below 30 FPS. I realized my game was like a full blown platformer without tile based graphics, even though it looked deceptively simple to the end-user.

This is how it looked

Green/Red blocks are all created with code. There were more elements not shown in this level which made use of 'Graphics' class. I also had a few particle systems (again, based on display lists only). The top pole like element, the stars and the cube (square) in the middle are all animated and were loaded from images through Embed tags.

After I reached the FPS problem, and spending hours with the Flash builder profiler, I realized I needed to find a different solution, and it was a shame that I wasn't informed well about Stage3d. As AS3 development was not my full-time day job, I wasn't really updating myself on these new technologies. But after reading a little I could see Starling could be my saviour. The fullscreen demos looked great and ran at terrific speeds. But all the HUD, Buttons, Menus were all directly loaded from SWF, there is no way I can completely rely on Starling/Stage3d only. A post from Adobe knowledge base even recommended using the usual AS3 stuff for HUD and UI elements from the SWF on top of Stage3d graphics. So I finally created a new branch on GIT for the process and started!

Some relevant information about my so called Game engine

My basic gameObject class equivalent (which I called BasicThing) wasn't derived from Sprite. Instead it held a Sprite reference inside it. This was done to support some form of components based model. Each BasicThing held the following

  1. A Bitmap object to hold the current frame
  2. A Sprite object called m_container (used as the parent for everything under the BasicThing, including the bitmap) with protected scope. And a "get skin()" method which returned that.
  3. Getters and setters for x, y, width, height
  4. addChild(BasicThing), removeChild(BasicThing) - both of them added, removed m_container of the parameter as the child of m_container in the current object.
  5. Also a setFrame(int) and setFrames(Array) - Array used to be filled with BitmapData objects
Those were the main function, and like you see it had a lot of AS3 class dependencies like Bitmap, BitmapData, Sprite. Also whenever I subclassed BasicThing for various game entities, I loosely accessed m_container and added children to it like
public class CubeThing extends PhysicsThing
{
public function CubeThing()
{
super();
bd0 = (new Embeds.whitecube0_png() as Bitmap).bitmapData;
var bd1:BitmapData = (new Embeds.whitecube1_png() as Bitmap).bitmapData;
var bd2:BitmapData = (new Embeds.whitecube2_png() as Bitmap).bitmapData;
var bd3:BitmapData = (new Embeds.whitecube3_png() as Bitmap).bitmapData;
var bd4:BitmapData = (new Embeds.whitecube4_png() as Bitmap).bitmapData;
bdframes = new Array(bd1, bd2, bd3, bd4);
this.m_sprite.x = -12;
this.m_sprite.y = -12;
this.frames = bdframes;
this.setFrame(1);
}
public function cubeReset():void
{
this.skin.visible = true;
this.skin.alpha = 1.0;
}

In the above few snippets you can see how I have this horrible habit of breaking so many oops rules. But as a game developer I believe, you often just have to focus on getting it done than worrying about code structure and rules if you want to be really productive.

Also I had a BasicScene class extended from BasicThing, which served as the GameScene. And a SceneHolder class which took care of handling events and passing them down to each scene, attaching stuff to the flash Stage, taking care of transition when changing scene etc.

Keeping the factors discussed above, I had the following goals in mind

  • - I wanted to support both normal AS3 classes and Starling classes in each BasicThing (gameObject)
  • - The porting process should be progressive, I should be able to convert individual object to use Starling classes and see the output immediately to verify that part alone.
  • - Which essentially means existing code shouldn't be disturbed much.
So that way I could stop when the necessary performance has been achieved and simply leave AS3 classes for the rest of them to save time.

The Starling-ification

First thing I did was modify the BasicThing class

1. It had both an AS3 Sprite and a Starling Sprite like this
protected var m_slsprite :starling.display.Sprite = new starling.display.Sprite();
protected var m_container :flash.display.Sprite = new flash.display.Sprite();
 
public function get slskin():starling.display.Sprite
{
return m_slsprite;
}

public function get skin():flash.display.Sprite
{
return m_container;
}

2. When adding and removing BasicThing children, I added and removed from both skin and slskin. Also the setters of x, y on BasicThing modified both skin and slskin. This way both of them co-exist peacefully.

3. Replace AS3 "BitmapData" with Starling "Texture". Replaced AS3 "Bitmap" with a combination of Starling "Image" and "Sprite" classes. This was done because, there were cases where I had the Bitmap created and added as child without any BitmapData in it. With Starling Image you had to definitely pass a Texture when creating it.

4. When setting frame, I assigned the Texture from the Array to the Image and called readjustSize each time.

5. Apart from this, in each class instead of creating Bitmap using somthing like "new Embeds.CubeSprite", I created a Starling Texture directly.

6. But I made a Caching factory for Texture through which I could load Starling Textures like this - TextureLoader.getTexture( Embeds.CubeSprite)

7. To handle the Stage attachment, I made a empty singleton StarlingHolder which extended from Starling Sprite, just to serve as a container for all the Starling content in the game.

public function BasicSceneHolder(stage:Stage)
{
super();
var _starling:Starling = new Starling(StarlingHolder, stage);
_starling.stage.addChild(this.slskin);
_starling.start();
this.m_stage = stage;
m_stage.addChild(this.skin);
}

P.S. BasicSceneHolder extends from BasicScene which extends from BasicThing. So it has a skin and slskin.

8. The final thing left to handle was converting the procedural content which made heavy usage of Graphics classes. I wanted to be sure I could do this, so I set out to make a quick sample to test it. Let me explain the process in detail in next section

Bringing Procedural content into Starling

For making the test sample this I took help from one of Tony Broyez old blog post (link seems down, lucky me, don't worry I made a gist for it!)

https://gist.github.com/quakeboy/7066901

After that I used the same code to convert what ever I draw with AS3 Graphics to Starling Textures. Feel free to comment and ask questions I would be glad to help.

Oh BTW, this is how the game looks now, in a land where AS3 classes and Starling classes live peacefully together with three layer starfield parallax background thanks for ScrollImage extension by Krecha, and cool particle effects thanks to another extension by Daniel to support ParticleEditor by 71squared.

Labels: ,

I really want you to not believe where my site is hosted on

Posted by Rajavanya Subramaniyan Comments
Finally my first website is up. With my limited web development skills and a lot of help from around the internet, close friends and my dear sister it took me about 1.5 days to go from

 ==>

** References **

Sincere thanks to Tallman, Ashwin and my sister for their tips about typefaces and content organization.

Check it out now - www.rajavanya.com
Labels:

Been cooking this for a long while now..

Posted by Rajavanya Subramaniyan Comments
It all began 2 years ago :P

Labels:

You haven't seen the Stack overflow calendar yet?

Posted by Rajavanya Subramaniyan Comments
Today while on my SO profile page, I accidentally clicked on their "visited" statistics. (They have a few badges for people who come to the site regularly like 'for n consecutive days' and so on)



And then to my surprise I found a neat calendar view of all the days.


Though not very useful or anything. It was kinda cool and surprising to see how much my life/career has become dependent on stackoverflow.com
Labels:

Water Effect on HTML5 Canvas

Posted by Rajavanya Subramaniyan Comments
Was bored, so made the water effect based on this article on a HTML 5 canvas.
Canvas seems promising, but far from flash performance yet.
 
Labels: ,