Mucking About with Voxel.js

Installing Voxel.js

I just discovered voxel.js, which is a web-based voxel engine that can be used to build block-based games like Minecraft. It’s written in node.js, so lets get that set up. Voxel.js requires node.js 0.8.0 or better, and Ubuntu’s repositories supply 0.6.19, so we need to set up a PPA to get the latest version.

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs npm

Under Ubuntu 12.10 the node.js executable is name ‘nodejs’, I believe its ‘node’ on some other systems.

Grab the voxel hello world repo from github:

git clone https://github.com/maxogden/voxel-hello-world.git
cd voxel-hello-world
npm install
npm start

Now you should be able to check out voxel at localhost:8080. You will have be inside a crater with a couple of minecrafty types in front of you. They would be Maxogden and Substack, the voxel.js devs.

“npm install” downloads all the dependencies for voxel-hello-world. ‘npm start’ makes npm run a node js webserver, and rebuild index.js on each request using browservefy.

Note: I can only get this working in Firefox – according to Google Chrome doesn’t support WebGL with my laptop’s Nvidia FX Go5200 🙁

Switch to Perlin Noise Terrain Generation

Instead of using the predefined ‘Valley’ terrain, we can switch out to a module, such as the Perlin Noise Terrain Generator.

npm install voxel-perlin-terrain

Add the following at the top of index.js as below:

var createTree = require('voxel-forest')

Then update createGame:

var chunkSize = 32
var chunkDistance = 2

var generate = perlin({
  chunkDistance: chunkDistance,
  chunkSize: chunkSize,
  scaleFactor: chunkDistance * chunkSize / 4
})

var game = createGame({
  generateVoxelChunk: generate,
  cubeSize: 25, 
  chunkSize: chunkSize,
  chunkDistance: chunkDistance,
  startingPosition: [185, 100, 0], 
  texturePath: texturePath,
  worldOrigin: [0,0,0],
  controlOptions: {jump: 6}
})

You can muck around with the value of scaleFactor to make mountains, hills or relatively flat terrain.

Plant Some Trees

In order to generate some trees we need to include voxel-forest then add a few lines of code..

npm install voxel-forest

var createTree = require('voxel-forest')
....
// Create some trees.
for (var i = 0; i < 25; i++) {
createTree(game, {bark: 2, leaves: 3});
}

From here..

That’s probably enough for one post but jeez there’s a lot more here to play with so watch out for a followup.