Advanced Graphics Tutorial

This chapter contains tutorials that deal with advanced graphics development in the Dynamic Markup Language. You will find it easier if you have reached a reasonable level of skill before attempting to follow this chapter.

Rendering 101

In this section we'll look at the art of creating render layers, which is basically a way of grouping your graphics into their own individual drawing spaces, or 'rendering areas'. Each rendered area that you create is independent of the others, allowing you to keep your graphics organised, which is especially important once you want to start moving them around. You'll also need to know how layering works the moment you start developing DML based applications and interactive components. Here's a list of features provided by the rendering system:

Hide/Show functionality for controlling graphics visibility.
Automatic resizing when the dimensions of a container are changed.
Move to back, move to front functionality and the ability to 'stick to back' or 'stick to front'.
Masked graphics (for creating icons).
Focus control for identifying the user's interest in the interface.

In an earlier chapter we mentioned that the DML plugin will automatically create a default rendering area called the "SystemDisplay" which is attached to the embedded graphics area. The SystemDisplay is the 'root' of the drawing hierarchy, which means that as the top-most object it is not contained by anything, but it can hold lots of smaller drawing spaces within it. In previous chapters we have limited ourselves to using graphical operations and interactive objects within the root area. To only use these types of objects is rather limiting and we need to be able to group our objects within drawing spaces so that we can manage more complex interfaces. In order to create these drawing spaces, we need to use the render tag.

Let's start with a quick illustration. Run this script and then try dragging the red and blue squares around in the available space:

  <dml>
    <box colour="#000000"/>

    <render colour="#ff0000" x="20" y="20" height="100" width="100" leftlimit="-10"
      rightlimit="-10" toplimit="-10" bottomlimit="-10" drag="[self]">
      <text face="arial:12" align="center" colour="#ffffff" string="Hello"/>
      <action static monitor="[container]" call="focus">
        <action static object="[[container].container]" call="movetofront"/>
      </action>
    </render>

    <render colour="#0000ff" xoffset="20" y="20" height="100" width="100" leftlimit="-10"
      rightlimit="-10" toplimit="-10" bottomlimit="-10" drag="[self]">
      <text face="arial:12" align="center" colour="#ffffff" string="World"/>
      <action static monitor="[container]" call="focus">
        <action static object="[[container].container]" call="movetofront"/>
      </action>
    </text>
  </dml>

You will notice that as you drag each square, the text that is contained within them is also dragged along. This is because each text object has been contained by its respective rendered area, effectively creating a 'group' of graphics that carry along with the parent. Also, notice that when you click on any area it is moved in front of the other - this demonstrates the ability to arrange graphics in layers.

While the render object is the most complex type in the GUI system, it is simple to use if you only need its basic features. To get extended information on the Render class, please refer to its official render documentation. To help get you started, the following table describes the most commonly used fields:

Fields	Description
X, Y, XOffset, YOffset	These fields control the placement of your rendered area. Use of the XOffset and YOffset fields allow you to offset the placement against the opposite end of a render object's container.
Width, Height	These fields control the width and height of your rendered area. Use percentages if you would like to maintain a proportional area size.
Colour	If you want a render object to have a default colour when drawing occurs, set this field. Note that if you are using graphical objects that will fill the entire rendered area, setting the Colour field will only waste valuable drawing speed.
MinWidth, MinHeight, MaxWidth, MaxHeight	These fields control the resizing of rendered areas. The minimum field values prevent the rendered area from being resized too small, and the maximum field values prevent it from expanding too far.
StickToBack, StickToFront	Set either of these fields to 1 to make the render object stick to the back or front of the display.

Special Effects

If you have used Athene before then you may have noticed that some special effect classes are distributed as standard. These include a starfield generator, flame effect, forest fractals, rotating 3D objects and others. Here are some effect examples:

The available special effects are extremely easy to use - simply specify the name of the effect in a tag, e.g. <starfield/> and you're done. The real question is, what do you need to do to create customised graphics like this? Due to the speed required to achieve these effects, the only option is to write them in C as DML plugins. This involves downloading the Pandora Engine SDK and retrieving the source code to the effects so that you can learn how to create them. If you have the C programming skills, creating new effects for DML is straight-forward and rewarding. The details for developing them is outside the scope of these tutorials, but you will find all of the necessary information in the SDK.