I’ve always been interested in game design & development, and recently a friend (Lillie) & I decided to use some of our free time to try building a game together. As a way to catalog my journey into game development, I figured that it might be fun to archive it all into a blog of sorts. So here we are, the first part in hopefully a many-part series as I explore building games.
As with any new software project, the first step is to start investigating new technologies that might be helpful. Previously, when I tried to start game projects both on my own and with friends, the daunting task of learning Unity always became a huge blocker to releasing something. So this time, I knew going in that I wanted to switch up my approach. After chatting with a game developer friend, I was recommended to look into PixiJS. It seemed like a good way to dive into web game development without some of the overhead of a whole game engine. PixiJS focuses on making interfacing with HTML5’s Canvas & WebGL a bit smoother while not giving up any rendering speed. This appealed to me because it meant I could start doing lots of small “dumb” projects to get more comfortable with the tool and explore different types of games that we might want to make.
To start off, I took a look at a PixiJS tutorial, which seemed like a good overview of the library’s abilities and how to structure code. Having worked in software for the better part of a decade, I started skimming things and jumping around the explanations. I quickly found that this actually led to more confusion. The way video game code is structured is very different from other forms of software that I have worked on. I started getting feelings of imposter syndrome and questioning if I was actually a good developer and if I had the skill set to make a game. But after a few days (very long days with on-call issues popping up a bunch at work), I realized I needed to take a step back and figure out what I actually wanted to build. Rather than just play with things on a canvas, I decided to start making tic-tac-toe. This was heavily influenced by Lillie, who mentioned a different React tutorial that she was working through, focusing on things like Typescript & React through building a game of tic-tac-toe.
Once I felt like I knew what I wanted to get out of PixiJS docs, I felt more confident and took another stab at my code. I started out by drawing a grid, an “X”, and an “O”. With my assets, I started working on just drawing the board and storing user clicks to keep track of moves. I then got hung up on switching between who's move it was. Instead of spiraling into imposter syndrome again, I realized that I should just punt that problem to future me and work on something that felt more fun and like a win. So I started drawing the actual pieces on the board.
As I worked through this small project, I noticed that I needed to step back and think about how I handled blockers. I often take for granted tools I use in my day-to-day, like Agile/Scrum, pair programming, or the ability to refocus on a 1 point ticket (a very helpful tool when I feel blocked or worn out). So, I took a step back and picked up the 1 point ticket of Draw an “X” or “O” on the screen when the user clicks, not even worrying about placing it correctly. This lead to a great flow of work on smaller tasks that felt like huge accomplishments.
Then, after these small wins, I went back to the problem I had before, and everything clicked into place. Turns out I forgot some returns in this code block (fix is in comments to see the diff).
const swapTurns = (turn: Symbols): Symbols => {
if (turn === Symbols.X) {
turn = Symbols.O;
// return Symbols.O;
}
if (turn === Symbols.O) {
turn = Symbols.X;
// return Symbols.X;
}
return turn;
// return Symbols.Nothing;
}After that, I just felt like I was cruising for the rest of the project. Adding lots of little features, which while not necessary for what my goal was with this first game, made me feel like it was something that I wanted to show people. And also inspired me to start writing about this whole game journey!
Check out the game here and the code here and hopefully I’ll have some other small games to write about soon!
