The HUD kit consists of the Flash UI assets and the C++ code that updates the HUD’s visual state. There is also a C++ simulation that provides an environment to drive the HUD with dummy data.

The two main parts of the C++ code are the interface to the HUD view and the environment that provides data to the view. In the MVC paradigm, the interface would be the controller, the environment is the model and the Flash UI is the view. Files and classes that are prefixed with Fx define interfaces of the HUD Kit’s View core. Files without this prefix define interfaces for the demo or game simulation.

The adapter design pattern is implemented to decouple the simulation from the HUD View. The adapter translates requests between the simulation and the HUD View. To interface the HUD View with a new game, users need to develop a custom adapter class which interfaces with their game and the HUD View. This allows developers to reuse the HUD Kit conveniently without significantly modifying their game code.

The code detailed within this document presents an optimal implementation of Scaleform, leveraging the new Scaleform Direct Access API to accomplish UI updates and animations faster than ever before.

The C++ code consists of the following files (located in Apps\Kits\HUD and its subfolders).

• HUDKitDemo.cpp – Core application built on top of the standard Scaleform Player. Handles starting the simulation, initializing members, and loading and registering the SWF files with their C++ controller.
  
• HUDKitDemoConfig. – Configuration for the HUDKitDemo based on FxPlayerConfig.h. Includes controller mappings and Windows application definitions.

• FxHUDKit.h – Core HUD kit types used to update the HUD view.
• FxHUDView.h/.cpp – Provides types used by the HUD view including the log and the billboard system.
• FxMinimap.h – Declares interfaces that game environments and applications can implement to plug into the minimap view.
• FxMinimapView.h/.cpp – Provides types used by the minimap view.

• HUDAdapter.h/.cpp – Implementation of adapter design pattern to decouple the simulation from the HUD to allow for convenient reusability.
• HUDEntityController.h/.cpp – Declares controller types for entities, primarily used to update simulation logic and AI behavior.
  
• HUDSimulation.h/.cpp – Provides types which implement a demo environment to drive the game’s UI. This environment contains players from two teams in a capture and hold game type.

The Flash content for the HUD Kit is divided in two files: HUDKit.fla and Minimap.fla. These FLA files define and layout the HUD Kit’s UI elements for manipulation using Scaleform. They also include all images and icons displayed in the UI.

Both files are divided into several layers. Generally, each component or group of similar components has its own layer. Layers provide a convenient method for author-time control of element ordering based on depth. The top most layer will display on top of all other layers and so on.

In Scaleform, Flash animations can be handled using C++, ActionScript, or the Flash timeline. In this demo, the majority of HUD animations are handled on the Flash timeline via Classic Tweens. These animations are generally triggered by a GFx::Value::GotoAndPlay() call from C++.

The HUDKit.fla file located in the Bin\Data\AS2 or AS3\Kits\HUD directory is the demo’s primary SWF. This file is loaded by the HUDKitDemo application at runtime. Every Flash UI element exists in this file except for the minimap view which is loaded by the HUDKit.fla at runtime.

Figure 2: HUDKit.fla layers

The HUDKitDemo registers the HUDKit MovieClip using an External Interface call on Frame 1 of the timeline:

ExternalInterface.call("registerHUDView", this);

This passes a pointer to the MovieClip which C++ can register with the C++ HUDView to manipulate the user interface.

Every layer, its MovieClips, layouts, animations, and Scaleform C++ managers will be discussed in detail in the HUD View section of this document.

Figure 3: Minimap Symbol

Minimap.fla includes the ‘Minimap’ symbol, the core of the Minimap. For the scope of this demo, the background is a static image and not an interactive 3D environment.

The player is denoted as a yellow arrow in the center, and heading is shown by the minimap border (North is marked). In addition to the player, the minimap view displays five icon types:

• Friendly players (blue). The directional arrows appear only at a high zoom level.
• Enemy players (red). The directional arrows appear only at a high zoom level.
• Capture points (denoted by the flags: white for neutral, blue for friendly, and red for enemy)
• Power-ups (rotating green and white icon)

The capture points and powerups are sticky icons that stick to the view border when outside the view range but inside the detectable range. The Direct Access API method is used to provide the functionality to fade icons that enter and leave the detectable range. It is also used to attach and remove MovieClips from the Stage during runtime using C++.

This ‘Minimap’ symbol contains several layers. Layers provide a convenient method for author-time control of element ordering based on depth. The top most layer will display on top of all other layers and so on:

Figure 4: The layers of the 'minimap' symbol

• items guide: A guide layer useful for designers/artists. This layer’s content is not published to the SWF file.
• player: The layer containing the yellow player icon.
• icons_waypoint: An empty canvas where waypoint icons are generated and cached.
• icons_flag: An empty canvas where flag icons are generated and cached.
• icons_diamond: An empty canvas where the power-ups’ diamond icons are generated and cached.
• compass: Layer containing the compass (with North marked).
• mask: Mask layer that only shows the content inside the unmasked area.
  • icons_player_red: An empty canvas where red enemy icons are generated and cached.
  • icons_player_blue: An empty canvas where blue friendly icons are generated and cached.
  • compass_glass: An embellishment that provides a glassy sheen in the top left of the compass.
  • map: The layer containing the terrain map. For demo purposes we use a large bitmap for the terrain, however in production situations this will most probably be a texture that is updated from C++. In this case, the update logic does not need to change the map’s offset/rotation, which is required when a masked terrain map is used.
• minimapBG: Contains a blue background that blends well with the terrain bitmap edges. This provides a smooth transition when the terrain bitmap goes out of view. This background is not required if the terrain map is rendered as a texture and updated directly from C++.

The ‘Minimap’ symbol uses the com.scaleform.Minimap class (located under Bin\Data\AS2 or AS3\Kits\HUD\com\scaleform). This minimal class defines the path to the map image and the constructor of the minimap which registers the minimap with the HUDKitDemo application and loads the map image.