Skip to main content

Graphics

Easel has a simple but powerful graphical system that allows you to draw shapes, images, and text on the screen.

Graphical elements​

Sprites​

The most basic graphic object in Easel is the Sprite. A Sprite is a simple image that can be drawn on the screen. There are three sprite functions available, depending on your needs:

In general, sprites are attached to a Body, and the position of the Body determines the position of the sprite on the screen.

Transient elements​

The two most common ways to display temporary visual effects on the screen are:

  • Spark creates a small particle effect which will dissipate over time.
  • Streak lets you create a line that will fade away over time. These can be used to create effects like the trail of a fireball, for example.

There is also a Strobe function which lets you temporarily make a sprite flash on the screen.

Backgrounds​

The SolidBackground function lets you set a solid color background for the screen.

Other elements​

See the Graphics reference for a full list of graphical functions.

Render order​

Easel renders sprites front-to-back, meaning the sprites which are rendered first will cover the sprites that are rendered later. This is sometimes called "reverse painter's algorithm." Sprites are rendered in the following order:

  1. layer - higher layer values cover lower values
  2. y position - higher y values (closer to the bottom of the screen) cover lower y values
  3. body - all sprites belonging to the same body are rendered at once as a group.
  4. overlay - higher overlay values cover overlay values. This value differs from layer in that it can be used to arrange sprites within the same body.

Coordinate system​

The center of the screen is the origin @(0,0) point. Like most game engines, the x-axis increases to the right, and the y-axis increases downwards. Note that in math the y-axis increases upwards, but in game engines and computer graphics it increases downwards, so that can be different from what you're used to. This also means that angles turn clockwise instead of counter-clockwise as they increase.

Sizes​

In Easel, it is best to give your main character sprite a radius of approximately 1, and then scale the rest of the world relative to that. Various defaults in the graphics system and physics engine are based on this size, and so if you are much smaller or much bigger than this, Easel will not perform very well.

Cameras​

The camera determines how in the in-world game coordinates are mapped to the pixels on the screen. The default Camera is centered at the origin and has a radius of 50, but this can be customised.

Resolution​

The single most important thing which makes the most difference to the performance of the graphics is the resolution. Easel can function at three resolutions:

  • Maximum resolution: If a player has a high-density pixel display, sometimes called a retina display, then Easel will render to subpixels when set to Maximum resolution.
  • High resolution renders to pixels but not to subpixels.
  • Low resolution renders to half the height and width, and so looks pixelated, but is also the most performant, especially on lower-end devices.

You can give your players the option to choose their resolution using the ResolutionToggle or ResolutionDropdown user interface element. Otherwise, Easel will attempt to automatically choose the best resolution for the player's device based on how it is performing.