During the month of November, my wife Anna and I participated in our second GitHub Game Off challenge, where you have 30 days to build a video game on the platform of your choosing. Afterwards, everyone who participated rates as many games as they can during December, and a winner is declared in January. It's a two-player game called "Catch More Butterflies," where you play as a frog.
I always do browser-based games in JavaScript. Anna proved these past two years to be extremely quick and adept at drawing pixel art using the free graphics program Gimp. My part, the programming, takes longer, but artwork is what really makes the game. You look at YouTube videos or documentaries) about Nintendo, and it’s all about the artistic vision. Not that we compare to Nintendo, or ever will, but I think this little one-month challenge indicates we could come closer than we think given more time and practice. For instance, art-wise, I would like to get Anna to make sprite animation frames next time, but it was hard for her to find time to do that, and even if she had, I wouldn’t have had time to do it justice on the programming side of things anyway.
Last year, I “faked” a game using Vue JS and regular HTML DOM elements. It was essentially a bunch of website button elements, which formed a rather abstract button-clicker game where you had to click the correct “ingredients” (buttons with an image of Anna’s ingredient pixel art on them) to make and serve dishes at a restaurant. This time I actually used the API meant for 2D games on the web: Canvas/WebGL. I did this by way of the JavaScript video game framework Phaser, which standardizes some aspects of Canvas, inputs, sound, etc.
Although Phaser makes it easy to get started, I was never able to take advantage of either of its physics engines, Arcade and Matter JS, which was very frustrating at times. The most salient example of this was when I needed to detect collision between a frog’s tongue and a butterfly to register a capture. Phaser comes with collision and overlap detection, but since the frog’s tongue image actually rotates to simulate a swinging motion,1 the detection doesn’t work. This is because the detection feature doesn’t pay attention to the rotation property of the image box, but rather uses the original rotation from when the image was added to the game scene. So I ended up having to detect collisions mathematically by iterating over all the butterflies and checking their distance from the tongue and the angle, but it’s not completely accurate and occasionally the detection just flat-out fails.
Another example of something I thought Phaser was going to do for me but didn’t was making the frogs travel on the lines drawn by the players. I thought I was going to be able to use the PathFollower class, but I never could get it to work. I’m sure I was doing something wrong, but in the interest of keeping progress going, I ditched that class and did it all mathematically. I am manually relocating them on the x,y pixel axes, and I feel like the animation skips a little because of this, but I could be wrong.
The hardest part was making the frogs point the right direction on the line. This was where Anna really saved my butt, because I would have never been able to figure out that math on my own. However, I gave her the traditional x-y coordinate system for solving the problem (x going left to right, y going bottom to top). When it kept not working in the game for quite a few hours, she realized the game was using a y axis going from top to bottom! It didn’t even occur to me that the direction of y was different or even that it mattered. After throwing her scratch paper at me and walking out of the room for a few minutes, she came back and gave me the correct numbers to plug in.
Overall, I think this year was a marked improvement over last year. “Catch More Butterflies” is more interactive than “Hole in the Wall,” less annoying to figure out, and is two-player. However, it’s hard to play because you need two players physically at the same computer, and as I mentioned, the butterfly-trapping code is a little glitchy. I wanted to make a one-player mode of some sort and add online two-player mode, but I didn’t have time as part of the challenge. I might update the game next year to at least have one-player mode, but getting online two-player working will require a Node server using Web Sockets. I fully plan on learning how to do that... one day.
Originally, the game was made with humans and butterfly nets, thus the swinging motion, but we decided to make it frogs with tongues at the last minute. Back