In over 9 years of web game development I’d never used a third party framework until recently, preferring to code everything up from scratch. Both Flixel and FlashPunk had caught my eye though and for the past year or so I’d been meaning to try one or the other.

Well, a few months ago the opportunity presented itself. Hasbro hired us to develop a multi-world game to promote their new Kre-o range of toys and I decided it was the perfect project to test these frameworks with.

Actionscript Game Engine

A framework, or game engine, is essentially a group of libraries. The libraries typically cover functionality shared by many games, such as collision detection, tile mapping and blitting (see Craig Beswetherick’s article in FFD July 2011 for a great intro to Blitting)

With this core functionality readily available, use of a game engine allows for rapid development. In fact, I’ve seen a number of quite playable little games on some of the development forums recently which people have put together in a single day!

Flixel or FlashPunk

Both Flixel and FlashPunk are open source, AS3 game engines, and in general both do the same job. Flixel is the more mature project, and has been used on quite a number of popular games including the popular Canabalt. It was for that reason I decided to test Flixel first, and while it was certainly robust there were a few small issues I had with it, especially with the apparent lack of control over the way collisions worked.

FlashPunk on the other hand is a newer project, but which is rapidly expanding. There is a very active user community on the forums at FlashPunk.net and lots of great tutorials for learning the basics of the framework.

While the 2 engines are very similar, I instantly felt more at home with the FlashPunk code, which I felt to be less restrictive. The collision detection issues I had with Flixel were easy to solve with FlashPunk and in less than a week I had made the decision to build the Hasbro game (named Kreon Chaos) using FlashPunk as the basis.

Building Kreon Chaos

The reason for wanting to use a third party game engine for Kreon Chaos, was because we wanted to focus on the gameplay and level design without spending too much of our allocated timeframe on low level code. The brief from Hasbro was to create a game which focused on the Kreons – mini figs (like Lego men) of the Transformers characters. They wanted the player to be able to control any of the Kreons, and for them to each have their own abilities, so we decided on a 2D side scrolling platform/puzzle game.

Taking inspiration from a 1990’s SNES game called “The Lost Vikings” we decided that each level would be designed such that the only way to complete it was for the Kreons to work as a team. For example, we gave Bumblebee the ability to hack computer terminals to turn elevators on, or turn of laser hazards. We gave Sentinel Prime the ability to hold his shield up above his head so that other Kreons could jump on him to access hard to reach areas.

Using the FlashPunk engine as the basis for the game freed us up to spend the time necessary to work on these design aspects, rather than writing code to handle the tilesheets or collisions. It was a real joy to work with and I only wish I’d made the step a long time ago. One thing’s for sure – I’ll certainly be using FlashPunk again for future projects.

The Flashpunk Framework

FlashPunk games are built around 2 basic constructs – Worlds and Entities. A FlashPunk World is an organisational class which will typically be a level or a menu. A game can have menu Worlds, but only one of them is active at any one time. So for example, when you select “Level 1″ on a level select screen the game will change from the “Level Select” World to the “Level 1″ World.

Worlds can contain any number of entities, and have a controllable camera which makes scrolling and panning super easy. Entities are the objects which populate a world, like characters, enemies, cars or platforms. Entities can interact with one another, move around the World and be controlled by the player.

Worlds and Entities can be extended and are super easy to imp0lement and adapt. There’s little point in reinventing the wheel by putting example code up here when there are some excellent beginner’s tutorials at the FlashPunk site. It will only take you an hour or so to go through the beginners tutorials there, and you’ll see just how quick and easy it is to get a simple game off the ground.

FlashPunk iOS game development

What I found REALLY exciting with FlashPunk was the performance achieved. Even with hunderds of entities animated on screen I was able to achieve fantastic framerates. In fact the performance was so good I decided that maybe it was worth going back and testing the performance on the iPhone.

I spent some time testing the idea of developing for iPhone/iPad with Actionscript a while ago but the results were disappointing (FPS was less than 10 even with just a single sprite on screen!) but since I was seeing such good performance with FlashPunk on the desktop I thought it was worth a shot – and the results were superb!

I was able to get a simple arcade game running on an iPhone at around 25 FPS – good enough to be playable, and releasable.

I’ve been turning that initial demo into a full game and will be submitting it to the App Store within the next 7 – 10 days, and once it’s on there I’ll write a detailed post about how I did it. Basically though, with the combination of the FlashPunk and targeting AIR 2.6 it is possible to develop AS3 based games for iOS devices – something I had previously thought was not possible! Check back for a tutorial on the build process soon.

Well I need to apologise, it’s been a looooooong time since my last post here!

I know a bunch of you have been wondering if and when the Flash Games Classroom course is coming out, and thanks to everyone who has been filling in the survey so here’s a quick update.

The short answer is yes, there is a course in the pipeline, but it’s probably NOT going to be the “complete guide to developing Flash games” that we originally intended.  From the feedback we’ve been getting there are several specific key areas that lots of people want info on, so that’s where we’ll be focussing and so the course will be a number of key “modules” covering those topics.

Some of the tutorials have already been written, and we’re looking at a probably launch in November, so watch this space and make sure you are on the newsletter mailing list to be kept up to date.  I promise you won’t have to wait too long for details this time!

So what’s with the huge delay?

Well, sometimes life just gets in the way!  I’ve been super busy working on a ton of games for clients.  I was trying to reduce my workload to concentrate more on the course, but when clients like Hasbro and Lucasarts are asking for games it’s hard to turn them down!

I’m 80% through a BIG game for Hasbro at the moment which is due to launch next month,  and from then on I’ll be a lot more focussed on this!

At the same time, I’ve been working on some iPhone game development.  In fact, that has been going so well that I’m planning a series of Flash for iPhone development tutorials to post here, and an iPhone module in the classroom

(and for those of you saying “you can’t run Flash on iPhone” or “iPhone games compiled for iOS are poor performance” I have news for you – you CAN develop high speed, efficient game code for the iPhone using Actionscript, and I’ll be showing you some examples here real soon!)

Finally, there is a complete new Viral Flash Games package in the works, so if you’re interested in getting your hands on a whole load of new games, all written in OOP AS3 and all with complete source code keep at eye on that site for an announcement in a few weeks (plus a fire sale of the last few AS2 packs at a crazy end of line price!)

So there we go, that’s the score and hope that all the col stuff coming helps to make up for the massive sabatical!

Yes, you really can develop fast and playable iPhone games in Flash, watch this space for examples and tutorials very soon!

As games developers we all have one thing in common.  Whether we’re creating games for fun or profit, we want more people to play our games, and that means we need to do a little promotion!

The average Flash games developer tends to pop their new creation on their own sites or blog, upload to the Mochimedia network, and hope that the game is good enough to go viral.  While that’s a great start, we can do better!

There are literally thousands of games sites out there which you can submit your games to, but a relatively small number of them will be worth the effort.  The biggest obstacle in getting your game out there is finding exactly which sites to submit to, so we’ve done the hard work for you and written a free report listing hundreds of the top games sites that you can submit to, and get a huge amount of exposure!   Many of the larger sites also offer sponsorship deals too, so use this list to allow your game to get the attention it deserves!

The free report is in PDF format with clickable links, so download it, and go through it at your own pace.  It starts off with some of the “big guns” like Kongregate and NewGrounds, but quickly moves into hundreds of smaller, but still very popular sites, many of which you might not have heard of.

If submitting your game to hundreds of sites sounds like a daunting task, check out the final page of the report which has some tips of making it an easier task!

Download Where To Submit Flash games here!

Browsing through the new releases on MochiMedia these days, you’d be forgiven for thinking that the most popular games genres are tower defence, “dress up” girl games and side scrolling, monster truck “stunt” driving games! Just because that’s what hundreds of newbie developers seem to be releasing doesn’t mean that’s what people want to play though!

Tower Defence I can understand, in fact some of the better tower defence games (such as Bloons Tower Defence or Desktop Tower Defence) are very popular at the moment, but there are 3 genres of browser games that are hugely popular, year after year. These types of games might not be groundbreaking, sexy or exciting, but they get hordes of players, and when well designed they tend to be guaranteed hits!

Last year MochiMedia ran a survey that showed the average casual gamer to be 43 years of age, and that 55% of players are female which goes some way to explain why arcade and strategy games don’t feature here. So, what are the 3 most popular genres…

Word Games

From the humble crossword to games like Word Reactor, words games are always popular, particularly with female players, and the older generations, word games attract large numbers of players and can be single or multi-player.

Since word games, in general, tend to be relatively simple to develop and with low overheads in terms of performance they are ideally suited to the Flash platform.

Card/Casino Games

Texas Hold’em on Facebook regularly attracts 15 million or more player per day! From Windows Solitaire to multi-player card games, this is an evergreen genre which always attracts players. The rules to many card and casino games are already well defined so you can spend less time tweaking and deciding on gameplay, and more time creating a polished experience.

Again since there is little in the way of graphical overhead these games are ideal for Flash, and work extremely well as browser based games.

Puzzle Games

Since Tetris is one of the best selling games of all time, it should come as no surprise that puzzle games are extremely popular online and attract huge numbers of players. Bejewelled, from PopCap games, has apparently been downloaded over 150 million times, and has sold over 35 million paid versions! Again, with a few exceptions, they tend not to be processor hungry and so are well suited to the Flash platform. While the term “Puzzle game” can encompass a wide range of game styles, generally they are 2 dimensional, and relatively simple both in terms of gameplay and development.

So, the next time you’re deciding on the next game you want to create, ask yourself what you want to achieve.  If you want to push the boundaries, and create a new, funky arcade game great – but realise that while a word or puzzle game might not be as interesting to develop, it could end up being way more successful!

With the release of CS5 imminent (the official release date is 10th April – just a few days away) online bookstores such as Amazon and Barnes & Noble are slashing the price of CS4 titles. If you’re looking for some solid introductions to Flash and Actionscript there are some real bargains to be had.

Books like Flash CS4: The Missing Manual, Adobe Flash CS4 Classroom In A Book and Learning Flash CS4 Professional are being knocked out at way under half price in some places, so grab a bargain while you can! In fact, if you’re in the UK you can get an even better deal in the current Amazon “50% off selected computing and internet books” sale where several Flash titles are reduced even further.

Of course, the bargains won’t stop at just books. I suspect that after April 10th there will be plenty of opportunities to grab bargain bin versions of Flash CS4, so if you’re still using an old and weary installation of MX2004 and looking to get up to date without splashing out on the latest upgrade to CS5 when it’s released, keep your eyes open for the next few weeks as I’m sure you’ll be able to grab a real bargain!

Well first of all apologies to everyone for the lack of posts this month, if you follow me on Twitter you’ll know I’m extremely busy with a couple of big games for clients so I’ve had very little time for blogging!

Anyway, one of the projects we’re currently in the early stages of is a multi-player game for the Facebook platform.  I’ve done some multiplayer games in the past, quizes and simple heads up puzzle games, but nothing this big or complex.  In the past I’ve used both SmartFox server, and an early version or ElectroServer, but since I’ve not done any multiplayer games for a while I’ve been researching which would be best to use for this project.  As part of that reserach I picked up a copy of Jobe Makar’s latest book Actionscript for Multiplayer Games and Virtual Worlds and I thought I would post a quick review here.  (By the way – I’m now 99% decided on Electroserver for a number of reasons, so expect a tutorial on that in the near future once we have the first demos completed!)

Actionscript for Multiplayer Games and Virtual Worlds

I first heard of ElectroServer in Jobe Makar’s first book Flash MX Game Design Demystified.  From the title you’ll immediately realise that book is quite a few years old, writted back when Flash was still a Macromedia technology.  In fact, that book was published in 1993 right about the time I was first getting into Flash.  It was actually March 2003 when I uploaded my first Flash games to a website and saw the incredible potential for the technology – and a good portion of my knowledge at the time came from that book.

Well, fast forward 7 years and what does Jobe’s latest offering bring to the table?  Well as you’ll gather from the name, the book is about multi-player game development, and specifically about building multi-player Flash games in AS3 using the ElectroServer socket server.  In the second chapter Jobe does talk about different technologies, and briefly mentions alternatives to ElectroServer, but then moves swiftly on and focusses on ElectroServer for the rest of the book.  Now, I should mention that there’s a good reason for that – Jobe is one of the co-founders of ElectroTank, the makers of ElectroServer and so has a vested interest in promoting the software.  Having said that, I’ve spent quite a bit of time investigating and testing alternatives, particularly the big rival SmartFox, and in my opinion ElectroServer is the best choice for most applications.

The early sections of the book focus on server technologies, concepts and security issues before an installation guide for Windows, Linux/Unix and Mac.  Then he dives into the ElectroServer API with the obligetory Hello World example.  The rest of the book then teaches one concept at a time using real world examples.   Chapter 5 looks at chating, how chats are made available to users and how to set that up using ElectroServer.  Chapters 6 through 8 look at more basic concepts such as the difference between client and server code, movement and lobbies and finally in chapter 9 Jobe gives the first full game example – he takes you through the process of building a real-time tank game, and by the end of that chapter he has covered a lot of really useful concepts, from collision detection to path finding and even spatial audio (something very few authors seem to touch on).

Chapter 10 looks at tile based worlds, discusses their advantages and looks at the logic behind a tile based engine, and a good explaination of the a* pathfinding algorithm.  That is then built on in chapter 11 with a look at building a co-operative 2 player game.  Chapter 12 is where things start to get really interesting with a look at the isometric viewpoint and how that can be used effectively in building virtual worlds.

The rest of the book I’ve only skim read so far, and it covers a number of useful topics such as player avatars, buddies nd virtual worlds, and finally the appendix offers a guide to setting up the sample extension which can be downloaded from the website.

Here’s a breakdown of the chapters in details:

Chapter 1. Web Game Landscape
Client-side Technology
Where Multiplayer Fits In

Chapter 2. Connecting Users
Connection Techniques
Socket Server Choices<

Chapter 3. Security: You vs. Everyone Else
Logical Security
Physical Security

Chapter 4. Introducing ElectroServer
Server Concepts
Installation
Hello World
Administration Panel

Chapter 5. Chat
Overview
Simple Chat Room

Chapter 6. Where Decisions Are Made
New Concepts
ElectroServer Plugin Concepts
Installing the Extension
Dig Game

Chapter 7. Real-time Movement
Responsive Controls
Path Types
Frame-based Movement
Latency and Clock Synchronization
Time-based Movement

Chapter 8. Lobby System
Common Features
Game Flow
Dig Game 2

Chapter 9. Real-time Tank Game
Game Overview
Authority and Prediction
Line of Sight
Game Messaging
Mini-map
Message Aggregation
Level Editor
Spatial Audio

Chapter 10. Tile-based Games
Tile-based vs. Art-based Levels
Other Tile-based Benefits
A* Pathfinding

Chapter 11. Cooperative Game Play
Types and styles of Cooperative Game Play
The Game: Super Blob Brothers
Server vs. Client: Who’s the Boss?
Game Messaging
Client-side Details

Chapter 12. Isometric View
Basics and Benefits of Isometrics
A Technical Look
Sorting Algorithm

Chapter 13. Avatars
Meet the Avatars
Rendering Approaches
Sprite Sheets
Avatar Creation and Customization

Chapter 14. Virtual Worlds
Common Features
Old World
Map Files
Map Rendering
The World

Chapter 15. Buddies
Relationships
Buddies in Old World

Chapter 16. User Homes
“Open House”
User Homes in Old World

Appendix: Setting Up the Sample Extension
Server-Level Components
Old World
Configuring the Logging
Setting up the Server-side Development Environment

Conclusion

I’ve not had time to go through all of the examples yet, but those I have gone through have been excellent.  Jobe is a great writer and is able to get the concepts across easily making the book quite an easy read despite the technical content.  It’s also well laid out and edited so you’re overwhelmed with pages crammed full of code. In fact, when I first picked the book up I was a little dissapointed as it’s quite small and I wrongly assumed it was light on content, but quite the contrary – in fact it’s amazing how much solid content Jobe manages to cram into such a small package of less than 300 pages.

Personally I can’t wait for the designs for my project to get approved by my client so I can dive into the development work, and many of the concepts taught in this book will be cornerstones of my approach to the new game.  If you’re at all interested in building robust multiplayer games in Flash then you really do need this book, and you can certainly expect one or more tutorials on the subject posted here at some point in the future!

Buy Actionscript for Multiplayer Games and Virtual Worlds on Amazon

I had an interesting conversation with one of my pupils over the weekend about whether Flash games development was commercially worth the effort.  His concern was that while he wanted to learn game development for personal reasons, he felt that commercial web design might be a better direction to focus in as it would be easier to get a job, or start a successful business in that field.

My answer was quite simple – there are thousands of very talented web designers out there, and very few good games developers!  Add to that the fact that casual gaming is definitely on the rise, and there are more and more posts on the freelance sites looking for developers every month and it’s clear that this is a growing industry and a better one to be involved in than web design in my opinion.  And I’d like to think that my opinion counts on this matter, since I’ve been a commercial web designer and Flash games developer for the past 8 years!

Anyway, we discussed several different approaches to making an income with Flash game development, many of which my pupil hadn’t considered, so here they are in the hope that more people find inspiration…

6 ways to monetize Flash games development (without getting a job!)

Developing games for clients might be the most obvious way of earning money as a developer, but it’s surprising how few companies offer the service. I’ve been developing games for over 8 years now, and I’m constantly asked to work on new projects. There are lots of companies out there ready and waiting to pay you money to design and develop games for their marketing campaigns.

If you don’t want the obligation and deadlines of working for clients, sponsorship mighht suit you better. This allows you to develop a game at your own pace, and once completed your sponsor pays you to embed their branding and links into the game. The amount you’ll earn will vary, depending on the company which is sponsoring you, and the quality of the game.

Taking it one step further, you can monetise your own games without needing a client or a sponsor. Networks such as Mochiads allow you to embed adverts into your games, and publish your games on their network which gets you both revenue and exposure at the same time.

You can also monetise your games by simply hosting them yourself, and displaying adverts on the same page. Banner adverts, Adsense blocks or affiliate promotions are all viable ways of monetising the traffic that a good Flash game will generate.

A very recent, and rapidly growing technology allows for in game currencies. While this is quite new there are already 2 networks offering the service and I’m sure this will grow tremendously in the coming months and years.

Finally, perhaps the most obvious, and certainly the most glamorous way to capitalize on the success of a good Flash game is to release a commercial version. Whether it’s a downloadable PC game or a port to an entirely new platform, such as the Nintendo DS, the Xbox Live network or the iPhone, a well designed unique game with the right marketing can be a real success, and open the doors into the mainstream gaming industry.

So there you go, six different ways to generate an income from your Flash games development.  In fact, why not start right now.  You could take the Flash Asteroids Tutorial I posted recently, modify that with your own ideas and pop it on your own website with some Adsense ads! Or how about grabbing some Flash Games source code, using some of what you’ve learned here to add new levels, change the graphics and put your own features in and submit them to Mochiads?  The opportunities are all there, you just need to pick an idea and run with it!

I wanted to write a real quick post today about the basic methodology of developing Flash games.  I’ve had a couple of people email me recently after filling in the survey about whether the Flash Games Classroom course will cover subjects like design, planning and asset management and the answer is yes it will!  In this post today though I just want to give a really brief into and explain why just sitting down at Flash and starting to code isn’t a great idea!

A good developer needs to be competent in Flash and Actionscript with solid programming practices, graphical skills, audio skills, a methodical and analytical approach, and the patience of a saint. Here is a guide to how the average developer tackles a games project. Video games are complex beasts. Even a game as simple as Pacman has quite a number of routines, such as controlling the ghosts, taking user input, checking collisions, keeping score, and generating levels, not to mention non-game screens and functions like pre-loaders and splash screens.For this reason, a methodical approach to game development is essential, otherwise the project becomes chaotic, over budget and a nightmare to work on.

The first thing to do is to draw up a solid design, away from Flash, and include complete lists of assets such as graphics and audio. Only then can you begin to develop the game in Flash. The first step once the design is completed it to create a mock-up – an outline demo in Flash using placeholder graphics, which can be used to test and develop the game logic. Once that is nearing completion you can begin to start adding graphical assets and audio. It’s a good idea to leave out all extras at this stage however. Things like splash screens and mid-level animations can slow testing down considerably, so leave them for the beta version.

Once the game reaches the later stages of development, when the game engine is mostly complete and tested, the final touches can be added. Introductions, help screens, preloaders and game over screens should all be added at this point. Leaving these until now means that testing is quicker, with less clicks, keypresses or waiting is required to restart levels or replay the game.

Then finally you’ll have a completed game, ready for final beta testing. Even though we started with a complex project, by breaking the design and development process down into bite sized chunks it became manageable. If you’re thinking of getting started in Flash game development then it’s a really good idea to edit an existing game or two first. Making changes to an existing game, such as adding new levels or power-ups, can be a far less daunting task than building a whole game from scratch. You can even take the source code for an existing game and turn it into a new game entirely. Then once you’ve gained more experience you’ll be in a better position to start building your own games from scratch.

This is a follow-up to the main tutorial from last week, How to write the arcade classic Asteroids in Flash, which originally appeared in the January edition of Flash and Flex Developer’s Magazine which can be found at FFDmag.com

In the tutorial we built a fully working, but rather basic version of Asteroids and today we’re going to add a couple of improvements.  I’ll leave features like power-ups and shields for a future post, but there is one gameplay tweak which is quit important.  In our original game we had no maximum speed on our spaceship, which meant that if the player held the thrust (UP) key down the ship would continue to accelerate ad infinitum.

That’s all well and good, but apart from looking glitchy one the ship starts travelling too far on screen each frame, if the ship is allowed to accelerate too much it could interfere with the collision detection, as it would effectively “jump” over an asteroid.  So today we’re going to fix that, and also add some simple audio so that it starts to feel like a real game.  Here’s an example of the updated game in action…

Setting a maximum speed

Our ship’s velocity is a vector, meaning it has both magnitude and direction.  That means we can’t simply check the current speed against a maximum speed and prevent further thrusting if it’s too high – that would prevent the player from turning, and thrusting away in a different direction.

There are several solutions to this, but since it’s such a simple game and we’re not interested in real-world simulations we’ll go with a nice simple one.  Effectively we’ll check both the X and Y velocity of the ship after the thrust key is hit, if the extra thrust would push either the X or Y velocity over the limit we won’t apply it!

This means our ship will have a higher maximum velocity if travelling diagonally on the screen than if it’s going straight up/down or left/right, but for our purposes that’s not much of an issue.

Coding the change

We’ll need one new class variable:

Then we need to make a change to the moveSpaceship() method.  Replace these lines:

with this…

As you can see, we’ve calculated the new thrust values for a pair of temporary variables, then we compare the new velocities based on these values, and only if they are below the maximums do we apply them to the actual ship velocities shipDX and shipDY.

Adding audio

No game is complete without sound effects, so take a look at a couple of ways of adding them to a game. I won’t go into detail here about using sound channels and transforms to allow for mute controls etc, that can be another post another time, for now let’s just get some simple sound effects into the game. First we’ll need some sounds. Flash will support Wav or MP3 format audio and there are loads of sites online where you can download free (or cheap) sound effects in those formats. If necessary you can trim or edit them using something like Audacity and then you want to import them into our FLA file. Go File > Import to Library and select all of the sounds you want to import. I’ve imported 4, one for the ship exploding, one for the ship firing, one for hitting an asteroid, and one for end of level/game.

The simplest way to add a sound is on the timeline.  Open up the ship movieclip and add a new level called audio.  Add a new keyframe (F6) on frame 3 (the same frame that the explosion animation starts) and on the properties panel, click on the Sound dropdown and select the sound you want to play when the ship explodes.  You’ll notice a waveform for the sound shown on the timeline, as shown below.

Adding sound to the timeline

You can do the same thing in the messages movieclip to add the end of level, and end of game audio.

Now the asteroid getting hit, and the ship firing can’t be done in this way since they don’t have animations, but that’s good because it gives us a good reason for using Actionscript to play the audio.  Controlling sound with Actionscript is much more powerful than using the timeline as it gives loads of extra control, and allows us to do things dynamically (it’s also how we would add a mute or volume control to the game!)

First of all we need to right-click on each of the audio assets we intend to control in the library, check the “Export for Actionscript” setting and give them an appropriate class name:

Check "Export for Actionscript" and give it a class name

To use simple sound we need to add one new import to our AS file:

Then we need to declare a class variable for each sound we want to use:

The type is whatever class name we gave that sound when we set the linkage (and is case sensitive!)

Then we simply use Sound.play() to play those sounds at the correct moment. So add this line to the fireBullet() method right after adding the bullet to the bullets array:

And add this line to the removeAsteroids() method, right after splicing the asteroids array:

That’s all there is to it.  We now have basic, but fully working audio in our game!

As usual, comments or questions are very welcome.  I’ll come back to this again in a week or so and we’ll add some other gameplay features such as powerups!

(If you want to see the original Asteroids tutorial, and download the source files click here)

Those of you who read Flash and Flex Developer’s Magazine might have already read my Asteroids tutorial in the January edition.  If not, you can grab yourself a copy over at FFDmag.com

The tutorial shows you how to create a simple arcade game from scratch, based on the classic arcade hit Asteroids.  Rather than completely rehash the entire article here, what I wanted to do was back the article up with a little more info, show some of the setup in a more visual manner (with a short video) and then show how the game in the tutorial could be extended with extra features like audio, powerups and other game extensions.

In today’s post I’ll show you how to set up the Flash file, and go over how I designed and built the basic game.  Then I’ll follow up in a few days with a second post showing how to add extra functionality to the game, and get it to a level where it could be published online.  First of all, let’s take a look at the game… (note this is scaled down from full size of 800×600 px)

I’ve named it “Space Debris” but essentially it’s the same gameplay as the old Atari classic.  You move a small spaceship around the screen by rotating (cursors LEFT/RIGHT) thrusting (cursor UP) and firing bullets (X) in an attempt to destroy the asteroids.  Shoot a large asteroid and it becomes 2 smaller asteroids, they in turn become 2 yet smaller asteroids, and finally the smallest ones are removed when hit.  Clear the screen and you’ll have to face a larger, harder wave.

The player begins with 3 lives, they lose one if they crash into an asteroid, and the game is over when all lives are lost.  Pretty basic stuff right?

OK so the game will be written in a single class named Asteroids.as and we’ll also use a Flash file which will handle the intro/outro screens and hold our graphical assets etc.  In this video I’ll quickly show you how to set it up and then I’ll move on to actually coding the game, or simply click here to download all the source files.

Setting up the Asteroids game file

Writing the Asteroids game class

The following is taken from my article in Flash and Flex Developer’s Magazine January 2010 edition, reformatted slight for this blog but it is LONG!  I would highly recommend grabbing the FFDMag January edition and reading from that instead, which also includes full setup details for the Flash file!  Then just skip to the end of this post to grab the FLA and AS3 source files…

First create a new actionscript file and save it as Asteroids.as

Listing 1 (please download the AS files at the bottom of this page) shows the Asteroids class which extends MovieClip. It uses 4 imports, and has quite a number of class variables. Most of these are self explanatory such as lives or score. Some however need a little explanation.

We use 2 eponymous arrays to keep track of all the asteroids and bullets currently on screen, and we use a movieclip called gameField which will contain all the game objects (spaceship, asteroids, bullets).

The variable oldTime is used with our timer to calculate the new positions of each object on every frame, depending on their current speed and how long since the last frame.

The three booleans simply keep track of whether the ship is currently turning or thrusting, and then we have variables for all of the ship parameters, from how fast it rotates, to the maximum number of bullets it can fire.

Finally we declare 4 points, and another boolean. The points are the co-ordinates of the outer extremities of our ship and will be used when we write our collision detection function to see if the ship has crashed. The boolean simply tracks whether the game is currently playing (and the ship hasn’t already crashed!)

Beginning our game

You’ll notice that there is no constructor method. That is because we don’t want the game to start automatically, so instead we write a method called startGame() which we call frame 2 of our FLA file.

The startGame() method sets up our game by resetting variables such as level and score, creating new arrays to keep track of the asteroids and bullets, and creating our gameField movieclip which we move behind our control panel with the addChildIndex method.

We add 3 event listeners – one for ENTER_FRAME, which is our main game loop, and 2 for user input (KEY_DOWN and KEY_UP). We also call a method called addShip() which, as the name suggests, creates our ship object. We could also call nextLevel() from here to generate the first asteroid field, but instead we play the message movie clip, and add a listener which will call messageHandler() on each frame. The messageHandler() method in turn will call nextLevel() once the message “Get Ready…” has been shown on screen.

Main game loop

Asteroids in an action based game. Unlike a puzzle game or turn based game like Tic Tac Toe, or Sudoku, an action game has things happening all the time, on every frame, whether there is input from the user or not. To handle this we create a method called gameLoop() which is called every frame from the listener we declared above.

This gameLoop() method calculates the position of every object on screen, based on its velocity, and the time passed since the previous frame (see Time based animation post for more details). It does this by first getting the time in milliseconds since the game started and subtracting from that the time of the previous frame. This gives us the exact number of milliseconds since the last time the screen updated which is then passed to a number of methods to calculate the new positions of the ship, bullets and asteroids.

We also check for collisions (to see if an asteroid has been shot, or has crashed into the ship) and finally we update the text field for the score.

Game objects

We have 3 different types of game objects – our spaceship, the bullets it fires, and the asteroids. Each type of object has a method to create it, a method to move it (i.e. update its position on screen) and a method to remove it. Let’s look at each object type in turn.

Spaceship

Firstly the spaceship. This is what the user controls via keyboard inputs. It starts in the middle of the screen and there it remains until we give it some input. The addShip() method is very simple – it creates a new SpaceShip object, sets its position to the center of the screen, adds it as a child of the gameField object and sets the inGame variable to true.

The moveSpaceship() method is quite simple too, but involves just a little maths First it deals with the user input. If turnLeft or turnRight are true (set when the left/right cursor keys are pressed) then the rotation of the ship is either increased or decreased by the rotation speed.

If the thrust variable is set however there is a little more going on. We need to convert the thrust force into cartesian values for x and y. This is done with basic trigonometry If you think back to your trigonometry lessons from school you’ll remember that the x or y value can be found by using sine or cosine of the angle (rotation of the ship) multiplied by the hypotenuse (thrustAmt). We’re working in radians (rather than degrees) so we find the increase or decrease in x and y velocities like this:

Now that we know the velocities we can update the position of the ship by simply adding the new velocity values to the x and y co-ordinates of the ship. We also show frame 2 (the thrust frame) of the ship movie clip if thrusting, or frame 1 if not.

The last part of the moveSpaceship() method handles the edge of the screen. In Asteroids, the spaceship and asteroids “wrap” from one side of the screen to the other, and from top to bottom. To handle this we simply check to see if the ship’s position is outside of those boundaries, and if it is we wrap it to the opposite edge (with a little overlap of 20 pixels, roughly the width of the ship, which makes the transition look smooth!)

Removing the spaceship is actually handled by 2 methods – firstly we call explodeSpaceship() which sets inGame to false, moves the spaceship to the top of the gameField display list (to make sure it’s in front of the other graphics), and then plays the explode animation. We also take a life off at this point and update the lives field on the control panel.

An event listener is added which calls removeSpaceship() once the explode animation is completed. This removes the spaceship movie clip, then either calls addShip(), or if there are no lives remaining ends the game by playing the gameover frame in the messages clip.

Asteroids

At this point we have a spaceship flying around the screen, but that’s not much of a game on its own so lets add some asteroids! Again, we have methods to add, move, and remove, but we also have a method called nextLevel() which generates the entire asteroid field for the level.

Let’s begin with the addAsteroid() method. It accepts 3 parameters – asteroidType which is a string (big, medium or small) along with x and y co-ordinates. We declare a new MovieClip variable called newAsteroid, and depending on the asteroidType parameter we create a new big, medium or small asteroid object. We also give the new asteroid a random vertical and horizontal speed within certain limits (the smaller asteroids can move faster than the big ones!)

We then position the asteroid according to the x and y parameters, rotate it to a random angle and finally add it to both the asteroids array and the gameField movie clip.

Responsible for generating the asteroid field, and passing the parameters to addAsteroid is the nextLevel() method. It begins by incrementing the level variable (which we initially set to 0 in the startGame() method. We generate a number of asteroids, equal to the level number plus one so we open a for loop, and then create asteroids in random positions on the screen.

We don’t want asteroids to appear in the center (that’s where our ship is) or too close to the edges (otherwise they may instantly wrap which will cause a flicker) so we split the game field up into 4 quadrants. We randomly choose a quadrant, and then randomly generate a position within that quadrant to place the asteroid. That position, along with the size is passed to the addAsteroid() method to generate the asteroid field for the level.

Moving the asteroids is simpler than the ship since there is no user input to worry about, except that this time we loop through each asteroid in the asteroids array one by one. We again use the timeFrame parameter generated in gameLoop() but this time we simply move the asteroid based on its horizontal and vertical speed. We rotate it based on the difference between those 2 speeds (saves having to generate another random number, but keeps them all rotating differently) and we wrap at the edges just as we did with the spaceship.

While moving the asteroids is simpler than the spaceship, removing them is very slightly more complex. If it’s a small asteroid we can simply remove it, and increase the score. If it’s medium or large however we need to split it into 2 smaller asteroids. We do that by first checking the the type, and then calling addAsteroid() twice for the next size down. We also increase the score here, based on the size of asteroid hit, and finally we remove the asteroid both from the array and the game field.

At this point we also check the asteroids array to see if there are any remaining asteroids. If there are none then the level is over, and we play the messages clip from the “next level” frame, and add a listener which calls messageHandler() (and in turn the nextLevel() method) when the message finishes.

Bullets

Bullets are actually very simple since they don’t rotate, and they don’t wrap (we’ll remove them when they reach the edge of the screen). First we create a new bullet with the fireBullet() method which takes no parameters. It is called when the player hits the X key to shoot, and creates a new Bullet object. We calculate the new bullet’s velocity based on the current rotation of the ship in the same way we calculate the ship’s velocity. We then position the bullet just in front of the ship, add it to the gameField and the bullets array.

Moving the bullets is just like moving the asteroids in that we loop through the bullets array one by one. For each bullet we move it based on its velocity (multiplied by bulletSpeed) and we then check it against the edges of the gameField. Once the bullet goes beyond the edge of the screen we call removeBullet.

removeBullet() method accepts a single parameter, which is the index of the bullet in the bullets array. This method simply removes the bullet from the game field, and from the array.

Pulling it all together

OK so we now have a spaceship flying around the screen under the player’s control, we have asteroids floating through space, and we are able to shoot but there is one big element yet to code – the collision detection!

At the moment our spaceship is invincible, and our bullets pass right through the asteroids without making a dent. What we need is a final method added to our game loop which checks for collisions between the asteroids, and our ship and bullets.

So the checkColisions() method actually handles 2 different types of collision – asteroid/ship and asteroid/bullet. Let’s take a look at the ship collisions first.

First we check the inGame variable to ensure that the ship is still in play. If it is then we loop through the asteroids array and check each asteroid’s hit clip against each of the collision points on the ship using hitTestPoint with the shapeFlag parameter set to true (see collision detection box). The localToGlobal method is used to convert the collision points (which are relative to the ship) to global co-ordinates. If there is a match (i.e. if one of the collision points is within the boundary of an asteroid’s hit clip then there has been a crash and explodeSpaceship() is called.

For the bullet collisions we loop through the asteroids array, and for each asteroid we loop through the bullets array. Using hitTestPoint again, this time we simply check the bullet’s x and y co-ordinates against the asteroid’s hit clip. If there is a collision we call both removeAsteroid() and removeBullet(). We then break out of the inner for loop, using continue loopAsteroids; to prevent checking another bullet against the asteroid which has just been removed.

Finishing and running the game

The final methods, showScores(), restartGame(), keyIsDown() and keyIsUp() are self explanatory, and if you’ve followed the tutorial this far you should now have a simple but working game.

While this works as a great example for learning some of the fundamental principles of game development, and a few years ago it probably would have been enough to compete with many other Flash games on the web, these days players want something a little more refined.

{ End of magazine tutorial… }

Whew – I told you that was long!  OK, so rather than list all the actionscript here too I’ve put all the source files together in a zip which you can download here.

I really hope you enjoy tinkering with the game, and you learn a ton from it.  Please do give me some feedback, just leave a comment with any questions or suggestions and I will read them and resond.  Next week I’ll post a follow-up article which will extend the game, and audio and some other functionality, and basically turn it into a usable web game, so if you want to see specific features added do let me know!

In the meantime, have fun playing with it

Download the Flash social media buttons components