The Canvas System

Introduction

The Canvas System (also known as the new UI System) is a way of drawing static 2D objects to the screen in such a way that does not conflict with how normal 3D world rendering occurs.

The Canvas System gets its name from a special component that it adds to the game project, known as a Canvas Component. This component is special in that it does not do anything on its own. Instead, it acts as a marker for the Canvas System to discover game objects that can be rendered.

Why

As stated, the Canvas Component does not do anything on its own. This begs the question however: why even have it in the first place? Having the Canvas Component allows us to design the Canvas/UI System to be completely ignorant about the types of UI components that can exist. To the Canvas System, any game object which is a child of another game object with a Canvas Component, is able to be rendered as a 2D UI element.

This fits in nicely with the way our engine currently works in regards to game objects. Once one has the current Scene, they can iterate over every space and grab out all game objects in each space. With this, the Canvas System can simply filter out all game objects with a Canvas Component and pass them to the UIRenderer, which takes care of how to render each game object, even if said game object for some reason cannot be rendered as a 2D object.

How it Improves over the Older System

This new Canvas System is an improvement over the old UI System for a few reasons. The first is that, unlike the old UI System, the Canvas System does not store a list of all game objects that can be rendered or, in the case of buttons, interacted with. Instead, it goes out every update tick and gets the list again. While this is less efficient since UI elements are no longer cached, doing this allows the Canvas System to have dynamic UI objects, meaning that UI objects can be added or removed at runtime.

Another reason the Canvas System is an improvement is that it is easier to think about. The name Canvas is in reference to a painter’s canvas, where one has a set field where things can be drawn/painted on. Everything drawn on the canvas is relative to that canvas’s position, meaning that if the canvas is moved, then so are all of the objects drawn on it. This was already being done with child game objects, however, calling the “parent” game object a canvas is slightly easier to visualize.