Ancient Beast

Open source browser game

An open source browser game where players summon creatures to defeat their opponents.

I fixed a few issues related to the user interface and usability.

One versus one gameplay example

Time Frame

March to April 2020

Languages and Tools

Phaser, JavaScript, CSS

Motivation

I wanted to experience what it is like to contribute to an open source project.

Contributions

Suggested: I suggested improvements to the resource bar design so that players know what actions they can take in various situations.
Development: I modified the style of the in-game statistics with CSS to improve visual consistency. I implemented the resource bar improvements with JavaScript and CSS based on the maintainer's design. A maintainer is someone who manages what work needs to be done and what code will be included in the official game. I also implemented visual feedback with JavaScript to show the result of an action before confirming the action.

Challenge: Fix and Improve Resource Bar

Creatures consume resources to use their abilities. I fixed a JavaScript issue where a creature's resource bar sometimes renders past its bounds.

Resolved Issues and Suggested Improvements

I noticed an opportunity to improve the resource bar while I was fixing the issue. I suggested it to the maintainer who then redesigned the resource bar to communicate more information to the player.

For example, a darker yellow indicates the resources an ability will consume while the lighter yellow indicates the resources that remain after an ability is used.

Resource bar where top half is dark yellow and bottom half is yellow — Redesigned resource bar shows how much resources would be consumed and remain after casting an ability

Modified Pre-existing Code to Implement Redesign

In my first attempt at implementing the redesign, I tried to change as little code as possible to avoid introducing more bugs, but the colours could not quite match the specifications.

After gaining a better understanding of the code, I was eventually able to implement the redesign with the specified colours.

One resource bar with top half is yellow and black stripe pattern while
bottom half is yellow; Another resource bar with top half is black while
bottom half is yellow and black stripe pattern — Final iteration of redesign that communicates more about resource usage

Reflection

Measuring Success

My contributions to Ancient Beast were successful since I was able to fix all the issues I started working on. I was even rewarded monetarily for my efforts.

What I Learned:

Write better code: I learned how to write better code to meet the standards of the maintainer(s) before they merge it into the official game.
Work with pre-existing codebase: I learned how to work with a large and pre-existing codebase, which differs from my previous projects that are smaller and written all on my own.
Communication: I also learned how to work and communicate with other programmers, which I did not have to do while working on my previous personal projects.