Follow me on Twitter Follow me on GitHub
Chandler Prall Thoughts & Experiments for the Web

Mindless – js13kGames

A little more than a month ago the js13kGames competition was announced, and September 13th was the deadline. Entries for the competiton must fit all of their code and assets in a ZIP file no larger than 13 kilobytes. 13Kb isn’t much code but you can stuff around 50Kb of JavaScript into a ZIP that size. When I saw the competition I knew that I whatever game I put together had to be 3D. I began brainstorming for ideas, but for the first week of the competition I focused on writing the engine – thankfully I had a lot of help in the way of Three.js. 3D engines use a lot of math for everything, and I ripped those classes out of Three.js, renamed a few variables, and had a functioning math library. For the rendering I poured over CanvasRenderer to see how it works. I didn’t want to copy the renderer as it would have been a lot of work to remove all of the unnecessary components. Instead, I began to write my own rendering pipeline based on the one in Three.js. After a few long nights my hacked together engine was rendering simple models. Even better, the whole engine compressed down to just 2.5Kb. Now I needed a game to write.

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

requestAnimationFrame is not your [logic's] friend

Intro

If you have been anywhere but under a rock then you have heard about Javascript’s new requestAnimationFrame function. You have probably used the shim posted by Paul Irish, may have tinkered with the version created by Opera developer Erik Möller, or even read various articles explaining how to best use it.

I think requestAnimationFrame is a great addition to Javascript, but these two points need some emphasizing:

 

 

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.

Continue reading »

Physijs – a physics plugin for three.js

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.

Examples

rigid bodiescollisionscompound shapesall shapesjenga

Features

In the Future

Go to GitHub repo »

Physics with Ammo.js + Three.js

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.

The second day was my first real attempt at using any physics library. Right now the most popular Javascript physics library is probably Box2D, as long as you don’t need to simulate a full 3D world. My game didn’t need an entire 3D simulation – the player can only move blocks along the X axis and gravity only applies to the Y axis; no simulation was needed across the Z axis. However, the results I got from Box2D were poor. It seemed to detect collisions a bit late and I wasn’t able to coerce any of the boxes to interact in a believable way. I attribute that to my unfamiliarity with the library, but I was on a very tight time table and I had spent a full night failing to achieve decent results.

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.

Continue reading »