Tiled, PixiJS and Rapier
Before doing this weeks project update, let's have a quick review of the main tools used in creating this game.
Tiled: Level editor that is highly configurable and is not made for any specific game engine or tool. The editor exports to different file formats and you can either use a game engine that supports these files (most do, if not officially, through user created plugins) or do your own import of the files.
PixiJS: A 2D library for drawing in a browser. It's fast, well structured and in general a pleasure to use. In addition to creating visuals, the library also comes with functionality for interaction and event triggers, making it a breeze to do interactive content.
Rapier: Physics engine written in Rust with Wasm support for running in a browser. Believe it or not but it is fast, well structured and... a pleasure to use. Rapier has not been around that long and is currently in an alpha release, but that should not be interpreted as a reason to avoid using it. The speed and stability of the simulation is fantastic and few, if any, alternatives are available for browsers.
Progress update time!
The basic support for creating levels and doing minimal object configuration with Tiled, has been so useful that it seemed like a good idea to expand the support. From the original version of adding colliders to objects, the support now includes full configuration of physics and creating complex entities out of many objects. Let's have a look at each step in the evolution.
First drawing shapes to create colliders for objects and the world itself was added. This was shortly thereafter expanded to include creating multiple colliders for each object and did not take much additional work to implement, as code wise game objects already had the ability to have multiple colliders. The colliders got additional configuration support in Tiled, making it possible to set if the collider is a sensor and what type of collision group it belongs to (groups decide what collides with what).
Code wise there was also support for having multiple rigid bodies, but in Tiled the setup always assumed that there was one main rigid body in the center of the object, and attached all colliders to it. For colliders in the world, they did not have any rigid bodies, as they were meant to be static colliders for the tiles making up the world.
The next step was to add placing rigid bodies in Tiled and to configure what rigid body a collider should use. The rigid bodies also got support for what type they are: Fixed, dynamic or kinematic.
With this in place, we got to the good stuff! Joints. Everything gets more fun with joints, that's a fact. Support was added to place joints and to specify the two anchors that are connected to rigid bodies. This includes setting up the type of joint: Fixed, prismatic or revolute.
Now it was possible to create the full setup for a tile, like demonstrated here with this fall-trap.
This was the end of the original list of physics support to add in. But, while working with it the idea of being able to do this setup in the world as well had started to grow. It would be nice, to be able to combine several objects to make one larger entity. This idea would make it possible to create complex objects that have full functionality and that can easily be copied and tweaked to fit each situation.
The first draft of this was made during the week and got implemented as a special layer in Tiled called a constructor layer. The whole layer will be treated as a single object and everything you add to it, will be collected and organised by a Constructor base class that is then derived into the specific types of object.
The lift was created to test having a kinematic body that is moved and drags the dynamic bodies with it. There is also a sensor that checks and stops the lift, as an example of how you can take this elevator and by moving the sensor you can get it to stop at different levels and work as you want with no additional code changes. In addition constructors can both be scaled and rotated to fit into new situations.
Here is a final video showing the constructors in action in game.
The plan for next week is to wrap this up with some code cleaning and documenting. After that, time to move on and leave the wonderful world of game physics behind.
If curious, the current test build of the above shown content can be played at dev.spelmakare.se/arw. Use the green burger menu to toggle between levels.
Spelmakare is game development using web technologies.