Simple 3D Multiplayer Game in the Browser

3 min readSep 23, 2014

Warning

We’ve updated our SDKs, and this code is now deprecated.

Good news is we’ve written a comprehensive guide to building a multiplayer game. Check it out!

In last month’s PubNub 3D Visualization Challenge, winner Robert Oschler built a fun and fast multiplayer 3D chess game with online lobby chat using PubNub Data Streams. In this blog post, Robert gives an overview of his project, 3D multiplayer source code.

In the video below, Robert gives an overview of his application and explains how he incorporated a number of PubNub real-time features into his application.

3D Multiplayer Chess Game

My application is targeted to any chess player with a browser and runs in any WebKit enabled browser, although currently it works best in Chrome.

When I found out PubNub was an ultra-fast, super smooth, messaging network that could be used to create collaborative apps, I realized I needed to get to know the service. I had previously been looking at collaborative technologies like SignalR, etc., but the thought of setting up servers myself, especially those that could scale rapidly under heavy traffic loads, was more than I could handle.

When I discovered that PubNub was an affordable, feature-rich messaging and signaling solution that was “no assembly required”, I decided to go through PubNub’s extensive MemeWarz mutliplayer game tutorial series and see how much effort was involved in programming around it. I was delighted to find out it was extremely easy.

I then searched for a game that I could tie into the chat lobby I had built from the MemeWarz tutorials. I found the 3D Hartwig Chess set project on GitHub and forked it. That project provides an attractive 3D chess set with several really nice animations for moving pieces.

Tying it into PubNub was easy and fun. It became a simple matter of passing the chess moves back and forth over PubNub through a private channel dynamically created for each game, and animating moves received from the remote opponent.

Managing Players with PubNub Presence

The best part was learning about features like the PubNub Presence API, which I used to add and remove users as they join the chatroom, and detect the arrival and exit of an opponent during the game. Implementing that API was equally easy and the idea that I could completely offload the management of online users to PubNub was wonderful. This opens the very real option to create collaborative apps that require no server component yet have all the advantages and features of client apps supported by a heavyweight server!

I look forward to trying out the other powerful PubNub APIs like the Access Management API and the Data Sync API.

3D Multiplayer Game Additional Resources

To DIY, you’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:

More from PubNub

How to Create a Dating App: 7 Steps to Fit Any Design
Insights6 minMar 15, 2023

How to Create a Dating App: 7 Steps to Fit Any Design

There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...

Michael Carroll

Michael Carroll

How to Create a Real-time Public Transportation Schedule App
Build6 minMar 14, 2023

How to Create a Real-time Public Transportation Schedule App

How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.

Michael Carroll

Michael Carroll

How to Create Real-Time Vehicle Location Tracking App
Build2 minMar 9, 2023

How to Create Real-Time Vehicle Location Tracking App

How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.

Michael Carroll

Michael Carroll

Talk to an expert