Node Knockout is one of the most popular 48h, online hackathon featuring node.js. Together with my friends: @mchmurski, Ania and @lukaszwojciak we wanted to make a multiplayer, enjoyable game with a catchy idea - popular cat memes as main characters!
The main purpose of the Purrfect game is to jump as fast as you can to reach the highest (300th) level before other players do - for the cat's glory! To run faster and jump higher, you can bounce off the walls or look for Nyan's catnip powerup. After consuming a catnip, your cat is blessed by Nyan cat's rainbow power, and as a result it gets extra skills to reach very high areas.
Purrfect is a multiplayer game and it was written in both server-side (node.js, Socket.IO, express) and client-side (lithiumJS, pixijs, Spine) technologies. In this article I will walk you through some of the most fundamental code fragments but I want to focus only on the client-side part of the implementation.
Animations with Spine
Spine is an application which allows to easily create 2D skeletal animation for games. You have to prepare proper graphic assets by yourself - the whole character and separately all of the individual parts of its body. Once you have this, you can prepare all of the character's animations used in the game. When you're finished, the prepared animation can be exported in JSON or binary file and used easily in further development. This list of video tutorials should be very helpful if you want to understand this topic better.
As I mentioned before, we wanted to use famous cats to be our recognized, which take part in a race. After choosing the most characteristic memes, the following assets have been prepared:
Because of the limited, 48h time of the competition, we managed to animate only the chemical cat.
Rendering with Pixi.js
This is how rendering the basic stage and background looks in Pixi.js:
The following snippet shows an example code of how players are rendered:
Very similar but a little more fancy is with the Nyan's catnip:
When the user hits the Nyan's catnip, he/she gets a rainbow effect:
This is how the rendered Nyan's catnip powerup and rainbow effect look like:
Now lets focus on the most important part of the game: rendering tower and ledges. Each levels has to be generated randomly, but players which take part in a race in the same room, have to see exactly the same tower with identical arrangement of the ledges. That's why we implemented a mechanism to randomly generate levels on the server-side. After generating it, each level is stored in separate room. The following code shows some part of the example generated level:
Having this, we can render ledges on the client-side:
The above code isn't effective. It computes and generates every type of ledge for each row (up to 300). After implementing this, the fps value slowed down rapidly. We came up with the improved solution, to generate only the next and previous fifty rows of ledges:
To detect collision between the player and ledges and walls, we used the simplest but the most effective algorithm for this situation called Swept AABB. Cats and ledges are treated as rectangles, and in each animation frame collision of those figures' coordinates are checked. The whole mechanism was implemented as followed:
As you can see, there is no big mystery in that. Just iterate through each ledge, check if the user's position is in contact with the coordinates of a single ledge and if so, stop the cat and allow it to jump again.
The physics is a very important yet rather easy part of the Purrfect game. We wanted to accomplish someting similar to the classic Icy Tower game, where you can bounce off the walls to get extra speed and jump higher. This is how we implemented it:
I am aware that the above code snippets may not be the easiest to understand. That's why I prepared more appealing examples:
Node Knockout'13 was my first hackathon which I participated in. It was a hard but enjoyable weekend. I had a real occasion to face my tiredness and it turned out, that despite a small amount of sleep I was able to think logically without any major problems.
Together with my team, we had lots of fun during the development. We wanted to create a multiplayer, playable game with memorable characters. Despite many problems and one major crisis, we managed to accomplish more or less what we had planned to do.
The most important thing for me, is to learn new, fascinating technologies, which help in creating html5 games. Such events, are the best way to achieve that. I learned some basics about Pixijs and Spine and improved knowledge related to the node.js and sockets. But most of all, I am glad that I spent fantastic time with people who share similar interests to mine and have the same urge to make games :). I am more than sure, that it won't be the last hackaton, in which I participate.
During the judging process we got a few opinions that Purrfect would be much better with the additional single player mode. Some people were disappointed, that they couldn't play the game, because of lack of any online opponents. Of course, there is a possibility to play with yourself, just by joining the same game in another browser or a tab. But in this case, the game gets boring really fast, it lacks all the fun and enjoyment. That's why we started working on single-player version of the game. The unstable version can be tested here. This *remake* will be fulfilled with the new set of powerups, redesigned tower, all of the planned cats as characters and lots of other *kitty* improvements. We also plan to conquer the mobile world and release the iOS version of the Purrfect game. Stay tuned!