Time for action – creating a simple interactive menu

Follow the given steps:

  1. First of all, we need a simple graphic for the buttons. As you already know my programming art style, I have created three very simple images in Adobe Photoshop.
    Time for action – creating a simple interactive menu
  2. Now, start Flash and create a new ActionScript 2.0 project. Import the three PNGs for the buttons. Create a new movieclip in the library (right-click in Library) and call it something like MyButton.
  3. Open the MyButton movieclip and create three keyframes. Place button_out.png into the first keyframe, button_over.png into the second keyframe, and button_down.png into the third keyframe. Now click on each keyframe and type in the label names—out for the first, over for the second, and down for the third keyframe (you can define the label name in the PROPERTIES panel if you click on a keyframe).
  4. Create a new layer, and add a dynamic textbox to it. Give it the instance name btnText. Make sure you embed the font (Lowercase and Uppercase). It is also important to disable Selectable on the textfield.
    Time for action – creating a simple interactive menu
  5. Create a third layer for the script, and write a very simple script to handle mouse events:
    stop();
onRollOver = function()
{
  gotoAndStop("over");
}
onRollOut = function()
{
  gotoAndStop("out");
}
onPress = function()
{
  gotoAndStop("down");
  fscommand("onPressed", btnText.text); 
}
onRelease = function()
{
  gotoAndStop("over");
}
    Time for action – creating a simple interactive menu

    Note

    There is fscommand in the onPress() function. With fscommand, we can send events to CryENGINE. The first parameter is a string to identify the event. The second parameter is optional, and can be used as a parameter to pass some additional information to the engine. In this case, we simply use the text that is applied to the textbox as a parameter. This parameter will be used later to identify the button that was pressed.

    You can also pass an array as an argument to fscommand if you need to pass more than one parameter:

      var args = new Array();
  args.push("arg1");
  args.push("arg2");
  fscommand("yourEvent", args);
  6. Now, go to the main scene and place the button movieclip twice. The instance names for the buttons should be btn1 and btn2.
  7. Create a new script layer and add the following two lines to set up your buttons:
    btn1.btnText.text = "open";
btn2.btnText.text = "close";
  8. Save the SimpleMenu.fla file and publish the SimpleMenu.swf file.
  9. Last but not least, we need to define a new UIElement for our simple menu. Create a new XML file—GameLibsUIUIElementSimpleMenu.xml.
  10. The setup is similar to the one from the NewHUD UIElement, but we will use a top/left alignment. We will also enable mouse events and a cursor on this element. This means that if the UIElement is visible, the engine cursor is visible, and mouse events are passed to this Flash asset.
  11. We will also add a new <events> tag to it to define the button events. The event is mapped to fscommand and can optionally have arguments. Because we pass the button name as an argument in fscommand, we add one <param> tag to it.
    <UIElements name="Menus">
 <UIElement name="SimpleMenu" render_lockless="1" mouseevents="1" cursor="1">
  <GFx file="SimpleMenu.swf" layer="1">
   <Constraints>
    <Align mode="dynamic" valign="top" halign="left" scale="0" max="0" />
   </Constraints>
  </GFx>
  <events>
   <event name="OnButton" fscommand="onPressed" >
    <param name="Name" type="string" />
   </event>
  </events>
 </UIElement>
</UIElements>
  12. Now, save the XML file and start Sandbox. In this example, I will use the SimpleMenu UIElement to open and close a door. You will find some doors in the Forest demo level. Just select one door, and create a new Flow Graph for it (right-click on the entity, and select Create Flow Graph).
  13. Because we defined our events in the XML file, you will find a Flownode for this event under UI:Events:SimpleMenu. We will use this event with the entity:Door node to open/close it (you can add the entity:Door node by right-clicking on the Flow Graph and choosing Add Graph Default Entity).
  14. We will also use an Input:Key node to display the SimpleMenu UIElement on press, and hide it again on release. We will also use the Input:ActionFilter node to enable the only_ui filter so long as the Tab key is pressed. This filter will lock all the input in the game and only pass the input to the UI.
    Time for action – creating a simple interactive menu

    Note

    All event nodes have a Port input. If this is set to <TriggerAlways>, it will always trigger if the event is fired. In our case, we select the Name port. This means that this node is only triggered if the Name output of this node is equal to the string that is defined in the Idx input. With this setup, we can use this node to trigger only if an event is fired that has a specific value (Idx) on the chosen output (Port). In our case, we check the button text to see if the open or close button was pressed.

    Time for action – creating a simple interactive menu
  15. If you now jump into the game, you can press Tab, and the menu should appear. Click on the buttons to see if they work as expected.

What just happened?

With fscommand and the <event> tag, it is really easy to handle Flash events in CryENGINE. You should now be able to write your own menus. Mouse events can be easily enabled for your UIElement via XML.

There is a lot more you can define in the XML files. Just have a look at CryDev.net. The full documentation about the Flash UI system can be found at http://freesdk.crydev.net/display/SDKDOC4/Flash+UI+System.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.142.255.140