Getting Started with

2/12/2012 Hyun-Woo Anthony Kim

College of Information Sciences & Technology The Pennsylvania State University
Spring 2012 - IST446 An Introduction to Building Computer/Video Games
1

Whats FlashPunk?
A free open-source 2D game engine for flash developers

Why FlashPunk is useful?

Provides a fast, clean framework to prototype and develop your games in.

Why FlashPunk is useful?

Helps you stay away from dirty work!

Dealing with timestepping, animation, input, collision detection and much more from scratch is a BIG deal!
4

Why FlashPunk is useful?

Gives you more time and energy to concentrate on the design and testing of your game

FlashPunk Website
http://flashpunk.net

Setting Up (Step 1)
Step 1: Install FlashDevelop (a Flash IDE)
http://flashdevelop.org/

CLICK!

Why not the newest version?

A 3.x version may be a better choice
FD4 is not compatible with FD3 plug-ins

Lets choose v3.3.4 RTM

Setting Up (Step 2)
Step 2: Install Adobe Flex SDK
http://opensource.adobe.com/wiki/display/flexsd k/Download+Flex+4

CLICK!

Flex SDK Location

If youre installing it on your own computer,
Lets create a folder C:\Flash and put the SDK in it.
e.g. C:\Flash\flex_sdk_4.1.0.16076A\

Lets create another folder C:\Flash\Projects\ where we will make our examples in

10

Setting Up (Step 3)
Step 3: Install Debug Player
http://www.adobe.com/support/flashplayer/dow nloads.html

CLICK!

11

Setting Up (Step 4)
Step 4: Run and configure FlashDevelop

12

Configuring FlashDevelop

CLICK!

13

Setting Flex SDK Path

14

Setting External Player Path

15

Creating a New Project

16

Creating HelloIST446 project

17

Editing Main.as
package { import flash.display.Sprite; public class Main extends Sprite { public function Main():void { trace("Hello IST446!"); } } }
18

Running the Project

Simply press F5 or click on button

Were good to proceed!

19

Downloading FlashPunk (Step 5)

http://github.com/ChevyRay/FlashPunk/zipbal l/master Extract the ZIP file Copy the whole net folder into your project (under src)

20

Copying FlashPunk
Whenever you create a new project,
Copy the whole net folder into your project folder (under src in which Main.as is located)

Your project folder should look like this

21

Were ready to play with FlashPunk!

22

Lets edit Main.as first

This is the main class of the first example
Remove all the code colored in red
package { import flash.display.Sprite; import flash.events.Event; public class Main extends Sprite { public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point } } }
23

A Super Simple Example

package { import net.flashpunk.Engine; public class Main extends Engine { public function Main():void { super(320, 240); } } Width Height }
24

Adding init() method

package { import net.flashpunk.Engine; public class Main extends Engine { public function Main():void { super(320,240); } override public function init():void { trace("FlashPunk has started!"); } } }
25

Doubling the screen

package { import net.flashpunk.Engine; import net.flashpunk.FP; public class Main extends Engine { public function Main():void { super(320, 240); FP.screen.scale = 2;

We are not done yet!

} override public function init():void { trace("FlashPunk has started!"); } }

26

Doubling the screen

Right click on the project name, and choose Properties

27

Enabling Console
Console gives information on your entities public function Main():void { super(320, 240); FP.screen.scale = 2; FP.console.enable(); }
28

Console Window

29

Lets make a World

Create a new class named GameWorld

Right click on src in Project window, and choose New Class

30

Creating a World
Type in a class name (e.g. GameWorld) and choose net.flashpunk.World as a base class

31

So whats the world is about?

A world object can contain entities like
Players Enemies Obstacles etc

Each entity will be created by the world

32

A World Example
package { import net.flashpunk.World; public class GameWorld extends World { public function GameWorld() { trace("IST446 GameWorld constructed"); } override public function begin():void { super.begin(); } } }
33

Linking the main to the World

Package { import net.flashpunk.Engine; import net.flashpunk.FP; public class Main extends Engine { public function Main():void { super(320, 240); FP.screen.scale = 2; FP.console.enable(); } override public function init():void { trace("FlashPunk has started!"); FP.world = new GameWorld(); super.init(); } } }

34

Example: A Block Moving Around

35

Lets create a Block entity

package { import flash.display.BitmapData; import net.flashpunk.Entity; import net.flashpunk.graphics.Image; import net.flashpunk.utils.Input; public class Block extends Entity { public function Block() { var image:Image = new Image(new BitmapData(16, 16, true, 0xfffffffff)); graphic = image; } override public function update():void { A white block x = Input.mouseX; y = Input.mouseY; super.update(); The block location is set to the } mouse pointer location } }
36

Let the world add a Block to itself

package { import net.flashpunk.World; import Block; public class GameWorld extends World { public function GameWorld() { trace("IST446 GameWorld constructed"); } override public function begin():void { add(new Block); super.begin(); } } }
37

One More Example

We want Joe Pa back! Let him move around the world!

38

Entities
Joe is a Player entity. And lets assume that football balls are his enemies (Enemy entities).

Player Entity
http://www.jfasites.com/Anderson/Anderson _Images/Joe_Paterno_Caricature.jpg

Enemy Entity
http://cdn.bleacherreport.net /images/team_logos/50x50/fa ntasy_football.png
39

Collision Detection
If Joe moves over a ball, he will get upset

40

Icon Files
Create a folder named graphics under the project location Put those two icon files in it

41

Player Entity
package { (import statements omitted) public class Player extends Entity { [Embed(source="../graphics/Joe_Paterno_Caricature.jpg")] private const PLAYER_GRAPHIC:Class; public var image:Image; public function Player() { image = new Image(PLAYER_GRAPHIC); image.scale = 0.5; graphic = image; setHitbox(50, 45, 0, 0); type = "player"; } (to be continued)
42

Inserting an image file name

Right-click on an image file name in the project window Choose Insert Into Document

43

Update function of Player

override public function update():void { if (Input.check(Key.RIGHT)) x += 100 * FP.elapsed; if (Input.check(Key.LEFT)) x -= 100 * FP.elapsed; if (Input.check(Key.UP)) y -= 100 * FP.elapsed; if (Input.check(Key.DOWN)) y += 100 * FP.elapsed; if (collide("enemy", x, y)) else image.color = 0xfffff; image.color = 0xff0000;

super.update();
}

44

Update function of Player

If you want to check out-of-boundary conditions
override public function update():void { if (Input.check(Key.RIGHT)) x += 100 * FP.elapsed; if (Input.check(Key.LEFT)) x -= 100 * FP.elapsed; if (Input.check(Key.UP)) y -= 100 * FP.elapsed; if (Input.check(Key.DOWN)) y += 100 * FP.elapsed; if (x < 0) x = 0; if (y < 0) y = 0; if (x + image.scaledWidth > FP.screen.width) x = FP.screen.width - image.scaledWidth; if (y + image.scaledHeight> FP.screen.height) y = FP.screen.height - image.scaledHeight; if (collide("enemy", x, y)) image.color = 0xff0000; else image.color = 0xfffff; super.update(); }
45

Enemy
package { import net.flashpunk.Entity; import net.flashpunk.graphics.Image; import net.flashpunk.FP; public class Enemy extends Entity { [Embed(source = "../graphics/fantasy_football.png")] public const ENEMY_GRAPHIC:Class; public function Enemy() { graphic = new Image(ENEMY_GRAPHIC); x = FP.rand(FP.screen.width); y = FP.rand(FP.screen.height); type = "enemy"; setHitbox(50, 50, 0, 0); } } }

46

Put Joe in the world

package { import net.flashpunk.World; import Block; public class GameWorld extends World { public function GameWorld() { trace("IST446 GameWorld constructed"); } override public function begin():void { //add(new Block); add(new Player); super.begin(); } } }
47

Joe!!

48

Viewing the HitBox

Press Tilde [`/~] key

CLICK!

49

Joes HitBox

50

Adding three enemy entities

package { import net.flashpunk.World; import Block; public class GameWorld extends World { public function GameWorld() { trace("IST446 GameWorld constructed"); } override public function begin():void { add(new Player); add(new Enemy); add(new Enemy) add(new Enemy) super.begin(); } } }
51

HitBoxes

52

Joe Collided with an enemy!

53

A good place to learn more

http://flashpunk.net/tutorials/

54

Video Tutorials

55

Any Questions?
On Wednesday, well play with GameMaker Lite
http://www.yoyogames.com/gamemaker/

56