back

Blubmarine

Play

Description

I was always fond of games that come with their own level editor and give the player the power to be creative and share their creations with friends. This is why I decided to make Blubmarine: A simple browser game that lets you build your own levels and share them with others!

Blubmarine is a minimalistic puzzle game about a rescue submarine that needs to rescue divers. The game is played with the arrow keys. There is touch screen support for small screens. Blubmarine has a campaign that slowly introduces a new mechanic with each level and teaches the player the rules of the game. The levels are easy to pass but tricky to get 100%. Still, it is definetly possible to get all the stars in the campaigne without cheating. I made sure of that!

And of course there is an intuitive level creator which you can even use on your phone. Custom made levels can be exported as basic text. Simply copy them and share them with friends so they can play them!

Process

When I first started coding the game I had only bothered to make one icon: the submarine. Everything else looked like colored squares.

an earlier version of the blubmarine game

The editor used to look like this:

an earlier version of the blubmarine editor

Instead of a nice oxygen bar and hearts to represent ship damage, the game would just write it out in plain text.

an earlier version of the blubmarine game

At some point there were spikes in the game. But I removed those because I felt like they didn't match the under water theme.

Also, for the longest time the exit was just a black square. I thought very long and hard about it but I just couldn't figure out what the exit should look like. It took a loooong time before I finally... gave up and just wrote the word "EXIT" in big letters.

an earlier version of the blubmarine game

Eventually the editor started to look better. This is from shortly before I started to add boulders to the game.

an earlier version of the blubmarine editor

It took me a while before I started working on touch controls, but I got there. At time of writing there is still one issue that big touch screens (such as tablets) don't always get the touch controls. I'll fix it some day, I promise!

an earlier version of the blubmarine editor

Closing thoughts

Even though this game isn't amazing, I am very proud of it! I found many people playing and enjoying the game and I was even sent some level strings of custom levels they made. So mission accomplished!

But it's not perfect either. I still have 3 issues with it. First of all because of the way this game works, each time the submarine takes a "step" the HTML is rebuild showing the new state of the game. This works fine, but it sadly makes animation impossible. You can't animate something if it's being destroyed all the time. I had plans of having the divers sway around a little in the water and adding all sorts of little animation touches, but I realised too late that I sabotaged myself. It's honestly tragic because I like to believe I'm quite good at CSS animation... If I ever return to this game this will be the first thing I fix; I'll rebuild the core gameplay from scratch in a way that the HTML elements persist with each step, so I can animate all of it.

Secondly: While at first the oxygen mechanic seemed interesting, the game kind of outgrows it. The last mechanic I added was moving boulders around and this... changed the game. It enabled me to design levels that were all about sliding puzzles. Preserving your oxygen was no longer the main focus of the game, and yet it still is a real danger when playing the levels. It was annoying to play... Conclusion: when building a level the user should have the ability to disable oxygen; to build levels where the player can move around with infinite oxygen so they can worry about other puzzles. So far there is no such feature. In all levels the player has a limited oxygen supply and I've just come to believe that in many cases it makes the levels less fun.

Finally, this game is as quiet as outer space. Sound design is of course a blind spot of mine. I have no musical ability and allthough I've tried I'm yet to find a good way to add nice sounds to my javascript games. Simple things like "a stepping sound" and an error buzz when your submarine takes damage could really elevate the experience but oh well. Maybe the deep sea is quiet? I've never been there. Have you? No? See, I'm probably right then.

image of the roelifant logo, as wel as a sketch showing the skeleton of circles and lines that the logo was made of