I received an email the other day from one of our readers asking a few questions on how to learn game development. The questions are ones that I’m sure other developers have asked who are just getting their feet wet in game development, so I thought it would be a good idea to post the questions and my responses so that others may benefit.

“Hi Steven,

“Your blog for the space shooter was outstanding, but I would be lying if I said I understood every piece of the coding. I understand fundamentally what is going on, but when it comes to the nitty gritty all the pieces don’t always line up in my head. I have tried duplicating what I think makes sense into other avenues to get a desired effect and rarely does it work, which leaves me to believe I can follow the code but cannot create my own, which is part of the fun of programming (or what I hope to do at least).”

Q. How did you learn? I see you have a CS degree. Did you learn it all in school or other avenues first?

I guess this is a good question to give you a brief (ish) history of myself. I’ve been programming for almost 10 years now. I first started programming in High School when my friend showed me that you could program math equations on a TI-83+ calculator. It was a lot of fun to be able to take a math problem and just have a program ask for the input and solve it for you. We then discovered that you could also play games on the TI-83+ (like Mario and BlockDude), and it sparked my curiosity that a simple calculator could be programmed to play some fun games.

That curiosity lead me to try to create a simple text based RPG on the calculator. At the time my friends and I were playing a MUD called Divine Blood which was the inspiration for the game. I didn’t get very far on it, I think I just created a few connected rooms, but it was enough that I wanted to take the programming class offered at the school. It was just a basic Java class but I ported my simple RPG from the calculator into a town where you could walk around (it didn’t have anything else besides streets).

After that I fell in love with programming and slowly tried to learn bits and pieces as I went that interested me. When I went to college I made sure to choose a university that had a great CS department and would teach me valuable skills which I could apply in the workplace. Through the classes I learned the basics of Object Oriented Programming and how all the basic data structures worked in C++, and learned design patterns and created a user driven program in Java.

Outside of school, I began teaching myself web development. I can’t remember why I liked it, but I loved programming in JavaScript and creating web pages. I continued to read as much as I could find on JavaScript and HTML and started to develop my own site. At this point I learned about the Canvas API and immediately saw it as a way to pick up where I had left off trying to program a game.

I started with a simple project for my first game: Galaxian. I knew that it was simple enough to understand the concepts but still outside of my programming skill level that I could learn a lot from it. So I began to research the advantages and disadvantages of the Canvas API, what things I should look out for, and how to get the best performance out of JavaScript. I wanted to make sure that my simple game ran at 60FPS.

I developed and researched together for a few months, building the game in small sections one piece at a time. I started with the easy stuff (moving an image across the screen in a loop) and slowly progressed to the harder stuff (like quadtrees and object pools). Because I did everything one step at a time, I was able to learn everything I wanted to and still have the game built as the outcome. I didn’t find it difficult to work through the tough parts because I had taken my time to understand how my game was coming together.

The game probably took me 3 to 4 months to develop, and I enjoyed every bit of it. Once the game was completed, I made a few other games like a Breakout clone and Asteroids. Again, I tried to focus on simple games whose concepts I could easily understand but which challenged me to learn new techniques.

I still continued to research as much as I could on how JavaScript worked and how to program better in it. To this day I still try to find things I didn’t know about it and try a new library here and there. As you can see by my blog posts, this learning took a few years (I think I started this blog 2 years ago). Even two years ago I didn’t know exactly what I wanted to do with programming and even the focus of this blog was in flux (my first few posts were about how to develop a website, then it slowly converted into a full HTML5 game development site).

Currently I am a web applications developer by day and a hobbyist game developer by night. I enjoy working in the web and making web applications. It’s taken me 8 years to fully understand what it was I wanted to do with programming. This has allowed me dabble in many programming languages (like Java, C++, Bash script, Ruby, PHP, and MySQL) which in turn has helped me to become a better web developer (allowing me to maintain my own WordPress site and theme).

Q. Do you suggest any particular language as being a good starting point? I was wondering if you had an opinion of the best “launching language” for learning programming?

I don’t believe there is a particular language that would be a “good” starting point. All languages have their advantages and disadvantages, and I don’t think any language is easier to learn over another. My advice for you would be to choose the language you are most interested in or that you enjoy programming in the most, then dive right in. Figure out how the language ticks, what pitfalls and quirks to watch out for, and understand the programming patterns for that language.

For example, if you decide to start learning more about JavaScript, take the time to understand what JavaScript is, why it’s called a prototypal language, and how objects are the center of it. Then learn about each object. How do arrays work? What does each function do? What makes an array fast or slow to traverse? What’s the different between an array and an object if both can be iterated over? By starting with the basics, you’ll begin to see how everything fits together and how you can make what you want happen.

Remember, this process will take time and possibly a few years. As the saying goes, “Rome was not built in a day.” Learn how to learn and enjoy the learning process.

Q. Do you have any recommendations for a middle ground between the basics of programming (Code Academy-esque) and really getting out there and learning to do it yourself (more like the things you make)?

Depending on your language of choice, there probably will be some sites that help you learn more advanced techniques. For example, in JavaScript there is the You Can’t Javascript Under Pressure site. This simple site challenges you to create 5 functions that fulfill a certain criteria as fast as you can.

However, the best way to progress past the basics of any language is to give yourself a simple project and then try to complete it. Remember to keep it simple and relatively small; You don’t want to start with something so big that you’ll never finish it. By giving yourself a project and making it something you’re interested in, you will become motivated to do the research and find the best way to make the project work.

For example, write a simple To Do List program that accepts text commands to add, edit, and delete To Do items. Then write a GUI for it and figure out how to save and load the list so the user can have access to it later. Slowly build up the list with cool little features that make it more fun to work with. Just this one project should help you learn more than Code Academy can teach you.

If you want to start making games, make the easy ones. Start with pong, then add a new feature that makes it more interesting (like power-ups). Maybe add a few more once that’s completed. Once you’ve finished with Pong, choose another easy game and start again. Wash, rinse, and repeat.

Q. Do you have any recommended web development compilers? Whenever any of my code is broken it just displays nothing. Having some sort of a debugger/compiler to know where it’s crashing would be amazing but none of my courses/research have come up with anything.

Chrome’s Dev Tools or Firefox’s Firebug are both great resources for web development. They both will output errors in your JavaScript code and let you see where it broke. When I’m writing a game, I always have the Dev Tools open in it’s own window and watch the console output for errors so I know what I broke.

Advanced Dev Tool usage allows you to set breakpoints in your JavaScript code and see exactly what the state of the code is at that point, see what functions are taking the most time to execute, and can even help you debug the animation loop (which is always difficult).

Another resource that can help you see where you might have problems is JSHint. Just paste your code in and it can help you detect errors and problems.

Q. When you look at implementing new concepts that are already created (two examples in your galaxian game come to mind – the key presses concept and the quadtree), do you look at the code, try to understand all of the pieces, but ultimately just copy and paste it into your code or look at the code, ensure that you understand it and recreate it from scratch in your code with modifications as needed?

This one really depends on what you personally want out of the project, but I think most people will just want code that works and usually Stack Overflow provides. For most cases when we copy code it’s small components that accomplish a needed task that we weren’t able to figure out ourselves. There’s nothing wrong with that, but if you always copy code without even trying to figure out the problem yourself first, then this is probably the wrong way to go about it.

For me personally, I’ve done both. For the key presses I just took the code and only took the time to understand how to use it without trying to figure out what it was doing. I didn’t really care how it worked so long as it did what I wanted since it was such a small component of the game. However, after a few games using it I learned what it was doing.

In the case of the quadtree, the code didn’t exist in JavaScript at the time I wanted it, so I had to learn it from Java. It took me some time to figure out what it was doing and how it worked. I couldn’t just copy and paste it since I needed to port it to a different language. In this case, I really had to dig into the code and understand what everything was doing. I’m glad I did though because the quadtree was a major component of my game and had I not understood how it worked I would not know how to debug it when it broke (which it did many times).

So for small parts of your project it’s ok to copy and paste without gaining an understanding first since the project as a whole doesn’t depend on it. But it would still be beneficial to learn what the code is doing later on when you’re not so concentrated on getting the project done.

On larger components though, having a firm understanding of the code will greatly help you as the project goes on. There is a saying the development community that 90% of the execution time of a computer program is spent executing 10% of the code. If the code you copied is in that 10% of the code then there are bound to be problems that arise. If you don’t understand the code you will struggle to understand how to fix the problems when they do occur. In these cases, take the time to get a good grasp of what the code is doing before you just paste it into your project. You’ll be happy you did.