Creating UI elements

So, we created all the UI content needed for our game in Flash, exported it, and converted it to an optimized format for consumption by CRYENGINE. What's next? Well, we need to define UI elements. UI elements are CRYENGINE's representation of a Flash UI scene. CRYENGINE cannot directly consume Flash UI content and therefore needs an XML file that defines the entire UI as UI elements. So, in this section, we will be doing just that.

Let's get started:

  1. Create a UI element definition file in the CRYENGINE_CONTENT/Libs/UI/UIElements folder named GAS_UI.xml and open it.
  2. Define a UI element for each menu (the main menu and the end game menu):
    <!--Define A Group Of UI Elements Named Menus. This Allows Us To Specify Multiple UI Elements In One File And Group Them Together For Organization.-->
    <UIElements name="Menus">
    
      <!--Define A UI Element That Will Represent Our Main Menu Named "Main_Menu". This Will Be The Name That We Use To Retrieve The Main Menu In C++.-->
      <!--Specify That The UI Element Should Catch Mouse, Keyboard, And Controller Events And Should Show The Mouse Cursor-->
      <UIElement name="Main_Menu" mouseevents="1" keyevents="1" cursor="1" controller_input="1">
    
        <!--Specify The Optimized Exported Flash UI That This UI Element Will Represent/Use.-->
        <GFx file="GAS_Main_Menu.gfx" layer="0">
          <!--Specify Various Constraints/Options That This UI Element Should Have.-->
          <Constraints>
            <!--Specify That This UI Element Should Be FullScreen--> 
            <Align mode="fullscreen" />
          </Constraints>
        </GFx>
    
        <!--Specify All Of The Event That This UI Element Has. (These Are The "fscommands" That The Flash UI Calls).-->
        <events>
          <!--Give The Event A Name That CRYENGINE Will Use To Identify The Event In C++ Code.-->
          <!--Specify The "fscommand" That Backs This Event.-->
          <!--Specify The Description That Will Be Visible To The C++ Code And Flowgraph.-->
          <event name="Start_Game_Button_Clicked" fscommand="Start_Game_Button_Clicked" desc="Triggered When The 'Start Game' Button Is Clicked." />
          <event name="Quit_Game_Button_Clicked" fscommand="Quit_Game_Button_Clicked" desc="Triggered When The 'Quit Game' Button Is Clicked." />
        </events> 
    
      </UIElement>
    
      <!--Define A UI Element That Will Represent Our End Game Menu Named "End_Menu".  This Will Be The Name That We Use To Retrieve The End Game Menu In C++.-->
      <!--Specify That The UI Element Should Catch Mouse, Keyboard, And Controller Events And Should Show The Mouse Cursor-->
      <UIElement name="End_Menu" mouseevents="1" keyevents="1" cursor="1" controller_input="1">
    
        <!--Specify The Optimized Exported Flash UI That This UI Element Will Represent/Use.-->
        <GFx file="GAS_End_Menu.gfx" layer="0">
          <!--Specify Various Constraints/Options That This UI Element Should Have.-->
          <Constraints>
            <!--Specify That This UI Element Should Be FullScreen-->
            <Align mode="fullscreen" />
          </Constraints>
        </GFx>
    
        <!--Specify All Of The Functions That This UI Element Has. (These Are The Functions That The Flash UI Contains).-->
        <functions>
          <!--Specify The Name That CRYENGINE Will Use To Identify The Function In C++-->
          <!--Specify The Actual Function Name Inside The Flash UI-->
          <function name="SetEndGameText" funcname="SetEndGameText">
            <!--Specify The Function Arguments That This Method Has.-->
            <param name="Text" desc="The Text You Want The End Game Menu To Display" type="String" />
          </function>
        </functions>
        <!--Specify All Of The Event That This UI Element Has. (These Are The "fscommands" That The Flash UI Calls).-->
        <events>
          <!--Give The Event A Name That CRYENGINE Will Use To Identify The Event In C++ Code.-->
          <!--Specify The "fscommand" That Backs This Event.-->
          <!--Specify The Description That Will Be Visible To The C++ Code And Flowgraph.-->
          <event name="Main_Menu_Button_Clicked" fscommand="Main_Menu_Button_Clicked" desc="Triggered When The 'Main Menu' Button Is Clicked." />
          <event name="Quit_Button_Clicked" fscommand="Quit_Button_Clicked" desc="Triggered When The 'Quit' Button Is Clicked." />
        </events> 
    
      </UIElement>
    
    </UIElements>
  3. That's it, CRYENGINE will now automatically load our UI elements into the memory and make them available to C++.
..................Content has been hidden....................

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