flash punk tutorial

56
 Getting Started with 2/12/2012 Hyun-Woo “Anthony” Kim College of Information Sciences & Technology The Pennsylvania State University Spring 2012 - IS T446 An Introduction to Building Computer/ Video Games 1

Post on 16-Jul-2015

360 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Flash Punk Tutorial

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

Page 2: Flash Punk Tutorial

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

Page 3: Flash Punk Tutorial

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

Page 4: Flash Punk Tutorial

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

Page 5: Flash Punk Tutorial

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

Page 6: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 6/56

 

FlashPunk Website

• http://flashpunk.net 

6

Page 7: Flash Punk Tutorial

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!

 

Page 8: Flash Punk Tutorial

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 

  

Page 9: Flash Punk Tutorial

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!

 

Page 10: Flash Punk Tutorial

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

  

Page 11: Flash Punk Tutorial

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!

 

Page 12: Flash Punk Tutorial

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

 

Page 13: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 13/56

Configuring FlashDevelop

13

CLICK!

 

Page 14: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 14/56

Setting Flex SDK Path

14

 

Page 15: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 15/56

Setting External Player Path

15

 

Page 16: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 16/56

Creating a New Project

16

 

Page 17: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 17/56

Creating “HelloIST446” project 

17

 

Page 18: Flash Punk Tutorial

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

 

Page 19: Flash Punk Tutorial

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! 

 

Page 20: Flash Punk Tutorial

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

 

Page 21: Flash Punk Tutorial

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

 

Page 22: Flash Punk Tutorial

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!

 

Page 23: Flash Punk Tutorial

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

}

}}

 

Page 24: Flash Punk Tutorial

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

 

Page 25: Flash Punk Tutorial

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

 

Page 26: Flash Punk Tutorial

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! 

 

Page 27: Flash Punk Tutorial

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

 

Page 28: Flash Punk Tutorial

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

 

Page 29: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 29/56

Console Window

29

 

Page 30: Flash Punk Tutorial

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” 

 

Page 31: Flash Punk Tutorial

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

 

Page 32: Flash Punk Tutorial

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

 

Page 33: Flash Punk Tutorial

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

 

Page 34: Flash Punk Tutorial

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

 

Page 35: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 35/56

Example: A Block Moving Around

35

 

Page 36: Flash Punk Tutorial

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

 

Page 37: Flash Punk Tutorial

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

 

Page 38: Flash Punk Tutorial

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

 

Page 40: Flash Punk Tutorial

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

 

Page 41: Flash Punk Tutorial

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

 

Page 42: Flash Punk Tutorial

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

 

Page 43: Flash Punk Tutorial

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” 

 

Page 44: Flash Punk Tutorial

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

 

Page 45: Flash Punk Tutorial

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

 

Page 46: Flash Punk Tutorial

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

 

Page 47: Flash Punk Tutorial

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

 

Page 48: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 48/56

Joe!!

48

  

Page 49: Flash Punk Tutorial

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!

 

Page 50: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 50/56

Joe’s HitBox

50

 

Page 51: Flash Punk Tutorial

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

 

Page 52: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 52/56

HitBoxes

52

 

Page 53: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 53/56

Joe Collided with an enemy!

53

 

Page 54: Flash Punk Tutorial

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

 

Page 55: Flash Punk Tutorial

5/14/2018 Flash Punk Tutorial - slidepdf.com

http://slidepdf.com/reader/full/flash-punk-tutorial 55/56

Video Tutorials

55

 

Page 56: Flash Punk Tutorial

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/