Working with Text
ZapWorks Studio provides tools for incorporating dynamic text into experiences.
Importing Fonts
An open source font, OpenSans, is included with ZapWorks Studio for use in zaps. It can be added into the Media Library using the + button at the top right of the panel.
In addition, TTF fonts may be dragged directly into the Media Library. Please ensure that fonts are licensed appropriately before use.
Customizing Fonts:
In order to minimise zap download time, ZapWorks Studio does not include the entire font file when publishing an experience - instead it packs selected character ranges into a proprietary file format for distribution.
By default Latin script (i.e. English characters), numbers and basic punctuation are included. Additional elements (such as accents, or characters used in other languages) can be included by right-clicking on the font in the Media Library and selecting "Properties".
Using Text
Dragging a font from the Media Library into the Hierarchy creates a new Text node. With the Text node selected in the Hierarchy and the 'TXT' tool highlighted at the top of the 3D view, you can manipulate the bounding box of the text using the anchors.
The contents of the node can be set from the Properties panel on the left-hand side of ZapWorks Studio.
Text is contained within a rectangular bounding box inside its parent group. The box extends from -1 to +1 in Y and -lineScale to +lineScale in X. The lineScale attribute is a parameter in the Properties panel.
Clicking and dragging the anchors on the top or bottom of the box edits the lines,lineScale and scale properties, while the left and right anchors will edit just the lineScale.
Text Properties
The lines property specifies the number of lines of text that can be displayed in the bounding box when the layout type is wrap.
The lineScale property refers to the size of each line of text and the lineSpacing property refers to the spacing between the lines.
Both hAlign and vAlign refer to the horizontal and vertical alignment of the text within the bounding box.
There are three values for the layout parameter: stretch, fit, and wrap.
Stretch:
The text is deformed so it fills the entire of the bounding box. This will likely give the text a distorted appearance.
Fit:
The text is scaled such that it takes up the maximum space possible in the bounding box without stretching. Where the text sits in the non-limiting dimension can be controlled with the vAlign and hAlign properties.
Wrap:
The text is displayed with word-wrapping. The lines parameter determines how many lines of text should be accommodated in the bounding box and thus the size of the text relative to its parent group.
Color and Appearance
The shadow parameter can be used to display a "drop shadow" beneath the text. It takes the form of three coordinates [x, y, z] indicating the offset of the shadow from the text in 3D space.
As with all other nodes, the text node has a color parameter that affects both the text and any shadow. In addition, separate textColor and shadowColor properties are provided for controlling the color of each element independently.
Modifying Text from Scripts
Dragging a text node into a script provides a variable that can be used to modify the textual content, or indeed any other property, of the node. See Z.Text for more information.
If text is modified dynamically at run-time, ensure that the font contains all the characters and accents that are expected to appear. These settings can be changed by right-clicking on the font in the Media Library and selecting "Properties".