Using Billboards in ZapWorks Studio

Hi ZapWorks Community,

Our next demo will demonstrate one of Studio lesser known features (but still super useful) - billboards. Billboards allow for images to remain facing the user whilst they orbit or move around the experience. Billboards are great for creating hotspots (button in 3D space) in your experiences.

Hotspot1

This post will run through how to set up your billboard group, as well as how to use the billboard properties.


Creating a Billboard Group

  1. Drag / Import an image into the Media Library .

%20Importing%20Button

  1. Drag the imported image file into the root node of the Hierarchy . You may want to resize your button so the size is more suitable.

%20Importing%20Button

  1. Right click on the Root node in your hierarchy, select Tracking, and then choose Billboard

%20Billboard%20Group

  1. Drag you image file from the hierarchy into the Billboard group

%20Billboard%20Group


Setting up the Billboard Group

To use the billboard feature, we need to be in the 3D view. We can do this by using a tracking type. For this example, we are going to use image tracking and training an image through the plus (+) menu of Media Library.

  1. Drag the trained target image into the root node of the Hierarchy.

%20Tracked%20Billboard

  1. Drag the billboard group into the target image node. Your billboard and content within it will now be tracked to the target image, and you can see this by orbiting around your tracking image. You’ll now notice that your billboarded content will always face towards the user.

%20Tracked%20Billboard

  1. We can change the axis of orbit for the billboard through the billboard tab of the properties. If you change the first value to 1, then the billboard will only rotate in the X-axis, and will not move in the Y or Z.

%20Tracked%20Billboard

  1. The same can be done in the Y-axis by changing the second value to 1, with the billboard group now rotating only in the Y-axis.

%20Tracked%20Billboard

  1. You can also play around with these values and have it rotating around both X and Y if you wish.

Preview / Publish your project.

Please note, if you want to scale, rotate and position your billboarded content, we recommend editing the properties of the billboard group as a whole rather than each individual node within it to avoid any potential errors and strange orbiting behaviour.


I hope this helps!

Please let us know on this thread if you have any issues setting up your billboards in ZapWorks Studio, we’ll be more than happy to help.

Adam

6 Likes