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