Boxes

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

 

 

<   Tickers                                             Introduction                                            Objects   >