Skip to content

Instantly share code, notes, and snippets.

@zachwlewis
Created December 31, 2011 09:45
Show Gist options
  • Save zachwlewis/1543547 to your computer and use it in GitHub Desktop.
Save zachwlewis/1543547 to your computer and use it in GitHub Desktop.
A FlashPunk World that shows how to make a simple button as well as Text manipulation and some fun tricks.
package
{
import flash.display.*;
import flash.geom.*;
import net.flashpunk.*;
import net.flashpunk.graphics.*;
import net.flashpunk.utils.*;
/**
* A FlashPunk World that shows how to make a simple button as well as Text manipulation and some fun tricks.
* @author Zachary Lewis (zachary.lewis@thegamestudio.net)
*/
public class ButtonWorld extends World
{
private var buttonImage:Image;
private var buttonText:Text;
private var fullButton:Graphiclist;
private var button:Entity;
private var textArea:Text;
private const hoverColor:uint = 0xffff3366;
private const clickColor:uint = 0xffc4274e;
private var clickStarted:Boolean = false;
private var clicks:uint = 0;
public function ButtonWorld()
{
// Create a simple button image with a BitmapData
var bmd:BitmapData = new BitmapData(128, 32);
// Give it a nice border. Cute!
bmd.fillRect(new Rectangle(2, 2, 124, 28), 0xffdddddd);
bmd.fillRect(new Rectangle(4, 4, 120, 24), 0xffffffff);
// Create the Image for the button's background.
buttonImage = new Image(bmd);
// Create our button text.
buttonText = new Text("Press me!", 0, 6, { align:"center", color:0xff444444, width:buttonImage.width } );
// Compile our completed button graphic by adding images to our Graphiclist, bottom-up.
fullButton = new Graphiclist(buttonImage, buttonText);
// Create a text area.
textArea = new Text("The button has not been pressed.", 0, 0, { align:"center" } );
super();
}
override public function begin():void
{
// Save our button image as an entity to allow us to do collision checking against it.
button = addGraphic(fullButton, 0, FP.width / 2 - buttonImage.width / 2, FP.height / 2 - 64);
// Set a Hitbox for our button to be our hit zone.
button.setHitbox(buttonImage.width, buttonImage.height, 0, 0);
// Add our text to the screen.
addGraphic(textArea, 0, FP.width / 2 - textArea.width / 2, FP.height / 2);
super.begin();
}
override public function update():void
{
// Check to see if the mouse is touching our button.
if (button.collidePoint(button.x, button.y, Input.mouseX, Input.mouseY))
{
// The mouse is hitting the button. Show hover color.
if (!clickStarted)
{
buttonImage.color = hoverColor;
buttonText.color = 0xff360208;
}
else
{
buttonImage.color = clickColor;
buttonText.color = 0xff350a15;
}
// Time for our input handling.
// We will use a two-part click system:
// clickStarted == false Mouse not started the click.
// clickStarted == true Mouse has been pressed on the button.
// This will let us check for a click and release on the button, even if the user leaves the button area.
if (Input.mousePressed)
{
// Start our click.
clickStarted = true;
}
else if (Input.mouseReleased && clickStarted)
{
// We have successfully clicked!
clickStarted = false;
onButtonClick();
}
}
else
{
// The mouse is not hovering over our button. Stop coloring it.
buttonImage.color = 0xffffffff;
buttonText.color = 0xff444444;
if (Input.mouseReleased)
{
// The mouse was released outside our button.
// The click has not been started.
clickStarted = false;
}
}
super.update();
}
/**
* Our actual button functionality. This function just increments a click counter and updates our text field.
*/
private function onButtonClick():void
{
// Increment our click counter.
clicks++;
// Update our text area (and do some silly inline if shit to make me not sound stupid).
var s:String = (clicks != 1) ? "s" : "";
textArea.text = "The button has been clicked " + clicks + " time" + s + ".";
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment