Well I certainly feel accomplished today!

I just released version 0.1 of my current project: Bygone. It is an action-adventure platformer focusing on Isiah and his robot companion: Roberto. I will break this post into short sections about the things I found fun / interesting while creating the first version...

If you have any requests on how other mechanics were made, feel free to request an explanation in the comments! 👨‍💻

Reactive Music

In it's current state the game's music transitions into more of an aggressive, "fighty" theme based on your proximity to the nearest enemy. After a certain distance threshold, the song is muted, and scaling of the underlying combat music is ignored. The code responsible looks as follows:

👆 Click image to open in GitHub

The variable ostL2 represents the second "layer", so to speak, of the song. Both tracks are played at the same time and loop in parallel, therefore increasing or decreasing the volume of the combat-layer does not throw the two tracks out of sync. Instead of stopping the song when there are no enemies nearby, it's volume is simply set to 0. 

Chainable Dialog System

When architecting the system, I wanted to put in a fair amount of effort into allowing it's usage to be as streamlined as possible. This is because the dialog is going to be the backbone of Bygone's story. To that end, I decided to build a system that is chainable (through the use of JavaScript promises), and can support pauses between lines in that chain. It's implementation looks like this:

Storing the textual lines in the function could probably be a ripe area for refactoring-enthusiasts, however I'm a believer of reducing complexity by keeping your dependencies near. The function also communicates with a scene running in parallel to the game scene (this.hud) to display the subtitles as they're being spoken.

I follow a specific naming convention for voiceover assets that are preloaded during the boot scene (`vo-${speaker}${lineNum}`), thereby removing the unnecessary step of mapping audio assets to specific lines of dialog.

Because all of this is returned wrapped in a promise, the functions calls can be chained. So implementing a specific scene of dialog ends up being as simple as this:

Easy peasy! 🍋

Adaptive Design Techniques

You may have noted that the playable "screen" of the game is represented by a square aspect ratio (1:1). The reason I chose to do it this way was to maximize the playability of the game across as many platforms and orientation preferences as possible...

You'll notice that in a landscape orientation such as this, the game screen is flush with the top and bottom edges. If you were to flip the orientation to a portrait orientation, the square would then be flush with the left and right edges.

Well, the beauty of this is because the aspect ratio of the screen area is 1:1, it will remain the same size regardless of screen orientation!

I think that's all I want to talk about today. Check back when you can for further updates to the game and devlogs! ✨