“Marble Maniac” – GBJam 5

“Marble Manic” is a procedural generated Marble Madness style game made to look like a game for the original Nintendo Game Boy. I made it for GBJam 5 at twitch.io in about a week in Unreal Engine 4. I experimented with many new things on this game jam, most noticeably working with super low-fi graphics in UE4. The result turned out pretty well though it could have used some fine tuning. It placed 205 out of 402 entries. Post mortem and download after the jump.




“Marble Madness” for Game Boy

The original Game Boy was my first portable system and I have many fond memories of playing it. Recreating that experience and producing the same visual output using modern technology seemed like a fun challenge. I had several game ideas but decided to go with a Marble Madness homage. The gameplay and art style are fairly basic but it’s always been one of my favorites. It’s probably the first game that really captured the illusion of 3D. There was actually a game boy version of Marble Madness released which sets a good visual bar for me to reach.

Rendering & Post Processing

For this compo it was critical that the graphic output was identical to the original Game Boy, which is 160×144 with 4 shades of grey. I found a nice tutorial for a Game Boy post processing effect in Unreal.  However it didn’t go that smoothly. I tried setting the LUT but it wasn’t clamping to just those colors properly and the tutorial appears to have the same problem. It is showing much more then 4 colors, and I’m not sure whats causing that because I turned everything else. So instead I clamped the colors in a post processing shader where I can also apply a custom tint. I planned on changing the color as the game was played with a dynamic material instance but never got the chance.

Getting the exact resolution was also a problem. My original plan was to just down sample the normal render it in the post processing shader. That didn’t work out because for some reason the TexCoords weren’t coming through properly and I still don’t know why. Irwatts, who also submitted a game, recommended using a 2D image capture set to the smaller resolution. That worked much better and I think probably would yield better results anyway. Still it had weird problems with filtering the texture and had to do the same down sample that failed before but for some reason worked fine with a scene capture texture. I don’t know why. Here’s what it looks like without the down sample, you can notice the weird filtering around the text especially…


Low-res texture filtering

I was considering also trying an outline shader but never got around to doing it, though I think it could help. Here’s a look at where my post processing material ended up…


Game Boy post processing material

To recreate the feel of Marble Madness I wanted to do an orthographic camera. However I had problems getting shadows working properly which appears to be a known issue in UE4. I could go without shadows but I really wanted shadows to add some interesting depth to the world. So instead I moved the camera back farther and tightened the FOV to make it feel more orthographic. This still seemed to cause some issues with shadows until I tweaked some settings to make it better. I just set them via console commands in the level blueprint. Here’s what worked for me…

r.Shadow.TexelsPerPixel 4
r.Shadow.MinResolution 16
r.Shadow.FadeResolution 16

screenshot00054Fonts were something I had a huge problem with when developing this game. I still can’t figure out how to render a pixel perfect font in UE4. It’s really just not intended to handle this low of a resolution. I learned a lot about importing fonts and exporting them as bitmaps to do custom processing on them. I chose 2 fonts I found online, Early GameBoy, and Nokia Cellphone FC. I had to do custom processing to make a 2 tone font so it could show up as white with a black outline. That was all fine, but getting them to render pixel perfect is still something I haven’t solved and it causes bad aliasing around my text, especially when it is a smaller size. The result was basically the same regardless of whether I used distance field fonts or normal font rendering with an opacity mask. Also I couldn’t use the UI to render fonts because of the post processing so I had to set them up as Text Render components. This caused all sorts of problems because they are all just stuck in front of the camera in world space. Most of the code to control them is also in the player’s blueprint. It’s a mess but I did the best I could in a hurry.

The directional light source took some experimentation to position correctly. I tweaked a few different materials to work well with different angles and slopes. Most of the materials I used are just flat shades. The grid texture uses a world texture coordinate material so I could easily stretch geometry without worrying about texture coordinates. For testing I hooked up an input key that toggle the effect on/off. Here’s a side by side comparison to see what it looks like without the Game Boy effect…


Core Gameplay Mechanics

There is a rolling ball starter project for UE4 but it is very basic. I spent significant time on player controls, adding better movement and air control. Also jumping required being able to detect when the player was on the ground and other stuff. Some predictive camera movement was added to help the player can see farther ahead in the direction they are moving. I implemented a boost ability which I cut, and the ability to morph into a cube which I never ended up integrating into gameplay very well. I wanted to do another pass on player controls and add variable height jump but didn’t have the time.

For the random level generation, there is a great video tutorial called Endless Runner with Blueprints. I would actually even recommend that as a jumping in point for someone who is new to UE4. I have done that tutorial a while ago, and went with a similar method to what he used. Basically the world is built out of sections which start at the origin and have an arrow component indicating where to attach the next section. More sections are added as the player gets to the end of each section. I made a variety of pieces like ramps, jumps, bumps, and physics interactions. Here’s a video showing some gameplay from an very early build of the game…

View post on imgur.com

Navigating the level itself didn’t seem interesting enough on it’s own so I added coins, bombs, blocks, and enemy marbles that are spawned randomly. The enemy marble uses a simple very AI that just pushes towards the player when they are in range. The bomb just explodes and pushes you away. Coins give you some points and a few extra seconds.

I made all the different kind of surfaces by using geometry brushes, converting them to static meshs, and adding convex collision. It was kind of fun to use UE4 as as super low poly modeling program. The materials are all instanced so I can tweak colors in real time to see how they look with the shader. Here’s how the graphics looked at the end of the jam…

View post on imgur.com

Polish Features

For main menu I had an interesting idea. The camera could automatically follow the maze as it is being randomly generated. This would not only look kind of cool but let me watch a level being made so I could test if it was working properly. This is where I also chose to display the high score hoping that would add a small amount of replayablity.

View post on imgur.com

There is a short boot up sequence I added to mimic that of the original Game Boy, only with Nintendo replaced by Franktendo. This may seem like an unnecessary detail but it was absolutely crucial to nailing the Game Boy nostalgia factor for me.

View post on imgur.com

In the last hour of the game jam I still didn’t have any sound or music which was a huge mistake. I quickly made a few sound effects in BFXR and slammed them in at the last minute. I should have spent more time on audio but got distracted fixing bugs in the final hours. Unfortunately there was no time at all to add music. Also, I started submitting early, not realizing that I had an entire hour after the jam to submit. I should have checked how the submission process works ahead of time.

What Went Right

  • Graphics look like a Game Boy and works well in 3D
  • Core gameplay mechanics are solid
  • Some polish features like start screen, boot up sequence, and high score
  • Procedural genreation feels fun to play with

What Went Wrong

  • Gameplay doesn’t have enough depth and variety
  • Player controls could use more polish
  • Font rendering looks bad
  • Waited too long to add sound and music
  • Wasted time implementing unused features

Post Results Thoughts

Scores were awarded on a 1-5 scale. Here’s how I did by category…

  • 3.1 – Overall Gameplay
  • 2.9 – Graphics
  • 2.4 – Sound
  • 2.6 – Overall
  • 1.9 – Gameboy Feel

My game did worse then expected, not even breaking the 50% barrier in overall or top 100 in any categories. Somehow it scored lower then any of my Ludum Dare games. I expected a higher graphics score, maybe I should have focused more on post processing and getting a better color scheme. Visual effects can help sell graphics and I hardly had any. Also I could have polished core gameplay and skipped some of the extra touches that didn’t help, like the boot-up sequence. After watching people play I think the jump button was causing more harm then good without air control.

I wonder if my critical feedback on other games could have hurt my score with other judges. I try to always say some positives but also give ideas for improvement. Next time I’m going to experiment with only giving positive feedback. Also it seems like there was less judging going on here then in Ludum Dares. My game only had 10 ratings, so only a few low ratings could have a big impact.

The results don’t matter much though, and I’m glad I participated. I’d like to continue working on this game, maybe get rid of the 8 bit aesthetic and polish it up. Either way I hope to to give the GBJam another shot next year!

Gameplay Videos

This entry was posted in Game Dev and tagged , , , . Bookmark the permalink.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.