Making the jump to Unity3d from Flash

Click on the image to go to the live demo

So… let me explain.

When I was first turned on to Unity3d I honestly didn’t know what to think. I’m a 2D guy, and for the past several years I’ve actually been proud of that. Everyone jumped on the 3D bandwagon and started pumping out terrible games… but that’s for another post.

If you’re a Flash dev and new to unity, you really should check out Richard Hart’s video tutorials. They’re honestly not enough to do anything except get your brain in a Unity3d mind-set, but that’s the first step.

One of the first things I wanted to do was take some of my flash concepts and try putting them into Unity.  I’m a big fan of digitizing film for games, so I decided to try that and see what happens.

The first thing you find out with Unity3D is that there is very little you can do in 2D.  The best you’re going to get is a GUI system that (as of Unity 2.6) is weak at best. Also, there’s no way to animate your images easily… which actually made me have to learn the lost art of sprite sheets.

If you’re unfamiliar with sprite sheets, they are how the old schooler’s did graphics.  The idea is simple. You put all of your frames of animation on a single image, and then the renderer scrolls through them like a high-tech flip book.  It’s actually a lot more complicated than that, but that gives you the idea.  Here’s the “Punch”, “Kick”, and “Walk” sprite sheet for Rick from Splatter House. If you’ve never played Splatter House, do it now because you’re making me sad.

Rick from "Splatter House". (Not shown: Splatter and mayhem)

Armed with this knowledge I set out to make two sprite sheets – an easy one I made from an animated gif of Ryu I found online, and a difficult one made from footage I shot of my buddy Larry standing. This was actually kind of fun and made me feel like an ancient Capcom Engineer trying to tweak Blanka’s spin to match the system clock….

Ryu’s sprite sheet was easy because the game it was pulled from already had perfect dimensions.  Every frame was exactly the same width, which makes the rendering script happy.  Also, instead of reinventing the wheel, I pulled the animated texture script from the unify wiki.

var uvAnimationTileX = 24; //Here you can place the number of columns of your sheet.
//The above sheet has 24

var uvAnimationTileY = 1; //Here you can place the number of rows of your sheet.
//The above sheet has 1
var framesPerSecond = 10.0;

function Update () {

// Calculate index
var index : int = Time.time * framesPerSecond;
// repeat when exhausting all frames
index = index % (uvAnimationTileX * uvAnimationTileY);

// Size of every tile
var size = Vector2 (1.0 / uvAnimationTileX, 1.0 / uvAnimationTileY);

// split into horizontal and vertical index
var uIndex = index % uvAnimationTileX;
var vIndex = index / uvAnimationTileX;

// build offset
// v coordinate is the bottom of the image in opengl so we need to invert.
var offset = Vector2 (uIndex * size.x, 1.0 - size.y - vIndex * size.y);

renderer.material.SetTextureOffset ("_MainTex", offset);
renderer.material.SetTextureScale ("_MainTex", size);

Since I didn’t really feel like messing around with multiple rows on my first attempt, both of these are a single row. Here’s Ryu’s sprite sheet:

Ryu's sprite sheet... upside down

And here’s Larry’s:

Larry's Sprite Sheet - also upside down

You may be asking yourself, why are they upside down?  It was much easier for me to space the individual images this way.  In the Ryu sprite the feet are the same distance apart exactly… not true in Larry’s case.  In order to get a fluid transition on the renderer everything needs to be perfectly spaced and perfectly centered.  This took me about an hour, but I could do it in about 30 minutes now that I know what I’m doing.


0 Responses to “Making the jump to Unity3d from Flash”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: