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
