Skip to content

User Interface

Jump to bottom
WingEraser edited this page Feb 15, 2014 · 4 revisions

The classes for UI are just FlxSprites that have had their scrolling set to 0, so they don’t move even though the camera moves. You can use the FlxButton and FlxText to create a quick interface. If you want other components, you can take a look in the org.flixel.ui folder.

UI Diagram

##Build your own UI component Creating your own UI component is straight forward. Your class must extend FlxSprite to able to render the graphic onscreen and you need set the scrollfactor to 0.

Player Icon example

FlxSprite playerIcon = new FlxSprite(4,4, "icon.png");
playerIcon.scrollFactor.x = playerIcon.scrollFactor.y = 0;
add(playerIcon);

Custom button

public class MenuButton extends FlxButton
{
	public MenuButton(float x, float y, String text, IFlxButton onClick)
	{
		super(x, y, text, onClick);
		loadGraphic("button.png", true, false, 100, 100);
	}
}

##Build interface with FlxUI components Flixel comes with UI components that can be used for Adventure and RPG games and of course menu screens. In this guide you’ll learn how to create and skin a UI Component.

###UI Component The checkbox is used as example. To apply a skin, first take a look at this sprite.

FlxUI Checkbox

The number indicates the frame. In total there are 10 types of states. You don’t have to use them all. You can disable any state by setting it to -1. The ACTIVE_ are all off by default.

Applying the frames of the checkbox looks like this.

FlxUISkin skin = new FlxUISkin();
skin.DISABLED = 3;
skin.HIGHLIGHT_DISABLED = 4;
skin.ACTIVE_NORMAL = 5;
skin.ACTIVE_HIGHTLIGHT = 6;
skin.ACTIVE_PRESSED = 7;
skin.ACTIVE_DISABLED = 8;
skin.ACTIVE_HIGHTLIGHT_DISABLED = 9;

Set the image and the label and you’re done. You can then reuse this skin for all checkboxes you’re going to create next.

skin.setImage(ImgCheckBox, 32, 32);
skin.setFormat(FntRobotoRegular, 18);

###Ninepatch All components can be skinned as a nine patch. With nine patch you can stretch the components without making it look weird. Instead of setting the image, you’ll need to apply the pad like this:

skin.setNinePatch(NinePatch.TOP_LEFT, ImgTopLeft, 8, 8);
skin.setNinePatch(NinePatch.TOP_CENTER, ImgTopCenter, 1, 8);
skin.setNinePatch(NinePatch.TOP_RIGHT, ImgTopRight, 8, 8);
skin.setNinePatch(NinePatch.MIDDLE_LEFT, ImgMiddleLeft, 8, 1);
skin.setNinePatch(NinePatch.MIDDLE_CENTER, ImgMiddleCenter, 1, 1);
skin.setNinePatch(NinePatch.MIDDLE_RIGHT, ImgMiddleRight, 8, 1);
skin.setNinePatch(NinePatch.BOTTOM_LEFT, ImgBottomLeft, 8, 8);
skin.setNinePatch(NinePatch.BOTTOM_CENTER, ImgBottomCenter, 1, 8);
skin.setNinePatch(NinePatch.BOTTOM_RIGHT, ImgBottomRight, 8, 8);

In this case all nine parts are used. It’s not required tough, as long the middle part is present. The results of FlxNinePatchButton and FlxInputText:

FlxNinePatchButton and FlxInputText

Examples:

You can create a subclass by extending FlxUIComponent or FlxUITouchable.

FlxUI Diagram

Clone this wiki locally