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

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).

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.

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

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

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

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 :

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.

Checkout Cut-it Starling version on PlayStore

Checkout Super-Cut-it (Flash Version) on Kongregate

And let me know if you need any further info

 

Cut it Devlog Series

Part I – The Beginning

Part II – The mechanism of Cutting

Part V – The As3 Level Editor

Part IX – Converting Starling to Native Flash

843 Total Views 1 Views Today

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *