< Return to Academics

Bomberman Remake

Project Size
~100 hours
Tools & Languages
C++, HLSL, DirectX
Topics
Graphics Programming
Engine Programming

Assignment

Create a 3D game containing all project requirements using customised Overlord Engine and DirectX.

This project helped me understand how the DirectX rasterizer pipeline works and how to create my own shaders through HLSL.
These skills translate well into other game engines, such as Unity and Unreal Engine materials, shaders and general pipeline workflow (render passes, deferred vs. forward, post processing, etc).

Project Features

  • HLSL Shaders
  • Sprite & Text Renderer
  • Character Controller using PhysX
  • Skinned Meshes & Hardware Animations
  • Dynamic Shadow Mapping
  • Particle System
  • Post Processing Stack

Implementation

PhysX, DirectX set up and core game loop were already implemented by lecturers: Brecht Kets, Matthieu Delaere and Thomas Goussaert.

Bomberman Grid

While movement could completly rely on collisions, gameplay for bomberman can be simplified into a grid using Spatial Partitioning.

Each tile keeps track of the following data:
  • Current obstacle (block or bomb)
  • Players on the tile
  • Location in the world

Now when a bomb explodes, adjacent tiles can be easily identified and players can be notified if they get hit. As an added bonus: this also simplifies placing and moving through bombs when placed.
bombemran grid

Dynamic Shadows

To implement dynamic shadows, we first need to create what is called a shadow map. The idea behind this shadow map is that it stores the depth information from the perspective of the light source. Whenever this depth is smaller than the one of the main camera, the pixel is occluded causing shadow.

The result of this technique has two issues:
  1. Self shadowing
  2. Pixelated & low quality shadows

To fix the self shadowing, a depth bias can be used to make up for the limited depth precision. For the low quality shadows we can use some sort of filtering. I chose to accumulate the adjacent pixels and average them out to smooth the result.
bomberman shadow Visualization of shadow map

Post Processing

As the name suggests, this technique is applied at the end of the render pipeline. To achieve a bloom effect, we need to take a few steps.
  1. Seperate the bright values onto new texture
  2. Blur the texture using Gaussian blur
  3. Combine the texture with original image

To control the bloom effect: a threshold and intensity parameter can be used to control how bright the values need to be and how much we increase their intensity before combining the textures.
bomberman bloom Screenshot with exaggerated bloom effect

Useful Resources