Game Design IActionScript Introduction & Ch 1

Blake Farrugia10/3/2011

Specifics

• ActionScript was originally a small scripting language built for Macromedia Flash applications.

• Currently version 3.0, it is now a fully featured object-oriented language for complex Flash and Flex applications.

• Note: This includes games!

2

IDE Setup

• We all can’t have Adobe Flash, so here’s a good freeware IDE : FlashDevelop– Similar to Visual Studio– Allows for quick debugging– Installs most prerequisites needed for its use– We will be using FlashDevelop 4.0 Beta 3, but it

should work with the latest version– http://www.flashdevelop.org/

3

4

Basics

• FlashDevelop is very similar to Visual Studio• The Flex SDK is needed. FlashDevelop should

install and configure this for you.• A 32-bit Java Runtime Environment (JRE) of

v1.6 or greater is needed.• The Flash Debug Player. It can be found here:

http://www.adobe.com/support/flashplayer/downloads.html

5

Installing Flex SDK

• To develop ActionScript games, a Flash installation is not needed.

• It certainly helps with art assets and animation, but all that is needed is the Flex SDK.

• http://www.flashdevelop.org/wikidocs/index.php?title=AS3

6

Using FlashDevelop w/ Flex SDK

• Compile Workflow– Add resources such as graphics, sounds and fonts

to your FlashDevelop project– Use FlashDevelop to write ActionScript classes– Use embed tags in your ActionScript to include

assets– Use FlashDevelop to compile your project using

the Flex SDK

7

Important Classes

• MovieClip – classes that act as dynamic objects to be manipulated

• These objects use depthto track asset display over each other.

8

Important Classes cont.

– bg.addChild() is adding a new instance of the asset BgGif to MovieClip bg (itself)

– The Game class then calls addChild(bg) so it can display MovieClip bg within the game

9

Important Classes cont.

• Sound – a sound asset for the game• For Chapter 1, an asset is embedded as a

custom class PopSound, then PopSound is applied

• Play a sound use popSoundChannel=popSound.play(0,1);

10

Important Classes cont.

• This works for now, but a better way will be introduced later in the book

• The authors introduce a set of game framework classes in the chapter 2

11

ActionScript 3 Introduction

• Before we start developing, we will be reviewing some basic language points.– Variable typing– Function declaration– Reference import– Class inheritance– Labels

12

Some Basics

• ActionScript 2.0 is NOT ActionScript 3.0. Some of AS2 will not work with AS3.

• Syntax – function/variable type after name

13

Syntax Notes

• Much of the language writes like C#/Java• Much like the languages mentioned above, it

is VERY object-oriented.

• Function and variable typing syntax differs the most from other languages, as seen above.

14

Embedded Resources

[Embed(source = 'assets/blade.gif')]public static const BladeGif:Class ;• Embedding resources create class objects out

of our art/sound assets for use later• This keeps OOP standards while inserting art

assets into the script

15

Variable Typing

• To declare a variable of a certain type, it must follow this format:

– AccessLvl var variableName:Type ;• public var someInt:Int = 3214;• var someString:String = “This is a string!!”;• public static const someImportantNum:Number = 0;

16

Variable Typing

• Variables follow standard scope rules

• Variables can only be used in functions, classes, and/or namespaces you use!

17

Function Declaration

• Functions do not need to be prototyped and they follow a similar declaration as variables.

– AccessLvl function functionName:Type( … ) { … }

18

Function Declaration

public function doMath:Float(x:Float, y:Float){

var tempVar:Number = x;var answerVariable:Number = x * y / x;return answerVariable;

}

private function doNothing:void() { }

19

Reference Import

• With package being the namespace of the class, import calls take all references

• .* get all classes • Classes follow• Imports can bedone anywherewrt scope!

20

Class Inheritance

• Use the extends keyword to get functionality of another class.

• You can override base functions by using the override keyword.

• On the topic of classes, structs DO NOT exist in AS3. Too bad!

21

Chapter 1-1 : Balloon

• At time of writing, Chapter 1 code did not use Flex SDK. Much of it is wrong.

• The original code does not use embedded resources and lacks many classes. It will not work properly.

• Much of the actual book material is accurate, but in this case, the code from CH1 is not.

• Revised code can be found along with a description of fixes http://www.8bitrocket.com/2010/3/29/Essential-Guide-To-Flash-Games-Code-Supplement-1-Ch-1-Games-With-The-Flex-SDK/

22

Game Basics

• Player : A large spinning saw blade• Enemies : Balloons• Objective: Pop the balloons with your spinning

blade!• Source Code : Game.as• Any assets (graphics, sounds) are in the

revised code’s asset folder:– /ch1_balloons/src/assets

23

Game.as

• Main class of balloons.swf• Game functions. Each below are described in

the sample code :– Game “Loop”– Collisions– Object generation/tracking– Events

24

Framework

• Game Loop – game state management– Called via event that is triggered by new frames

– Switches “game states,” paths of different code

25

Framework - Initialization

• Where all variables and display assets are loaded. Classes can be modified by reference.

26

Initialization cont.

• What is this function doing?– Initializing MovieClip player and assigning BladeGif

as it’s only displayable feature– Initializing MovieClip array enemy to an empty

array– Add player to Game’s Displayable Object List and

set up important data ( level, chances )– Set Game’s gameState to STATE_PLAY, allowing

game to be played

27

Framework – Play Game

28

Framework – Play Game

• playGame() runs each function or stage of the game.• makeEnemies() – Randomly create enemies• moveEnemies() – Update enemy wrt speed• testCollisions() – Check player collisions against all enemy collisions• testForEnd() – Check win/lose conditions

29

makeEnemies()

30

makeEnemies()• Pseudo-random chance to add 1 enemy

variation with a speed based on current level to array of enemies

• Sets all attributes of enemy after creation– Location (x, y)– Speed

31

moveEnemies()

32

moveEnemies()

• Moves balloons upward based on their speed.• If they reach past the window bounds, then it

is counted as a “miss.”• The player only gets 5 misses before the game

ends (abruptly)

33

testCollisions()

34

testCollisions()

• MovieClip collisions are based on bounding boxes they create/update on initialization with an asset.

• Custom collision boxes can be made.• This function checks if any enemy is colliding

with the player.• If so, they are “popped” and the player is

given a point

35

testCollisions()

• The splice(int index, int howMany) removes element at index, and however many other elements after (howMany)

36

testForEnd()

37

testForEnd()

• Check ending conditions– How many misses? / Has Player reached Top

Score?

• Since gameLoop always checks gameState; this registers our game over, or just increases the level / difficulty

38

What’s Next?!

• Well, like all games, everything is in a loop.• All of these functions will repeat based on the

gameState path chosen via int constants.– STATE_INIT: initialize game– STATE_PLAY: continuously update running game– STATE_END: end game sequence

• Very basic, but a good standard to follow for simple games

39

Chapter 1-2 : Pixel Shooter

• Much of “Balloons” is in Pixel Shooter• This will talk more about major changes to the

framework rather than note every minor change.

• Any new syntax will also be described.

40

Game Basics

• Player : A spaceship• Enemies : Alien spaceships• Objective: Kill the alien ships• Source Code : Game.as• Any assets (graphics, sounds) are in the

revised code’s asset folder:– /ch1_shooter/src/assets

41

Major Framework Changes

• Much of the framework is in tact, but this game now adds player lives to the mix

• Multiple lives and player restarts are controlled by the state system by using STATE_START_PLAYER

• Projectiles are new as well, so new collision-handling and events were added.

42

Framework - Initialization

• Two new states:– STATE_START_PLAYER : adds player to game– STATE_REMOVE_PLAYER : resets game

43

Framework - Initialization

44

startPlayer() and removePlayer()

• startPlayer() – very basic; add player back to game, return to playing the game

• removePlayer() – reset level; remove all enemies, missiles, explosions, and player from the screen, then change state to recreate player.

45

Anything Else?

• Though the framework is the same, many new helper functions have been added.

• Each builds on what has already been established in “Balloons”– removeEnemy, Missile, Explosion () – remove

instances of any called item above– makeExplosion() – create explosion animation– onMouseDownEvent() – player-triggered event!

46

onMouseDownEvent()

• This event was initialized on the first line of the initGame() function.

• When the player left clicks the mouse, a missile will be fired his ship.

• Movement and collision of the missile will be tracked by the game in moveEnemy() and testCollision()

47

Tutorials

• 8 bit Rocket – Book authors website : Mostly up to date tutorials in ActionScript 3 http://www.8bitrocket.com/

• Apress Book Website : Site that has all sample code to the book http://www.apress.com/9781430226147

48