Red Panda Mini Game

Red Panda Mini Game Screenshot

Red Panda Mini Game Screenshot

On my holiday break, I decided to create this new blog for random interesting stuff that I make or come across. The design is my own extended on the default WordPress theme.

This first post is about how I made a mini game that is a small easter egg in this blog. It has a highly thought out name: “Red Panda Mini Game”.

Intro

First off, If you want to play it, click on the sleeping red panda on the top right of this page. The controls are pretty straightforward and are shown in the game. The game is far from complete, as it took around 10 hours to make. It is missing many standard game elements, such as health, score, levels, etc., but I might continue it later. I have big plans!

Below is a time-lapse video of the couple days of development involved. Please don’t scorn me for using Windows 8–it is my main computer for the holiday break, but you can see I’m actually using Linux via SSH to code. The time-lapse which was made with CamStudio, took a screenshot every second at 1920×1080. Lots of editing was done to make it last 2 minutes instead of 20!

Libraries

pixi.js Logo

pixi.js Logo

After a bit of research, I discovered a new 2D sprite library for JavaScript, released at the start of this year called pixi.js. It claims to be super fast and renders to WebGL with a fallback to canvas. The demos (warning: audio) listed on the project’s github README file are most impressive and run smoothly. The learning curve was minimal as the getting started tutorial was straightforward to understand. After a bit of a battle with node.js, and a dependency of Grunt, I finally managed to build pixi.js and got on with the actual game.

pixi.js includes a decent texture atlas module, which will read JSON generated from the excellent Texture Packer. I have to mention that the video does show that Texture Packer is unregistered, but I did purchase it a few years ago and just haven’t entered in the code on this install.

pixi.js unfortunately does not have sprite animations which I had to implement myself. Oops, I implemented my own frame animation class, when there was already one in pixi.js. Thanks to Mat Groves for the heads up.

It doesn’t have physics functionality (I specifically needed bounding box collisions), but that is totally understandable as it’s a graphics library and not a game engine.

pixi.js’s fall back to canvas worked with no problem. To my amazement, loading up the game in IE10 worked perfectly.

Keyboard input was an easy choice after discovering Mousetrap. It’s pretty flexible: allows cross-platform modifiers, intelligently handles shift, and even allows you have ordered keystrokes to have key combos, e.g.:

Graphics Attribution

Finding a cute animated character was fairly time consuming. I ended up finding and using this red panda sprite sheet by NyaNeoNeko on deviantART. The licence is CC BY-NC-ND 3.0 which lets me use it with attribution and only for non-commercial purposes.

I made the fireball myself with two animation sets. Didn’t take long at all which you can see in the video. If you want to use it by ripping the sprite sheet, I’ve given the graphics the same licence as the Red Panda.

The skeletons were purchased at a bargain price of 5 USD at GraphicRiver.

Conclusion and the Future

pixi.js and Mousetrap were wonderful to work with and I do recommend them for beginners and advanced developers who want to make 2D games in WebGL. Especially so if you don’t want to have to spend time setting up your projection, shaders, matrices, vertex buffer objects, texture loaders, etc.

I haven’t packaged the game up into a neat git repository that can be used easily, but if there are a lot of requests for it, I might have to. Let me know what you think of it.

There are some crazy and time consuming ideas for the game, for example, at some stage in the game, it basically overtakes the blog and becomes a fullscreen game with thousands of enemies flying around the screen. Also some ideas with multiplayer, where anyone who is currently on the site is a character in the game and can interact with anyone else. Combining these two ideas could make an interesting co-op platformer game. I’ll add it to my ideas spreadsheet which has been growing steadily for a while.

If you have more ideas for the game let me know!