Congratulations! You’ve made it to the 10th and final listen in our introduction to Flex game development. If you’ve made it this far, you should have a completely playable game. The purpose of this lesson it to introduce you to Kongregate’s API. If you want to create games for Kongregate, it’s a good idea to implement their API so that you can submit high scores and statistics to the leaderboards. Greg (the guy who creates all the badges and challenges on Kongregate) has posted a list of tips that you should follow when coming up with stats to keep track of. For our game, we’re going to submit the player’s score at the end of their play session.

First we need to load the Kongregate API into our game. We’ll do this by adding a public variable to our main.mxml file.

Code and more after the jump

This is the 9th lesson in our Flex game development tutorial. This will be a short lesson on adding background music and sound effects to our game. This is the final true lesson in completing our game. The final lesson will be about adding the Kongregate API to your game and posting it on the website. First, we need to find some music and sound effects. If you’re working on a professional game you’ll probably have custom music composed for your project, but with small flash games, you might need to find free music online. A great site for music is ccMixter.org. A similar site for sound effects is freesound.org. To save bandwidth, I’ll allow you to find you own music and sound effects, and I’ll just show you how to include them in your Assets.as file. Note that you can only embed MP3 files in Flex. Other sound files will need to be converted or loaded into the game at run time. Here is the code for Assets.as.

Code…

This is the 8th lesson in the Flex game development tutorial. In this lesson we’re going to discuss random numbers, add an enemy to our game, and implement a scoring system. Like the previous lessons, we’re going to start by adding the enemy image to the Assets.as file. Feel free to make your own image or use this really mean wasp.

Wasp and code after the jump

This is the 7th lesson in our Flex game development tutorial series. If you’ve been following up to this point, you should have a player running in the bottom of your screen with a parallax scrolling background behind him. In this lesson, we’re going to give that player something to run on while learning how to handle gravity and collision detection. The first thing you’ll need is a platform for your player to collide with. You can create your own or use this one:

Read the rest of this tutorial for the image

This is the 6th lesson in our Flex game development tutorial.  When developing games in Flash, you can animate by using MovieClips.  You can simply animate using the time line and tween-based animation.  In Flex however, you use the Sprite class to animate in a more traditional manner by drawing individual frames and replacing the BitmapData of the Sprite with each frame.  We’re going to create a player, so the first thing we need is an image of a running player.  Luckily, I’ve created one for you.

Image and code…

Welcome to lesson 5 of the Flex game development tutorial. If you’re just joining us, then you’re in luck. The technique we’re going to discuss today can be used in Flex, Flash, or any other 2D game. Parallax scrolling is special scrolling technique that creates the illusion of 3 dimensions in a 2D game. By scrolling multiple backgrounds at different speeds, a feeling of depth is invoked. Our background is going to have two layers: sky and mountain. Since we’re going to be animating our game, the first thing we need to do is add an ENTER_FRAME event listener to our main.mxml file.

Code after the jump

This is the 4th lesson in our tutorial on Flex game development. Today we’re going to be learning how to deal with user input. Luckily, input is incredibly easy to handle in ActionScript. The main thing you need to understand is event listeners. Event listeners work by subscribing objects to a list maintained automatically by an event publisher. These listeners are informed when an event occurs in the system, and are able to handle the event any way they please.  Simply add an event listener and provide the event type and the callback function (the method you want to be called when the event takes place).  For example, lets say that we want to know when the user clicks anywhere on the stage.  We’d simply add the following code to our program.

Code and rest of the tutorial

In the last lesson, we got our company logo to come up on the screen. Today, we’re going to learn how to animate that logo, and we’ll also learn how Flash’s display lists work. Remember the UIComponent that we added last lesson? In Flash, Sprites, Graphics and MovieClips all extend from a base class called DisplayObject. DisplayObjects are items that are added to DisplayLists in order to appear on the screen. Flex’s canvas does not allow DisplayObjects to be added, so we add a UIComponent first, and then we can use its DisplayList to add all of our sprites. The DisplayList determines the front to back order (or z-order) of all the displayed objects.

There are many methods that you can use to handle the DisplayList, but we are going to focus on just 3 of them.  addChild() is used to add a new DisplayObject to the end of the DisplayList.  This places the object on top of the other objects on screen.  If you’d like to add an object with a different z-order, you can use addChildAt() to place it in front of or behind any of the other DisplayObjects in the list.  Finally, to remove an object from the screen, simply use removeChild().  To see all of the methods you can use, check out the DisplayObjectContainer class.

We’ll use these methods momentarily, but first let’s discuss animation.  In the first lesson, we created a method called step() that is called every frame (30 frames per second).  Let’s imagine that we wanted to move a ball 300 pixels every second.  If we were to place ball.x += 10 in the step() method, it would work right?  10 * 30 is 300, so in a perfect world, that would be all the work required.  Sadly, computers are not a perfect world.  If your game was run on a slower computer, it may only be able to run at 18 frames per second.  Then, your ball would only move 180 pixels.  To avoid this, you simply need to take into account how much time has actually passed since the last frame was displayed.  To get the current time in Flash, you can use the getTimer() method.  This will return the number of milliseconds that have passed since the movie started.  Now, the new version of step will look like this:

Click for the code

Yesterday we learned the basics of Flex and got our MXML file working properly, but all we ended up with was a black screen.  Today, we’re going to add an image onto that screen.  The first thing we need to do is import an image into our application.  This is done with the [Embed] tag.  We’re going to create a file named Assets.as that contains the following code.

Code after the jump

Introduction

Matthew Casperson has a nice introductory tutorial on using Flex and ActionScript for game development, but it is almost a year old now, and I disagree with his rendering methods.  It is true that double buffering prevents screen tearing and other graphical glitches that you don’t want in your game, but that tutorial doesn’t take advantage of the power that is built into Flash.  You actually don’t need to directly blit all of your graphics into a buffer and then swap the back buffer with the current screen buffer.  Flash will take care of this for you.  Flash is also capable of rendering multiple layers easily without the need for custom compositing code.  I’m not saying Matthew is wrong. There are many ways to implement things when you’re making games, and these tutorials are simply my method.

Over the next several lessons, we will make a game using Flex and ActionScript 3.  After the game is completed, it will be posted to Kongregate where everyone can play it.  These tutorials will include everything from setting up your development environment and writing the game, to custom preloaders and using the Kongregate API.  We will make it a point to develop code in a reusable, heavily commented, object-oriented fashion.

(more…)