Creating the Art for Gopher Kart
In the months leading up to GopherCon, my wife Jamilet and I had come up with the idea of creating a “small” browser-based game for the convention using the racing theme. Neither of us had ever worked on a game before and we had no idea what was involved. However, we knew we wanted to design and build something special for the awesome Gopher community.
The original idea was to create a game where Gophers raced each other around a track. We looked into how much time that would take and realized working part time meant we wouldn’t finish the game in time. So we decided to build a game that was simpler and settled on a coin collection game.
Usually I start my artwork from a sketch and then create a cleaned up version of the design. This is a pretty straight forward process. The transition from the standard vector illustrations to pixel art ended up being much more difficult than I originally anticipated.
With pixel art, less is more in the sense that one wrong pixel really stands out and you actually have to be much more precise with every pixel you put down. Since I had already created the logo for GopherCon, I decided to work off of the logo design to create the main Gopher for the game. I had started off working in illustrator with a custom grid to create the pixels, but found the process to be extremely slow and clunky.
While doing some research on the whole pixel art thing, I discovered that there were a few programs out there solely dedicated to creating pixel art and I decided to learn Pyxel Edit. Jamilet decided on a Javascript framework for making games called Phaser, which is an open source framework for creating browser-based games with canvas.
Working with Pyxel Edit helped things progress quickly and I was able to finish the main Gopher along with the two alternative Gophers with a simple color change of the main design. With Jamilet working on the logic for the game, I moved onto creating the various scenes and assets needed to complete the design.
Jamilet and I decided the Gopher needed to encounter obstacles while driving to make things both more difficult and exciting. So I created NPC (Non Playable Characters) Gophers which you were going to have to maneuver around in order to pick up the coins and increase your score.
Having completed most of the assets, I moved onto animating the sprites for the main Gophers and the newly created NPC Gophers as well. Frame animation is literally drawing each individual step of the entire movement. The example below shows the individual frames along with the intended final look in motion.This process was extremely tedious and time-consuming but it really made a huge difference to see everything come to life.
With all the assets and sprite sheets ready to go, I moved onto creating the opening menus screen, which of course had to be animated as well. I drew a lot of inspiration from Sonic the Hedgehog’s opening menu and re-created it with the Gopher.
Throughout this whole process Jamilet and I encountered numerous issues and hurdles to overcome. Even though it’s not a perfect game, it’s a game that we made from scratch with love for everyone in the Gopher community to enjoy.
Special thanks to.
Jamilet Zelaya | Lead Engineer
Renee French | The original designer of the Go Gopher