Search Unity

uniSWF MMO GUI Tutorial from Flaming Pumpkin - Part 1

August 6, 2012 in Games | 6 min. read
Placeholder image Unity 2
Placeholder image Unity 2
Topics covered
Share

Is this article helpful for you?

Thank you for your feedback!

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:

import pumpkin.display;
import pumpkin.events;
import pumpkin.text;
import pumpkin.ui;

public class MyGUI extends MonoBehaviour
{
  static var resourceRoot:String = "uniSWF/Examples/Tutorial 08 - MMO GUI/";
  static var instance:MyGUI;

  var playerPanel:Panel;
  //var hotbarPanel:HotbarPanel;
  //var backpackPanel:BackpackPanel;
  //var playerOptionsPanel:PlayerOptionsPanel;
  //var chatPanel:ChatPanel;

  function Start ()
  {
    var stage:Stage = GetComponent.<movieclipoverlaycamerabehaviour>().stage;
    // Create global skin
    var skin:Skin = Skin.createDefault();

    // Register skin prefix mapping
    skin.registerNamePrefix( "progress_", typeof(ProgressBar) );
    skin.registerNamePrefix( "btn_", typeof(Button) );
    skin.registerNamePrefix( "scroll_", typeof(Scrollbar) );
    skin.registerNamePrefix( "slot_", typeof(DropSlot) );
    skin.registerNamePrefix( "panel_", typeof(Panel) );
  }
}

tutorialNow 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.

// Create player panel
playerPanel = new Panel( MyGUI.resourceRoot + "swf/mmo_ui.swf:PlayerPanel" );
playerPanel.x = 20;
playerPanel.y = 20;
stage.addChild( playerPanel.getContainer() );
setHealth( 100 );
setArmour( 50 );

Next we will create a set of functions to apply values to the health and armour as used in the above code. The progress bar accepts a value from 0 to 1. Scale the health bar range from of 0 to 100.

function setHealth( value:float ) {
  var progress_health:ProgressBar = playerPanel.getWidgetByName( "progress_health" ) as ProgressBar;
  progress_health.progress = value / 100.0f;
}
function setArmour( value:float ) {
  var progress_health:ProgressBar = playerPanel.getWidgetByName( "progress_armour" ) as ProgressBar;
  progress_health.progress = value / 100.0f;
}

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:

// TEST: Progress bar interaction test
playerPanel.getContainer().addEventListener( MouseEvent.CLICK, function (  e:CEvent ) {
  var progress_health:ProgressBar = playerPanel.getWidgetByName( "progress_health" ) as ProgressBar;
  progress_health.progress -= 0.1f;
} );
// Set Player name
var name_txt:TextField = playerPanel.getContainer().getChildByName.("name_txt");
name_txt.text = "Blain_P2";

tutorialNotice 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:

public class HotbarPanel extends SlotPanel {

  public function HotbarPanel( uri:String ) {
    name = "HotbarPanel";
    super( uri );
  }

  protected override function OnInit() {
  }

}

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

// Create hotbar panel
hotbarPanel = new HotbarPanel( MyGUI.resourceRoot + "swf/mmo_ui.swf:HotBarPanel" );
stage.addChild( hotbarPanel.getContainer() );
ScreenUtils.bottomCenter( stage, hotbarPanel.getContainer() );

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.

tutorial

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

tutorial

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.

 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.

For more information and demos on uniSWF visit uniswf.com.

Main uniSWF Site: uniswf.com

Demos: http://uniswf.com/home/demo

Documentation and tutorials: http://uniswf.com/home/documentation

Support: http://uniswf.com/home/support

August 6, 2012 in Games | 6 min. read

Is this article helpful for you?

Thank you for your feedback!

Topics covered