Now that the basics are in the engine, we can add entities. After the entity functionality is implemented, we can show things on screen.

Entities

The entity should be as flexible as possible. It was planned to be a base class, but an interface works better. There are only a few mandatory fields and some optional functions. This is what it looks like:

interface Entity {
  active: boolean;
  layer: number;

  update?: (dt: number) => void;
  lateUpdate?: (dt: number) => void;

  draw?: () => void;

  destroy?: () => void;
}

The active field is used to only draw and update certain entities.
The layer field is which layer it should be drawn on. This should be an integer.

The update and lateUpdate functions are optional functions called every frame.

The draw function is also optional and only for entities that need to draw something on the screen.

The destroy function is used to clean up resources and is called when the entity is removed from the scene.

Adding entities to scenes

Entities are stored in the scene. They can be added to and removed from it. Internally, entities are stored in an array and also in layers. The layers are arrays of entities.
On each update, there is a check to see if the layer field on an entity has changed, and the entity is automatically moved to the correct layer.
Entity update calls are made in the order the entities are added to the scene. Drawing is per layer. Bottom first.

When an entity is removed using the removeEnity function, it will be added to a list. It will stay until the next update. So it doesn't break existing function calls when called in the middle of an update cycle.

Cameras

There is support for one or more cameras. A camera is a transform with a canvas. The transform is applied before drawing the entities so they are offset by the camera and drawn in the correct place.

Instead of just drawing to the main canvas, the entities are drawn to the camera canvas. Later, there will be support for camera shaders, and having a separate canvas makes that easier.

The camera can move, rotate, and zoom. Layers can be ignored if needed. There can be a camera that only renders UI, for example. There is also support for having a camera as only part of the screen. For mini maps or split screen games, for example.

Each entity can be drawn multiple times depending on what layers are ignored per camera. This can have an impact on performance if you have a lot of cameras.

Asset Manager

With the entities and cameras, the engine can draw things on the screen. To store assets like fonts and images between scenes, there is now an asset manager. This is a static class that can be used to load, get, and remove assets from the manager. There is only support for images and fonts for now. This will be expanded in the future.

In a small game, all assets can be loaded upfront. There can be a scene on start-up that loads the assets and starts the game scene when it's done loading.

Bunnies test

I made a small test project using Lumi2d that has bunnies moving on the screen. When you hold the left mouse button, more bunnies are added. It is a bit of a performance test. I created a website using 11ty where the documentation will live. I have created a web version of the bunnies test and added it. You can try it here.

Web builds don't have the best performance, but it is nice to be able to share things without having to download anything. If you have LÖVE installed, you can download the .love file on the page and run it on your computer.

Next steps

Next up will be sprite atlas support, animation, and value tweeting.

Source code

The source code at the commit for this post

Lastest source

Entities, updating and drawing in Lumi2d