Side Project - AS3 Line Drawer - Part 2

I usually try to write these blog posts on Sundays because I usually spend the day at home. Unfortunately, today is Wednesday and here I am, at my place. That is not good, I should be at my usual Stammtisch, drinking my usual caipiroska. Today we had to cancel the event because there was a meteorology warning. It never came. The weather has never been so nice and quiet.

Anyway, back to the coding stuff.

I've uploaded the project to GitHub and it can be found here. I tried to put one of those cool Fork me on GitHub ribbons. Unfortunately, I just couldn't make them work.

About GitHub, I just can't get myself to work efficiently with it. I guess I'm just used to TortoiseSVN. Hell, even Perfoce treats me better than the default's GitHub client for Windows 7. Though I must admit that the best way I have found to get into GitHub was though TortoiseGit. No surprise there.

The uploaded FlashDevelop project consists of just a few files:

Main.as, the starting point of the application. Extends Sprite and calls an initialization method when Event.ADDED_TO_STAGE event is dispatched. Nothing fancy here, just common AS3 stuff.

Inside the initialization method there are just two line codes, one of them is commented out:

These methods make the application run in the two ways mentioned in my previous post: Line Generation Mode & Line Drawing Mode. I guess you can figure out which one does what. What I will say, though, is that generateLines() instantiates a LineGenerator to do the job, while drawGeneratedLines() instantiates a LineArtDrawer object. I don't know what kind of drug was on my system when I was choosing those names.

Okay, lets dig a little bit more into LineArtDrawer. For this part, I will just focus on the rendering of the scene.

Though kind of obvious, the order in which elements are rendered are: Falling Stars, Line Shadow, Red Line, Boys.

There is also a Disclaimer button, it goes on top of everything else.

Actually, LineArtDrawer is a class that does more things that it should. It draws the red lines with the shadow (which is good) but it also renders the falling stars, the jumping boys and the top right disclaimer. If you didn't noticed, the disclaimer is a button. Just click it a few times and it will go away.

The shadow line

The way to get the shadow line is pretty simple. We just need to use the same data used for the red lines, but   translate everything 2 pixels to the right and 2 pixels down. We also change the color to black. And voilà! we get a shadow for the red line.

The stars

For the stars I created the class FallingStars to manage their creation, update and destruction. Pretty neat. This class stores a Vector of Bitmaps, a Vector of Points and a Timer.

The timer is used to check when it's time to spawn a new star.

Whenever a new Star is created, a Bitmap object is stored in mStars Vector and a new Velocity is added to mFallSpeed Vector.

The Stars spawn from a random position on top of the screen and get destroyed once they go beyond the bottom. In addition, you will notice that the stars rotate. And they do so in a funky way. That is because the rotation is centered on the top left corner of the bitmap, its default position (for a bitmap). That is a simple way to create a sinusoidal-like movement. It gets even better when we add an additional velocity vector. That is when the Vector of Points comes into play.

Also, the star Bitmap object is created from a 32 bit png file that is embeded into the swf at compiling time.

Well that's all for now. Again, I'm falling asleep.
But before I got and to close this post, here is a dedication to all those lovely meteorologists that forecasted today's warning.

I know what you are thinking: This guy's Photoshop skills are off the charts!

And yeah, that is Comic Sans right there. :)