Esoteric Framework

2D basics

Abstract

Learn how to add 2D elements to your application.

Introduction

The framework comes with built-in 2D elements that allow you to draw shapes, render text, and display images. The application itself is a 2D element, which can contain other 2D elements.

<Application>

</Application>

When adding 2D elements, they become children of the parent element. Their position are relative to their parent's. We'll illustrate this process by drawing some simple buttons.

Drawing a rounded rectangle

Let's start by drawing the shape of a button using a RoundedRectangle element. When you want to draw a shape, you start with a Shape element, which contains drawing commands. A drawing command is a kind of element that specifies what should be drawn. In this case we use the SolidColor element, which instruct the framework to use a solid color to draw its children. The color is specified using an integer, but unlike HTML, you use the 0x000000 format (`#` becomes `0x`). Inside the SolidColor element we use a RoundRectangle to tell the framework to draw a rounded rectangle according to its attributes.

Source Code

<Application>
	<Shape>
		<SolidFill color="0x222222">
			<RoundedRectangle width="200" height="30" ellipseWidth="20" ellipseHeight="20" />
		</SolidFill>
	</Shape>
</Application>

Result

Adding text

Now we're going to add some text over the background. To do that we're going the use the TextField element. It is not a draw command like SolidColor or RoundedRectangle. It is a display object, just like the shape element. Elements are drawn first to last, so we add it after the Shape element to make sure it is visible. The attributes we use are relatively straight forward. You'll notice we used some unusual values for the width and height of the TextField, but for now just assume it will ensure that the dimensions are big enough to contain the text without cutting it. You learn more about these values in later tutorials.

Source Code

<Application>
	<Shape>
		<SolidFill color="0x222222">
			<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
		</SolidFill>
	</Shape>
	<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">A button!</TextField>
</Application>

Result

The sprite element

A very useful element is the Sprite element. It allows you to group multiple 2D elements. Since the children's positions are relative to their parent's, the Sprite element is very convenient when you want to move multiple objects together. Let's use it to group the elements of the button we just created, then to create additional buttons.

Source Code

<Application>
	<Sprite>
		<Shape>
			<SolidFill color="0x222222">
				<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
			</SolidFill>
		</Shape>
		<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 1</TextField>
	</Sprite>
	<Sprite y="40">
		<Shape>
			<SolidFill color="0x222222">
				<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
			</SolidFill>
		</Shape>
		<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 2</TextField>
	</Sprite>
	<Sprite y="80">
		<Shape>
			<SolidFill color="0x222222">
				<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
			</SolidFill>
		</Shape>
		<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 3</TextField>
	</Sprite>
</Application>

Result

Adding a background.

Finally, we'll group all the buttons together using a Sprite, then draw a background behind them.

Source Code

<Application>
	<Shape>
		<SolidFill color="0xCCCCCC">
			<Rectangle width="160" height="150" />
		</SolidFill>
	</Shape>
	<Sprite x="20" y="20">
		<Sprite>
			<Shape>
				<SolidFill color="0x222222">
					<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
				</SolidFill>
			</Shape>
			<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 1</TextField>
		</Sprite>
		<Sprite y="40">
			<Shape>
				<SolidFill color="0x222222">
					<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
				</SolidFill>
			</Shape>
			<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 2</TextField>
		</Sprite>
		<Sprite y="80">
			<Shape>
				<SolidFill color="0x222222">
					<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
				</SolidFill>
			</Shape>
			<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 3</TextField>
		</Sprite>
	</Sprite>
</Application>

Result

Conclusion

Hopefully this tutorial helped you understand the basics of 2D elements. There are other elements to explore, such as GradientFill and BitmapFile. There will also be new elements as new releases of the framework are available.