This introduction should give a basic understanding how to use Apate. The most important part is the scene with the entities (represented as Obj)
Scene Graph (engine.scene)
Starting with the scene graph as it is the most suitable way to create different types of game objects. As the name says it's a graph, which is leading to a tree structure. Every node inherits the World.Obj class. This Obj is a simple container class for storing other nodes within the tree. It also also contains the position relative to the parent node and the behaviour how it gets displayed. The plain Obj class itself doesn't implement this draw method since it's the root of the inheritance and not designed to be used for rendering content. To actually display stuff there are multiple other Obj-inherited classes which we take a look at later.
Lets look at a simple scene graph as an example to understand it:
The type of the node in the tree is written inside brackets.
> Scene (Obj) - The root of the graph, no direct behaviour
|--> Player (Obj) - An empty container (used to move the player)
| |--> Image (Sprite) - The sprite of the "Player"
| |--> Body (Body) - A physics object
| |--> Collider (Collider) - with a corresponding collider
|
|--> Background (Sprite)
|--> Enemy (Body)
| |--> Collider (Collider)
| |--> Image (Sprite)
Types of Nodes - Obj's inheritance
To get a detailed explanation of all different scene graph's node types take a look at the documentation of World.
Other Helper Objects
A general overview of the core classes can be found here: Core
Vec: just a simple 4-dimensional Vector (x,y,z,w), but also designed to be used for colors (r,g,b,a -> same as x,y,...). Actually it could be used for more dimensions, but all mathematical operations only work on the first four.
Transform: an object that describes a transformation. Stores vectors for position, rotation and scale.
Texture: the thing (mostly a real image) that gets uploaded to the GPU. (not really relevant for game devs, but still important to know how things work together behind the mask)
Tile: an abstraction of an image. Why? Multiple Tiles could be different parts of the same image (cutouts). Remember: Images are always rendered as Tiles.
Bringing it all together (aka the main loop)
To bring it all together and finally be able to see something on the screen there is the Apate class which acts as the mount point of the engine. It stores the active scene graph (scene), manages timings and handles the main loop.
The function init() and update() can and need to be overwritten to inject own code to the engine.
Before Loop: init() is only called once at the start of the engine. At this point the main loop isn't executed. It is designed to load the data needed to run the game. It should return a promise, which will be awaited before the game starts.
Main loop:
Once the game loop is entered it runs for every frame. At first update() is called to change values of Obj properties within the active scene. Then the active scene will be drawn. For handling deferent frame rates the same use the delta time (time since last update in ms), which can be accessed within Apate by this.delta.
Examples
Let's walk through some basic examples, to understand the concepts. At first: Drawing Sprites