Renderers - e-ucm/ead GitHub Wiki

Renderers are used by scene elements to represent themselves.

Image

A static image.

Atlas Image

A static image, that is contained in an atlas.

Shapes

A shape, with a defined paint. Shape is an abstract element, and can be particularized to rectangles, circles and polygons.

Paint is a string, representing the paint mode for the border and the fill of the shape. Paints follow the next syntax:

fill;border

If the string doesn't contain ;, the whole string is interpreted as fill. There are two types of fills:

  • Color: represented with a string following the hex format RRGGBBAA or RRGGBB is alpha is FF.
  • Linear gradient: with two colors associated to two points, represented with a string following the format RRGGBBAA:RRGGBBAA:x0:y0:x1:y1.

The param border only supports color.

The types of shapes supported by eAdventure are:

Rectangle

A rectangle, with bounds (left, right, top and bottom).

Circle

A circle, with a radius.

Polygon

A closed polygon with straight lines. It's represented with a sequence of x and y coordinates. [x0, y0, x1, y1, ... ]

NinePatch

A common nine patch. Nine path has a bounds attribute, to set nine patch limits, an a size, to set the actual width and height of the renderer.

Text

Text renderers include basic support for styling. The style of a text is defined through Text Style objects.

Currently, each text style can define:

  • A color
  • A font. The uri must point to a LibGDX's BitmapFont.
  • Scale: A number indicating the size of the text. This parameter does not work as a font-size parameter, it just scales the OpenGL matrix to make the text look bigger (pixelation may occur).

The style of a text object can be defined inside the object, using the style attribute, or linking to an external text style defined in a separate file, using the styleref attribute. This facilitates defining consistent text styles throughout the game.

Example 1: Style defined in a separate file

{
    renderer: {
        class: text,
        styleref: "textstyles/menutextstyle.json",
        text: "scenes.menu.title"
    }
}

The file textstyles/menutextstyle.json may look like something like this, for example:

{
    color: {
        r: 1,
        g: 0,
        b: 0,
        a: 1
    },
    scale: 1
}

Example 2: Style embedded in text object

{
    renderer: {
        class: text,
        style: {
            color: {
                r: 0,
                g: 1,
                b: 0,
                a: 1
            },
            scale: 1,
            font: "mybitmapfont.fnt"
        },
        text: "scenes.menu.title"
    }
}

Application of styles

Several styles may be applicable at the same time for a certain piece of text (for example, if both style and styleref attributes are defined). The next algorithm determines the style to be applied:

  1. If style (embedded style) is defined and is a valid TextStyle object, then style is applied. This attribute has the highest priority.

  2. If styleref (external style) is defined, it points to a file that exists and that defines a valid TextStyle object, then styleref is applied.

  3. If neither style nor styleref are defined or they are invalid, the default text style declared in file textstyles/defaulttextstyle.json will be applied, if this file exists and points to a valid text style file.

  4. Finally, if through 1-3 the textstyle could not be computed, then a basic white 1.0f text style using the Arial 15-pt font provided by LibGDX will be used. This style has the lowest priority.

Frame Animation

  • class: frameanimation

  • JSON Schema

  • Description: This renderer is intended for displaying animated characters. The renderer is composed of a set of "renderer wrappers", called "frames", which are drawn following a determined sequence. Each frame of a frame animation can be of any type of renderer, including frame animation, which allows for incremental composition of animations through aggregation.

Attributes of a frame animation renderer

This type of renderer has two main attributes:

  • frames: an array of objects of type "timed". "Timed" just serves as an abstract definition of what a frame is: a wrapper for any renderer whose display onto the screen is limited in time. The object class "frame" provides a simple implementation of the "timed" abstract type. For more details about "timed" and "frame", see their respective JSON definitions:

  • sequence: a function that determines the order for painting the frames. This attribute is optional. "sequence" is just an abstract definition of any function that given a total number of elements and the previous value selected by the function returns the index of the next element. (See JSON Schema for "sequence" for more details). Currently two functions implementing "sequence" are available:

    • linear: this is the default sequence set if the attribute is not specified. It just makes nextFrame=currentFrame+1. It also allows specifying what to do once the end of the sequence is reached through a "loop" attribute. If "loop" is set to true, the sequence restarts when the end is reached, if false, the last frame stays still. It is false by default. (See JSON Schema for "linear sequence" for more details).
    • random: the next frame to render is selected randomly. (See JSON Schema for "random sequence" for more details).

###Example A fully detailed example is included in the TechDemo. See the Detailed demo of frameanimation for more details.

Here's a simple example of a frameanimation composed by three circles as frames. Each frame is shown 1 second on the screen. The "linear" function is used for sequencing, and the "loop" option is disabled

renderer: {

	class: frameanimation,
	frames: [
		{
			class: frame,
			delegateRenderer: {
				  class: circle,
				  paint: "FF0000;000000",
				  radius: 25
			},
			duration:1
		},
		{
			class: frame,
			delegateRenderer: {
				  class: circle,
				  paint: "00FF00;000000",
				  radius: 25
			},
			duration:1
		},
		{
			class: frame,
			delegateRenderer: {
				  class: circle,
				  paint: "0000FF;000000",
				  radius: 25
			},
			duration:1
		}
	],
	sequence:{
		class: linearsequence,
		loop: false
	}

}