Why?
Over the summer I spun my freelance graphic and web design business off into more of a collective brand. Being tired of non-responsive websites still being relatively common and being created every day thanks to services like Wix and Weebly, I felt I needed to advertise our web design services to produce something that works on every screen. But what does every screen mean really? I started toying with the idea of bringing my site to something out of the ordinary and being a retro gaming geek, I thought the Game Boy was the way to go.
The Visuals
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.
User Experience & the ROM
Given my limited programming experience, I knew this would be the difficult portion. How do I get these graphics into a functioning Game Boy rom? Other than an Introduction to Computer Science college course I took, I don’t have much programming experience — especially not for a system from the 1980s.
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.
