This year the whole Bearhanded team decided to participate in the Christian Developers Network Speedgame. We created an online multiplayer game called Fireflies. The theme this year was “testimony” and we decided we wanted to do a multiplayer game with HTML5 and NodeJS. What came out of our brainstorming was a simple puzzle game where players control various types of game pieces and use them to get to the exit in each level. To accommodate the testimony aspect of the competition, we chose to show how each person’s testimony is influenced by many people and so we created a sort of spiritual family tree in which each level starts out dark and after completing each level it lights up and the next level is unlocked. The idea being that God uses many people in our lives and in their lives to reach us with the gospel. When the whole tree is lit up, then the game is completed and the #parteh begins!
 |
| Level 1 is very straight forward no? |
There are 5 levels, starting with simple puzzles and ending in some rather difficult ones. The final level is very difficult to beat by yourself, and even with three people it can take some time to finish.
 |
| Every game needs a jumping puzzle! #lies |
Design
We took our design cues from games like Lemmings, Limbo, Botanicula and whatever was tossing around in our subconscious! Chris was the primary designer and Aaron took his characters and animated them using After Effects. Nate then took the animations and put them in the game.
Development
Fireflies was built with the following technologies & libraries
- NodeJS – server game logic
- NowJS – server and client networking
- HTML5 – client audio and canvas support
- CSS3 – text glow effects and drop shadows
- Box2d – client physics
- Cocos2d-javascript – canvas drawing
- jQuery – various UI elements
I did all of the Javascript for the server and client using Aptana as my editor. This editor is free and good looking and the code completion is pretty decent. It’s basically another flavor of Eclipse.
 |
| I love using dark text editor themes – if only it darkened the frame too #sigh |
Chris used Tiled to build our levels and Nate used Zwoptex to make our sprite sheets for our animations. Both are free and support Cocos2d.
 |
| Simple, but it works and it’s free! |
Thoughts and ramblings
For anyone interested in using any of these technologies you should be aware of several things I discovered:
– Cocos2d-javascript is still very alpha, with lots of unimplemented features, many bugs or things that don’t work in every browser, few working up-to-date examples and not very optimized. All that being said, it does work for simple things and it performed fairly well for our little game. To integrate box2d physics with cocos2d I had to modify the level import code to support reading polygon objects. Then in my client code I used the polygons to create box2d static shapes.
– NodeJS is really hot these days and can do some amazing things. No complaints here except that it uses Javascript. All the wonderful things you are used to with object oriented programming are imitated and asynchronous behaviors abound.
– NowJS allows you to easily synchronize variables between server and client and do remote procedure calls, however I quickly discovered that due to the asynchronous nature of NodeJS, using variable synchronizing would give random bad values and I ended up having to use remote procedure calls for everything. The groups feature is how we contain players in levels and it is super easy to do and useful and awesome.
– Box2d is made for realistic physics, not platformers. I really had to punch it in the face to get it under any semblance of control and the player input still feels awkward and annoying to me. Physics engines sound like an obvious choice when you’re making a puzzle game, but when it comes to platformers you want a certain un-realistic feel for player input 9 times out of 10. So to bring box2d to its knees I had to
- Use a ball for the players physics shape so it wouldn’t get stuck and friction wouldn’t be such an issue.
- When the player is on the ground and not providing input, set the friction really high and use damping to slow the player down fast. When they move ease up on the friction.
- When in the air, turn off friction and use a different damping or they’ll get stuck on vertical walls.
- Use impulses and not forces to get the player moving.
- Turn off restitution or just use a tiny bit or you’ll bounce all crazy.
- Make sure your polygon world objects are created with the vertices in counterclockwise fashion or your player will fall through them.
- Make sure the player’s foot sensor isn’t too wide or they’ll be able to wall jump – unless you want this behavior – super meat boy anyone?
That’s it for now – you can play the game at http://fireflies.bearhanded.com and the source code is available for download via the christiandevs.com website here.
In other news I will post about the latest OGE/planet updates soon and I co-authored a book on OGRE.