Search Unity

uniSWF MMO GUI Tutorial from Flaming Pumpkin – Part 1

uniSWF is an easy to use AdobeFlash®-to-Unity UI solution. Simply publish assets from Adobe Flash and they seamlessly appear in the Unity editor. It utilizes a familiar and powerful API modeled on the Flash runtime which makes creating anything from menus to full featured games, easy. Created by the developers at Flaming Pumpkin.

In this tutorial we will demonstrate how to build a complex MMO style game interface using Flash assets and a few lines of code. We have provided a custom GUI framework (source included) which will make developing interactive GUI using flash even easier.

This is a two part tutorial. In part 1 we will setup the project and go through the basics of getting simple GUI Widgets interacting in Unity with minimal code.

To see this demo in action click here to view it on the uniSWF demos page.

First Steps:

Start by creating a new Unity project and add the tutorial 08 assets from the uniSWF 1.0.1 package. Add a MovieClipOverlayCamera to the MainCamera which is found in the components menu and change the projection to orthographic, this will render the main GUI over the 3D scene.

Create a new Javascript behavior and call it ‘MyGUI’. Attach this behavior to your main camera. Add the following code to setup the default Skin which will map any MovieClip instances with a prefix to a GUI Widget. This is explained in more detail below:

Now we’re going to add the PlayerPanel to the scene, which renders the players’ state, such as health and armour. The PlayerPanel has two progress bars which need to slide from left to right to reflect the state of the player.

To create a progress bar we simply create a rectangle that represents the bar and give it a name called ‘bar'”. Now add a rectangle to define the area of the progress bar mask and call this ‘clip’.

Inside PlayerPanel in the mmo_ui.fla file there are two progress bars, one called ‘progress_health’ and one called ‘progress_armour’. Notice that every component has a prefix. Name prefixes are used to map movieclip instances in flash to Widget classes such as the Button, Scrollbar and Panel class. These are automatically initiated by the framework.

All the assets for this tutorial have been prepared for you and their property names have been allocated.

Now add the PlayerPanel to the screen. At the end of the MyGUI Start() function add the following code to create the PlayerPanel including the health and armour progress bars. This will set the progress bars to 0 by default.

To illustrate progress bars working, we will add a click event so when the bar is clicked it will decrease by 10%. Add the following code to the end of Start() function after creating the PlayerPanel above:

Notice the getContainer(). This returns the underlying DisplayObject which the framework manages. This can be customised to suit a required style e.g you could add a function to the base Widget class called getTextField( name:String ) for convenience.

Hit the play button in Unity. Now the player name should change and the progress bars should be set as the following. If you click anywhere on the bar it should activate the test code above and decrease the health bar by 10% each click.

Adding the Hotbar:

Next we are going to add the HotBar panel. This holds a list of easily accessible items the player has at their disposal. Items can be rearranged by dragging and dropping them from one slot to another. This also links in the BackpackPanel and PlayerOptions panel which will be covered in part 2.

Create a new class called HotbarPanel and extend the SlotPanel. Set the default constructor to pass the flash asset URL to initialize it. As below:

1

2

3

4

5

6

7

8

9

10

11

publicclassHotbarPanelextendsSlotPanel{

publicfunctionHotbarPanel(uri:String){

name="HotbarPanel";

super(uri);

}

protectedoverride functionOnInit(){

}

}

Now add the following to create the HotbarPanel when the game initialises on the Start() of the MyGUI class

If you test the game, you should have the player health bar at the top-left and the hotbar centered at the bottom of the screen.

Hit play and you should see the following items appear with their relevant quantities:

Now add the PlayerPanel to the screen. At the end of the MyGUI Start() function add the following code to create the PlayerPanel including the health and armour progress bars. This will set the progress bars to 0 by default.

1

2

3

4

5

6

7

8

setItemIcon(1,MyGUI.resourceRoot+

"swf/mmo_ui.swf:ItemIcon:shield","2");

setItemIcon(3,MyGUI.resourceRoot+

"swf/mmo_ui.swf:ItemIcon:grenade","5");

setItemIcon(4,MyGUI.resourceRoot+

"swf/mmo_ui.swf:ItemIcon:grenadrpg","1");

setItemIcon(5,MyGUI.resourceRoot+

"swf/mmo_ui.swf:ItemIcon:mine","1");

Conclusion:

All the source code and source Flash .FLA files to this tutorial are available within the uniSWF package on the Unity Asset Store.

In part 2 we will show you how to set up the BackPack & PlayerOptions panels. This will show you how to enable dragging items between panels such as the Hotbar to the Backpack.