Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

In this tutorial, we will be covering the basics of UI design and how you can implement a crosshair into your game. Starting with the core basics, we will add a crosshair as an example of introducing static HUD elements. 

Prerequisites 

  • CRYENGINE 5.7 LTS
  • Adobe Animate (any version)
  • A plain text editor of your choice

You will also want to have already made a CRYENGINE project so as to generate the directory we will be navigating and saving our assets to. For this tutorial, we will be using the Third Person Shooter template.

Preparing a Crosshair

Even if your game doesn’t involve shooting, crosshairs are a common addition to indicate the player's exact center in first-person, giving them a slight sense of connection with the playable camera.

  1. To begin the process of adding a crosshair to our game, we first need to create one ourselves. Open Adobe Animate.

  2. When first opening Flash and creating a project, set the Platform Type to ActionScript 3.0 and the Frame Rate to 30.00:


  3. Like bitmap texture files, any UI element you plan on making for CRYENGINE should have a resolution that is an even number. In this case, we will start with 100 x 100 since our crosshair will be small, and resolution still gives us some room if we want to modify it later. While it may seem small, this is a vector based image and we can enlarge the crosshair if needed in CRYENGINE without loss of resolution or pixelation.

    Note
    • When making full-screen UI elements, such as a frame/border, binocular vision or a blood splatter, you should match your resolution values with what you feel will produce sufficient quality at the highest possible resolution on various hardware platforms
    • Creating the crosshair as a full-screen effect would be an unnecessary resource drain for such a small UI element.
    • Errors tend to occur when exporting resolutions in odd numbers, such as misalignment or anomalous errors.

    Once your desired resolution is set, click OK.

  4. Rename the default layer as Crosshair: 


  5. Use the Rectangle Tool and set it to the desired Fill Color. Stroke Color will give it an outline, so we will leave the that field empty for now.

    Changing the Alpha will dictate the opacity of your UI element in-game. In this case, we will set the crosshair Alpha to 70% for a slight transparency:

    Now let’s draw a crosshair on the Crosshair layer:

    Tip
    To ensure your crosshair is symmetrical, you can use View → Snapping → Snap to Grid or CTRL+Shift+’, as well as View → Grid → Show Grid or CTRL+’ to help maintain and guide accurate shape/line placement for a perfect crosshair.



  6. Now, we will save our file into a .swf format (Swiff format). Click File → Export → Export Movie and save it as crosshair.swf. To ease the GFx conversion process, save the .swf into CRYENGINE Projects\<your_project>\Assets\libs\ui\FlashAssets.If you don’t have the directory in your project, create it. 

    Anchor
    saveswf
    saveswf

    Info

    It is recommended to save your .fla project file into the FlashAssets folder, so you can adjust it later in Adobe Animate if you decide.



  7. With our crosshair exported into our new FlashAssets folder, we need to convert it to a Scaleform 4 based format optimized for CRYENGINE, a .gfx. In the past, this conversion was done with the GFx Exporter Toolthat comes with CRYENGINE, but with the update of Scaleform 4 and ActionScript 3.0, the conversion process now requires a new tool that comes with CRYENGINE, the Scaleform 4 Exporter Tool (GFxExport1.exe). You can find it in your CRYENGINE 5.7 LTS main directory at Tools\GFxExport\Scaleform4\GfxExport.exe.

    Note
    • While you can always open the tool in this destination every time you need to convert a .swf to a .gfx, it is recommended that you use the Create Shortcut option in the right click context menu, and put the GFxExport1.exe shortcut in the FlashAssets folder.
    • Since your .swf will export to FlashAssets folder, you won’t need to navigate to the Tools folder every time you go to convert it to a .gfx, as the shortcut will be conveniently available in the folder you export your assets to.


    Tip
    With a GFxExport1.exe shortcut made and in your FlashAssets folder, right click the shortcut and add -i DDS to the Target line. This will ensure that whenever you drag and drop onto this exporter, it will always export .dds files instead of raw .tif or .bmp. In gaming, .dds are known to be faster and more calibrated for real-time rendering:


  8. In the FlashAssets folder, drag your crosshair.swf onto the GFxExport1.exe – Shortcut, and it will automatically convert and deposit a crosshair.gfx into your FlashAssets folder.


    Place this new .gfx into CRYENGINE Projects\Your Project\Assets\libs\uiand your \uifolder will look like the following image:


  9. With our crosshair.gfx file placed in our\ui folder, we now need to tell CRYENGINE to look there when we call upon it in the Engine. Create a blank text document, and name it crosshair. These are the lines required in this document that will provide information for CRYENGINE as to give it a name in Flow Graph, and load our .gfx.

    Code Block
    languagexml
    <UIElements name="HUD">    					
       <UIElement name="crosshair">    			
    	<GFx file="crosshair.gfx" layer="0">    	
    	     <Constraints>    				
    		<Align mode="dynamic" valign="center" halign="center"/>
    			</Constraints>
    		</GFx>
    	</UIElement>
    </UIElements>


    Info
    Once in the \ui\UIElements folder, it will generate a .bak (backup) version. CRYENGINE does this with most files and projects.


    Tip
    Check if everything is in the right place. Common mistakes within the .xml are not closing out lines completely, rogue letters or characters placed accidentally, or incorrectly spelling the .gfx file name. The GFX line is case sensitive, so don’t be afraid to copy & paste the filename! The UIElement(s) lines are not case sensitive since they are only used for element ID naming in Flow Graph and C++, at least in the scope of this tutorial.



  10. Save the text document as crosshair.xml. 

  11. Before opening CRYENGINE, we need to tell the .cryproject that we want the Scaleform 4 plugin to be activated. In order to do so, right-click on the .cryproject file of the project you want to add the crosshair to and open it in a plain-text editor. Add this line under the "plugins" line:

    Code Block
    languagecpp
    { "guid": "", "type": "EType::Native", "path": "CryScaleform"},

Once the line is added and saved, all our files are squared up, and it’s time to open CRYENGINE and get our crosshair into our game.

Adding a Crosshair

  1. With the project open, drag an empty entity into the project. To be organized, we will name it Ent_HUD.

    Info

    Empty entities don’t have any physical properties, so if you don’t see an icon when you drag it into your project, turn on your helpers with CTRL+H or by clicking the icon in the top right of the Perspective Viewport.



  2. Right click on Ent_HUD and select Flow Graphs → Create new Flow GraphIn the Flow Graph window, right-click and add a Game:Startnode. Now, create a UI:Display:Display node, and attach the Game:Start output to the Show input of UI:Display:Display. This will tell the game to display our specific UI element at the start of every game.

  3. In the properties window ofUI:Display:Display,if you double click Element, the‘..’ will appear. Click the ‘..’ and in the pop-up windowselect crosshair:

    Note
    Having our Element named crosshair and showing up in this pop-up is due to the crosshair.xml we have created before, which is now visible to the Engine. If you don’t see anything in the pop-up window, it is likely due to an error in a line in your .xml document. 



  4. Test by entering Game mode with CTRL+G.

Our Flow Graph for our static UI HUD element, a crosshair, is now complete.

Adding ActionScript-Motivated Animation to a Crosshair

With our crosshair now in our game, we will create another crosshair that moves, or expands when you fire your weapon. While creating this crosshair is similar to the first one, there are several crucial differences in making this crosshair animated.

Animating the Crosshair

  1. To begin the process of creating an animated crosshair to our game, open Adobe Animate.

  2. Select ActionScript 3.0 for the Platform Type, and a Frame Rate of 30.00.

  3. For resolution, for this tutorial we will use 100x100, considering the crosshair’s small size.

  4. While you can use the Rectangle Tool to create your crosshair, we will use the Line Tool. With Snap to Grid turned on,draw out each part of the crosshair on its own unique layer. For example; draw the top part of the crosshair on a layer named Cross_Top, the bottom part of the crosshair on Cross_Bottom etc.

    Note
    Unlike a static crosshair with no animation, this crosshair contains animation in which each part of the crosshair moves in separate directions. To achieve this animation, each part of the crosshair must be on its own layer.

    Tip
    With Stroke Color selected, you can use the Circle Tool to make a static hollow circle element in the middle to give your crosshair more detail.



  5. With the crosshair now drawn out, we will add motion. Motion needs to be added to these one layer at a time. To begin, we will start with our Cross_Top layer. With the Selection Tool, select the top part of the crosshair so it is highlighted. Right click, and select Convert to Symbol. Select the Type as Graphic, and name it accordingly: 

    In the Timeline below,select frame 15 in theCross_Top layer, right click, and select Add Frame. You will now have a gray box stretching from frame 1 to frame 15 in this layer.
    Hold down Shift and select frames 1 through 15 in the Cross_Top layer so that they are highlighted. Right click, and select Add Motion Tween.On frame 15 of the Cross_Top layer, select the top part of the crosshair, and move it towards the center. Now, when you drag between frames 1 and 15 on the Timeline, you will have a smooth fluid motion.

    Repeat this process for each layer until all layers move on the timeline:


    While our crosshair has animation, there are no scripts to tell it when or how to perform these functions. If we exported this crosshair in its current state, converted and opened it in CRYENGINE, it would loop continuously since there are no defined functions or actions. We now must apply an ActionScript into our crosshair to prevent it from looping, as well as to assign these functions.

  6. In the Timeline, create a new layer and name it AS. This is where we will apply the ActionScript that will affect all of the layers. In the AS layer, select frame 15, right click and select Actions or press the F9 key.

  7. In the pop-up Actions window, we must apply a stop command to tell the animation to stop on the last frame to prevent it from looping forever. The ActionScript line to stop is as follows:

    Code Block
    languageactionscript3
    stop();



  8. Our crosshair will now stop the animation on the last frame. You can see this in action by hitting CTRL+Enter to render a preview. If you were to remove this line, the previous would resume looping continuously.

  9. On the Frame 1 in the Timeline, right click and select Actions.Here we will type out the function in ActionScript:

    Code Block
    languageactionscript3
    function shoot ()
    {
      gotoAndPlay (1);
    }
    


    The lines are rather simple, we have named our function shoot, and that function is to gotoAndPlay to the frame we have designated, which in this case is frame 1

    Warning
    • Setting the function to Frame 0 is invalid, and your function won’t work. Frame 1 is always the first frame.
    • Make sure you type gotoAndPlay exactly as you see it, with the same capitalization; otherwise it will not work.


Exporting the Crosshair

  1. The functions are now defined, and we can save and export our project. We will name this one CrosshairAnimated.swf.

  2. Like the first crosshair, we will export this one to our FlashAssets folder in: CRYENGINE Projects\your_project\Assets\libs\ui\FlashAssets.

  3. Drag the CrosshairAnimated.swf onto the GFxExport1.exe - Shortcut.exe in the FlashAssets folder, and convert the file. Once converted, drag the CrosshairAnimated.gfx into the \ui folder.

  4. In the UIElements folder, we need to make a new .xml for our new CrosshairAnimated.gfx. Copy and paste the existing crosshair.xml, and open it in a plain-text editor so that we can make the necessary changes.

    Info
    While there are some similarities between this .xml and our previous .xml for the static crosshair, there are a few important changes that need to be considered. Mainly, we will be adding a functions line below our GFx line so that CRYENGINE is aware that it will not only be loading our .gfx, but that this .gfx has functions attached to it that need to be loaded in Flow Graph.


    Code Block
    languagexml
    <UIElements name="HUD">     
       <UIElement name="Animated Crosshair">  
    	<GFx file="CrosshairAnimed.gfx" layer="0">                 
    	     <Constraints> 
    		<Align mode="dynamic" valign="center" halign="center"/> 
    	  </Constraints>     
    		</GFx>     
             <functions>
    		    <function name="shoot" funcname="shoot"/> 
    	    </functions>     
    	</UIElement>       
    </UIElements>       
    
    



  5. Save the CrosshairAnimated.xml when it looks identical to what you see here.

    Note
    A common mistake when copying and pasting .xml is making all the correct changes, but not updating the .gfx line to reflect the new .gfx, and leaving in the old .gfx file name from the .xml we copied. Make sure you update this line.


Scripting the Crosshair

With the CrosshairAnimated.xml saved in the UIElements folder, we can now open CRYENGINE 5.7 LTS and begin applying our crosshair and its functions.

  1. With the project open in CRYENGINE, open the existing Flow Graph. 

  2. First, we want to change our old crosshair for our new one, so in the UI:Display:Display node, swap out the crosshair element for Animated Crosshair.

    Note
    If you don’t see the new Animated Crosshair as one of the options to choose in the pop-up window, it is likely an error in your CrosshairAnimated.xml.



  3. Select the Game:Start node's Output and drag it into theUI:Display:Display node's Show input. With this setup, the new crosshair will work in the game, but in order for it to animate, we need to tie the functions together with an action that will trigger them.

  4. Right-click in the Flow Graph, and add anInput:ActionMaps:ActionListenernode.

  5. In the  Input:ActionMaps:ActionListener node, select the ‘..’ next to Actions, and in the pop-up window, select Player → Shoot. The default templates in CRYENGINE come with ActionMaps assigned to the player, which are coded in C++, and can be modified with code. There are several included actions in the template, one being shoot which is triggered by pressing the left mouse button.

  6. Select the Game:Start node's Output and drag it into the Enable input of the Input:ActionMaps:ActionListener


  7. The action for shooting is now in our Flow Graph, and now we need to actually bridge the shoot actionwith the shoot function of our Animated CrosshairTo do this, we need to add a UI:Functions:Animated Crosshair:shoot node.

  8. Once added, drag the Hold output of the Input:ActionMaps:ActionListener node to the Call input of the UI:Functions:Animated Crosshair:shoot node. 


  9. With all of our nodes connected, we can hit CTRL+G and test this in game mode:


You can take advantage of the other actions that come built in to the CRYENGINE template by creating more Input:ActionMaps:ActionListener nodes and changing selecting the other default actions (move forward, move backwards, move left, move right.) and linking them to more UI:Functions:Animated Crosshair:shootnodes. 

This will make it so not only does the crosshair expand when you shoot, but also when you walk around.

Conclusion

This concludes the tutorial. To learn more about the UI in CRYENGINE and/or other topics, please refer to the CRYENGINE V Manual.

Video Tutorial

You can also follow this tutorial series in video form on our YouTube channel. 

Widget Connector
width960
urlhttps://www.youtube.com/watch?v=cyi5SqshwSc
height540



On This Page

Table of Contents
excludeOn This Page