The box command is a versatile feature to draw rectangular shapes with colors, images or video. It is often used to highlight or shadow text or tickers, so it shares most of the same options as the text command. In this example, the same animation options are applied to both the text and box commands to create animated text with colorful highlights. The fade, zoom, slide, spin and bounce options can be used in any combination. The same align option of CenterCenter is used for both the text and box commands to keep them aligned.
The first parameter of the box command defines its name which can be used by later commands on the same page, so these names must be unique on each page. The size option defines the width and height of the boxes, respectively. Box dimensions of 100, 100 would cover the entire page, for example, if the top left corner of the box were positioned at the origin. If the size options were not specified, the dimensions of the images or video on the boxes would be used, but the size option is required when there is no image. If only the first size value (width) is defined, the height is computed automatically to make the box square, regardless of the aspect ratio of the display.
The color option can be specified in one of three different formats, float values with a range of 0.0 to 1.0, integer values with a range of 0 to 255 or as a six or eight digit hexadecimal value preceded with a hash symbol, as shown here. For all of these formats, the ordering of the values is red, green, blue and alpha. The alpha parameter is optional, but the hexadecimal value 60 is used here to blend the boxes with the page backgrounds.
The color option can be specified up to four times to define linear color gradients between the four corners of a box. The corners are defined in the clockwise direction starting with the top left corner. Here, the Mars page shows a horizontal gradient, the Jupiter page shows a vertical gradient and the Saturn page shows a diagonal gradient. When the color option is specified only once, it is automatically replicated to the other corners, and when it is specified twice, those colors are replicated to the adjacent corners.
To display images or video on boxes instead of just colors, replace the color options with an image, video or rss option, but these are not shown in this example. To draw more complex shapes or animations, use the object command instead of box.
The last three pages in this example demonstrate how the box option can be used on text commands to copy most of the text command option parameters from preceding box commands on the same page. This simplifies the syntax by avoiding repeating option parameters when boxes are used to highlight text, as shown.
Lightwing always draws page backgrounds first, followed by objects, then boxes and text and tickers last, regardless of the order these commands are listed on the page. However, it is possible to position boxes, text and tickers deeper into the page scene by defining the optional depth coordinate of the position option.
Refer to the online Scripting Guide for more details about these commands.
// Scripting Tutorial - Boxes version: 1.0 page: Mercury time: 1, 5 image: PlanetMercuryBackground.pvr box: Highlight size: 40, 15 time: 1, 4 fade: 1, 1 zoom: 0, 0, 0, 0 position: 50, 50 align: CenterCenter color: #FF000060 text: OpenSansBold_100 time: 1, 4 fade: 1, 1 zoom: 0, 0, 0, 0 position: 50, 50 align: CenterCenter type: "Hello Mercury!" page: Venus time: 1, 5 image: PlanetVenusBackground.pvr box: Highlight size: 40, 15 time: 1, 4 fade: 1, 1 zoom: 0, 1, 0, 1 position: 50, 50 align: CenterCenter color: #00FF0060 text: OpenSansBold_100 time: 1, 4 fade: 1, 1 zoom: 0, 1, 0, 1 position: 50, 50 align: CenterCenter type: "Hello Venus!" page: Earth time: 1, 5 image: PlanetEarthBackground.pvr box: Highlight size: 40, 15 time: 1, 4 fade: 1, 1 zoom: 1, 0, 1, 0 position: 50, 50 align: CenterCenter color: #0000FF60 text: OpenSansBold_100 time: 1, 4 fade: 1, 1 zoom: 1, 0, 1, 0 position: 50, 50 align: CenterCenter type: "Hello Earth!" page: Mars time: 1, 5 image: PlanetMarsBackground.pvr box: Highlight size: 40, 15 time: 1, 4 fade: 1, 1 slide: 1, 0, 1, 0 position: 50, 50 align: CenterCenter color: #FF000060 color: #0000FF60 text: OpenSansBold_100 time: 1, 4 fade: 1, 1 slide: 1, 0, 1, 0 position: 50, 50 align: CenterCenter type: "Hello Mars!" page: Jupiter time: 1, 5 image: PlanetJupiterBackground.pvr box: Highlight size: 40, 15 time: 1, 4 fade: 1, 1 slide: 0, 1, 0, 1 position: 50, 50 align: CenterCenter color: #00FF0060 color: #00FF0060 color: #0000FF60 color: #0000FF60 text: OpenSansBold_100 time: 1, 4 fade: 1, 1 slide: 0, 1, 0, 1 position: 50, 50 align: CenterCenter type: "Hello Jupiter!" page: Saturn time: 1, 5 image: PlanetSaturnBackground.pvr box: Highlight size: 40, 15 time: 1, 4 fade: 1, 1 slide: 1, 0, 1, 0 bounce: 3, 0, 0 position: 50, 50 align: CenterCenter color: #FF000060 color: #0000FF60 color: #FF000060 color: #0000FF60 text: OpenSansBold_100 time: 1, 4 fade: 1, 1 slide: 1, 0, 1, 0 bounce: 3, 0, 0 position: 50, 50 align: CenterCenter type: "Hello Saturn!" page: Uranus time: 1, 5 image: PlanetUranusBackground.pvr box: Highlight size: 40, 15 time: 1, 4 fade: 1, 1 slide: 0, 1, 0, 1 bounce: 0, 3, 0 position: 50, 50 align: CenterCenter color: #FF000060 text: OpenSansBold_100 box: Highlight type: "Hello Uranus!" page: Neptune time: 1, 5 image: PlanetNeptuneBackground.pvr box: Highlight size: 40, 15 time: 1, 4 fade: 1, 1 spin: 360, -360 position: 50, 50 align: CenterCenter color: #00FF0060 text: OpenSansBold_100 box: Highlight type: "Hello Neptune!" page: Pluto time: 1, 5 image: PlanetPlutoCharonBackground.pvr box: Highlight size: 40, 15 time: 1, 4 fade: 1, 1 spin: 360, -360 bounce: 0, 0, 3 position: 50, 50 align: CenterCenter color: #0000FF60 text: OpenSansBold_100 box: Highlight type: "Hello Pluto!" jump: Mercury