Skip to main content

Graphics

Easel has a simple but powerful graphical system. Draw shapes, images, and text on the screen. Easel has built-in support for particle effects and line trails.

Graphical components​

Add graphical components to your Entity to make it visible on the screen. You can add multiple graphical components to a single entity.

In most cases, you should give your entity a Body and set the body context parameter to your entity. Then all its sprites will naturally follow the position of the body. This is a minimal example of a ship entity with a triangular polygon sprite:

Spawn ship {
    use body=ship
    Body(pos=@(0,0))
    PolygonSprite(shape=Equilateral(radius=1, numPoints=3), color=#00ffbb)
}

Below is the list of the most commonly-used graphical components in Easel:

  • ImageSprite lets you draw sprites from an image file.
  • PolygonSprite draws simple shapes.
  • TextSprite lets you draw text on the screen.
  • Spark creates a small particle effect which will dissipate over time.
  • Streak lets you create a line trail that will fade away over time.
  • Strobe lets you temporarily make a sprite flash on the screen.
  • SolidBackground function lets you set a solid color background for a particular camera.

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

Coordinate system​

By default, the center of the screen is the origin @(0,0) point. Like most 2D game engines, the x-axis increases to the right, and the y-axis increases downwards.

warning

In math, the y-axis increases upwards, but in 2D game engines 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.

tip

Sizing tip: 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.

Z-order​

When sprites overlap on the screen, Easel needs to determine which sprite is drawn on top of the other. This is determined by four parameters which you can set on each sprite:

  1. layer: sprites with higher layer values cover lower ones
  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.

Cameras​

The camera determines which part of the game world is visible on the screen. You can have multiple cameras. See Cameras for more information.