Gaming

DIY Minecraft: Multiplayer Voxeljs with PubNub

0 MIN READ • Michael Carroll on Sep 4, 2014

I recently stumbled across the awesome Voxeljs library which allows anybody to create Minecraft style games (Voxel) that run in the browser with NodeJS. In this tutorial, we'll walk you through how to develop multiplayer Voxeljs to build a DIY Minecraft!

I decided I was going to take an afternoon to add the power of PubNub to Voxeljs, creating the basis for an MMO version of Minecraft. Want to see it in action and go for a stroll around? Here's the multiplayer Voxeljs demo.

Getting Started with Multiplayer Voxeljs

I started with the Voxel Hello World example. It didn't include any textures, so I got them from the Occulus Rift demo.

I modified the “hello world” example to include our standard PubNub initialization.

First I added the script into index.html.

view raw 1.html hosted with ❤ by GitHub

And then I initialize PubNub. In this special case the PUBNUB object needs to be referenced by window.PUBNUB.

	var uuid = window.PUBNUB.uuid();
	var pubnub = window.PUBNUB.init({
	publish_key: 'demo',
	subscribe_key: 'demo',
	uuid: uuid
	});

	var channel = 'pubnub-voxel';

view raw 2.js hosted with ❤ by GitHub

Then I created a User object and list of Users so I could keep track of who was online and what their position in game was.

	var createPlayer = player(game);

	var Users = {};
	var User = function(uuid) {

	var self = {};

	self.avatar = createPlayer('player.png');

	self.avatar.position.set(2, 4, 4)

	Users[uuid] = self;

	return self;

	}

view raw 3.js hosted with ❤ by GitHub

I then pubnub.subscribe, and add a player when I get a join event. I subscribe to notifications on our channel, and update the player position when I receive a message.

	pubnub.subscribe({
	channel: channel,
	callback: function(data) {
	if(data.uuid !== self.uuid) {
	Users[data.uuid].avatar.position.set(data.position.x, data.position.y, data.position.z);
	}
	},
	presence: function(data) {
	if(data.action == "join" && typeof Users[data.uuid] == "undefined") {
	new User(data.uuid);
	}
	}
	});

view raw 4.js hosted with ❤ by GitHub

All that's left is to send out player positions! I use setInterval() to publish the player position every second.

	var self = new User(uuid);

	setInterval(function(){

	pubnub.publish({
	channel: channel,
	message: {
	uuid: uuid,
	position: self.avatar.position
	}
	});

	}, 1000);

view raw 5.js hosted with ❤ by GitHub

That's it! It's very crude but was easy enough to set up in an afternoon. We can open two windows and see the player position update in real time. It wouldn't take much to add smoother animations and the ability to place and delete blocks.

Want to see it in action? Check out the live multiplayer Voxeljs demo here, or watch the quick overview video below:

Get Started
Sign up for free and use PubNub to power multiplayer games