Note: the following contains some spoilers – if you haven’t played Mindless yet go check it out.
When I first learned about the js13KGames competition I asked Nick Anderson if he would like to help come up with a compelling game and story. A few weeks before this we had been talking about video games and some different elements he has wanted to see. After some discussion we landed on a zombie apocalypse with a twist – you are one of the infected and are being instructed to kill healthy civilians and scientists.
Nick’s idea was to see how people react to a story where what the “tutorial” is telling you doesn’t match what the characters are saying. We were relying on people’s trust of the introduction messages we have all grown accustomed to at the beginning of games. In Mindless, you are introduced as one of the last healthy people in town and are tasked with killing the scientists who created the virus. After walking down the first hallway, the player has killed a guard, a scientist, and a couple “infecteds” who are actually healthy civilians. The game play is established and nothing has contradicted expectations that the prompt is telling the truth.
The first room has a few (truly) infected people and one scientist. When you walk up to the scientist he pleads for you to stop and spare his life. This is the first time one of the characters talks to the player, and if you don’t kill him or walk away he speaks again. Moving on the player encounters a good mix of guards, scientists, civilians, and infecteds. If the player does not immediatly kill the scientists or civilians (who we are told are actually infected) then some dialog is shown, expressing what is really happening. These characters explain that there is a room on the other side of the lab where scientists have the solution and are trying to heal everyone, introducing the second possible ending.
Response to the story line has been mixed. Some people got it and were really excited about what was going on. Others blasted through the dialog and walked around stabbing everyone. Generally, those who didn’t read much of the dialog were confused about what they were supposed to do, thinking it was a run-and-slash which would have clear direction. It didn’t help that we had to remove 70% of Nick’s dialog to squeeze everything into 13Kb. Overall we learned that people really trust what is said in the introduction and anything which contradicts it should be killed.
In case you missed it – Play Mindless
Use requestAnimationFrame for animations / screen updates
Do not use it for anything else (especially game logic!)
Seems kind obvious, right? requestAnimationFrame has the word “animation” right in its name. However, examples and articles have been circling the net which talk about completely replacing setTimeout with requestAnimationFrame. In some cases this is indeed the best thing to do, but I would argue that most of the time you will need to use setTimeout or setInterval as well.
After working on the Tower game I mentioned in the last post, I wanted to write a physics plugin for three.js to make it very easy to include physics in 3D scenes. While the plugin has been up on github for a while, I now feel it’s ready for an official release.
What is it?
Physijs brings a very easy to use interface to the three.js framework. One of the reasons three.js is so popular is because it is so incredibly easy for graphics newbies to get into 3D programming. Physijs takes that philosophy to heart and makes physics simulations just as easy to run. In fact, there are just five easy steps that must be taken to make a 3D scene come alive.
How does Physijs work?
Physijs is built on top of ammo.js and runs the physics simulation in a separate thread (via web worker) to avoid impacting in your application’s performance and taking up your your 3D rendering time.
A lot of effort has been made to keep the style of code the same when using this plugin. Apart from updating an object’s position, all of the normal three.js conventions remain the same. If you are used to three.js, you already know how to use Physijs.
Who is this for?
You, hopefully. If you are familiar with three.js and want to add physics to your scene, this is the plugin for you. No mucking about with shape definitions, keeping objects in their correct positions, or identifying collisions – simply use a few Physijs objects in place of three.js’s and you’ll automatically have a dynamic environment.
If you need (or want) a feature not already included then add it to the issue tracker or implement it yourself and send over a pull request at the github repo.
- Support for multiple object shapes, including custom convex objects.
- Material system provides simple control over friction and restitution (“bounciness”)
- Integrated collision detection and events
- Compound objects using the hierarchy system in three.js
- Rotations using either euler or quaternion systems – your preference
- Built seamlessly on top of three.js to keep the same convention and coding style
In the Future
- More (and better) optimizations
- Constraint systems such as point-to-point and hinge.
- Vehicle systems
- Heightfield/heightmap shape
- It would be awesome to have concave shape decomposition
Let’s explore the basics of using Ammo.js for physics in a Three.js environment.
For my entry to the Pokki 1UP contest I rushed out a simple physics-based WebGL game. From start to finish I had 9 days left until the game needed to be submitted. I broke that down into one day for the initial setup, a couple days for physics, one day for sound, one day for interface, and the last day for minute touch ups. Turned out to be the perfect timeline. The setup consisted of creating a Three.js environment within the Pokki framework. I also spent that first day hashing out the basic ideas, inspired by a “reverse Tetris” plan.
Next night I found my winner – Ammo.js – which is a direct port from the C++ library Bullet physics. An added benefit is Ammo.js does simulate a full 3D environment, not just 2 dimensions like Box2D; this gave my game more realism as the blocks aren’t constrained to just XY coordinates. I was able to get all of the necessary physics setup in just a few hours – from a static ground plane to placeable blocks and a tipping tower. In this post I am leaving out any of the scene management of creating and adding the 3D objects themselves; if you are not familiar with Three.js I highly suggest doing yourself a favor and learn how to setup a simple scene, and then play with some of the included examples.