Canvas, Chickens and Gimp

This past week has been spent building a “Rogue-like Dungeon Crawler” as a project for FreeCodeCamp.

This marks the end of the React section of the course and is roughly the half-way point for finishing the Data Visualization certificate for me. As this was the final project in a section, I had feared it would crush me. The previous challenge, Build a Game of Life was incredibly difficult for me. For some reason I kept hitting bug after bug after bug, and if I remember correctly it took just over three weeks to finish, as well as a Meetup group of JavaScript enthusiasts’ help debugging.

This dungeon game was the complete opposite. Granted, the project was bigger than anything I’ve done previously, weighing in at just shy of 1,200 lines of code and 22 PNG files, not including all of the node modules required to build it, but size does not necessarily indicate difficulty.

For me, the key is to break the project up into small pieces, then break those pieces into even smaller pieces. Going from small task to small task simplifies even the largest projects.

Canvas

Given that the project is part of the React section, my initial thought was to build the entire app with React. I have spoken with someone who did this and I guess the final product was such a resource hog that her laptop would overheat. Fearing this, and seeing how taxing the Game of Life was on my system, step one for me was buying a new laptop. I figured stepping up from an i5 to an i7, and from 4gb memory to 16gb would give me everything I needed to slay this next challenge.

The example project just had some colored squares moving around the board which did not inspire me too much. I really wanted a dungeon that looked like a dungeon, with heroes, villains, things that look reasonably good. Having seen some examples of what is possible with HTML Canvas I decided to do some reading to see if it would give me better options for a good looking game.

Canvas, as it turns out, is the perfect solution. For my use-case it has really low overhead and it seems to play nice with React.

What’s That About A Chicken And A Gimp?

My favorite thing about building my game this way is that it allowed me to create PNG files in the open source graphics program, Gimp. The majority of my game is made up of tiny, 49 pixel by 49 pixel tiles. Right in the center of it all is my hero, a chicken. Well, if you want to be technical it’s a rooster, but there’s no need to get all pedantic about farm animals.

So, in the end, the project was much simpler than anticipated. Lots of code, lots of images, but really nothing too difficult to grasp. At least I got a sweet new laptop out of the deal.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s