Lost everything but the idea!

One of the most common posts on blogs usually starts something like this...
"Sorry I havn't posted in a while, but [excuse]"

anyway, mine's no different. I lost my laptop! all the graphic and progarmming work for Leap of Faith was on there, and I hadn't backed anything up :(

So now I have to start from scratch, and I'll be developing in Linux, but first things first, I need some income, so I'm not sure how often i'll be able to update.

Using AS3 to import SVG files as objects on the stage

Well, I spent quite a bit of time working on the sprite for Saint Peter. My original intention, as mentioned in the last post, was to simply draw over a professionally used bitmap sprite. But that turned out to be too much of a hassle, and it turns out I actually kinda enjoyed myself creating the thing. The body still needs some work, but I kind of like the bobble-head look it's got right now.

Part of the reason why this post is two weeks after the last one is that I won't be able to use the school's lab anymore, so that means I don't have access to the Flash IDE. This turned out to be a good thing, as it's forced me to learn how to work using FlashDevelop.

Still, my original sprite was created in illustrator and saved as SVG's. AS3 has some built in asset loading features of course, but as far as loading vector graphics directly on the stage, it can only handle SWF files. After a little research, I found that Lucas Lorentz has been heading up a project called as3svgRenderLib. It's basically a class that lets you load SVG data as XML and it renders it and spits it out as a Sprite that you can attach to the stage. Pretty cool stuff!

Give it a try if you want.

  • Grab everything that you find in the "com" directory here and save it in the same directory as your main AS3 file (preserve the paths, so it's com/lorentz/SVG.)
  • Put a sample SVG file in the same directory where your SWF file is generated (if you're using FlashDevelop, put it in the "bin" directory" of your project
  • Make sure you're using version 10 of the flash player. If you're using Falshdevelop, go to the Project menu, then Properties, and on the Output tab change the Platform to Flash Player 10.
  • I always like to strip down examples to their most basic. The example that came with svgRenderLib does some extra stuff, so I simplified it. You can use this simplified script as your Main AS3. Change the name of the SVG file it's looking for, then you can run it, and you should see the sample SVG displayed on the screen.

So, next on the Leap of Faith project, I'm going to figure out how to best animate the sprite. I want it to have different facial expressions for when it's doing well, as opposed to when it's about to sink in the water, so I think I'm going to import the facial features separately and then write a class to control how the head is animated. We'll see. I'm just glad I can move forward again.

Sprite creation

It turns out programming the animation of the sprite is the easy part. The tough part: Actually drawing the thing! I've been racking my brain trying to "figure out" how to draw these guys. I didn't mean that as a pun either, I put it in quotes because it's like I'm trying to rationally come up with something workable.

I'm no stranger to photoshop, or illustrator; I supported myself during college doing freelance graphic and web design. But you can get pretty far in the design world if you have a good understanding of color and layout. Animation is something different, you have to really understand form... and I've never taken a figure drawing class, or any formal hand drawing class for that matter.

So far it's been pretty tough, as you can probably tell from my first attempt at the main character. Granted it is a first attempt. but that's just a still picture, not an series of pictures intended to give the impression of walking! Time for plan 'B', use someone else's work as a base. I can't tell you what a fan I am of the Creative Commons license. And I was even able to find a nice set of CC licensed Sprites on FlickR, but their format were to small for my needs, and that was the only sprite set I found with an open license!

So I've decided to actually use a trademarked sprite set from a commercial game to draw a basic walking form, then add on clothes, hair, etc, to make it look like Peter the Apostle. So, hopefully with will make things easier, otherwise I'll just completely wing-it and make something that looks retarded. But hey, you never know, maybe the retarded look is making a come back

AS3 collision detection

Okay, so in Leap of Faith you have to use the arrow keys to move Peter to Jesus while at the same time use the mouse to keep his Faith-o-meter balanced. Not too difficult I think, so throwing some obstacle's in there sounds like a good idea. In an early concept drawing, SubC drew some lighting and sharks. Hmm, I think I can make some periodic lighting bolts, so the user can't just walk straight across the screen, but would have to wait and time for the lighting.

I started researching Collision Detection because obviously I need to know when the lightening intersects with Peter. AS3 has a couple of built in methods to the DisplayObject class that can let you do some rudimentary Collision Detection:

Sprite animation: fixed repeat key delay

alright, I managed to avoid the OS's repeat key delay.

Before - On the stage I just setup an event Listener for they KeyboardEvent KEY_DOW, and one for KEY_UP. Whenever a key was pressed it would execute the function which would say If key is left arrow, move to the left.

After - Basically the same, except instead of actually moving the sprite, the KEY_DOWN function would add an event Listener of it's own of type Events.ENTER_FRAME. This ENTER_FRAME event is really useful for animation because it executes based on the SWF's frame rate. so if your movie frame rate is set to 28 fps, then 28 times a second this function will run... So now because the left arrow key is pressed, it triggers the ENTER_FRAME function which then moves the character until the KEY_UP is activated. Problem solved, check it out:

[Click on the SWF below to allow for keyboard input]

Simple sprite animation

Okay, after a little trial an error, I have my first working sprite animation with keyboard input! Use the left and right keyboard keys to move Brian around on the screen. [Click on the SWF below to allow for keyboard input]


The only issue I'm running into right now is that keyboard input is first processed by the operating system, and on most OS's when you hold down the same key for a while there will be a short delay (so people won't accidentally type duplicate letters all the time if they hold down the key too long). Anyway, I need to figure a way to bypass that.

I found the base sprite over at the Sprite Database

LOF: Faith-o-Meter

Well, I was going to do a tutorial on how to make a class-based preloader, but I'm getting really frustrated with it. It was working for a while, and now it's not working, and I'm not sure why. This is programming, so of course it's something rational, I just have to track it down.

In the mean time I put preloading aside, and did some more work on the Faith-o-Meter. This is the dial at the bottom of the screen that displays your level of faith. You have to keep it relatively centered while moving apostle Peter across the screen with your keyboard. At least that's the goal.

Check it out, I got the faith-o-meter mostly working, including many variable adjustments to change the difficulty.

Now I'm going to work on learning sprite animation and collision detection.

the Complications of the Flash universe

Back in the day (read: 1999) flash development seemed fairly simple. Sure you were limited with what you could do, but there was pretty much only one path to creating something: using the "Flash" program itself. So when I sat down recently to start working on Leap of Faith, I was a bit overwhelmed with the options for development. The Flash universe has expanded greatly since 1999!

In an effort to remember everything I'm going to write down here all that I've learned in the last week of research on Flash development, and maybe it will help other fledgling flash developers.

Leap of Faith, beginning the project log

Well, it's been a while since VideoHQ and I launched our first foray into flash gaming, the memory game based on internet meme's, Memery. We decided to start simple, and now we're ready to progress in difficulty a little as we start developing our second game, with the working title Leap of Faith.

Basically this is going to be a balancing game. You play as Peter the apostle standing on land on the left side of the screen. Jesus is on the right side of the screen, and he calls you over to him, only there's water in between you. But what is that in the face of true Faith? The center bottom of the screen will display your faith as a gauge. Your goal is to keep the gauge centered by using the mouse to keep it balanced, while you use the keyboard to navigate towards Jesus.