Scribd Logo
Upload

Welcome to Scribd!

  • 456 views

    Flash Punk Tutorial

    Uploaded by

    김현우
    This document provides an introduction and tutorial for setting up and using FlashPunk, an open-source 2D game engine for Flash. It explains what FlashPunk is, why it is useful for prototyping games, and how to download and install the necessary software. It then walks through setting up a FlashDevelop project and configuring the Flex SDK and debug player. Several simple examples are provided to demonstrate creating a game world, adding entities like the player and enemies, and detecting collisions between objects. Key aspects like importing graphics, defining entity behaviors, and viewing hitboxes are also covered.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd

    Flash Punk Tutorial

    Uploaded by

    김현우
    456 views56 pages
    This document provides an introduction and tutorial for setting up and using FlashPunk, an open-source 2D game engine for Flash. It explains what FlashPunk is, why it is useful for prototyping games, and how to download and install the necessary software. It then walks through setting up a FlashDevelop project and configuring the Flex SDK and debug player. Several simple examples are provided to demonstrate creating a game world, adding entities like the player and enemies, and detecting collisions between objects. Key aspects like importing graphics, defining entity behaviors, and viewing hitboxes are also covered.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an introduction and tutorial for setting up and using FlashPunk, an open-source 2D game engine for Flash. It explains what FlashPunk is, why it is useful for prototyping games, and how to download and install the necessary software. It then walks through setting up a FlashDevelop project and configuring the Flex SDK and debug player. Several simple examples are provided to demonstrate creating a game world, adding entities like the player and enemies, and detecting collisions between objects. Key aspects like importing graphics, defining entity behaviors, and viewing hitboxes are also covered.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    456 views56 pages

    Flash Punk Tutorial

    Uploaded by

    김현우
    This document provides an introduction and tutorial for setting up and using FlashPunk, an open-source 2D game engine for Flash. It explains what FlashPunk is, why it is useful for prototyping games, and how to download and install the necessary software. It then walks through setting up a FlashDevelop project and configuring the Flex SDK and debug player. Several simple examples are provided to demonstrate creating a game world, adding entities like the player and enemies, and detecting collisions between objects. Key aspects like importing graphics, defining entity behaviors, and viewing hitboxes are also covered.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    You are on page 1of 56

    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

    You might also like