Let's follow a few simple steps:
- Start Sandbox. You don't have to load a level. Once Sandbox is started you can start the UI Emulator via View | Open View Pane | UI Emulator.
Note
On the left-hand side, you'll find the Objects panel. Here you can browse all your UIElements, UIActions, and UIEventSystems. There is also a tab for settings. For example, if you don't want to see the debug info in the upper-left corner of UI Preview (frame rate and so on), you can go to the Settings tab in the left panel, and click twice on the display info checkbox. On the right-hand side, you will find the Emulation panel. With this panel we can call functions on our Flash asset, set variables, and much more. This panel is dynamic, so later we will see how you can attach your functions to this panel to call them.
- But let's start with the Objects panel first. Click on the Elements button. A list of all UIElements should appear.
- If you double-click on one of the elements in the list, it will display the Flash asset in UI Preview. So, if you double-click on
NewHUD, it will be displayed in the preview window. - If you scroll down in the left panel a bit, you will find the constraints. You can change them to see the different results.
Note
You can detach the preview window from the main window. If the UI Preview window is detached, you can easily change the size of this window to see different resolutions. You can also select different standard resolutions from the drop-down list in the upper-menu bar, which will resize the UI Preview window if it is detached.
- Now, let's start with the emulation of our Flash asset. In the left panel, scroll down until you find the function list. If you click on the Functions button, the list will appear.
- If you double-click on a function, a new item gets attached to the Emulation panel on the right-hand side of the screen. Double-click on both the functions of
NewHUD. You can do the same for each variable that is in the Variables list. - Once you have all the functions/variables of interest attached to the Emulation panel, you can start typing in some values and call those functions to see if they are working as expected.
- If you have copied the
NewHUD.flafile into theGame/Libs/UIfolder, you can open it with Adobe Flash and move the bars to some other place. Press Alt + Shift + F12 to publish your changes. If you switch back to the UI Emulator, you can press the little trash icon on the buttons bar at the top of the screen. This will reload all the SWF files. If you double-click on theNewHUDelement in the UIElements list again to display it, you will directly see your changes.Note
The reload icon next to the trash icon will also reload the XML files.
The possibility to reload a changed SWF file directly in Sandbox helps to speed your development process a lot. If something in your ActionScript does not work as expected, just change your code, re-publish, and reload the SWF file to see if your change has fixed the problem.
With the UI Emulator, it is easy to develop and test your Flash assets on the fly. You can also start and test UI Action Flow Graphs and invoke system events to see if your UI logic can handle those events correctly. There will be more details on UI Actions and UIEventSystems later in this chapter.
Extend the setCurrentWeapon ActionScript function to receive a third parameter named bIsZoomed, and change the function to hide the crosshair movieclip if the parameter is true. Add the new parameter in your NewHUD.xml. Press the reload button (next to the play button) to reload the SWF and XML files, to test the setCurrentWeapon function with the new parameter.