March, 2020 - June, 2020
ProtoEngine is a 2D engine created from scratch in C++ using SDL, Box2D, ImGui and RapidXML as additional libraries. ProtoEngine contains an extensive editor GUI that allows you to create and test changes on the fly. Bubble Bobble was made using the engine + editor as an example.
To start with, I coded the input system, the GameObject-Component system and the general Game loop. For the input system, I went for a command-based system instead of doing it like SDL. With the command system, you assign commands to specific keys and events (e.g. Key Down, Key Held or Key Up).
From the start, I planned to have a Unity-like editor in style and functionality. The most important aspects of the editor were the Hierarchy, Inspector, Scene and Game View and lastly the Logger for debugging information. I started with the Hierarchy and Inspector as the engine now supported the GameObject-Component system. Once those had their general functionality done, I worked on the Scene and Game view to be able to view the game in two different aspects. I also wanted to be able to support multiple resolutions so the editor wasn't built around the example game. Lastly, I worked on saving and loading scenes with the help of RapidXML. I went from XML as it made it easier to debug issues in data with the limited timeframe.
The initial version of the Editor was done, but it was still lacking in various aspects. The design felt off, so I created functions to wrap around ImGui code to be able to add elements easier. The hierarchy also lacked a parent-child relation. Luckily, with some difficulties adding it due to the Immediate nature of ImGui, I was able to make it work after testing several possible solutions.
Now that the Engine and Editor were in decent shape, it was time to add collision and physics support, I decided on using Box2D. There was a lot of documentation and tutorials out there that explained how to set it all up and what everything meant. One small annoyance was that Box2D was using meters instead of pixels, but in the end it was solved easily by adding conversion helpers when the Entity and Physics needed to be in contact with each other.
The Sprite Editor, to me, is my little baby that I'm quite proud of to be able to accomplish it in quite a short period of time. There's two variations of the sprite editor. One is for animations, while the other is for static images. The static sprite editor did have the option to render multiple frames at the same time which was useful as older games tended to have images split into different locations on the spritesheet. (e.g. large logos of games) Another very useful case was using the static sprites as a life system, I could simply render the same frame 4 times and just remove a frame once a life is lost. With the animated sprite editor, you could add, preview and modify animations and their sprite frames.
The final step was creating the example game inside our little editor. Due to the quite extensive editor, it was easy enough to make the levels and collisions work. However, in the end there were still some bugs with the physics of enemies or strange behavior in later levels that did not pop up in the first level.
Creating an extensive editor was quite the challenge. It was the first time working with ImGui and creating several aspects of existing editors from scratch. While the code isn't quite split up as I want it to be as there's dependencies everywhere, it does the job quite well for the time I was able to spend working on it.
Immediate GUI is great in some ways as you don't need to worry about keeping every "reference" updated, but it can also be troublesome when you have to change something in the next frame and have to account that the GUI doesn't break as something might be missing.
The input is based on the Command pattern. This way, you can assign a command specifically to a certain key and a specific state (e.g. Down, Held or Up). This allows for a lot more freedom and control on what key should be doing what functionality and when. Function pointers instead of writing commands could've worked, but was realized too late in development.
Observers are also supported, but only engine-side. They can be useful for handling "external" functionality than can be handled loosely from the game such as Achievements. You only need to send an event and the observer will do the rest.
For Physics, I chose to use Box2D as there's a variety of colliders. I added support for Box, Circle and Line colliders. One noticeable change to the engine was adding a Pixel per Meter variable as Box2D uses KMS (Kilograms, Meters, Seconds).
For the engine, I went for a GameObject-Component system similar to Unity. Every component inherits from a base, similar to Unity's MonoBehavior.
For ease of use and debugging, I went for RapidXML to save and load the levels. This way you can easily debug by double-checking the readable file if all data is correctly saved.
The Hierarchy is necessary to allow the user to add, remove and select GameObjects or change the parent-child relationship. Due to limited time, drag 'n drop is unsupported, but parent/child is supported through a context-menu (right-click).
The Inspector is used to add, remove and edit components that are on the selected GameObject. The rendering of the component is handled on itself which allows for a customizable component editor.
The Scene and Game View work similarly to Unity. The Scene view is useful to see everything from the scene, which can be outside of the camera view. The Game View shows you what the player would see.
The Logger is useful for debugging purposes as components could throw errors or warnings. The Info tab is useful to see which scene you have loaded, which camera is active, etc.
The normal Sprite Editor can render multiple frames at the same time. In older / retro games, some sprites could be split into multiple parts (e.g. a large logo). Due to being able to render multiple frames at the same time, you can even use it as a health bar and just remove a frame once a life is lost. The possibilities are endless.
The animation Sprite Editor is where you can create animations using the frames you add. You can preview the animations and even see the effect when the frame would be rotated (around the pivot).
Here you can find some funny GIFs I made when developing Bubble Bobble.
