A few days after the launch of Regina Cemetery Tours – The Game, it came to our attention that there was a detrimental bug in our game. We heard various reports of if, but were finally able to track it down thanks to a gamer named “Stephen”, who was actually one of the individuals who donated to the creation of the game.
Bug Symptoms:
Upon collecting 4 purple stories, the game goes into a cut-scene. Following the cut-scene, the user can navigate their player to various points in the cemetery. However, there appeared to be invisible walls blocking the user’s progress. As a result, this also allowed to user to “clip” through objects in the cemetery, such as graves, trees, buildings and even the fence that surrounds the cemetery.
Bug Causation:
The cause of the bug stems from how the cemetery is positioned. The game uses basic web development languages (HTML, CSS and JavaScript). To horizontally centre an object in CSS, the easiest way is to set the left position of it to 50%, and then use margin or translate to move the object half the width to centre it. Like so:
Normally this would be fine, but the cemetery isn’t perfectly centred. The entrance to the cemetery is more on the right side than in the middle. This means we had to use an absolute distance (pixel) to center the cemetery.
By using margin we could centre the map on all devices (computers, laptops, tablets, phones). We then used the distance the character needed to travel to get to the area of the cutscene (for example, 3000px up, 4000px right). We would use these numbers to reposition the map to the exact position.
However, what we misunderstood was that the value of left wasn’t dependent on the size of the cemetery, but the size of the screen. Although the cemetery would initally be centred, once we reposition the map, the values computed would be different. For example:
Screen size: 1536px / 50% = 768 + 3000 = 3768px
Screen size: 1920px / 50% = 960 + 3000 = 3960px
Although the change doesn’t appear very big, even a single pixel change can move the bounding boxes of the graves, walls, trees and people in the game. This means that suddenly everything has shifted. An example of these “shifted” bounding boxes are shown in the below image:
This allows the character to walk through trees and people since the bounding boxes are not in the correct place. Since Stephen had a different size screen, this occurred for him, but not for us when developing it.
Bug Solution:
Instead of setting the final position of the map at a fixed value, we use JavaScript to get the computed left value and add the difference in the position to it. This means that although the final position is different between computer sizes, the difference would match the screen size, thus keeping the bounding boxes in the correct place. We also added some to regenerate these values if the screen size changes.
Thank you to Stephen for discovering this bug and for helping us fix it.