Billboards

The billboard_container, located in the billboard layer of Scene 1 of HUDKit.fla, is the container for player billboards. Each billboard displays an arrow and player name that follows the player’s location. Billboards are often used in games to show additional detail of 3D objects that are contained within the view frustum of the user player. In this demo, player billboards appear at a certain distance from the user player. Friendly player billboards always display player names while enemy billboards only display the arrow until the target is close to the view center.

Figure 14: billboard_enemy Symbol

The billboard implementation in this demo creates a 2D billboard MovieClip in the UI which is shifted and scaled to follow players’ positions using GFx::Value::SetDisplayInfo().

Each billboard MovieClip (billboard_friendly, billboard_enemy) is constructed from one billboard_label_(friendly/enemy), located in text layer, and one arrow image, located in the arrow layer. billboard_label_* contains a textField which is used to display the target player’s name. billboard_friendly’s “Show” Keyframe starts a fade-in animation using a Classic Tween alpha blend on billboard_friendly’s timeline. Once “Show” is played, the billboard will remain visible until it is hidden or removed.

The C++ logic to attach billboard MovieClips to the canvas is in FxHUDView::BillboardCache::GetUnusedBillboardMovieclip:

if (UnusedBillboards.IsEmpty())
{
    Value::DisplayInfo info(false);

    Value billboard, temp;
    String instanceName;
    Format(instanceName, "{0}{1}", BillboardPrefix, BillboardCount++);
            CanvasMC.AttachMovie(&billboard, SymbolLinkage, instanceName);

    BillboardMC* pbb = new BillboardMC();
    pbb->Billboard = billboard;
    billboard.GetMember("label", &temp);
    temp.GetMember("textField", &temp);
    pbb->Textfield = temp;

    pbb->Billboard.SetDisplayInfo(info);
    UnusedBillboards.PushBack(pbb);

}

Each BillboardCache contains is a reference to the MovieClip to which it attaches billboards named CanvasMC. This reference is passed to the BillboardCache when it is instantiated. The logic above attaches a billboard MovieClip of the symbol billboard_enemy/billboard_friendly to its predefined canvas MovieClip at the CanvasMC.AttachMovie() call and retains a reference to it for reuse.

The Billboard update logic is defined in the following methods: UpdateBillboards(), BeginProcessing(), EndProcessing() and GetUnusedBillboardMovieclip(). BeginProcessing() and EndProcessing() are called at the beginning and end of updating a set of friendly or enemy billboards. These methods manage the lists of used and unused billboards.

The following code is the update logic for friendly billboards from UpdateBillboards().

// Process friendlies
// Friendly billboards will always show names

BillboardMC* pbb = NULL;

FriendlyBillboards.BeginProcessing();
for (unsigned i=0; i < friendlies.GetSize(); i++)
{
    info.Clear();
  if (FriendlyBillboards.GetUnusedBillboardMovieclip(friendlies[i].pPlayer, &pbb))
  {   
        info.SetVisible(true);
        pbb->Billboard.GotoAndPlay("show");
        // Load player info
        String title;
        Format(title,  "<img src='rank{0}' width='20' height='20' align='baseline'
            vspace='-7'/> {1}", friendlies[i].pPlayer->GetRank()+1,
            friendlies[i].pPlayer->GetName());
        pbb->Textfield.SetTextHTML(title);
  }
  info.SetX(friendlies[i].X);
  info.SetY(friendlies[i].Y);
  info.SetScale(friendlies[i].Scale, friendlies[i].Scale);
  pbb->Billboard.SetDisplayInfo(info);
}

FriendlyBillboards.EndProcessing();

UpdateBillboards() creates and updates billboards based on a list of entities retrieved from a user player view query. It uses GotoAndPlay(“show”) to display billboards, GFx::Value::SetDisplayInfo() to set the MovieClip’s X, Y, and scale, and GFx::Value::SetText() to change the text displayed.

The textField uses htmlText to populate and display the billboard. The text field contains an image of the player’s rank and the player’s name. The rank icon is defined by the src=’rank{0}’ HTML. In the example above, it corresponds to the friendly player’s rank + 1 (friendlies[i].pPlayer->GetRank()+1). The other img options define the icon image’s height, width, alignment, and vspace. The player’s name is defined by the {1}. In the example above, it corresponds to the name of friendly player (friendlies[i].pPlayer->GetName()).