Build airship shooting game from scratch Part 1

30 Jan 2013

by BrianL

In this tutorial, we will learn together how to build an airship shooting game from scratch. For building up a good base on coding knowledge, we use Flash as our battle field and AS3 (Action script 3) as our weapons. Charge!!!

Tutorial Information

Difficulty: Beginner
Platform used: Adobe Professional Flash CS6
Estimated completion time: 2 hours

Build airship shooting game from scratch Series

Download Adobe Flash CS6

Adobe Flash is a good multimedia platform for creating and organizing graphic assets, animation, sound and code. It can be used for many type of game projects, from web game, PC game to even mobile game such as iOS and Android.

Download the free trial version here if you don’t have one. And ENJOY IT!

Basic Flash Interface

After the install, we run Adobe Flash Professional CS6.exe. To create a new Flash file, we can either click on “ActionScript 3.0” under “Create New” section in the middle panel, or go to File/New -> click ActionScript 3.0 under Type section -> click OK.

Let see what is on screen.

Stage: is the main workspace of Flash. We can import graphic assets to stage, draw vector on stage, create Text and a lot of other things. Size of stage will decide the final size of the swf file which you will compile (or publish) in the end of the work. We can change the size of the stage by modify it in the Property panel on the right.

The default size of a new flash file would be 550 x 400 pixels. If we publish swf file now, we would have a blank page with 550 x 400 pixels. Let’s test! go to Control/Test Movie/Test (or with shortcut key: Ctrl + Enter).

In the Property panel, there are some important parameters:

FPS: Frame per second (not First-person-shooting). Default value is 24. The bigger FPS, the smoother animation can be. But it can reduce the performance of the game since it has to run a lot of frame per second. Normal values that we usually use are 24, 30 and 60. In this project, we use 30 FPS.
Size: size of stage. Default value is 550 x440 pixels. We change to 960 x 640 pixels in this tutorial. (960 x 640pixels is the size of ipad 1 and 2, if we have chance, we can run this game on iPad, too)
Stage: color of stage. Default value is white. We keep it white in this tutorial.

Timeline: is a very good system/tool to create and organize your animation for 2D game.

Library: is a collection of any assets used in the project, such as MovieClip, sound(mp3, wav), image (jpg, png), font, etc.

Tool: is a collection of tools used in Flash, such as Selection Tool, Pen Tool, Rectangle Tool and many others.

To end this intro section, let’s learn about MovieClip.

MovieClip is a class in the Library included in Flash. It will be a bit ambiguous but we will get used to it through out this project.

Class

In a computer language (such as AS3, java, C++ and Objective-C), we have to use some libraries of code which are written by professional coder in order to use the feature of running platform. In one Library, usually there will be many Classes (or many Classes together will form a Library). Class is used as a definition of something (Example: Bird – name of class, CanFly – class property/attribute).

MovieClip is a class which has some basic attributes as: x, y (coordinator), visible (can be seen or not), numChildren (contains how many objects inside), totalFrames (if inside a MovieClip is an animation), etc.

An opposite example is Sound class, which has no x, y coordinator values, no visible attribute or totalFrame.

Next tutorial

Create a FLA file.
Import a ship image into stage and make it into a MovieClip.
Create a Ship class.
Program it to fly from left to right.

About the Author

I am a game design freelancer. I make games, from 2D to 3D, from PC to mobile. I work in both graphic designing as well as programming. Game designing is everything to me. I live in Singapore at the moment. Feel free to contact me at: brianlin1992@yahoo.com