Create a Three Shell Game in Flash – Active Premium
The shell game is a cliché of street corners in black and white movies and modern cities: the hustler puts a pea under one of three shells, and swaps the shells around rapidly, challenging you to pick the shell with the pea underneath. The punter will typically get it correct… right up to the point where big money is at stake, or when the punter isn’t one of the hustler’s cronies.
In this tutorial, exclusive to Premium members, you’ll learn how to create your own version of the shell game – except without the cheating!
Preview
Let’s take a look at the final result we will be working towards:
The tutorial covers both the design and the coding of the game, and uses TweenMax to make the shells move along a curved path.
Active Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
View full post on Activetuts+
The shell game is a cliché of street corners in black and white movies and modern cities: the hustler puts a pea under one of three shells, and swaps the shells around rapidly, challenging you to pick the shell with the pea underneath. The punter will typically get it correct… right up to the point where big money is at stake, or when the punter isn’t one of the hustler’s cronies.
In this tutorial, exclusive to Premium members, you’ll learn how to create your own version of the shell game – except without the cheating!
Preview
Let’s take a look at the final result we will be working towards:
The tutorial covers both the design and the coding of the game, and uses TweenMax to make the shells move along a curved path.
Active Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
We’re excited to let you know that now, in addition to Twitter and Facebook, you can get involved with the Activetuts+ community over at Google+! We’ll be using Google+ to let you know about our latest tutorials, competitions, and Tuts+ news. Read on to find out more…
What to Expect on Google+
Through Google+, we’ll be publishing links to our new tutorials and articles, industry news, graphics and examples from our community, and lots more! It’s going to be an extension of the Activetuts+ site and community, in the same way we treat Twitter and Facebook.
Don’t have a Google+ account? You can head over and create one here, or find out a little more about how it works.
Add Activetuts+ to Your Circles
Just use the button above to add Activetuts+ to your circles, so you don’t miss out on any of our new content. We look forward to seeing you on Google+!
It’s that time of month again! If you’re a fan of the Activetuts+ Facebook page, you can now access a new bonus tutorial. In this month’s Facebook Fan Bonus, you’ll learn how to create a dynamic “Accordion” menu.
Final Result Preview
Here’s a look at the type of menu you’ll learn to build in the tutorial:
Obviously, in your own game, you’ll add other elements to the menu’s different screens.
As Tyler Seitz, the author, describes it:
Download This Fan Bonus Now!
All you have to do is Like us…
Not On Facebook?
Don’t worry, the tutorial will be posted on Activetuts+ in a month’s time!
Today, you will learn how to remove the background color from a sprite sheet using AS3, and blit the result to a bitmap canvas. Read on to learn more!
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: Drawing the Spritesheet
So, it is time to draw your spritesheet. Open up your favourite ‘pixel-art’ program and create an image of 128×128 and give it a background colour of ‘#e731f2′ which is a nice purple colour!
This is my amazing artwork:
Save your image somewhere organised and let us continue!
Step 2: Importing the Sprite Sheet
Now, I’m call this a sprite sheet even though it is just one image. A ‘sprite sheet’ usually consists of more than one sprite but we can imagine we have more, right?
Anyway, if you are using Flash CS4 or higher, simply import your image via File | Import | Import to Library:
If you are using any other AS3 IDE, I have included the SWC file so you should probably skip this step. If you wish to embed your own images, I’m sure that your IDE of choice will have this feature.
Step 3: Exporting the Sprite Sheet
We have now got our sprite sheet in the Library; we should really make it into a
Class.Right-click the image in the library and select ‘Properties’. Give the image the following properties:
Hit OK. If you get a warning, just ignore it; it does not matter here.
Step 4: Creating the Document Class
If you’re not familiar with the concept of a document class, check out this Quick Tip before reading further.
Create a new ‘ActionScript 3.0 Class’ and give it the name ‘Main’. When the file has been created, save it as ‘Main.as’.
This code should be placed in our new Class:
package { import flash.display.MovieClip; public class Main extends MovieClip { public function Main() { // constructor code } } }We are not done yet, however! If you are using the Flash IDE, navigate to the ‘Properties Panel’ and set the ‘Document Class’ to ‘Main’. If you are wondering what that does, it means that when your application/game is run by the Flash Player,
Main.aswill be the class that’s linked to the SWF itself. Cool, huh?Run the program; if you get no errors then you should be good to go!
Step 5: Creating the Canvas
Before we do any blitting, we will first need to make a canvas to blit onto. If you are unsure of the term Blitting or would like to learn more about it, please take a look at this tutorial.
Now, we will declare a new Bitmap variable, to which we will blit (copy) the image.
After we have done this, we will add a
functioncalledInitialize()which will allow us to set everything up neatly:public function Main() { Initialize(); }Let us create the function now:
private function Initialize():void { canvas = new Bitmap( new BitmapData( 550, 400, false, 0x000000 ) ); //Sets the Canvas to Black. stage.addChild( canvas ); //Adds the canvas to the stage. }We are still not finished however, as we still have to add the
imports:Run the program; if it has a black background, it worked!
Step 6: Initializing the SpriteSheet
Firstly, we will need to make a new variable of type
SpriteSheet– which was the Class for the image we imported earlier, remember?We shall then initialize it:
private function Initialize():void { canvas = new Bitmap( new BitmapData( 550, 400, false, 0x000000 ) ); //Sets the Canvas to Black. spriteSheet = new SpriteSheet(); //Sets spriteSheet to hold an instance of the image that we made. stage.addChild( canvas ); //Adds the canvas to the stage. }Run the program and you should see nothing; let’s fix that right away!
Step 7: Updating the Program
Now we need to add an
ENTER_FRAMEevent. This will allow the program to update 24 times a second (24 FPS) in our case.In the
Main()function, add the following line:public function Main() { Initialize(); stage.addEventListener( Event.ENTER_FRAME, Update ); }Now we need to make the
Update()function. Add this function after the other functions:private function Update(e:Event):void { }Don’t forget the
imports:Now we are ready to do some blitting!
Step 8: Blitting
Here comes the interesting part!
Alright, so what we want to do is:
In the update function, type the following code:
private function Update(e:Event):void { canvas.bitmapData.lock(); canvas.bitmapData.fillRect( new Rectangle( 0,0,stage.width, stage.height ), 0x000000 ); canvas.bitmapData.copyPixels( spriteSheet, new Rectangle( 0,0,128,128 ), new Point( 100, 100 ) ); canvas.bitmapData.unlock(); }If you run this, you will get your image on the canvas! However, this is not just what we are aiming for as we wish to remove that background colour from the image.
I shall explain some of the code above first:
canvas.bitmapData.lock();– This line optimizes the blitting and it is a good habit to type it most of the time!canvas.bitmapData.fillRect();– This line clears the canvas by filling it with a Black colour.canvas.bitmapData.copyPixels();– Not very useful in our situation but copies all the pixels from part of an image.canvas.bitmapData.unlock();– This works withlock()to optimize the process.Now you should have this on the screen…
Yes, I know, you are probably right. I think we should get rid of the purple too…
Step 9: Removing the Colour
Finally, it’s time to remove the purple colour!
What we want to do is check through every pixel; if the pixel is purple, we simply do not copy it to the canvas. To do this, we will make our own function.
Change
Update()to the following:private function Update(e:Event):void { canvas.bitmapData.lock(); canvas.bitmapData.fillRect( new Rectangle( 0,0,stage.width, stage.height ), 0x000000 ); CustomBlitting( spriteSheet, new Rectangle( 0,0,128,128 ), new Point( 100, 100 ), 0xE730F2 ); canvas.bitmapData.unlock(); }Our new function (
CustomBlitting(), which we have not written yet) takes most of the parameters that copyPixels does, along with an extra one: the colour we wish to remove.Time to write the function. This code may look complicated if you have never done a
nested for-loopbefore. The way this loop works is basically:private function CustomBlitting( src:BitmapData, srcRect:Rectangle, destPoint:Point, color:uint ):void { for( var i:int = 0; i < srcRect.height; i++ ) { for( var j:int = 0; j < srcRect.width; j++ ) { var currentPixel:uint = src.getPixel( srcRect.x + j, srcRect.y + i ); if( currentPixel != color ) { canvas.bitmapData.setPixel( destPoint.x + j, destPoint.y + i, currentPixel ); } } } }Let me explain the getPixel and setPixel, although they should probably be self-explanatory:
getPixel( x, y );– This returns the colour of a pixel at the X,Y location.setPixel( x, y, color );– This sets the colour of a pixel tocolorat the X,Y location of the canvas.Now if you run the program, it works!
Step 10: Challenges
I only have one challenge for you to do for this tutorial:
Accept an Array of colours as a parameter and remove any colours from the image that are in the array.
Good luck!
Conclusion
I hope you have enjoyed this tutorial and have learnt something new today. If you’d like to show me your SWF with the completed challenges, leave a comment below!
The Starling Framework is an AS3 API that mimics the display list, with one crucial difference: it uses Flash Player 11′s new features to render all content by the GPU. In this tutorial, you will learn to add multiple animations to a sprite using the Starling Framework. It assumes a basic understanding of using spritesheets with Starling.
Final Result Preview
Click here to view the demo we’ll be working towards. Click left or right of the monkey to make it walk in that direction; notice how it displays a walking animation when moving and a static frame when standing still.
Initial Code
The entire demo’s source files (in both the initial and final states) are in the source download. However, we’ll mainly be working with one file,
MonkeySprite.as, so here are the contents, for reference:package { import flash.utils.getTimer; import starling.animation.Juggler; import starling.core.Starling; import starling.display.MovieClip; import starling.display.Sprite; import starling.events.Event; import starling.textures.Texture; import starling.textures.TextureAtlas; public class MonkeySprite extends Sprite { private var standMovie:MovieClip; // standing animation private var mouseX:Number = -1; // location of mouse click on x axis private var lastTime:int; // last onFrame movement private var movieVector:Vector.<MovieClip>; public function MonkeySprite() { var atlas:TextureAtlas = Assets.getTextureAtlas(); var standFrames:Vector.<Texture> = atlas.getTextures("monkey_1"); standMovie = new MovieClip(standFrames, 7 ); standMovie.loop = true; addChild(standMovie); pivotX = this.width * 0.5; this.addEventListener(Event.ENTER_FRAME, onFrame); } public function onFrame(e:Event):void { if(mouseX == -1) return; // snap if(this.x <= mouseX+5 && this.x >= mouseX-5) { this.x = mouseX; } else { var timeDiff:int = getTimer()-lastTime; lastTime += timeDiff; if(mouseX > this.x) { this.x += timeDiff*.15; } else { this.x -= timeDiff*.15; } } } public function moveToPoint(pointX:Number):void { mouseX = pointX; lastTime = getTimer(); } } }Watch the Screencast
Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!
Here are the URLs mentioned in the video:
Want More Starling Tutorials?
Let us know in the comments!
In the last tutorial, we introduced FlashPunk and its capabilities. Now it’s time to build a game with it! We’ll build a top-down, mouse-controlled shoot-’em-up, with a title screen and a game over screen. Read on to learn more…
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: The Player Ship
As always, first we need a clean project. Grab the latest FlashPunk build from the official site. Create a new AS3 project in FlashDevelop and put FlashPunk’s source in the source folder of the project. The game will have the following dimensions: 400×500 px.
We will begin our game by adding a ship – the player ship – on the screen. For that, we will need a new world, called
GameWorld, and an image:The player ship will be an entity. Create one, embed the image in it and put it on the screen. If you’re feeling lost, below is the code for the player ship (if you’re really feeling lost, I recommend reading the first tutorial again). I think that creating the world won’t be a problem for you.
package { import net.flashpunk.Entity; import net.flashpunk.graphics.Image; public class PlayerShip extends Entity { [Embed(source = '../img/PlayerShipImage.png')] private const IMAGE:Class; public function PlayerShip() { graphic = new Image(IMAGE); graphic.x = -27.5; graphic.y = -30; x = 200; y = 400; } } }Add the player ship into the world and make it the current world when FlashPunk’s
Enginestarts. You’ll get the following:Step 2: Movement
With the player ship on the screen, we need to make it move. Just like every shoot-’em-up game, the player ship will be able to move across all the screen. There’s one thing left to decide before coding the movement: we will be using frame-based movement (the reason for this is in the next step). That means changing (if needed) the
super()call to FlashPunk’sEngineand NOT using theFP.elapsedproperty.The code for the player ship movement is below. The movement is mouse-based:
private var _currentDistanceX:Number; private var _currentDistanceY:Number; private const SPEED:int = 3; override public function update():void { calculateDistances(); if ((_currentDistanceX * _currentDistanceX) + (_currentDistanceY * _currentDistanceY) < SPEED * SPEED) { x = Input.mouseX; y = Input.mouseY; } else { x += Math.cos(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED; y += Math.sin(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED; } } private function calculateDistances():void { _currentDistanceX = Input.mouseX - x; _currentDistanceY = Input.mouseY - y; }You will need to import
net.flashpunk.utils.Inputin the player ship class. Also, don’t forget to enable FlashPunk’s console. After compiling the project, you will see the player ship following the mouse:Step 3: Enemies
Time to add something fun: enemies. Enemies need to spawn randomly (based on waves) and need to have a controlled movement. They also have a different image:
The code for creating the enemy class and adding the image to it shouldn’t be a problem. What we need to focus on is how to make enemies follow a path. The idea is this: we create a wave of enemies and pass them a path to follow, and when to spawn. After that, they will be responsible for showing themselves on the screen and moving along the path.
What is a good representation for a path? A Vector of points seems good enough. Also, we need to define a distance between each point. That way, we can be sure of one important thing: if we define the distance between two points of the path to be the distance that the enemy moves during 1 frame, we won’t need the enemy to process too much information, and we will be able to define after how many frames the enemy will leave the screen by just counting the number of points in the vector. That way, it’s very easy to define when a wave will end.
See it in action: the code below only makes enemies follow a path already given to them, and on the time passed to them (which will be counted in frames). When the enemy is created, a counter that starts on a given number begins decreasing after each elapsed frame, and when it reaches zero, the enemy will put itself on screen and begin following its path.
package { import flash.geom.Point; import net.flashpunk.Entity; import net.flashpunk.FP; import net.flashpunk.graphics.Image; import net.flashpunk.World; public class Enemy extends Entity { [Embed(source = '../img/EnemyImage.png')] private const IMAGE:Class; private var _timeToAct:uint; private var _pathToFollow:Vector.<Point>; private var _currentPoint:uint; private var _myWorld:World; private var _added:Boolean; public function Enemy(timeToAct:uint, pathToFollow:Vector.<Point>, worldToBeAdded:World) { graphic = new Image(IMAGE); graphic.x = -15; graphic.y = -8; _timeToAct = timeToAct; _pathToFollow = pathToFollow; _currentPoint = 0; _myWorld = worldToBeAdded; _added = false; } override public function update():void { if (_timeToAct > 0) { _timeToAct--; } else { if (!_added) { _myWorld.add(this); _added = true; } x = _pathToFollow[_currentPoint].x; y = _pathToFollow[_currentPoint].y; _currentPoint++; if (_currentPoint == _pathToFollow.length) { _myWorld.remove(this); _added = false; destroy(); } } } public function destroy():void { graphic = null; } } }From the code above, you can see that we always move a fixed distance from point to point by just positioning the enemy on its current point. It is because of this that we are able to determine when an enemy wave will end. You can also see that the enemy takes care of everything: adding itself in the world, moving through the world and removing itself from the world. With that, it’s very simple to create enemies in the game.
Step 4: Adding Enemies to the Screen
Our base
Enemyclass is done. Now it’s time to modifyGameWorlda bit to add enemies. The first task is to generate paths for the enemies. For the purposes of this tutorial, we will only create a straight line, but feel free to try creating any kind of wave path. This is the function that creates a straight line:private function generateEnemyPath(distanceBetweenPoints:Number):Vector.<Point> { var i:Number; var vec:Vector.<Point> = new Vector.<Point>(); var xPos:Number = Math.random() * 360 + 20; for (i = -20; i < 520; i += distanceBetweenPoints) { vec.push(new Point(xPos, i)); } return vec; }With that, we can already give to an enemy a path to follow. The next step is to actually create the enemy:
private var _enemy:Enemy; public function GameWorld() { _playerShip = new PlayerShip(); add(_playerShip); _enemy = new Enemy(0, generateEnemyPath(1), this); } override public function update():void { super.update(); if (_enemy) _enemy.update(); }Compile and run the game. You’ll probably get the following error:
That happens because even after the enemy deletes itself from the world, we are still calling the
update()function of it, because our code didn’t detect when the enemy removed itself. Let’s fix that by overriding the currentremove()method:override public function remove(e:Entity):Entity { if (e is Enemy) { _enemy = new Enemy(0, generateEnemyPath(1), this); } return super.remove(e); }Now compile the project and you’ll see this:
This is what that function does: every time the enemy removes itself from the world, we detect that through our overriden function and then just create another enemy to “replace” the old one. That’s it! We now have enemies moving across the screen!
Step 5: Shooting With the Player Ship
A shoot-’em-up game wouldn’t be fun without cool ways of shooting bullets out of your ship, would it? In this step we’ll see a great way of organizing bullet patterns in order to shoot them. If you tried to take a guess, you are probably correct: we’re going to use Vectors of Points. However, this time the points will have dynamic beginnings and ends, because your ship won’t always be at the same place every time you shoot, but don’t worry, it’s not as hard as it sounds!
The strategy here is to generate a bullet pattern around a fixed x- and y-axis, and then sum the player ship’s position to the points from the pattern, thus relocating the axis to a new position, giving the impression that the bullets are coming out of the player ship. The bullet image we are going to use is this:
Everything gets simpler when you look at the code. We are basically doing something very similar to the enemy path:
package { import flash.geom.Point; import net.flashpunk.Entity; import net.flashpunk.graphics.Image; public class PlayerBullet extends Entity { [Embed(source = '../img/BulletImage.png')] private const IMAGE:Class; private var _pathToFollow:Vector.<Point>; private var _xPos:Number; private var _yPos:Number; public function PlayerBullet(pathToFollow:Vector.<Point>, xPos:Number, yPos:Number) { graphic = new Image(IMAGE); graphic.x = graphic.y = -3.5; _pathToFollow = pathToFollow; _xPos = xPos; _yPos = yPos; } override public function update():void { x = _xPos + _pathToFollow[0].x; y = _yPos + _pathToFollow[0].y; _pathToFollow.shift(); if (_pathToFollow.length == 0) { world.remove(this); destroy(); } } public function destroy():void { _pathToFollow = null; graphic = null; } } }Notice that we don’t really create the bullet patterns in here: they’re always passed as parameters, just like the enemies. The only difference is that the bullets are always added right away in the world and we keep the initial position of the bullet.
Let’s try adding a bullet when the player clicks with the mouse. In
PlayerShip.as:override public function update():void { calculateDistances(); if ((_currentDistanceX * _currentDistanceX) + (_currentDistanceY * _currentDistanceY) < SPEED * SPEED) { x = Input.mouseX; y = Input.mouseY; } else { x += Math.cos(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED; y += Math.sin(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED; } if (Input.mousePressed) { world.add(new PlayerBullet(GameWorld(world).generateBulletPath(3), x, y)); } }Now we need to create the bullet path. We are going to create a straight line, just like for the enemy, but you can do any kind of path! In
GameWorld.as, let’s create thegenerateBulletPath()function:public function generateBulletPath(distanceBetweenPoints:Number):Vector.<Point> { var i:Number; var vec:Vector.<Point> = new Vector.<Point>(); for (i = 0; i > -500; i -= distanceBetweenPoints) { vec.push(new Point(0, i)); } return vec; }With that, hit the compile and run button and this is what you get:
Step 6: Collision Detection (Using Masks)
We have now the basics of the game running: a player ship that shoots and enemies that go down the screen. Time to add collision detection!
The first step to add the collision detection is to give each entity a type. I’ll leave that to you: give the “Player” type to
PlayerShip, “Enemy” toEnemyand “PlayerBullet” toPlayerBullet.We will be using pixel-perfect collision in this game, so it might be useful to talk about masks. Masks are elements used by FlashPunk for collision detection. They are basically like hitboxes, but they can have a different form (pixel level). We need to set up masks for the player ship, enemies and bullets. The image used by the mask is the same image of the entity. Look at the code for the
PlayerShip,EnemyandPlayerBullet, respectively:public function PlayerShip() { graphic = new Image(IMAGE); graphic.x = -27.5; graphic.y = -30; mask = new Pixelmask(IMAGE, -27.5, -30); x = 200; y = 400; type = "Player"; }public function Enemy(timeToAct:uint, pathToFollow:Vector.<Point>, worldToBeAdded:World) { graphic = new Image(IMAGE); graphic.x = -15; graphic.y = -8; mask = new Pixelmask(IMAGE, -15, -8); _timeToAct = timeToAct; _pathToFollow = pathToFollow; _currentPoint = 0; _myWorld = worldToBeAdded; _added = false; type = "Enemy"; }public function PlayerBullet(pathToFollow:Vector.<Point>, xPos:Number, yPos:Number) { graphic = new Image(IMAGE); graphic.x = graphic.y = -3.5; mask = new Pixelmask(IMAGE, -3.5, -3.5); _pathToFollow = pathToFollow; _xPos = xPos; _yPos = yPos; type = "PlayerBullet"; }As you can see, this is very simple: we create a new
Pixelmask, pass the source to use as a mask (just like with the graphic) and then pass both x and y offsets (in case you want to center the mask somewhere). Now, inGameWorld.as:private var _bulletList:Vector.<PlayerBullet>; override public function update():void { super.update(); if (_enemy) _enemy.update(); _bulletList = new Vector.<PlayerBullet>(); getType("PlayerBullet", _bulletList); for each (var bullet:PlayerBullet in _bulletList) { if (bullet.collideWith(_enemy, bullet.x, bullet.y)) { _enemy.takeDamage(); remove(bullet); bullet.destroy(); } } }Notice that we could have simply used
_enemy.collide("PlayerBullet", _enemy.x, _enemy.y)to check for collisions, but the method above is better when we have many bullets on the screen and there is a possibility that two bullets hit the same enemy at the same time. We have called thetakeDamage()function of theEnemyclass, but at the moment there is none. (Create an empty function for now. In the next step we will make the enemy take damage and explode when necessary.) Compile the project and you’ll get this:Step 7: Enemy Death
We have made bullets hit our enemies. In this step we will play an explosion animation every time an enemy dies and remove it from the game. The explosion animation sprite sheet is below:
The approach we will take to do this is by decreasing the enemy’s health in the
takeDamage()function, and if the health gets below zero, we will destroy it and put the animation in the screen. The code for decreasing the health is below:private var _health:int = 100; public function takeDamage():void { _health -= 50; if (_health <= 0) { addExplosion(); _myWorld.remove(this); _added = false; destroy(); } }The code is very simple. There’s only one thing unknown about it: the
addExplosion()function. This function will create an instance ofExplosionand add it to the world. TheExplosionclass will just play and remove itself from the world after that. It’s a simple class:package { import net.flashpunk.Entity; import net.flashpunk.graphics.Spritemap; public class Explosion extends Entity { [Embed(source = '../img/ExplosionAnimation.png')] private const ANIMATION:Class; public function Explosion(xPos:Number, yPos:Number) { graphic = new Spritemap(ANIMATION, 50, 46, onAnimationEnd); graphic.x = -25; graphic.y = -23; x = xPos; y = yPos; Spritemap(graphic).add("Explode", [0, 1, 2, 3, 4], 25/60, false); Spritemap(graphic).play("Explode"); } private function onAnimationEnd():void { world.remove(this); destroy(); } public function destroy():void { graphic = null; } } }The trick here is using the
callbackparameter of theSpritemapclass: when the animation ends, that function will be called, and then it removes itself from the world.Now, back to
Enemy.asto finish that function!private function addExplosion():void { world.add(new Explosion(x, y)); }Easy, isn’t it? Compile the game and destroy some enemies!
Step 8: Score
The next logical step after making enemies die is to add a score in the game! We will do that using FlashPunk’s
Textclass. Start by creating aGameScoreclass, which will hold the score of the game. SinceTextis aGraphic, we will makeGameScoreanEntityand add its text as agraphic. Look at the code:package { import net.flashpunk.Entity; import net.flashpunk.graphics.Text; public class GameScore extends Entity { private var _score:int; public function GameScore() { graphic = new Text("Score: 0"); _score = 0; } public function addScore(points:int):void { _score += points; Text(graphic).text = "Score: " + _score.toString(); } public function destroy():void { graphic = null; } } }As you can see, we will call the
addScore()function to add points to the game’s score. First, we need to add it to the world. InGameWorld.as:private var _score:GameScore; public function GameWorld() { _playerShip = new PlayerShip(); add(_playerShip); _enemy = new Enemy(0, generateEnemyPath(1), this); _score = new GameScore(); _score.x = 300; _score.y = 470; add(_score); } public function get score():GameScore { return _score; } public function get score():int { return _score; }If we hit compile, we get just a static score on the bottom of the screen:
We need to add something to the score every time an enemy is killed. In
Enemy.as:public function takeDamage():void { _health -= 50; if (_health <= 0) { addExplosion(); GameWorld(world).score.addScore(1); _myWorld.remove(this); _added = false; destroy(); } }Hit compile now and the score will always increase when an enemy is killed!
Step 9: Upgrades
Time to add upgrades! We will not have a nice screen to choose upgrades. Instead, we will create upgrades based on the score: each time the score goes up by 5 (up to 45), the player’s speed will increase a bit. When the score reaches 25, the player will be able to shoot two shots on every click. We will make the score 50 be the end of the game.
Let’s begin by coding the player speed upgrade. For that, we will need to add a multiplier to the speed. In
PlayerShip.as:public var speedMultiplier:Number = 1; override public function update():void { calculateDistances(); if ((_currentDistanceX * _currentDistanceX) + (_currentDistanceY * _currentDistanceY) < SPEED * SPEED * speedMultiplier * speedMultiplier) { x = Input.mouseX; y = Input.mouseY; } else { x += Math.cos(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED * speedMultiplier; y += Math.sin(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED * speedMultiplier; } if (Input.mousePressed) { world.add(new PlayerBullet(GameWorld(world).generateBulletPath(3), x, y)); } }Now it’s all about changing the multiplier in
GameWorld.as:private var _speedUpgradeNumber:int = 0; override public function update():void { super.update(); if (_enemy) _enemy.update(); _bulletList = new Vector.<PlayerBullet>(); getType("PlayerBullet", _bulletList); for each (var bullet:PlayerBullet in _bulletList) { if (bullet.collideWith(_enemy, bullet.x, bullet.y)) { _enemy.takeDamage(); remove(bullet); bullet.destroy(); } } if ((_score.score % 5) == 0 && _score.score > (_speedUpgradeNumber * 5)) { _playerShip.speedMultiplier += 0.1; _speedUpgradeNumber++; } }Done! Now, every 5 enemy deaths the player will receive a 10% increase in moving speed!
For the double bullet upgrade, we will make a boolean in the
PlayerShipclass indicating whether or not the ship has the upgrade. Then we will check that when shooting. Here is it:public var hasDoubleShoot:Boolean = false; override public function update():void { calculateDistances(); if ((_currentDistanceX * _currentDistanceX) + (_currentDistanceY * _currentDistanceY) < SPEED * SPEED * speedMultiplier * speedMultiplier) { x = Input.mouseX; y = Input.mouseY; } else { x += Math.cos(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED * speedMultiplier; y += Math.sin(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED * speedMultiplier; } if (Input.mousePressed) { if (hasDoubleShoot) { world.add(new PlayerBullet(GameWorld(world).generateBulletPath(3), x - 5, y)); world.add(new PlayerBullet(GameWorld(world).generateBulletPath(3), x + 5, y)); } else { world.add(new PlayerBullet(GameWorld(world).generateBulletPath(3), x, y)); } } }Now, let’s do the same as we did for the speed in
GameWorld.as:override public function update():void { super.update(); if (_enemy) _enemy.update(); _bulletList = new Vector.<PlayerBullet>(); getType("PlayerBullet", _bulletList); for each (var bullet:PlayerBullet in _bulletList) { if (bullet.collideWith(_enemy, bullet.x, bullet.y)) { _enemy.takeDamage(); remove(bullet); bullet.destroy(); } } if ((_score.score % 5) == 0 && _score.score > (_speedUpgradeNumber * 5)) { _playerShip.speedMultiplier += 0.1; _speedUpgradeNumber++; } if (_score.score >= 25) { _playerShip.hasDoubleShoot = true; } }And that’s it! Hit compile and your game will have upgrades!
Step 10: Increasing the Difficulty
If you played the game until getting the double shot upgrade in the last step, you may have noticed that the game is too easy right now. What do you think of increasing its difficulty based on the player’s score?
That’s the idea: the game will now be able to put on the screen more than one enemy. And for each kill the player gets, we decrease the timer of spawning a new enemy. Interesting, isn’t it? But that’s not the only thing. What about increasing the enemies’ healths and decreasing the damage they take from the player? Now we’re getting somewhere!
Let’s jump to the coding: first we will make the health increase and damage decrease every kill. They will be just like the upgrades on the player ships, but this time we will need to change our approach as to where to keep the multipliers. In
Enemy.as:private var _health:int; public static var healthMultiplier:Number = 1; public static var damageMultiplier:Number = 1; public function Enemy(timeToAct:uint, pathToFollow:Vector.<Point>, worldToBeAdded:World) { graphic = new Image(IMAGE); graphic.x = -15; graphic.y = -8; mask = new Pixelmask(IMAGE, -15, -8); _timeToAct = timeToAct; _pathToFollow = pathToFollow; _currentPoint = 0; _myWorld = worldToBeAdded; _added = false; type = "Enemy"; health = 100 * Enemy.healthMultiplier; } public function takeDamage():void { _health -= 50 * Enemy.damageMultiplier; if (_health <= 0) { addExplosion(); GameWorld(world).score.addScore(1); _myWorld.remove(this); _added = false; destroy(); } }And now, in
GameWorld.as:private var _enemyUpgradeNumber:int = 0; override public function update():void { super.update(); if (_enemy) _enemy.update(); _bulletList = new Vector.<PlayerBullet>(); getType("PlayerBullet", _bulletList); for each (var bullet:PlayerBullet in _bulletList) { if (bullet.collideWith(_enemy, bullet.x, bullet.y)) { _enemy.takeDamage(); remove(bullet); bullet.destroy(); } } if ((_score.score % 5) == 0 && _score.score > (_speedUpgradeNumber * 5)) { _playerShip.speedMultiplier += 0.1; _speedUpgradeNumber++; } if (_score.score >= 25) { _playerShip.hasDoubleShoot = true; } if (_score.score > _enemyUpgradeNumber) { Enemy.damageMultiplier -= 0.015; Enemy.healthMultiplier += 0.02; _enemyUpgradeNumber++; } }And now our enemies are getting stronger after each kill! Take that, evil player!
Now we need to modify
GameWorldin order to spawn enemies based on time. It’s a simple thing: we will just need a timer and a spawn interval. Here’s all the modified code:private var _enemyList:Vector.<Enemy>; private var _enemySpawnInterval:int = 5000; private var _enemySpawnTimer:int; public function GameWorld() { _playerShip = new PlayerShip(); add(_playerShip); _enemyList = new Vector.<Enemy>(); _score = new GameScore(); _score.x = 300; _score.y = 470; add(_score); _enemySpawnTimer = 0; } override public function update():void { super.update(); _enemySpawnTimer--; if (_enemySpawnTimer <= 0) { _enemySpawnTimer = _enemySpawnInterval; _enemyList.push(new Enemy(uint(Math.random() * 30), generateEnemyPath(2), this)); add(_enemyList[_enemyList.length - 1]); } _bulletList = new Vector.<PlayerBullet>(); getType("PlayerBullet", _bulletList); for each (var bullet:PlayerBullet in _bulletList) { for each (var enemy:Enemy in _enemyList) { if (bullet.collideWith(enemy, bullet.x, bullet.y)) { enemy.takeDamage(); remove(bullet); bullet.destroy(); } } } if ((_score.score % 5) == 0 && _score.score > (_speedUpgradeNumber * 5)) { _playerShip.speedMultiplier += 0.1; _speedUpgradeNumber++; } if (_score.score >= 25) { _playerShip.hasDoubleShoot = true; } if (_score.score > _enemyUpgradeNumber) { Enemy.damageMultiplier -= 0.015; Enemy.healthMultiplier += 0.02; _enemyUpgradeNumber++; } } override public function remove(e:Entity):Entity { if (e is Enemy) { _enemyList.splice(_enemyList.indexOf(e), 1); } return super.remove(e); }Notice that I gave the enemies a few random frames of “wait time” before appearing. That will make their appearance unpredictable. Now all that’s left is to decrease the spawn interval after every kill:
override public function update():void { super.update(); _enemySpawnTimer--; if (_enemySpawnTimer <= 0) { _enemySpawnTimer = _enemySpawnInterval; _enemyList.push(new Enemy(uint(Math.random() * 30), generateEnemyPath(2), this)); add(_enemyList[_enemyList.length - 1]); } _bulletList = new Vector.<PlayerBullet>(); getType("PlayerBullet", _bulletList); for each (var bullet:PlayerBullet in _bulletList) { for each (var enemy:Enemy in _enemyList) { if (bullet.collideWith(enemy, bullet.x, bullet.y)) { enemy.takeDamage(); remove(bullet); bullet.destroy(); } } } if ((_score.score % 5) == 0 && _score.score > (_speedUpgradeNumber * 5)) { _playerShip.speedMultiplier += 0.1; _speedUpgradeNumber++; } if (_score.score >= 25) { _playerShip.hasDoubleShoot = true; } if (_score.score > _enemyUpgradeNumber) { Enemy.damageMultiplier -= 0.015; Enemy.healthMultiplier += 0.02; _enemySpawnInterval -= 3; _enemyUpgradeNumber++; } }With that, we basically have everything done in the game world!
Step 11: The Main Menu World
I think we have everything finished in the game world. The game’s surprisingly difficult with the tougher enemies! What do you think of making a nice main menu now? I created a nice background for it:
Create the
MainMenuWorldclass, which extends fromnet.flashpunk.World, and add the background in it. I’ll leave the code for you. We will need a play button, which I also created:In order to create the play button, we are going to use the
Buttonclass created in the first part of this tutorial series. Here’s the code for the button inMainMenuWorld.as:[Embed(source = '../img/PlayGameButton.png')] private const PLAYBUTTON:Class; private var _playButton:Button; public function MainMenuWorld() { addGraphic(new Image(TITLE)); _playButton = new Button(playTheGame, null, 48, 395); _playButton.setSpritemap(PLAYBUTTON, 312, 22); add(_playButton); } private function playTheGame():void { FP.world = new GameWorld(); destroy(); } public function destroy():void { removeAll(); _playButton = null; }Don’t forget to change the
Mainclass as well!override public function init():void { FP.world = new MainMenuWorld(); FP.console.enable(); }Hit compile and… Yes! Our shiny main menu world works! Now to the game over world!
Step 12: The Game Over World
The game over world is going to be very simple. I have created two images: one for when the player dies and one for when the player wins the game. There will be a Quit button that will return the player to the main menu. It’s basically the same thing as the main menu world. Here are the two images and the button:
I will leave the coding to you. The only thing that will change in this class is that it will need an argument passed to the constructor, telling whether or not the player destroyed the enemies. Here’s the code for the constructor:
public function GameOverWorld(hasLost:Boolean) { if (hasLost) { addGraphic(new Image(BACKGROUNDLOST)); } else { addGraphic(new Image(BACKGROUNDWON)); } _quitButton = new Button(quitToMain, null, 166, 395); _quitButton.setSpritemap(QUITBUTTON, 69, 19); add(_quitButton); }Step 13: The Boss – Movement
Finally, the moment everyone was waiting for. Every shoot-’em-up needs a boss, and this is ours!
What we need now is code it. First, the movements. And then, the bullets. This step is for the movements.
As you may have guessed, our boss won’t go directly down the screen. Instead, it will move randomly around the top of the screen, to give the player a bit of difficulty defeating it. What we will need to do is a movement very similar to the player’s. The only difference is that it will follow a point chosen randomly in the top of the screen, and not the mouse. Here’s the full code for the
Bossclass!package { import flash.geom.Point; import net.flashpunk.Entity; import net.flashpunk.graphics.Image; import net.flashpunk.masks.Pixelmask; public class Boss extends Entity { [Embed(source = '../img/BossImage.png')] private const IMAGE:Class; private var _currentDistanceX:Number; private var _currentDistanceY:Number; private var _randomPoint:Point; private const SPEED:int = 3; public var speedMultiplier:Number = 1; public function Boss() { graphic = new Image(IMAGE); graphic.x = -38; graphic.y = -35; mask = new Pixelmask(IMAGE, -38, -35); type = "BossEnemy"; getRandomPoint(); } private function getRandomPoint():void { _randomPoint = new Point(); _randomPoint.x = Math.random() * 400; _randomPoint.y = 38 + (Math.random() * 100); } override public function update():void { calculateDistances(); if ((_currentDistanceX * _currentDistanceX) + (_currentDistanceY * _currentDistanceY) < SPEED * SPEED * speedMultiplier * speedMultiplier) { x = _randomPoint.x; y = _randomPoint.y; getRandomPoint(); } else { x += Math.cos(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED * speedMultiplier; y += Math.sin(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED * speedMultiplier; } } private function calculateDistances():void { _currentDistanceX = _randomPoint.x - x; _currentDistanceY = _randomPoint.y - y; } } }We are basically using the same movement code from
PlayerShip. Notice that we have kept the speed multipliers, because there will be a really fun thing in the end!We need now to come up with a way to test this movement. Running the game and getting 50 kills is too much time to wait until we can see the boss (and end up realizing there’s a bug and we will need to do it all again and again!). Let’s just add the boss on the screen when the game begins (yes, with the other enemies going down the screen!) and check the movement! In
GameWorld.as:private var _boss:Boss; public function GameWorld() { _playerShip = new PlayerShip(); add(_playerShip); _enemyList = new Vector.<Enemy>(); _score = new GameScore(); _score.x = 300; _score.y = 470; add(_score); _enemySpawnTimer = 0; _boss = new Boss(); add(_boss); }Hit compile and test the game! Our boss is moving nicely, isn’t it? It’s going to be hard to kill it!
Step 14: The Boss – Shooting
Time for the really evil boss bullets! Here is their image:
But there is something really bothering me: they will have exactly the same behavior as the player bullet, but instead they will just follow the same enemy downward path, and will have a different FlashPunk
type, but I don’t want to copy and paste the same code in their class. What do you think about using some Object-Oriented Design and make an inheritance? Take all the code (yes, all the code) ofPlayerBulletand copy it to a new class calledBullet. Remove the code related to the bullet’s image, and this is what you get:package { import flash.geom.Point; import net.flashpunk.Entity; public class Bullet extends Entity { private var _pathToFollow:Vector.<Point>; private var _xPos:Number; private var _yPos:Number; public function Bullet(pathToFollow:Vector.<Point>, xPos:Number, yPos:Number) { _pathToFollow = pathToFollow; _xPos = xPos; _yPos = yPos; } override public function update():void { x = _xPos + _pathToFollow[0].x; y = _yPos + _pathToFollow[0].y; _pathToFollow.shift(); if (_pathToFollow.length == 0) { world.remove(this); destroy(); } } public function destroy():void { _pathToFollow = null; graphic = null; } } }That’s the basic behavior of the bullet. Now, what do we do with the
PlayerBulletclass? Put only the things related to the bullet image in there, and remove the rest. And also make it inherit fromBullet:package { import flash.geom.Point; import net.flashpunk.graphics.Image; import net.flashpunk.masks.Pixelmask; public class PlayerBullet extends Bullet { [Embed(source = '../img/BulletImage.png')] private const IMAGE:Class; public function PlayerBullet(pathToFollow:Vector.<Point>, xPos:Number, yPos:Number) { super(pathToFollow, xPos, yPos); graphic = new Image(IMAGE); graphic.x = graphic.y = -3.5; mask = new Pixelmask(IMAGE, -3.5, -3.5); type = "PlayerBullet"; } } }Do you mind making the same thing for the
BossBulletclass too? The only difference is that it will have a type of “BossBullet”. I’ll leave the code to you. Check the tutorial source if you need help!We could have done the same for the boss and the enemies, but we would need to change more things, because the movement of the enemies isn’t the same as the movement of the boss. It’s better to leave it that way. And now, for the boss shooting. We will use the same timer strategy that we used for the enemy spawning. Here’s the code:
private var _shootingInterval:int = 75; private var _shootingTimer:int = 0; override public function update():void { calculateDistances(); if ((_currentDistanceX * _currentDistanceX) + (_currentDistanceY * _currentDistanceY) < SPEED * SPEED * speedMultiplier * speedMultiplier) { x = _randomPoint.x; y = _randomPoint.y; getRandomPoint(); } else { x += Math.cos(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED * speedMultiplier; y += Math.sin(Math.atan2(_currentDistanceY, _currentDistanceX)) * SPEED * speedMultiplier; } _shootingTimer--; if (_shootingTimer <= 0) { _shootingTimer = _shootingInterval; world.add(new BossBullet(GameWorld(world).generateBossBulletPath(1.5), x - 10, y)); world.add(new BossBullet(GameWorld(world).generateBossBulletPath(1.5), x + 10, y)); world.add(new BossBullet(GameWorld(world).generateBossBulletPath(1.5), x, y + 5)); } }Compile and run the code and now you have a boss shooting bullets and flying around! Time to make the last battle happen in the next step
Step 15: Final Touches
You may have noticed that the boss’s bullets don’t hit the player ship, and the player’s bullets don’t hit the boss. That’s because we haven’t coded them to hit their enemies. That’s what we are going to do now. We will also make the boss only appear when the score reaches 50, and check for when the player loses the game.
The first task: to make the boss only appear when the score reaches 50. We will do that by checking for the score in
GameWorld.as, just like we did with the enemy and player upgrades.private var _bossAppeared:Boolean = false; public function GameWorld() { _playerShip = new PlayerShip(); add(_playerShip); _enemyList = new Vector.<Enemy>(); _score = new GameScore(); _score.x = 300; _score.y = 470; add(_score); _enemySpawnTimer = 0; _boss = new Boss(); // Not adding the boss in the game this time } override public function update():void { super.update(); _enemySpawnTimer--; if (_enemySpawnTimer <= 0 && !_bossAppeared) { _enemySpawnTimer = _enemySpawnInterval; _enemyList.push(new Enemy(uint(Math.random() * 30), generateEnemyPath(2), this)); add(_enemyList[_enemyList.length - 1]); } _bulletList = new Vector.<PlayerBullet>(); getType("PlayerBullet", _bulletList); for each (var bullet:PlayerBullet in _bulletList) { for each (var enemy:Enemy in _enemyList) { if (bullet.collideWith(enemy, bullet.x, bullet.y)) { enemy.takeDamage(); remove(bullet); bullet.destroy(); } } } if ((_score.score % 5) == 0 && _score.score > (_speedUpgradeNumber * 5)) { _playerShip.speedMultiplier += 0.1; _speedUpgradeNumber++; } if (_score.score >= 25) { _playerShip.hasDoubleShoot = true; } if (_score.score > _enemyUpgradeNumber) { Enemy.damageMultiplier -= 0.015; Enemy.healthMultiplier += 0.02; _enemySpawnInterval -= 3; _enemyUpgradeNumber++; } if (_score.score == 50 && !_bossAppeared) { add(_boss); _bossAppeared = true; } }First task done. Notice that we also changed the block that spawned new enemies. That way, when the boss appears, no more enemies will spawn.
Second task: make boss bullets hit the player and player bullets hit the boss. This is also done in
GameWorld.as. Take a look at the code:private var _bulletList:Vector.<Bullet>; override public function update():void { super.update(); _enemySpawnTimer--; if (_enemySpawnTimer <= 0 && !_bossAppeared) { _enemySpawnTimer = _enemySpawnInterval; _enemyList.push(new Enemy(uint(Math.random() * 30), generateEnemyPath(2), this)); add(_enemyList[_enemyList.length - 1]); } _bulletList = new Vector.<Bullet>(); getType("PlayerBullet", _bulletList); for each (var bullet:PlayerBullet in _bulletList) { for each (var enemy:Enemy in _enemyList) { if (bullet.collideWith(enemy, bullet.x, bullet.y)) { enemy.takeDamage(); remove(bullet); bullet.destroy(); } } if (_bossAppeared) { if (bullet.collideWith(_boss, bullet.x, bullet.y)) { _boss.takeDamage(); if (!_boss) { endTheGame(); return; } remove(bullet); bullet.destroy(); } } } _bulletList = new Vector.<Bullet>(); getType("BossBullet", _bulletList); for each (var bossBullet:BossBullet in _bulletList) { if (bossBullet.collideWith(_playerShip, bossBullet.x, bossBullet.y)) { endTheGame(); return; } } if ((_score.score % 5) == 0 && _score.score > (_speedUpgradeNumber * 5)) { _playerShip.speedMultiplier += 0.1; _speedUpgradeNumber++; } if (_score.score >= 25) { _playerShip.hasDoubleShoot = true; } if (_score.score > _enemyUpgradeNumber) { Enemy.damageMultiplier -= 0.015; Enemy.healthMultiplier += 0.02; _enemySpawnInterval -= 3; _enemyUpgradeNumber++; } if (_score.score == 50 && !_bossAppeared) { add(_boss); _bossAppeared = true; } }In the first part of the code, we check for a collision between the player’s bullets and the boss. If there is a collision, we call the
takeDamage()function from the boss, which is below. After checking the player’s bullets, we check for the boss’s bullets, and if we find a collision between any of them and the player, we end the game. This function is also below.Now, for the
takeDamage()function of the boss. We want the boss to have a lot of health, and we will make it fly faster after each hit. InBoss.as:private var _health:int = 1000; public function takeDamage():void { _health -= 50; speedMultiplier += 0.05; if (_health <= 0) { world.remove(this); destroy(); } } public function destroy():void { graphic = null; mask = null; _randomPoint = null; }Our boss battle is complete! It will die after 20 hits from the player, getting faster after each hit.
Now, the only thing remaining is to end the game and show the screen when the boss is killed, and also make the player lose before the boss battle if an enemy goes down the screen. For the end of the game, we need to check when the boss is killed and create the
endTheGame()function inGameWorld.as. This function will basically remove every bullet from the screen, remove the player and boss and then add the game over screen. InGameWorld.as:override public function remove(e:Entity):Entity { if (e is Enemy) { _enemyList.splice(_enemyList.indexOf(e), 1); } if (e is Boss) { _boss = null; } return super.remove(e); } public function endTheGame():void { removeAll(); while (_bulletList.length > 0) { _bulletList[0].destroy(); _bulletList.shift(); } while (_enemyList.length > 0) { _enemyList[0].destroy(); _enemyList.shift(); } _bulletList = null; _enemyList = null; _playerShip = null; _score = null; if (_boss) { FP.world = new GameOverWorld(true); } else { FP.world = new GameOverWorld(false); } _boss = null; }And that’s it! The
endTheGame()function is basically the same as adestroy()function. It just cleans every reference in the game world.The last part: making the player lose the game if an enemy has reached the end of the screen. For this one we’re going to remember that an enemy only reaches the bottom of the screen if it still has health. So, in the
remove()function ofGameWorld.as:private var _gameEnded:Boolean = false; override public function remove(e:Entity):Entity { if (e is Enemy) { if (Enemy(e).health > 0) { endTheGame(); return e; } _enemyList.splice(_enemyList.indexOf(e), 1); } if (e is Boss) { _boss = null; } return super.remove(e); } override public function update():void { super.update(); if (_gameEnded) { return; } _enemySpawnTimer--; if (_enemySpawnTimer <= 0 && !_bossAppeared) { _enemySpawnTimer = _enemySpawnInterval; _enemyList.push(new Enemy(uint(Math.random() * 30), generateEnemyPath(2), this)); add(_enemyList[_enemyList.length - 1]); } _bulletList = new Vector.<Bullet>(); getType("PlayerBullet", _bulletList); for each (var bullet:PlayerBullet in _bulletList) { for each (var enemy:Enemy in _enemyList) { if (bullet.collideWith(enemy, bullet.x, bullet.y)) { enemy.takeDamage(); remove(bullet); bullet.destroy(); } } if (_bossAppeared) { if (bullet.collideWith(_boss, bullet.x, bullet.y)) { _boss.takeDamage(); if (!_boss) { endTheGame(); return; } remove(bullet); bullet.destroy(); } } } _bulletList = new Vector.<Bullet>(); getType("BossBullet", _bulletList); for each (var bossBullet:BossBullet in _bulletList) { if (bossBullet.collideWith(_playerShip, bossBullet.x, bossBullet.y)) { endTheGame(); return; } } if ((_score.score % 5) == 0 && _score.score > (_speedUpgradeNumber * 5)) { _playerShip.speedMultiplier += 0.1; _speedUpgradeNumber++; } if (_score.score >= 25) { _playerShip.hasDoubleShoot = true; } if (_score.score > _enemyUpgradeNumber) { Enemy.damageMultiplier -= 0.015; Enemy.healthMultiplier += 0.02; _enemySpawnInterval -= 3; _enemyUpgradeNumber++; } if (_score.score == 50 && !_bossAppeared) { add(_boss); _bossAppeared = true; } } public function endTheGame():void { removeAll(); while (_bulletList.length > 0) { _bulletList[0].destroy(); _bulletList.shift(); } while (_enemyList.length > 0) { _enemyList[0].destroy(); _enemyList.shift(); } _bulletList = null; _enemyList = null; _playerShip = null; _score = null; if (_boss) { FP.world = new GameOverWorld(true); } else { FP.world = new GameOverWorld(false); } _boss = null; _gameEnded = true; }This code will only end the game when an enemy reaches the end (is destroyed) with a health above 0. If the enemy dies, this function is also called, but then the enemy health will be below (or equal to) 0, skipping the code to end the game. We have also created the
_gameEndedboolean because when an enemy reaches the end of the screen and gets removed, the world is still updating its entities. Only when it finished updating them (after thesuper.update()call in the class) is that we can end the game.After all these lines and lines of code changed, remove the FlashPunk console, hit compile and test the game. It’s finally done, your very first game entirely done in FlashPunk! Congratulations!
Step 16: Conclusion
Congratulations, you have created your first FlashPunk game! You have used pretty much all of FlashPunk’s features for a very basic game, which means you are ready to create more FlashPunk games and spread the word! What do you think of improving this game? It could have different enemies, enemies that also shoot bullets, levels, more bosses, more upgrades and a lot of other things! Are you up to the challenge?
In the previous session I went over how to create a basic TimelineLite. Today I will show you the methods and properties that you will use to control the playback of your TimelineLite. By combining these methods and properties you can extend the built in functionality of TimelineLite to create fast-forward and play/pause toggle controls. I’ll also show you how easy it is to set up a Slider component to use as a TimelineLite scrubber.
TimelineLite in Action
Let’s take a look at the final result we will be working towards:
You can find all the files used to create the SWF above in the source files for this tutorial.
Watch the Screencast
Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!
TimelineLite Playback Methods
The following methods give you precise control over the playback of your TimelineLite
reverse( false ).Custom Playback Controls
By combining the built-in methods and properties its easy to create advanced functionality:
Fast-Forward – You can create a fast-forward control by increasing the
timeScaleproperty and forcing playback in a forward direction.private function fastForwardHandler(e:MouseEvent):void { tl.timeScale = 4; tl.play(); }Play/Pause Toggle – To toggle between the playing and paused states just negate the
pausedproperty. It is important to make suretimeScaleandreversedproperties are set to the normal values as they could be altered by the fast-forward and reverse buttons respectively.private function playPauseHandler(e:MouseEvent):void { resetTimeScale(); tl.reversed = false; tl.paused = !tl.paused; }Slider Component Scrubber – The Slider component makes it fairly easy to scrub through the timeline by altering the
currentProgressof the timeline. The Slider is set to output values between 0 and 100. In the code this value gets converted to a number between 0 and 1.import fl.controls.Slider; import fl.events.SliderEvent; slider.addEventListener(SliderEvent.THUMB_DRAG, sliderChange); private function sliderChange(e:SliderEvent):void { tl.currentProgress = slider.value * .01; //forces the timeline to stop when the scrubber is released. tl.pause(); }Homework
What? You are giving me homework? Yes! I want you to be your best. Flex your mind muscle with this little challenge.
In order to really learn this material nothing is better than diving in and getting your hands a little dirty.
Conclusion
So far I’ve given you a fair amount of information on creating and controlling TimelineLite animations. Although there are some obvious similarities in the way you control TimelineLite and Flash IDE timeline animations, I really love how TimelineLite gives animators so much more control with the
reverse(),restart(), andresume()methods. ThetimeScaleandcurrentProgressproperties open up some really interesting possibilities that will be discussed even more in the future.In the next video I will be showing you how to add labels to TimelineLite instances so that you can easily navigate to certain sections of your timelines. TimelineLite labels work very similarly to frame labels in the Flash IDE but with some added functionality. It’s going to be a lot of fun.
If you have any questions or comments on this tutorial – or your homework
– feel free to post a comment below.
Thanks for watching!
Twice a month, we revisit some of our readers’ favorite posts from Activetuts+ history. This week’s retro-Active tutorial, first published in April, is a guide to Euclidean vectors: what they are, why you’d use them, and how to implement them in Flash with AS3.
Euclidean vectors are objects in geometry with certain properties that are very useful for developing games. They can be seen as points, but they also have a magnitude and a direction. They are represented as arrows going from the initial point to the final point, and that’s how we will draw them in this article.
Euclidean vectors are commonly used in mathematics and physics for a lot of things: they can represent velocity, acceleration and forces in physics, or help prove a lot of important theorems in mathematics. In this tutorial, you’ll learn about Euclidean vectors, and build a class that you can use in your own Flash projects.
Please note that Euclidean vectors are different than ActionScript’s Vector class, and also different than vector drawing.
Vectors can be used in the Flash environment to help you achieve complex tasks that would otherwise require a lot of effort if done without them. In this article you will learn how to use them in Flash, as well as learn a lot of cool tricks with vectors.
Step 1: Cartesian Coordinates and Flash’s Coordinates
Before jumping into vectors, let’s introduce Flash’s coordinate system. You are probably familiar with the Cartesian coordinate system (even if you don’t know it by name):
Flash’s system is very similar. The only difference is that the y-axis is upside-down:
When we start working with vectors in flash, we need to remember that. However, good news: this different system doesn’t make much difference. Working with vectors in it will be basically like working with vectors in the Cartesian system.
Step 2: Defining a Vector
For the purpose of this tutorial, we will define and work with all vectors’ initial points as being the registration point of the stage, just as they are commonly used in mathematics. A vector will then be defined just like a common point, but it will have magnitude and angle properties. Take a look at some example vectors defined in the stage:
As you can see, a vector is represented by an arrow, and each vector has a certain length (or magnitude) and points along a certain angle. The tail of each vector is at the registration point
(0, 0).We will create a simple EuclideanVector class for this tutorial, using the Point class to hold the vector’s coordinates. Let’s create the basic vector class now:
package { import flash.geom.Point; public class EuclideanVector { public var position:Point; public var magnitude:Number; public var angle:Number; public function EuclideanVector(endPoint:Point) { position = endPoint; } } }During this tutorial, we will talk about the sense and the direction of a vector. Note that the direction just defines a line that “contains” the vector. The sense is what defines which way the vector points along this line.
Step 3: Inverse of a Vector
In this tutorial we will use the expression “inverse of a vector”. The inverse of a vector is another vector with the same magnitude and direction, but a contrary sense. That translates to a vector with the opposite signal of the first vector’s coordinates. So a vector with an endpoint of (x, y) would have an inverse vector with an endpoint of (-x, -y).
Let’s add a function to our EuclideanVector class to return the inverse vector:
public function inverse():EuclideanVector { return new EuclideanVector(new Point(-position.x, -position.y)); }Step 4: Basic Operations Addition
Now that we have learned how to define a vector, let’s learn how to add two vectors: it’s as simple as adding their coordinates separately. Look at this image:
If you notice in the image, the result of the addition of two vectors is another vector, and you can see that its coordinates are the sum of the coordinates of the other two vectors. In code, it would look like this:
public function sum(otherVector:EuclideanVector):EuclideanVector { position.x += otherVector.position.x; position.y += otherVector.position.y; return this; }So we can say that:
Step 5: Basic Operations Subtraction
Subtraction works almost the same as addition, but instead we will be adding the inverse of the second vector to the first vector.
It is already known how to sum two vectors, so here’s the code for subtraction:
public function subtract(otherVector:EuclideanVector):EuclideanVector { position.x -= otherVector.position.x; position.y -= otherVector.position.y; return this; }This code is extremely useful to get a vector that goes from the point of a vector to the point of another. Look again at the image and you will see this is true. It will be used a lot in the later examples.
Step 6: Basic Operations Multiplication by a Number
The multiplication between a vector and a number (regular numbers are known as “scalars” in vector math) results in a vector which has had magnitude multiplied by this number, but still pointing in the same direction; it’s “stretched” if the scalar is larger than 1, and squashed if the scalar is between 0 and 1. The sense of the new vector will be the same as the original vector if the scalar is positive, or the opposite if negative. Basically, this number “scales” the vector. Look at the picture:
In the code, we only multiply a vector’s coordinates by the number, which will then scale the vector:
public function multiply(number:Number):EuclideanVector { position.x *= number; position.y *= number; return this; }Step 7: Getting a Vector’s Magnitude
In order to get a vector’s magnitude, we will use the Pythagorean theorem. If you forgot what is it, here is a quick refresher:
(More info here.)
The code is very simple:
public function magnitude():Number { return Math.sqrt((position.x * position.x) + (position.y * position.y)); }You should also remove the line
public var magnitude:Number, as this is what we’ll use from now on.The magnitude of a vector will always be positive, since it is the square root of the sum of two positive numbers.
Step 8: Getting the Angle of a Vector
The angle of a vector is the angle between the x-axis and the vector’s direction line. The angle is measured going from the x-axis and rotating anti-clockwise until the direction line in the cartesian system:
However, in Flash’s coordinate system, since the y-axis is upside down, this angle will be measured rotating clockwise:
This can be easily calculated using the following code. The angle will be returned in radians, in a range from 0 to 2pi. If you don’t know what radians are or how to use them, this tutorial by Michael James Williams will help you a lot.
public function angle():Number { var angle:Number = Math.atan2(position.y, position.x); if (angle < 0) { angle += Math.PI * 2; } return angle; }Step 9: Dot Product
The dot product between two vectors is a number with apparently no meaning, but it has two useful uses. Let’s first take a look at how the dot product can be calculated:
But it also can be obtained by each vector’s coordinates:
The dot product can tell us a lot about the angle between the vectors: if it’s positive, then the angle ranges from 0 to 90 degrees. If it’s negative, the angle ranges from 90 to 180 degrees. If it’s zero, the angle is 90 degrees. That happens because in the first formula only the cosine is responsible for giving the dot product a “signal”: the magnitudes are always positive. But we know that a positive cosine means that the angle ranges from 0 to 90 degrees, and so on for negative cosines and zero.
The dot product can also be used to represent the length of a vector in the direction of the other vector. Think of it as a projection. This proves extremelly useful in things like the Separation of Axis Theorem (SAT) and its implementation in AS3 for collision detection and response in games.
Here is the practical code to get the dot product between two vectors:
public function dot(otherVector:EuclideanVector):Number { return (position.x * otherVector.position.x) + (position.y * otherVector.position.y); }Step 10: Smallest Angle Between Vectors
The angle between vectors, as seen in Step 9, can be given by the dot product. Here is how to calculate it:
public function angleBetween(otherVector:EuclideanVector):Number { return Math.acos(dot(otherVector) / (magnitude() * otherVector.magnitude())); }Step 11: Ranged Angle Between Vectors
There is also another way to calculate the angle, which gives results between -pi and pi and always calculates the angle that goes from the first vector to the second vector; this is useful when you want to easily integrate with a display object’s rotation (which ranges from -180 to 180).
The method works by getting the angle for both vectors, then subtracting the angles and working on the result.
The code:
public function rangedAngleBetween(otherVector:EuclideanVector):Number { var firstAngle:Number; var secondAngle:Number; var angle:Number; firstAngle = Math.atan2(otherVector.position.y, otherVector.position.x); secondAngle = Math.atan2(position.y, position.x); angle = secondAngle - firstAngle; while (angle > Math.PI) angle -= Math.PI * 2; while (angle < -Math.PI) angle += Math.PI * 2; return angle; }Note that this angle returns positive if secondAngle is higher than firstAngle, so the order in which you get the ranged angle will affect the result!
Step 12: Normalizing a Vector
Normalizing a vector means making its magnitude be equal to 1, while still preserving the direction and sense of the vector. In order to do that, we multiply the vector by
1/magnitude. That way, its magnitude will be reduced, or increased, to 1.public function normalize():EuclideanVector { var m:Number = magnitude(); position.x /= m; position.y /= m; return this; }Step 13: Getting the Normal of a Vector
The normal of a vector is another vector that makes a 90 degree angle to the first. It can be calculated by the following formulas:
The formulas rely on the fact that, since the normal is always perpendicular to a vector, we only need to change the order of the x and y coordinates and invert one of them in order to get a normal. The following image shows the process:
In the image, Vec is the original vector, Vec2 is the vector with Vec‘s swapped coordinates, and Vec3 is a vector with Vec2‘s negative y coordinate. Ang and Ang2 are variable, but the angle between Vec and Vec3 is always 90 degrees.
And the code is simple
public function normalRight():EuclideanVector { return new EuclideanVector(new Point(-position.y, position.x)); } public function normalLeft():EuclideanVector { return new EuclideanVector(new Point(position.y, -position.x)); }Step 14: Rotating a Vector
In order to rotate a vector, we assume the (0, 0) position (its initial point) will be the rotation center. The rotated point is given by the formula:
This formula is obtained by applying a rotation matrix to that vector. We would be going beyond the scope of this tutorial if we went into the matrix and how it works, so I will just leave the formula here.
The code is pretty much the same:
public function rotate(angleInRadians:Number):EuclideanVector { var newPosX:Number = (position.x * Math.cos(angleInRadians)) - (position.y * Math.sin(angleInRadians)); var newPosY:Number = (position.x * Math.sin(angleInRadians)) + (position.y * Math.cos(angleInRadians)); position.x = newPosX; position.y = newPosY; return this; }This is the end of our basic vector operations. What you will see next is ways to use this class to do interesting things. Here is our class so far:
package { import flash.geom.Point; public class EuclideanVector { public var position:Point; public var angle:Number; public function EuclideanVector(endPoint:Point) { position = endPoint; } public function inverse():EuclideanVector { return new EuclideanVector(new Point(-position.x, -position.y)); } public function sum(otherVector:EuclideanVector):EuclideanVector { position.x += otherVector.position.x; position.y += otherVector.position.y; return this; } public function subtract(otherVector:EuclideanVector):EuclideanVector { position.x -= otherVector.position.x; position.y -= otherVector.position.y; return this; } public function multiply(number:Number):EuclideanVector { position.x *= number; position.y *= number; return this; } public function magnitude():Number { return Math.sqrt((position.x * position.x) + (position.y * position.y)); } public function angle():Number { var angle:Number = Math.atan2(position.y, position.x); if (angle < 0) { angle += Math.PI * 2; } return angle; } public function dot(otherVector:EuclideanVector):Number { return (position.x * otherVector.position.x) + (position.y * otherVector.position.y); } public function angleBetween(otherVector:EuclideanVector):Number { return Math.acos(dot(otherVector) / (magnitude() * otherVector.magnitude())); } public function rangedAngleBetween(otherVector:EuclideanVector):Number { var firstAngle:Number; var secondAngle:Number; var angle:Number; firstAngle = Math.atan2(otherVector.position.y, otherVector.position.x); secondAngle = Math.atan2(position.y, position.x); angle = secondAngle - firstAngle; while (angle > Math.PI) angle -= Math.PI * 2; while (angle < -Math.PI) angle += Math.PI * 2; return angle; } public function normalize():EuclideanVector { position.x /= magnitude(); position.y /= magnitude(); return this; } public function normalRight():EuclideanVector { return new EuclideanVector(new Point(-position.y, position.x)); } public function normalLeft():EuclideanVector { return new EuclideanVector(new Point(position.y, -position.x)); } public function rotate(angleInRadians:Number):EuclideanVector { var newPosX:Number = (position.x * Math.cos(angleInRadians)) - (position.y * Math.sin(angleInRadians)); var newPosY:Number = (position.x * Math.sin(angleInRadians)) + (position.y * Math.cos(angleInRadians)); position.x = newPosX; position.y = newPosY; return this; } } }OK, we’ve covered building the vector class, now let’s take a took at utilising it.
Step 15: Determining Whether a Point is Inside a Polygon
The action begins here. Determining whether a point lies inside a polygon or not is a very interesting topic, and there are many methods of achieving it. In this article I will present the three methods that are generally used:
All these algorithms will rely on the fact that you know the coordinates of the vertices (corners) that define the polygon.
Step 16: The Crossing Number or Even-Odd Rule Algorithm
This algorithm can be used for any shape. This is what you read: any shape, have it holes or not, be it convex or not. It is based on the fact that any ray cast from the point you want to check out to infinity will cross an even number of edges if the point is outside the shape, or odd number of edges if the point is inside the shape. This can be proven by the Jordan curve theorem, which implies that you will have to cross a border between some region and other region if you want to move from one to other. In our case, our regions are “inside the shape” and “outside the shape”.
The code for this algorithm is the following:
public function isPointInsideShape1(point:EuclideanVector, shapeVertices:Vector.<EuclideanVector>):Boolean { var numberOfSides:int = shapeVertices.length; var i:int = 0; var j:int = numberOfSides - 1; var oddNodes:Boolean = false; while (i < numberOfSides) { if ((shapeVertices[i].position.y < point.position.y && shapeVertices[j].position.y >= point.position.y) || (shapeVertices[j].position.y < point.position.y && shapeVertices[i].position.y >= point.position.y)) { if (shapeVertices[i].position.x + (((point.position.y - shapeVertices[i].position.y) / (shapeVertices[j].position.y - shapeVertices[i].position.y)) * (shapeVertices[j].position.x - shapeVertices[i].position.x)) < point.position.x) { oddNodes = !oddNodes; } } j = i; i++; } return oddNodes; }It will return
falseif the point is not inside the shape, ortrueif the point is inside the shape.Step 17: The Winding Number Algorithm
The winding number algorithm use the sum of all the angles made between the point to check and each pair of points that define the polygon. If the sum is close to 2pi, then the point being checked is inside the vector. If it is close to 0 then the point is outside.
public function isPointInsideShape2(point:EuclideanVector, shapeVertices:Vector.<EuclideanVector>):Boolean { var numberOfSides:int = shapeVertices.length; var i:int = 0; var angle:Number = 0; var rawAngle:Number = 0; var firstVector:EuclideanVector; var secondVector:EuclideanVector; while(i < numberOfSides) { firstVector = new EuclideanVector(new Point(shapeVertices[i].position.x - point.position.x, shapeVertices[i].position.y - point.position.y)); secondVector = new EuclideanVector(new Point(shapeVertices[(i + 1) % numberOfSides].position.x - point.position.x, shapeVertices[(i + 1) % numberOfSides].position.y - point.position.y)); angle += secondVector.rangedAngleBetween(firstVector); i++; } if(Math.abs(angle) < Math.PI) return false; else return true; }The code uses the ranged angle between vectors and gives space for imprecisions: notice how we are checking the results of the sum of all angles. We do not check if the angle is exactly zero or 2pi. Instead, we check if it is less than pi and higher than pi, a considerable median value.
Step 18: The Concave Polygon Algorithm
The concave polygon algorithm relies on the fact that, for a concave polygon, a point inside it is always to the left of the edges (if we are looping through them in a counter-clockwise sense) or to the right of the edges (if we are looping through them in a clockwise sense).
Imagine standing in a room shaped like the image above, and walking around the edges of it with your left hand trailing along the wall. At the point along the wall where you are closest to the point you are interested in, if it’s on your right then it must be inside the room; if it’s on your left then it must be outside.
The problem lies in determining whether a point is to the left or right of an edge (which is basically a vector). This is done through the following formula:
That formula returns a number less than 0 for points to the right of the edge, and greater than 0 for points to the left of it. If the number is equal to 0, the point lies on the edge, and is considered inside the shape. The code is the following:
public function isPointInsideShape3(point:EuclideanVector, shapeVertices:Vector.<EuclideanVector>):Boolean { var numberOfSides:int = shapeVertices.length; var i:int = 0; var firstEdgePoint:EuclideanVector; var secondEdgePoint:EuclideanVector; var leftOrRightSide:Boolean; while(i < numberOfSides) { firstEdgePoint = shapeVertices[i]; secondEdgePoint = shapeVertices[(i + 1) % numberOfSides]; if(i == 0) { // Determining if the point is to the left or to the right of first edge // true for left, false for right leftOrRightSide = ((point.position.y - firstEdgePoint.position.y) * (secondEdgePoint.position.x - firstEdgePoint.position.x)) - ((point.position.x - firstEdgePoint.position.x) * (secondEdgePoint.position.y - firstEdgePoint.position.y)) > 0; } else { // Now all edges must be on the same side if(leftOrRightSide && ((point.position.y - firstEdgePoint.position.y) * (secondEdgePoint.position.x - firstEdgePoint.position.x)) - ((point.position.x - firstEdgePoint.position.x) * (secondEdgePoint.position.y - firstEdgePoint.position.y)) < 0) { // Not all edges are on the same side! return false; } else if(!leftOrRightSide && ((point.position.y - firstEdgePoint.position.y) * (secondEdgePoint.position.x - firstEdgePoint.position.x)) - ((point.position.x - firstEdgePoint.position.x) * (secondEdgePoint.position.y - firstEdgePoint.position.y)) > 0) { // Not all edges are on the same side! return false; } } i++; } // We looped through all vertices and didn't detect different sides return true; }This code works regardless of whether you have the shape’s vertices defined clockwise or counter-clockwise.
Step 19: Ray Casting
Ray casting is a technique often used for collision detection and rendering. It consists of a ray that is cast from one point to another (or out to infinity). This ray is made of points or vectors, and generally stops when it hits an object or the edge of the screen. Similarly to the point-in-shape algorithms, there are many ways to cast rays, and we will see two of them in this post:
In the next two steps we will look into both methods. After that, we will see how to make our ray stop when it hits an object. This is very useful when you need to detect collision against fast moving objects.
Step 20: The Bresenham’s Line Algorithm
This algorithm is used very often in computer graphics, and depends on the convention that the line will always be created pointing to the right and downwards. (If a line has to be created to the up and left directions, everything is inverted later.) Let’s go into the code:
public function createLineBresenham(startVector:EuclideanVector, endVector:EuclideanVector):Vector.<EuclideanVector> { var points:Vector.<EuclideanVector> = new Vector.<EuclideanVector>(); var steep:Boolean = Math.abs(endVector.position.y - startVector.position.y) > Math.abs(endVector.position.x - startVector.position.x); var swapped:Boolean = false; if (steep) { startVector = new EuclideanVector(new Point(startVector.position.y, startVector.position.x)); endVector = new EuclideanVector(new Point(endVector.position.y, endVector.position.x)); } // Making the line go downward if (startVector.position.x > endVector.position.x) { var temporary:Number = startVector.position.x; startVector.position.x = endVector.position.x; endVector.position.x = temporary; temporary = startVector.position.y; startVector.position.y = endVector.position.y endVector.position.y = temporary; swapped = true; } var deltaX:Number = endVector.position.x - startVector.position.x; var deltaY:Number = Math.abs(endVector.position.y - startVector.position.y); var error:Number = deltaX / 2; var currentY:Number = startVector.position.y; var step:int; if (startVector.position.y < endVector.position.y) { step = 1; } else { step = -1; } var iterator:int = startVector.position.x; while (iterator < endVector.position.x) { if (steep) { points.push(new EuclideanVector(new Point(currentY, iterator))); } else { points.push(new EuclideanVector(new Point(iterator, currentY))); } error -= deltaY; if (error < 0) { currentY += step; error += deltaX; } iterator++; } if (swapped) { points.reverse(); } return points; }The code will produce an AS3 Vector of Euclidean vectors that will make the line. With this Vector, we can later check for collisions.
Step 21: The DDA Method
An implementation of the Digital Differential Analyzer is used to interpolate variables between two points. Unlike the Bresenham’s line algorithm, this method will only create vectors in integer positions for simplicity. Here’s the code:
public function createLineDDA(startVector:EuclideanVector, endVector:EuclideanVector):Vector.<EuclideanVector> { var points:Vector.<EuclideanVector> = new Vector.<EuclideanVector>(); var dx:Number; var dy:Number; var _x:Number = startPoint.position.x; var _y:Number = startPoint.position.y; var m:Number; var i:int; dx = endPoint.position.x - startPoint.position.x; dy = endPoint.position.y - startPoint.position.y; if (Math.abs(dx) >= Math.abs(dy)) m = Math.abs(dx); else m = Math.abs(dy); points.push(new EuclideanVector(new Point(int(_x), int(_y)))); i = 1; while (i <= m) { _x += dx / m; _y += dy / m; points.push(new EuclideanVector(new Point(int(_x), int(_y)))); i++; } return points; }This code will also return an AS3 Vector of Euclidean vectors.
Step 22: Checking for Collisions Using Rays
Checking collision via rays is very simple. Since a ray consists of many vectors, we will check for collisions between each vector and a shape, until one is detected or the end of the ray is reached. In the following code,
shapeToCheckwill be a shape just like the ones we have been using in Steps 13-16. Here’s the code:public function checkRayCollision(ray:Vector.<EuclideanVector>, shape:Vector.<EuclideanVector>):Boolean { var rayLength:int = ray.length; var i:int = 0; while(i < rayLength) { if(isPointInsideShape1(ray[i], shape)) { return true; } i++; } return false; }You can use any point-inside-shape function you feel comfortable with, but pay attention to the limitations of the last one!
Conclusion
You’re ready to start using this knowledge everywhere now! It will be useful many times, and will save you a lot of extra calculations when trying to do more complex things in Flash.
I recently bought my first Bamboo, a Wacom tablet that recognises letters from shapes drawn with the stylus. It tickled memories of my first experience with gesture-controlled application: using mouse gestures, web browsers such as Maxthon (and later Opera) allowed users to quickly move back and forth through webpages in the history, switch between different tabs, and so on. I was facinated by its neat user interface, as it takes away traditional mouse clicks. Of course, sophisticated gesture-controlled devices such as the Kinect, iPad and iPhone are now available – but it all started with the good old PC. In this tutorial, you’ll learn how to develop a photo gallery that recognises singular mouse gestures.
Final Result Preview
Let's take a look at the final result we will be working towards. To pan the photo galley in the four main directions, click and drag the mouse in the relevant direction. To scale a photo, drag the mouse South-East to scale up and drag the mouse North-West to scale back to the default size.
(Note: this doesn’t snap to center the photo when panning; it’s sensitive to the length of the line that you draw.)
Step 1: Tutorial Flow
Here’s what you’ll learn in this tutorial, and the order in which you’ll learn it:
Step 2: Gesture Detection: Vector Analysis
It is important to understand the vector math involved in detecting mouse gestures. Having understood detection of a single direction, one can easily extend the understanding to apply to all eight directions.
The Flash presentation below shows steps of detecting a single mouse gesture to due right. To scroll through frames in the Flash presentation below, (mouse down – mouse move – mouse up) in any of the following directions:
Step 3: Gesture Detection: Angle Alleviations
Implementing Step 2 will be easy. However, chances are 90% that users' gestures will fail. Diagram below shows commonly commited gestures (middle); they seldom comply with a rigid Vector pointing to due right (left). Thus, it's better to give alleviation for gesture inaccuracies (right).
For example, we can give an alleviation of 30° on both sides of the Vector pointing due right so that angle of any gesture's Vector that falls within that range will be accepted and interpreted as a gesture to due right.
Step 4: Gesture Detection: Sample Implementation
Below is an implementation of gesture detection to due right. Press down on mouse, move mouse to the right, and release mouse within the Flash presentation below. Try to gesture a little off the absolute right to check out the implementation of alleviation.
Step 5: Variables
Lets look at the variables on our hard-coded implementation in Step 4. I’ve highlighted the important Vector2D variables. Take note of comments I’ve placed at the end of each variable.
Step 6: Hard-Coded Implementation
I assume you already know the basics of putting a
TextFieldinto your project so I shall focus on the ActionScript implementation of mouse gesture. The implementation as indicated below is heavily commented. Important Vector calculations are highlighted as well. I encourage readers to examine these comments, especially those highlighted, to understand operations at different events at runtime.(The Vector2D class is the same one I’ve used in previous tutorials, like this one.)
public function HardCoded() { //Creating a textbox t = new TextField(); t.selectable = false; t.width = 300; t.x = stage.stageWidth/2; t.y = stage.stageHeight - 30; addChild(t); //Start of gesture detection stage.addEventListener(MouseEvent.MOUSE_DOWN, start); } //Register mouse location upon mouse down private function start(e:MouseEvent):void { //Register mouse suppress location earlier = new Vector2D(e.localX, e.localY); //Start to draw line graphics.lineStyle(3); graphics.moveTo(earlier.x, earlier.y); //add mouse move and mouse release listeners stage.addEventListener(MouseEvent.MOUSE_MOVE, move); stage.addEventListener(MouseEvent.MOUSE_UP, up); } //Draw gesture upon mouse move private function move(e:MouseEvent):void { graphics.lineTo(e.localX, e.localY); } //Evaluate gesture upon mouse release private function up(e:MouseEvent):void { //Register mouse release location latter = new Vector2D(e.localX, e.localY); //Calculating vector of mouse gesture var result:Vector2D = latter.minus(earlier); //Calculating angle from absolute RIGHT to gesture vector. var deviation:Number = RIGHT.angleBetween(result); deviation = Math2.degreeOf(deviation); //Interpreting gesture with alleviation if (Math.abs(deviation) < 30) t.text = "RIGHT gesture detected"; else t.text = ""; //Clear screen of previous drawing. graphics.clear(); //remove mouse move and mouse up listeners stage.removeEventListener(MouseEvent.MOUSE_MOVE, move); stage.removeEventListener(MouseEvent.MOUSE_UP, up); }Step 7: Summary
For clarification purposes, here’s a summmary of the hard-coded implementation:
Step 8: Gesture Angle Alleviations
Making an accurate gesture using a mouse is hard. It’s hard to make straight lines (East, South, West, North) but it’s even harder to make diagonal lines (South-East, South-West, North-West, North-East) because we have to estimate that extra 45°. So I have given diagonal lines more alleviations than straight lines. Notice the larger grayed angle for diagonal Vector compared to that of the straight Vector.
Step 9: Gesture Sensitivity
I'd to point out another issue – sensitive gestures. Sensitive gestures identifies gesture directions when mouse pointer makes the slightest shifts in location, even to adjacent pixels. Diagram below illustrate scenarios of sensitive gestures.
If the user changes his mind after mouse press and mouse releases immediately, a gesture will still be detected if his pointer makes a slightest move to the adjacent pixels. We should allow users to undo gesture detection. In this tutorial, I’ve enforced a minimum magnitude the Vector of current gesture must exceed to be valid. I’ve included a diagram as below.
Step 10: Class Variables
In order to detect singular mouse gestures I have implemented
MGesture. Do download and examine this ActionScript file. I shall go through its class variables first, then the class methods.mainBoxDisplayObjectContainerdirectionsVector._deviationFromMainsNumberdirections)_deviationFromDiagonalsNumberdirections)_minDistNumber_earlierVector2D_latterVector2DBelow is the code implementation of class variables. I’ve allowed a deviation of 10° from main directions. For example, -10°-10° is considered due East, -80°-100° is considered due South, etc. I’ve also allowed a deviation of 30° from diagonal directions. So a Vector with orientation between 15°-75° will be considered due South-East, and so on. Also, the minimum magnitude to exceed is 10px.
Step 11: Numbering Directions
You may have guessed it already from reference to code implementation of
directions. For clarification, here are the main directions' integer representations.Step 12: Class Methods & Property
Below are class methods for
MGesture._earlier,_latter) initiates_minDist),Vector2D_latterand returns current gesture Vector (_earlierto_latter)_minDist),Vector2D_minDistintdirectionsStep 13: Methods
The essential methods tabled in Step 12 are all documented here. Do read through the comments.
/** * Initiate variables * @param container where mouse is detected from */ public function MGesture(container:DisplayObjectContainer) { //setting container from which mouse is moving mainBox = container; } /** * Method to register initial mouse location */ public function start ():void { var startMX:Number = mainBox.mouseX; var startMY:Number = mainBox.mouseY; _earlier = new Vector2D(startMX, startMY); //pointer location, initially _latter = new Vector2D(startMX, startMY); //pointer location, to be updated later } /** * Method to update mouse location * @return a Vector2D of current mouse location relative to that when start() is called; */ public function update ():Vector2D { _latter = new Vector2D(mainBox.mouseX, mainBox.mouseY); var vecUpdate:Vector2D = _latter.minus(_earlier); return vecUpdate; } /** * Method to validate a gesture. * @param newLoc Vector2D to new mouse location * @return null if invalid gesture, a Vector2D if valid */ private function validMagnitude ():Vector2D { var gestureVector:Vector2D = update(); var newMag:Number = gestureVector.getMagnitude(); //if magnitude condition is not fulfilled, reset gestureVector to null if (newMag < _minDist) gestureVector = null; return gestureVector; } /** * Method to evaluate gesture direction * @return Integer indicative of direction. Invalid gesture, -1. */ public function evalDirections():int { //Pessimistic search (initialise with unsuccessful search) var detectedDirection:int = -1; //validate magnitude condition var newDirection:Vector2D = validMagnitude(); //if gesture exceed minimum magnitude if (newDirection != null) { //evaluation against all directions for (var i:int = 0; i < directions.length; i++) { var angle:Number = directions[i].angleBetween(newDirection); angle = Math.abs(angle); //check against main directions if ( i < 4 && angle < _deviationFromMains) { detectedDirection = i; break; } //check against diagonal directions else if (i > 3 && angle < _deviationFromDiagonals) { detectedDirection = i; break; } } //update mouse location for next evaluation _earlier = _latter; } //return detected direction return detectedDirection }Step 14: Photo Gallery
Now that the
MGestureclass is set, we shall proceed with an demo application (photo gallery) of it. I have included a source file here. Do download and follow along. First of all, get all images into the "lib" folder in your existing project. Images I’ve used here are courtesy of my wife and daughter.Step 15: Embed Images
Create a new Actionscript class and name it
PhotoView. We shall use these images to construct our gallery.Classobject.ClassintoBitmapobjects so that we can manipulate it further.Bitmapobjects in aVectorarray for easy selection later.Step 16: Display List Management
It is important to clarify here the management of
PhotoView's display list. I’ve included a Flash presentation here. To use it, make a gesture to right or left. For further details, refer to Step 2.Step 17: Positioning Image
In the
PhotoView's constructor, we initiate all necessary display objects and position them into place. Plus, we initiateMGestureand attach events listeners to start gesture detection. I’ve highlighted the event listeners. Their details are explained over the next two steps.public function PhotoView() { panel = new Sprite(); //Initate panel panel.x = stage.stageWidth / 2; //Centering panel horizontally panel.y = stage.stageHeight / 2; //Centering panel vertically addChild(panel); var currentBmp:int = 0; //Current image selected for positioning var bmpGaps:Number = 60; //Spacing between images var bmpOnX:int = 3; //Number of images on horizontal axis var bmpOnY:int = 3; //Number of images on vertical axis var bmp:Bitmap; //Bitmap object to hold image var container:Sprite; //Sprite container to hold bmp //scrolling through Y for (var j:int = -1*Math.floor(bmpOnY/2); j < Math.ceil(bmpOnY/2); j++) { //scrolling through X for (var i:int = -1*Math.floor(bmpOnX/2); i < Math.ceil(bmpOnX/2); i++) { bmp = list[currentBmp]; bmp.x = -1 * bmp.width / 2; //Bitmap centered horizontally in container bmp.y = -1 * bmp.height / 2; //Bitmap centered vertically in container container = new Sprite(); container.x = (bmp.width + bmpGaps )* i; //Positioning container on x accordingly container.y = (bmp.height + bmpGaps )* j; //Positioning container on y accordingly container.addChild(bmp); //Add bitmap into container container.addEventListener(MouseEvent.MOUSE_DOWN, select); panel.addChild(container); //Add container into panel currentBmp++ //Scroll to next bitmap } } gesture = new MGesture(stage); //Initiate MGesture for gesture detection stage.addEventListener(MouseEvent.MOUSE_DOWN, start); }Step 18: Selecting Image to Scale
Line 99 highlighted is not related to detection of gesture, but merely to select image for scaling & placing it on top of all other images.
private function select(e:MouseEvent):void { //Setting current image to scale & //Placing it on top of all other images ImgSelected = e.currentTarget as Sprite; panel.swapChildrenAt(panel.numChildren - 1, panel.getChildIndex(ImgSelected)); }Step 19: Start, End and Evaluate Mouse Gesture
First function below is executed upon mouse down. The second is executed upon mouse up. I’ve highlighted
start()andevalGesture()as well as evant listeners.private function start(e:MouseEvent):void { //Start gesture detection & //Listen for mouse up event gesture.start(); stage.addEventListener(MouseEvent.MOUSE_UP, end); } private function end(e:MouseEvent):void { //Prepare current gesture's magnitude for animation purpose //implement a maximum cap on gesture's magnitude gestureMag = gesture.update().getMagnitude() / 2; gestureMag = Math.min(gestureMag, maxMag); //Evaluate current gesture direction = gesture.evalGesture(); //Once a valid gesture is detected, perform animation //No further gestures will be detected until animation ends if (direction > -1) { stage.addEventListener(Event.ENTER_FRAME, move); stage.removeEventListener(MouseEvent.MOUSE_DOWN, start); } }Step 20: Animating the Panel and Images
Once the directions has been detected, animation will begin. Depending on the gesture made, the whole panel may move in four directions or one single image may enlarge or shrink.
private function move(e:Event):void { var currentMag:Number //Motion of panel translation if (direction < 4) { //Function of easing motion currentMag = gestureMag * Math.cos(currentAngle += 0.1); if (direction == 0) panel.x += currentMag; else if (direction == 1) panel.y += currentMag; else if (direction == 2) panel.x -= currentMag; else if (direction == 3) panel.y -= currentMag; } //Motion of image scaling else { //Setting a maximum cap on motion gestureMag = Math.min(0.30, gestureMag); //Function of easing motion currentMag = gestureMag * Math.cos(currentAngle += 0.1); //Conditions to scale up: //Gesture is to South-East & //Image is not scaled up already if (direction == 4 && ImgSelected.scaleX < 1.30){ ImgSelected.scaleX = ImgSelected.scaleY = -1 * currentMag + 1.30 } //Conditions to scale down: //Gesture is to North-West & //Image is scaled up else if (direction == 6 && ImgSelected.scaleX > 1){ ImgSelected.scaleX = ImgSelected.scaleY = currentMag + 1; } } //If angle on easing function exceeds 90 degrees/ 0.5 Pi radian, //stop animation & enable gesture detection if (currentAngle > Math.PI/2) { stage.removeEventListener(Event.ENTER_FRAME, move); stage.addEventListener(MouseEvent.MOUSE_DOWN, start); direction = -1; //Reset direction currentAngle = 0; //Reset angle } }Step 21: Publish PhotoView
Now all is set. You may finally publish your work by pressing Ctrl + Enter on FlashDevelop. Again. here's a piece of the final product.
Conclusion
This is not the end of it. In the next part, we shall look at detection of a gesture sequence, which will be even more interesting than this part (which really just showed the basics). Do drop comments and let me know if
MGesturehad been useful to you, as well as any bugs, if you encountered any. Finally, terima kasih for the time reading. I’m hoping to entertain my fellow readers in Part 2.Have you ever dived right in to developing a game, but found yourself having to constantly change aspects of the design or the gameplay due to a lack of planning? You should consider using a game design document: a guiding vision of the game as a whole, pulling together ideas and plans for the design, development, and business sides of your game.
Introduction
To put it simply: we like to tell stories. Some true, some not so much. But the point is that we have been crafting tales for a very long time, and as time went by these tales began to evolve, becoming more complex, with richer details, with more and more fantastic backgrounds and appealing plots. Whole new worlds were born from thin air, hammered into shape in the anvils of the human brain.
And as the stories grew in complexity, so did the tools used in their making. Art diverged into several different categories, music became more elaborated and movies found their way into the world. Technological enhancements allowed sharing of information, spreading art all around the globe. New fantasy worlds were created each day. Worlds so rich made people began to desire becoming a part of them. A new concept was being brought to life.
Although video games were first just about getting the highest score possible when faced with a determined task, developers soon realized the endless possibilities laying ahead of them. Playing a video game is more than simply sitting through another story. For the first time one could have a say in how the tale told itself. Players could take hold of characters and live the hardships of the journey themselves, diving into that particular world and mastering it, making theirs the protagonist’s conquests and failures.
A game has the potential to bond player and story in a way never seen before. This connection can be established in a variety of ways. Be it the fantastic landscapes in which the story unravels, the soundtracks or the well-constructed personality of a particular character. It forces the player to thrive in order to see more of what he wants.
Unfortunately, since a game is composed of so many different elements, different experts from different areas are required in its creation, making the coordination of the development process a rather tricky job. In order to help developers do their job, a document known as a GDD, or Game Design Document, is often employed.
A GDD is a tool that helps merging the components of a game together. It registers the general ideas of every aspect of it, from graphics design to story line. In short it registers the game concept, creating the closer feeling of the finished product.
Although the writing of a GDD is not a vital part of the creation process, it is of major help to the team of developers, especially when in major projects, involving large amounts of personnel. Also, there is not only one way of writing a GDD. In fact, GDDs differ vastly among game development companies, but as a general rule, most games are built around these documents.
So without further ado, here is what you need to know about this important tool.
Overview
A Game Design Document must teach everyone who reads it how the game that you’re talking about works. In order to do this, you need to explain not just the mechanics, but also how the game’s objects (characters, enemies, puzzles, weapons, environment, and so on) interact with each other, what your game is about, and how it looks. In a GDD, these points are discussed in some general sections.
Marketing
Marketing is a big section subdivided in many subsections that explain the major commercial aspects of the game, like public target, deadlines, competitors and selling points. This section is very helpful for business, since it shows what your game has in advantage over others and how it meets the consumer demand. In others words, it shows the game’s appeal.
High Concept
Before you start to tell the reader how your game works, you must clarify the core concept of your game, i.e., you must talk about the major aspects of your game in a very short way, so that the reader can anticipate what will be said in the GDD and pay attention to what is important to the game. For this, there is the High Concept section, which explains all of it, so that the reader won’t have to read many pages of the document just to know what your game is about.
For example: if you tell the reader that your project is a futuristic space shooter game, he will be able to imagine what kind of weapons, movements, enemies and others things will be used in the game.
Gameplay
This section is one of the most important in the GDD, because it explains how to control the objects in the game and how to make them interact with the other parts. Also, it explains how the player will execute the possible moves. Moreover, it’s interesting to comment the way that the game flows and what happens during the course of the game.
First Minutes
This is a subsection of the Gameplay section, and it exposes what the player will see in the game when it has just finished loading. It exposes the actions and reactions between the game and the players during this interval, helping understand the game’s progress throughout the gameplay and give a better idea of how to play it. It’s also an important subsection, since it will determine whether or not the game is fun.
Gameflow
This is a more detailed subsection of the Gameplay than the First Minutes. It describes all the options that the player can choose while he is playing. It’s a kind of flowchart that shows which reaction each option has, giving a picture of the game as a whole. Generally it shows a flow of screens (e.g. from the “Main menu” screen it goes to the “Select level” screen), but you can also put actions and consequences in it (e.g. if the player chooses the “Mage” character, all the backgrounds will have a “magical” feeling). It literally explains the way that the game flows, as the name suggests.
Victory Conditions
You also need to teach the reader in the Victory Conditions subsection, what must be done to win, when the player loses and under which conditions this happens. In other words, this section explains the goals of the game.
Number of Players
It’s important to specify how many people can play, because this implies the type of multiplayer – where applicable – that the game will support; for example: split-screen, LAN connections, Internet connections. Note: this section has influence over the Victory Conditions, since the players will need to do different things to win in a competition than in a cooperative game.
Art
Once you explained how to play your game, it’s import to show how your game will look like and which kind of art is behind it, since it’ll influence how the elements of your game’s universe will coexist, mixing the emotions of who is playing. This is a crucial point in the game’s marketing, because it shows the appearance of the game and the feelings it will pass to the player.
Technical Aspects
Another section that must be put in a GDD is the Technical aspects, since it defines the physical game requirements needed to play and specifies on which platforms the game will be developed, which engines will be used, and more. This affects the Marketing, as the kind of hardware used affects both the fanbase and the public target, i.e., the people who consume the game.
Is There a Formula?
All things said, you need to keep in mind that even if some general subsections are common between the GDDs, there is no static form to make this kind of document, and no such thing as a perfect formula. Every game designer has his own way to do this and you must discover yours. This is a hard job, but in this article we’ll give some tips explaining how to create each subsection of the GDD – however, it’s up to you to decide which of them are necessary to design your game.
Always be clear and concise in your text and use a lot of images, because they give the reader a faster and more real view about the game’s final result and they also ease the explanation about puzzles (if your game has them) and how characters, environment, monsters, screens, weapons and other objects from the game will work.
Moreover, you can also find new topics to add in your GDD, as long as it’s necessary to the understanding of the game’s core. Some things that deserve attention are the innovations and the particularities of your game. For example, if your game project brings up a new way of playing, or a specific graphic concept or if it’s focused in music (like a music game), you should discuss it in the document, to convince everyone why this innovation is a good idea.
Guidelines
A good way to start your Game Design Document is with the Marketing section, because it will be the section that your investor or client is interested in, thus allowing them to gain interest in your game faster. In indie game development, it is not a common section due to the common lack of investors, however, if you think in other projects not related to commercial purposes, such as a free game on App Store of Apple to help a charity institution, it’s important to keep track of plans related to the marketing aspect, since it will be really important to have a publishing plan.
After this, it’s important to put the High Concept, so the reader immediately will understand the core of the game and pay attention in the major aspects. You will figure out that in GDDs it’s common to always start with a basic and summarized definition of the game, and go on to present every detail step-by-step.
In the next section you should write about the Gameplay, which should include, as sub-sections, the First Minutes, the Game Flow, the Victory Conditions and Number of Players.
After that, you need to show how your game will look, so talk about the Art, using as many images as you can. In the end, you can talk about the Specific Sections, which should bring topics that explain: the innovations, the aspects that not necessarily all games have, like story, artificial intelligence, characters and others particulars things.
All the things said above are represented in the flowchart bellow, but it’s just a general schema and you can (and should) adapt to your game. Remember: there isn’t a perfect formula. Now that you have a kind of skeleton of the GDD, you will find in the Composition topic of this tutorial a more detailed explanation about what which section of a GDD holds.
Composition
Although there isn’t such a thing as a perfect formula for composing your GDD sections, it’s important for you to include some crucial topics in it, as well as avoid some major mistakes. This section teaches you how to detail the sections presented in the Overview topic, while showing examples of how it’s done and some common mistakes.
The Marketing Section
There is no correct way of dealing with this subject, since your objectives for it will depend on your game. It’s also not really needed; you can either concatenate it all in a major subsection or spread it across the document, as some of the topics discussed here have much in common with others elsewhere. Despite the way you choose to do it, some topics should always be addressed:
Target Audience
Who will play it? This is no ordinary section, so don’t settle for a simple “for children” description, for example. There are endless ways to “classify” gamers, and you must explore this. Comment on how it will appeal to each category and try not to leave anyone out; they might share little in common with your product, but they still share something.
Right:
Wrong:
(“A large audience” isn’t a valid fanbase, and it doesn’t explain why they would enjoy it. No mention of the ERSB rating or whether the game has any age-restricted material.)
Another good example:
Notice all the classifications in the example: gender, age, nationality and genre. Keep in mind that many more categories may arise depending on your game. Predictions on the ESRB rating are also welcomed, therefore some restrictions regarding violence, sexual content and language should be addressed if needed.
Platform
Extremely straight-forward section. Just enumerate the platforms that your game is being designed for. An estimate of the system requirements are also a good call. If needed, you can comment on porting the game and the difficulties involved.
Competitors
This is a key subsection of your document. In here you must compare your game to others already developed. It is important to give a small description of the game being compared to, and point the similarities between both. This is an excellent opportunity to expand the comparisons that were already made across the GDD and give the reader a better picture of what the game will actually be.
At the end summarise your product’s strong points and convince the reader why would your product sell despite its competitors. This is the trickiest part, because you must pick good opponents, otherwise the reader just won’t know what you are talking about, and still keep your game’s image shining; therefore a good writing is crucial. Your ‘adversaries’ also help on the notion of how big your market can be.
Milestone Schedule
The Milestone Schedule subsection is where you must define each necessary steps in order to develop the game, which is basically a timeline of the intended completion of phases of your game. Through that, not only you, but also the investors, can have a very rough estimate of the interval of time needed to complete the project.
Other Subsections
You may choose to add some heavy market-related topics such as Costs Overview, that can comprehend equipment costs, people costs, additional costs and expected profit.
Future Plans
Sometimes there are so many ideas to complement a game that some of it must be put aside in order to meet the tight schedule of development. This section is specifically made to store those ideas, so that you can work on it later depending on how things work out. DLCs, possible sequels, minor improvements to gameplay, graphics and so on, all comes in here. You can also gather some ideas of what to do with the game once it is finished.
Example:
The Introduction Section
The introduction section should provide the reader with a basic overview of the game itself, first with a light approach with the High Concept subsection and then with a broader one within the Summary subsection. You can also highlight the more innovative aspects of your game in a Key Features subsection.
High Concept
A one paragraph description of what your game is about. This should sound like the summary of a summary. Avoid any technical aspects, graphic or sound designs, complex gameplay features, or marketing details that aren’t strictly required (for example, if you’re making a rhythm game you should mention what kind of music style you will be using, whereas if your game is a puzzle you can just forget about music for now; it’s better to describe what type of puzzle the player will have to solve instead). The idea is to describe your game in the most non-technical and shortest way. A good tip is to use well-known games as examples for comparison, such as “X is a three-dimensional racing game with power-ups like Mario Kart”.
Right:
Wrong:
(Keep it short and simple)
Summary Overview
A more detailed description of your game, with less restrictions than the High Concept subsection. Start with the core aspects of the gameplay, describing what role the player will take, what’s his goal, what he will have to do in order to accomplish it, what will hold him back and why the game will be entertaining.
Next, do a quick introduction to the game’s setting and a brief description of the history (if any). It’s always nice to use an image instead of describing what the graphics will look like, so if you don’t have any sketches or conceptual art you should just paste pictures with similar art to what you will be using (that includes screenshots of other games as well!).
Key Features
The best way to compose this is using short topics (i.e. bullet lists) instead of long paragraphs. Basically you should tell the reader right away about all of the creative ideas you had which you thought would make your game a great game.
Right:
Wrong:
(Too many ideas at once makes the reader lose the train of thought.)
Third-Party Software Used
A little explanation of the programming languages, libraries and software you will be using to create your game, as well as the programs you will use to adjust your graphics and sound engines and any other engines your game may need (like a networking one for multiplayer games).
If you’re under some heavy software/hardware restrictions, you should specify that in here (i.e. if you’re making a game for Apple devices, you have to tell you’ll be using iOS-compatible technology). Also if your game is aimed at PCs and you have an idea what the minimum requirements will be you should note them here. Although the non-programming people of the project probably won’t understand what the heck a “NVIDIA Cg 1.2.1” is, they’ll have to know it by name since that’s what the game will run on.
The Gameplay Section
This section is designed to describe how the game will effectively work, describing the game’s objective as well as its elements (menus, victory conditions, enemies, powerups, stages, …), and the interaction between each one of these elements with the player. If you feel like one subsection, such as “Enemies”, has too much content to be just a subsection you may promote it to a section of its own.
First Minute
It’s interesting for you to describe what the player’s reaction is going to be like as soon as the game loads, such as describing whether he can start playing right away or if he can navigate through menus to change some options beforehand, whether the player will have to learn the controls by trial and error or a tutorial will be presented to him, whether all stages will be available at the get-go or if he will have to unlock them in progression, and so on. Given you have already planned some stages ahead, you could narrate a short run of the player clearing a stage, describing the enemies and/or puzzles he had to go through in said stage.
Right:
Wrong:
(Although being essentially how the game will run, it needs more details.)
Gameflow
A nice complement to the “First minute” would be the “Game Flow”, which is usually represented as a flowchart. In contrast to the previous subsection, this one won’t focus on the first impression but rather give an overview of the whole picture, showing step-by-step which actions the player can take from the moment the game is loaded to when the player hits the “exit button” – i.e., ends his gaming session – including the gameplay itself in a somewhat high concept.
Right:
(Example from Drexel Game Design’s Scavenger Hunt GDD.)
Wrong:
(Nothing THIS simple. Include, at least, all the screens that the player will run through!)
Victory Conditions
Here you state what is required for the player to clear a stage, win a match, or advance another level, whether your game is a puzzle, where the player advances to the next level when all pieces are combined in a certain way, or a sidescrolling shooter where the player advances a stage when he defeats the boss at the end, or whatever. Obviously, this depends entirely on what kind of game you’re designing.
Example:
Graphics
You can’t really provide the reader with screenshots or video footage of something you may haven’t even designed yet, so in this subsection you should simply describe how do you plan to handle your graphical engine and maybe show some sketches of your game or a few drawings in the art style you intend to use. Planning the game HUD from the beginning will save you a lot of time later on, for example.
HUDs
The head-up-display is the in-game interface the player will have when playing the game. Rather than in-game menus like settings or inventory screens, this refers specifically to the floating windows and bars which don’t normally interact with the game and serve a information-only purpose. This includes health bars, mini-maps, time counters, equipped items and their amounts, money and etc. Although the size of the HUD will vary according to the game type (MMORPGs and RTSs will have big HUDs while sidescrollers and puzzles will have very small ones) keep in mind that a HUD shouldn’t occupy too much of the screen.
Example:
Sounds
On the other hand, one cannot sketch sounds, so you’ll just have to detail your sound engine here, and maybe the style of songs your game will use. Although for most games you will simply state that there will be different background music for different situations, it goes without saying that this subsection is most important for a rhythm game.
Controls
Stating which buttons/keys do what can be troublesome in the case where a single button does more than one action (i.e. The ‘A’ button in any 3D Zelda). Start by putting a simple picture of a controller or a keyboard with each button highlighted with their function in a more general sense. After that, if your game has advanced combos or something similar to that, explain them carefully, stating under which conditions each combo is “activated”.
Example:
(Image from CrunchTime Games Inc’s Shred Nedbula document.)
Game-Specific Subsections
Puzzles could have a “Pieces” subsection, sidescrollers will probably have a “Level Design” one, space shooters may have “Enemies” and so on. As the title in bold above says, each game will have their own specific subsections, and since we can’t compose a subsection for all the possible ones that one GDD can have, we will provide you with the three bold subsections presented here as examples.
Pieces
Suppose we have a puzzle game, where the player rotates different pieces in order to create a line of matching pieces to gain points. This would be a nice subsection to show some sketches of the many different types of pieces, as well as explaining their rotation pattern, stating their points value, and maybe describe their positioning placement. Pictures are welcome as always!
Example:
(Image from Colin Fahey’s Tetris article.)
Level Design
Now let’s pretend we have a typical 2D platformer. One of the core elements of the game is the stages the player has to go through. It’s important that each stage feels unique so the player won’t feel like he’s just repeating the same thing over and over again. On the other hand, the player should still be familiar with the flow of the stage, i.e. if there’s always a checkpoint somewhere halfway through it, or some collectible items along the way.
What are the different types of enemies, terrains, doodads and power ups and do they allow the level designers to come with many different stages? You could present some beta stage diagrams to illustrate how will they be carried out.
Example:
(Map from Super Metroid; image from jansenprice.com.)
Enemies
It’s very popular for space shooters to have many kinds of enemies, each one with different attacks and movement patterns, as well as different values for health, speed and targetable area. As such, it’s no surprise you would need an extra section to present all the game’s foes and their stats. Also, you could state some of their more obscure behaviour like shooting an extra beam when their health is low and so on.
Example:
(Image from CrunchTime Games Inc’s Shred Nedbula document.)
Plot
Many games are set in fictional worlds, each with their own geography, history and characters, in which the player will undoubtedly play a large role as the protagonist. If your game has a particularly interesting setting, it would be interesting to include a little insight on the game’s storyboard, describing the protagonist’s main events during his adventures and details about the lore.
Characters
Lots of games aren’t made of enemies alone. There may be a protagonist and allies to help him overcome his foes. For example, even a tower-defense game without a controlled character can still have side-characters like a tutorial-NPC giving you tips on how to overcome certain challenges at the beginning of each stage. If you do have a protagonist that the player controls, then what’s he like? Does he have any abilities and powers? Keep in mind that this shouldn’t feel like a “How to Play” subsection.
Artificial Intelligence
Any game will need a persisting world to handle all the player’s actions to the game and the other way around. That includes enemy movements, player controls, collision handling, time counting, random number generators and many other things one could need in a game. Although people not directly related to the programming may not understand this subsection entirely, they should at least grasp the basic of it. Most of all, keep the coding out of here and simply state the enemies’ moving patterns, the chain puzzle piece falling algorithm, maybe illustrate the combat system with a flowchart and so on.
Example:
Technical Aspects Section
The technical aspects consist of a series of game data, such as the system requirements on which it will play and the framework in which it was developed, the method or algorithm it was based on, and the maximum number of elements that can be rendered on screen. The graphical technical aspects consists of software used, modeling type, art style and others according to these topics.
The system requirements are the necessary computer settings for the game to be played, like the size it occupies on the computer’s HD and how much RAM is needed.
Another important technical aspect not to forget is the ESRB (Entertainment Software Rating Board) rating (or similar), already explained earlier. Some of the ratings are shown below.
To Include or Not to Include? When? Why?
Technical aspects interest the companies that will distribute it or that will use the technology developed in the game, so always add something in it if you’re showing this to someone that will approve or disapprove the game. There has to be some care when writing technical aspects. You can write something in the wrong subject. For example: limiting the platform and distribution game mode belongs to Marketing Aspects, not to Technical Aspects.
More Examples
For professional examples of Design Documents provided by the developers, we have: Shred Nebula, Play With Fire, Grim Fandango Puzzle Document, and many more avaliable at gamepitches.com.
For more material about the structure and composition of a GDD, one could try the featured Gamasutra article The Anatomy of a Design Document, Part 1 and Part 2; the self explanatory Creating a Great Design Document; and a more general How to write an effective Design Document, which isn’t about GDD, but about software development.
More on Game Design: The Two C’s of Video Game Design.
Moreover, there are other visions of how should documentation be done in the Game Industry, as seen in Game Design Logs and Return of the GDD. Although they seem to contradict what had been told here, this should fall in a case-by-case analysis considering team size, budget and deadlines.
Conclusion
For designers who need the approval of an investor: truth be told, before you can make any progress with an investor, you must first get his attention, and to do so, the following key points of your document must be in excellent shape.
High concept: you never get a second chance to make a first impression, and here is where you will make it. We have already given you the tools to make this section, now just remember to give its construction a high priority and point everything that makes your game more appealing here.
Pictures: do not be fooled that the reader will always go through your entire GDD, there are some documents that surpass a thousand pages (yes, this is true!). But he will surely take a better look if something catches his attention, and what better way of doing so than with pictures? After all, one image is worth a thousand words.
It goes without saying that your document must have a great appearance. Take your time to make everything readable and nice. Also, don’t forget that this article only presented a skeleton structure of a GDD for you; you will have to adapt it to your own game!