Post on 16-Jul-2015
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 1/56
Getting Started with
2/12/2012Hyun-Woo “Anthony” Kim
College of Information Sciences & Technology
The Pennsylvania State University
Spring 2012 - IST446 An Introduction to Building Computer/Video Games 1
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 2/56
What’s FlashPunk?
• A free open-source 2D game engine for flash
developers
2
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 3/56
Why FlashPunk is useful?
• Provides a fast, clean framework to prototype
and develop your games in.
3
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 4/56
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 5/56
Why FlashPunk is useful?
Gives you more time and energy
to concentrate onthe design and testing of your game
5
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 6/56
FlashPunk Website
• http://flashpunk.net
6
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 7/56
Setting Up (Step 1)
• Step 1: Install FlashDevelop (a Flash IDE)
– http://flashdevelop.org/
7
CLICK!
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 8/56
Why not the newest version?
• A 3.x version may be a better choice
– FD4 is not compatible with FD3 plug-ins
8
Let’s choose v3.3.4 RTM
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 9/56
Setting Up (Step 2)
• Step 2: Install Adobe Flex SDK
– http://opensource.adobe.com/wiki/display/flexsd
k/Download+Flex+4
9
CLICK!
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 10/56
Flex SDK Location
• If you’re installing it on your own computer,
– Let’s create a folder C:\Flash and put the SDK in it.
• e.g. C:\Flash\flex_sdk_4.1.0.16076A\
• Let’s create another folder C:\Flash\Projects\
where we will make our examples in
10
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 11/56
Setting Up (Step 3)
• Step 3: Install Debug Player
– http://www.adobe.com/support/flashplayer/dow
nloads.html
11
CLICK!
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 12/56
Setting Up (Step 4)
• Step 4: Run and configure FlashDevelop
12
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 13/56
Configuring FlashDevelop
13
CLICK!
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 14/56
Setting Flex SDK Path
14
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 15/56
Setting External Player Path
15
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 16/56
Creating a New Project
16
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 17/56
Creating “HelloIST446” project
17
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 18/56
Editing Main.as
package{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main():void
{
trace("Hello IST446!");
}
}
}
18
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 19/56
Running the Project
• Simply press F5 or click on button
19
We’re good to proceed!
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 20/56
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 21/56
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 22/56
22
We’re ready to play with FlashPunk!
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 23/56
Let’s edit Main.as first
• This is the main class of the first example
– Remove all the code colored in red
23
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
}
}}
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 24/56
A Super Simple Example
package
{
import net.flashpunk.Engine;
public class Main extends Engine{
public function Main():void
{
super(320, 240);
}
}
}24
Width Height
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 25/56
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 26/56
Doubling the screenpackage
{
import net.flashpunk.Engine;
import net.flashpunk.FP;
public class Main extends Engine
{
public function Main():void
{
super(320, 240);
FP.screen.scale = 2;
}
override public function init():void
{
trace("FlashPunk has started!");
}
}
} 26
We are not done yet!
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 27/56
Doubling the screen
• Right click on the
project name,
and choose
“Properties”
27
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 28/56
Enabling Console
• Console gives information on your entities
public function Main():void
{
super(320, 240);
FP.screen.scale = 2;
FP.console.enable();
}
28
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 29/56
Console Window
29
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 30/56
Let’s make a World
• Create a new class named “GameWorld”
30
Right click on “src” in Projectwindow, and choose “New
Class”
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 31/56
Creating a World
• Type in a class name (e.g. GameWorld) and
choose net.flashpunk.World as a base class
31
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 32/56
So what’s the world is about?
• A “world” object can contain entities like
– Players
– Enemies
– Obstacles
– etc
• Each entity will be created by the world
32
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 33/56
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 34/56
Linking the main to the WorldPackage {
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 35/56
Example: A Block Moving Around
35
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 36/56
Let’s 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 {
x = Input.mouseX;
y = Input.mouseY;
super.update();
}
}
}36
A white block
The block location is set to the
mouse pointer location
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 37/56
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 38/56
One More Example
• We want Joe Pa back! Let him move around
the world!
38
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 39/56
Entities
• Joe is a Player entity. And let’s assume that
football balls are his enemies (Enemy entities).
39
Player Entity Enemy Entity
http://www.jfasites.com/Anderson/Anderson
_Images/Joe_Paterno_Caricature.jpg
http://cdn.bleacherreport.net
/images/team_logos/50x50/fa
ntasy_football.png
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 40/56
Collision Detection
• If Joe moves over a ball, he will get upset
40
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 41/56
Icon Files
• Create a folder named “graphics” under the
project location
• Put those two icon files in it
41
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 42/56
Player Entitypackage
{
(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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 43/56
Inserting an image file name
43
• Right-click on an
image file name in
the project window
• Choose “Insert Into
Document”
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 44/56
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)) image.color = 0xff0000;
else image.color = 0xfffff;
super.update();
}
44
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 45/56
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 (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
If you want to check out-of-boundary conditions
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 46/56
Enemypackage {
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 47/56
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 48/56
Joe!!
48
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 49/56
Viewing the “HitBox”
• Press
Tilde
[`/~] key
49
CLICK!
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 50/56
Joe’s HitBox
50
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 51/56
Adding three enemy entitiespackage {
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
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 52/56
HitBoxes
52
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 53/56
Joe Collided with an enemy!
53
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 54/56
A good place to learn more…
• http://flashpunk.net/tutorials/
54
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 55/56
Video Tutorials
55
5/14/2018 Flash Punk Tutorial - slidepdf.com
http://slidepdf.com/reader/full/flash-punk-tutorial 56/56
Any Questions?
On Wednesday, we’ll play with
GameMaker Lite
http://www.yoyogames.com/gamemaker/