I ported my website to Game Boy

Close-up photo of the Trenta.media website running on a red Gameboy Pocket
Close-up of the Trenta.media site running on Game Boy Pocket

Why?

The Visuals

Pixaki 3 for iPad

The Game Boy is old tech, that goes without being said. That comes with limitations starting with the graphics. It’s not as easy as just taking your jpg and png from an existing project and dragging them into a project for Game Boy. Instead, you have to create pixel art that takes resources into account in the Game Boy’s 2-bit color spectrum. Of course, there are other things you have to look out for because of the hardware’s limited resources like the fact that the Game Boy converts everything into 8x8 grids but I won’t get into that. To achieve this I primarily used Pixaki on my iPad with Apple Pencil. To add text, I exported the graphics and airdropped them to my Mac. On my Mac, I used Aesprite and the Early Gameboy font.

Aseprite running on macOS

User Experience & the ROM

GB Studio on macOS

Luckily, after a short bit of research, I found a relatively new app called GB Studio developed by Chris Maltby. GB Studio allows you to put together a simple Game Boy game using a drag-and-drop GUI. Yes, it’s made primarily for creating top-down RPG games, but after importing the background graphics that make up the contents of the site, I simply swapped out the main character’s sprite with a cursor sprite and sped it up to 3x normal walking speed. The idea is that the website is scrolled using the cursor similar to the way the Playstation 3 and Playstation Portable web browsers function. After some of my graphics were too complicated and generated too many 8x8 tiles, I adjusted them and the GB Studio spat the rom file out without issue.

The Result

I have a fully functional Game Boy rom of the trenta.media website! It works on emulators and real hardware. From here, I uploaded the rom wrapped in a javascript Game Boy emulator and have that hosted here. But… where’s the fun in just having it run on an emulator? The next step was to get some blank cartridges and make the site run on actual hardware and that’s exactly what I did.

I feel this helped sell the fact that it’s an actual Game Boy rom instead of just something designed to look like one.

Notes

If you visit the trenta.media site today, you’ll notice that it has changed quite a bit. We dropped the astronaut in space design, but you’ll still find the three services icons.

If you’re interested in trying the rom yourself, you can emulate it in your browser or download it.

Now that I know my way around these tools, I started working on a Game Boy game for fun in my free time. I hope to share the progress of that in the future. Follow me on Instagram or Dribbble to keep up with my projects. Thank you for reading.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store