FlashPunk UI Components: Advanced Graphics, Extra Skins, and Polish

This entry is part 2 of 2 in the series FlashPunk UI Components

In this tutorial we’ll finish what we started in the first part of this UI with FlashPunk mini-series. We’ll learn how to customize the graphics of our components, and make a few adjustments to make our UI perfect.

---

Final Result Preview

Let’s take a look at the final result we will be working towards:

Make sure you click everything to see how it responds!

---

Section 1: How to Draw

Step 1.1: Open Your Existing Project

If you don’t already have it, be sure to download the source code from part one. Open the project file in FlashDevelop (info here) and get ready to upgrade your UI!

---

Step 1.2: Drawing Stuff

The next step we need to do to be able to extensively customize the graphic side of our UI is learn how to draw the graphic stuff directly with code. At the momment we needed an image for each state of our UI (button normal, button hover, checkbox normal unselected, checkbox normal selected, etc.), so we needed a large ammount of Images. Now, let’s say you want a different color for each button, or even a different shape for each one, and selected randomly… we can’t afford to have millions of images: too work to make them and they consume too much memory.
But before starting to draw the components itself, we must first learn how to draw stuff using code in FlashPunk.

---

Step 1.3: Preparing a Drawing Test World

First of all, we need a new World to test the Drawing stuff. Create a new World class, called DrawWorld, and tell Main to go there when starting the game.
DrawWorld.as:

package
{
 import net.flashpunk.World;

 public class DrawWorld extends World
 {
  public function DrawWorld()
  {

  }
 }
}

---

Step 1.4: Using the FlashPunk Drawing Utils

The FlashPunk Engine has a few utils which lets us Draw things to the screen or to a BitmapData.
These functions are: line, linePlus, rect, rectPlus, circle, circlePlus and curve (the other ones are used to draw other kinds of stuff). The ‘plus’ versions come with more options and give better results (using antialiasing) but are more CPU intensive.
Using them is easy; override the render method of your World or an Entity and call those functions, like this overriden render function for our DrawWorld, which draws some shapes:

override public function render():void
  {
   super.render();

   Draw.line(10, 10, 100, 100, 0x00FF00);
   Draw.rectPlus(120, 120, 200, 200, 0x9999FF, 1, true, 2, 10);
   Draw.circle(100, 100, 50, 0xFF0000);
   Draw.curve(100, 100, 140, 90, 122, 122, 0x00FFFF, 1, 3);
  }

Read more: FlashPunk UI Components: Advanced Graphics, Extra Skins, and Polish

How to Make UI Components for FlashPunk Games

It’s not easy to create the UI side of your game with FlashPunk, as it doesn’t include any UI components like buttons or text fields by default. This isn’t a restriction, though; it just means you’re completely free to create the UI exactly as you like. But you need to know how to do it first! This tutorial will teach you how to build some custom UI components, and show you the different ways you can customize them to exactly fit the style of your game.

---

Final Result Preview

Let’s take a look at the final result we will be working towards:

---

Step 1: Introduction

Many FlashPunk users tend to have problems with the UI side of their games. There’s no ‘easy’ way of making buttons and other interactible-elements like text fields or checkboxes, for example, in FlashPunk. No Button class.
That may seem of a restriction, yes, and many newcomers find it a little bit confusing at first… but there’s a reason behind that. Games, each one of them, tend to have a custom user interface unique to themselves, which design is related to the mechanics or theme of the game itself. You won’t see any good game (generally speaking) that has the default window buttons for its controls!
We could argue that, in this case, there could be some classes providen with the bare-bones of the functionality, the minimum required for some buttons to work, and leave the graphic side to the user… yes, that is true… but the generalization we would have to use in those classes would be either too big and confusing or too specific and not costumizable enough. (believe me, I was in charge of the semi-failed semi-working Punk.UI project.) We will learn how to code our own components instead!
So what this tutorial is going to show you is how to build your own UI elements for your game in FlashPunk, give them behaviour, and show some tricks to make their graphic part with the most used techniques… but remember that each of your games will need a different UI graphically-wise!
As the tutorial is really lengthy, it’s been divided into multiple parts. This first part will teach you how to build each component, without the eye-candy and costumization. We will introduce these later.
To code the example SWF with our UI, we are going to use FlashPunk, as this is a FlashPunk tutorial, and FlashDevelop for the IDE. If you feel more comfortable with another IDE, like FlashBuilder, you are free to use that, just adapt the specific parts of this tutorial.
Previous knowledge on FlashPunk is needed to follow this tutorial. This is not a general FlashPunk tutorial, this is a UI tutorial using FlashPunk. If you don’t know FlashPunk, you can take a look at the Introductory FlashPunk tutorials on Activetuts+ and also check out the official FlashPunk tutorials.
Read more: How to Make UI Components for FlashPunk Games

Fast Game Prototyping with Flashpunk and Minimal Comps

The proper way to build a game in Actionscript (or any other language) is to create a quick prototype and test the gameplay. Then, if the gameplay is good, you refine it. If it isn’t working, you go back to the drawing board and create another prototype. Large game companies often scrap ideas that aren’t working when the prototype is tested.

In reality, it oftens takes so much time to get the basic mechanics working that you would never consider scrapping it, even if it isn’t really a good game. But, it doesn’t have to be that way. Two issues that slow down game development are:

#1: Dealing with basic input/output, collision detection and all of the “simple” things that you need to make a game function. Coding these elements takes hours and has very little to do with making your game awesome.

#2: Fine tuning your game. There are usually several inter-related variables that need to be adjusted. The (slow) way to do this is to make an educated guess, set the values, publish and test. Then, adjust the variable values and try again.

The good news is that there are solutions to both of these problems. The solution to problem #1 is Flashpunk. It’s an open-source AS3 framework for building pixel-based 2D games. It handles a lot of the basic animation, collision detection, keyboard input and other issues so that you don’t have to do it. It’s a pure Actionscript-based library that compiles in FlashDevelop, which is free and open source, so you don’t even need the Flash IDE. I whipped up a sample “game” in Flashpunk below. This only took me a few hours, including the learning curve.

“But, I’m making an “immersive 3D RPG for iPhone” you say? So what? You can still use Flashpunk to do some quick gameplay demos and make sure that your basic gameplay is actually fun. Once you get the hang of Flashpunk, you can whip up a simple game demo in less than a day. It may save you a lot of time down the road. Go here to get the source code and then work through the tutorials. You can be making games by the end of the day.

Now, if you tried my game demo above, you are probably saying “this sucks! I can’t even jump up to the platforms!” That’s where my second time saver comes in. Minimal Comps is a set of basic Actionscript3 components that can help you with your prototyping. In the game above, I’ve added a game tuning panel made with Minimal Comps. To see it, right-click on the stage and choose “Show Testing Console.” This will open the panel with several options. The first button toggles the collision hitbox visibility. If you make the hitboxes visible, you will notice a bug that I left in the game when you move the character to the left. By changing the values in the textfields, you can adjust the game gravity and jump velocity until the gameplay works and feels right.  Minimal comps makes it easy to set up this testing panel for tuning your game in real time [...]

Read more: Fast Game Prototyping with Flashpunk and Minimal Comps

An Introduction to FlashPunk: The Basics

Learn the basics of how FlashPunk works – an amazing library to save you time and help you create the perfect game!

---

Final Result Preview

Let’s take a look at the final result we will be working towards:

Use the arrow keys to move your character (the blue guy). The red/brown guy is an NPC; the shaded red area is a danger zone, and the green box is a button. You’ll learn how to create all this in this tutorial.

---

Step 1: What Is FlashPunk?

FlashPunk is an ActionScript 3 library created for the development of Flash games. Basically, it does all the hard work for you and lets you focus entirely on developing your game, rather than on the engine behind it. The best part about it is that you don’t need Flash Pro to work with it: you can do everything with a free code editor like FlashDevelop. Not to mention it’s way faster when it comes to drawing things on screen, since it uses blitting!

This tutorial will go through all the basics of FlashPunk. After following it, you’ll be ready to make a simple game with this amazing library!

---

Step 2: Initializing the Engine

Begin by downloading the latest version of FlashPunk from the official site (this tutorial uses the version from August 30, 2011). Put the “net” folder, with all its contents, in your “src” folder.

FlashPunk has a class called Engine. This class is what starts everything in the library. Think of it as a Main class, but with special code to power up all the classes in FlashPunk. In order to use the Engine class, we will modify the Main class a little bit.

package
{
 import net.flashpunk.Engine;

 [Frame(factoryClass="Preloader")]
 public class Main extends Engine
 {

  public function Main():void
  {

  }

 }

}

Now, our class extends Engine. In Main‘s constructor, we need to make a call to the Engine constructor: this is what sets the important information about the game: width, height, framerate and whether the engine should run at a fixed framerate or not.

public function Main():void
{
 super(550, 400, 30, false);
}

There is a function that can (and must be) overridden from the Engine class: the init() function. It will run only once, and will initialize everything to get the game working.

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

I’m pretty sure everyone wants to put something on the screen and see this engine working! Because of that, the next few steps will cover the very basics of the elements of FlashPunk, adding depth as the tutorial goes on.

---

Step 3: Worlds and Entities

In FlashPunk, there are elements called Worlds and Entities. These are the main elements of the library, and you’ll work with them from the beginning to the very end of your game.

Worlds are pretty much like what is commonly known as a “screen”. Everything in your game will happen in a world: the main menu is a world that will give you access to the actual game world, where you will fight some enemies and die, which will lead you to the game over world, with your scores and statistics about how well you did. More about worlds will be explained later.

Entities are exactly what they seem to be; they live in a world and do something in it: a button is an entity; your character is an entity; enemies and bullets are entities. They are the things that give life to the game.

Given that, we will create the game world (there’s time to make the main menu world later, let’s jump to some action!) by extending FlashPunk’s World class:

package
{
 import net.flashpunk.World;

 public class GameWorld extends World
 {

  public function GameWorld()
  {

  }

 }

}

Now that you have created a world, you need to tell FlashPunk that you want this world to be the active one. Let’s do it in Main.as:

private var _gameWorld:GameWorld;

public function Main():void
{
 super(550, 400, 30, false);

 _gameWorld = new GameWorld();
}

override public function init():void
{
 trace("The game has started!");

 FP.world = _gameWorld;
}

And don’t forget to import net.flashpunk.FP!

---

Step 4: Adding an Entity, and Giving It an Image

Now that we have our world, we can make an entity by extending the Entity class and adding it to our game world [...]

Read more: An Introduction to FlashPunk: The Basics

Getting Warmer: Smart Aiming With Heat-Seeking Missiles

In the previous tutorial we had a homing missile chasing after a single target. This tutorial will show you how to convert your homing missiles into heat-seeking missiles for multiple targets.

If you haven’t read the first Homing Missile tutorial, you may download this .zip file, which contains the source code we’ll be starting with on this tutorial.

---

Final Result Preview

Let’s take a look at the final result we will be working towards:

---

Step 1: Modify the Cannon Graphic

The only Movie Clip in the Library we’ll need to change is the Cannon, since we’ll make it aim at the closest target before shooting. Remember that 0° of rotation means pointing at the right, so make the graphic accordingly.

---

Step 2: Declare Distance Variables for the Cannon

I’m going to reuse the targetX and targetY variables to calculate the distance of the cannon from the target, so I’ll declare them at the beginning of the class instead of inside the playGame function, as well as a new variable to store the calculated distance:

private var missile:Missile = new Missile();
private var speed:int = 15;
private var cannon:Cannon = new Cannon();
private var missileOut:Boolean = false;
private var ease:int = 10;
private var target:Target = new Target();
private var floor:int = 385;
private var gravity:Number = 0.5;
private var targetVY:Number = 0;//Current vertical velocity of the target
private var distance:int;
private var targetX:int;
private var targetY:int;

Now the targetX and targetY variables will be already declared for the playGame function:

private function playGame(event:Event):void
{
    if (missileOut)
    {
        if (missile.hitTestObject(target))
        {
            var explosion:Explosion = new Explosion();
            addChild(explosion);
            explosion.x = missile.x;
            explosion.y = missile.y;
            removeChild(missile);
            missileOut = false;
        }
        else
        {
            targetX = target.x - missile.x;
            targetY = target.y - missile.y;
            var rotation:int = Math.atan2(targetY, targetX) * 180 / Math.PI;
            if (Math.abs(rotation - missile.rotation) > 180)
            {
                if (rotation > 0 && missile.rotation < 0)
                    missile.rotation -= (360 - rotation + missile.rotation) / ease;
                else if (missile.rotation > 0 && rotation < 0)
                    missile.rotation += (360 - rotation + missile.rotation) / ease;
            }
            else if (rotation < missile.rotation)
                missile.rotation -= Math.abs(missile.rotation - rotation) / ease;
            else
                missile.rotation += Math.abs(rotation - missile.rotation) / ease;

            var vx:Number = speed * (90 - Math.abs(missile.rotation)) / 90;
            var vy:Number;
            if (missile.rotation < 0)
                vy = -speed + Math.abs(vx);
            else
                vy = speed - Math.abs(vx);

            missile.x += vx;
            missile.y += vy;
        }
    }
	targetVY += gravity;
    target.y += targetVY;
    if (target.y > floor)
    {
        target.y = floor;
        targetVY = -18;
    }
}

---

Step 3: Make the Cannon Point Towards the Target

[...]

Getting Warmer: Smart Aiming With Heat-Seeking Missiles

FlashPunk + Flixel = Flxpunk

Do you want to use the Flixel movement code at the FlashPunk project?

net.flxpunk package:

• FlxEntity – Extends Entity class with Flixel movement code (velocity, acceleration, path, etc.)
• FlxTween – Movement controller as a FlashPunk Tween extension
• FlxPathFinding – Path finding stuff. Used Grid for a collision map.
• FlxPath – This is a simple path data container.

...
// a collision grid
var grid:Grid = new Grid(720, 480, 24, 24);
grid.loadFromString(new LEVEL());
...
var pf:FlxPathFinding = new FlxPathFinding(grid);
var path:FlxPath= pf.findPath(unit.flx.getMidpoint(), new Point(mouseX, mouseY), true);
unit.flx.followPath(path, 60, FlxPath.PATH_FORWARD);
...

Github wiki
Download source code with example  

Read more: FlashPunk + Flixel = Flxpunk