Cut it Devlog – Part 9 – Converting Starling to Native Flash

by monster Brain · Published December 10, 2014 · Updated January 18, 2015

So I made Cut it game online, later decided to make it for android. Directly converting made the game worse performance wise, since flash still used CPU for rendering. Tried the awesome Starling game engine, since then game has been modified to a much advanced level.

So after a long time, Cut-it was finally finished (well almost) with the Awesome Starling engine with accelerated graphics and touch to slice mechanics. So decided to put it on FGL for sponsorship once again. After a chat with some fellow devs, they noted that Stage3D games are not preferred by Sponsors (even these days). Is Stage3D is still a heavy load for browsers out there (while Unity is going well, i guess). So decided to do the herculean task of converting Starling game to web game, since they both share similar API’s. And also the fact that Starling version itself was ported from the previous flash version.

It took me around 3 days to come up with the web version (i think). I also made a doc file, tracking the things i’d done during porting (Otherwise i wouldn’t have written it here).

So why this should help you ?

Maybe you made a Starling Game with lot of large textures & stuffs, which might be big for an Online version. Maybe you want to try for a better sponsorship, since they still prefer Non-Stage3D flash game. Maybe something else.

So here we go

Day 1

Converting from Spritesheets & MovieClips

Used the awesome Shoebox to separate spritesheets(Texture Atlas) into individuals easily. And for spritesheets (animations or MovieClips in Starling), just dragged the files to form a animation spritesheet.

And using the SpriteSheet Class found here on using-sprite-sheets-in-as3 (NNGAFook Blog). Animation play & pause was missing in this spritesheet, so had to add that. And made its name & constructor similar to my extended starling movieClip to ease the conversion.

Creating movieclips were easy in Starling.. But in flash i’ve to use a spritesheet animation to attain the same. Thanks to ShoeBox. (set Frames Alpha crop to false, because it might mess up our width and height).

Embed vs AssetManager

I used assetManager for Android version, since its much neater way than embedding stuffs. So how to convert all those spritepacks into Embed Statements ??. So i put my problem towards starling community and some guy called soccorb (http://forum.starling-framework.org/profile/soccerob) helped me. He had made a helper class to spit out the assetmanager loaded files into Embed like statements. That was a big relief. You can see the Forum post here (http://forum.starling-framework.org/topic/deploying-swf-online-using-asset-manager).

private function createCompiledAssetCode():void {
			CONFIG::air {
				var traceContents:Function = function(folder:File):void {
					var contents:Array = folder.getDirectoryListing();
					var currentPath:String = folder.nativePath;
					var ind:int = currentPath.lastIndexOf("\\bin\\") + 5;
					currentPath = currentPath.substring(ind) + "/";
					while (currentPath.indexOf("\\") != -1) {
						currentPath = currentPath.replace("\\", "/");
					}
					trace("/* *******  " + currentPath + "  ******** */");
					for each(var fileItem:File in contents) {
						trace("");
						if (fileItem.isDirectory) {
							traceContents(fileItem);
						} else {
							var fileExtension:String = fileItem.extension;
							if (fileExtension == "xml" || fileExtension == "fnt") {
								trace("[Embed(source=\"../bin/" + currentPath +  fileItem.name + "\", mimeType=\"application/octet-stream\")]");
								trace("public static const " + fileItem.name.replace("." + fileItem.extension, "") + "_xml" + ":Class;");
							} else {
								trace("[Embed(source=\"../bin/" + currentPath +  fileItem.name + "\")]");
								trace("public static const " + fileItem.name.replace("." + fileItem.extension, "") + ":Class;");
							}
						}
					}
				};
				var folders:Array = ["sounds", "spritesheets/hd"];
				trace("/* *************** */");
				trace("/* BEGIN PASTE CODE */");
				trace("/* *************** */");
				for each(var folderName:String in folders) {
					var folder:File = File.applicationDirectory.resolvePath(folderName);
					traceContents(folder);
				}
				trace("/* *************** */");
				trace("/* END */");
				trace("/* *************** */");
				trace(" // --------------- PLACE BREAKPOINT HERE ---------------")
 
			}
		}

This can also be used to embed assets for online version of Starling game, if you are using the assetmanager and passing EmbeddedAssets instead of directory path.

I copied the traced out code into a Class called Assets for Flash version of Cut it.

Particle System

Removed all particle system. But will replace with another one. (Later replaced with Flint2D particles)

Image to Bitmap

I made a extended image class using Starling Image class like this.

public function Image2(name:String,x:Number=0,y:Number=0,centered:Boolean=true):void 
		{
			super(Game.assets.getTexture(name));
			
			this.x = x;
			this.y = y;
			
			if(centered)
				alignPivot();
		}

So how to make a similar one in flash using Bitmap. So made it like this.

public class Image extends Sprite
	{
		
		public function Image(name:String,x:Number=0,y:Number=0,centered:Boolean=true):void 
		{
			var BmpClass:Class = getDefinitionByName(name) as Class;
			var bmp:Bitmap = new BmpClass();
			
			this.x = x;
			this.y = y;
			
			if (centered)
			{
				bmp.x -= bmp.width * 0.5;
				bmp.y -= bmp.height * 0.5;
			}
			addChild(bmp);
		}
		
	}

But the getDefinitionByName was simply doesn’t return anything !!!

GetDefinitionByName or Problems with Assets importing

So getDefinitionByName is not working. Atleast not as i have hoped. So went on searching for solutions and found this. http://www.ghostwire.com/blog/archives/as3-referencing-embedded-assets-of-another-class-using-underscore/
Now its working :). Removed the name = name.toUpperCase(); line because i use combination of upper & lower cases.

Now my Image Class looks like this

public class Image extends Sprite
	{
		private var bmp:Bitmap;
		public function Image(name:String,x:Number=0,y:Number=0,centered:Boolean=true,smoothing:Boolean=false):void 
		{
			bmp = Assets.GetImage(name,smoothing);
			
			this.x = x;
			this.y = y;
			
			if (centered)
			{
				bmp.x -= bmp.width * 0.5;
				bmp.y -= bmp.height * 0.5;
			}
			addChild(bmp);
		}
	}

Now What was the Assets.GetImage function ? Its a static function in Assets class, which looks like this.

public class Assets 
	{
		/* *******  assets/graphics/  ******** */

		[Embed(source="../assets/graphics/GameScreen/bg.png")]
		public static const bg:Class;

/**
		 * Returns a Bitmap display object identified by the specified name.
		 * @param	The name of the bitmap asset to return.  This name must match one of the 
		 * @return	A Bitmap display object.
		 * Code from GhostWire Ref : http://www.ghostwire.com/blog/archives/as3-referencing-embedded-assets-of-another-class-using-underscore/
		 */
		public static function GetImage(name:String,smoothing:Boolean=false):Bitmap
		{
			//name = name.toUpperCase();
			try
			{
				var cls:Class = getDefinitionByName("Assets_" + name) as Class;
				var bmp:Bitmap = new cls();
				if (smoothing)
					bmp.smoothing = smoothing;
				return bmp;
			}
			catch (e:Error)
			{
				trace(e.getStackTrace());
			}
			// ** else return a default 16x16 opaque white square bitmap **
			return new Bitmap(new BitmapData(16,16));
		}

if we need to get a bg image, just need to call Assets.GetImage(“bg”);

Tweening

Tweening was easy. I use Ktween. It wasn’t bad. But required a lot of copy pasting since the syntax were quite different. If i’d used GTween, i think things would’ve been lot simpler.

In Starling :

var menuFadeIn:Tween = new Tween(menuScreen, 2.0, Transitions.EASE_OUT);
menuFadeIn.fadeTo(1.0);
menuFadeIn.onComplete = onMenuFadeInComplete;
Starling.juggler.add(menuFadeIn);

In KTween :

KTween.to(menuScreen, 2.0, { alpha:1.0 }, Sine.easeOut,onMenuFadeInComplete);

Day 2

Changing Buttons

Removed all those TouchEvent listeners … (Relief)… Added mouse listeners for clicks and all. And i haven’t been using Feathers UI for Cut it, since i find it a bit confusing. Although now i’m learning more about it.

I used touch Listener to check for TouchBEGIN, TouchEND to determine the Button Down and Up states.

In Flash version, i used a MouseDown event inside button class, after mousedown checking for MouseUp & MouseRollOut events for changing states. Added a click listener for handling the click events in the mainclass

Back Button handling – Just removed it.. And no need for Exit Dialog 🙂

AlignPivot() problem

Starling makes it easy to align the center point of a sprite… But converting it, i lost many position adjustments i made… So i have to reposition it manually.