Back

MMO 'Your it' in browser HTML5 Multiplayer game

Meta data

General

NameYour it
Typesingle person project
Completed2015

Contribution

Programming100%
Design100%
Music0%

Technical

EngineThreeJS
LanguageJavascript
NetworkWebRTC (PeerJS)


The Game

I fell in love with the idea of a browser game. You only have to go to a website, wait maybe 5 to 10 seconds and you can play the game. It is easy to share with friends, just send them a link and you can play on almost every device. It is so low-threshold that I thought it would be worth to take a look into it.

ThreeJS

The engine I used for this game was TheeJS. It is an open source 3D WebGL engine. It did nothing more than render stuff. Things like the main loop, key events or physics needed to be done by myself. Something I was not used to do at that moment.

Objects

An Object is in Reality a method. When we call these methods and add new ones to it, it copies itself into a variable. In these objects are methods like update or init. The update method is called every frame. Creating, calling the updates of the objects is done in Main.JS. This is a singleton that controls all the objects of the game. With the exception of the network players. These are controlled by NetowrkJS.

function Ground(scene){
    let grid = new THREE.GridHelper(130, gridWeight);
    grid.setColors(0x112b00, 0x112b00);
    grid.position.set(gridWeight/2, gridWeight/2, gridWeight/2);
    scene.add(grid);
    var loader = new THREE.Loader();
    
    let grassLayers = [];
    
    let CreateMesh = function(){
        var loader = new THREE.TextureLoader();
        
        loader.load("media/textrues/grass-texture.jpg", function(tex){
            loader.load("media/textrues/terain.png", function(terainTex){
        
                tex.repeat.set(30, 30);
                tex.wrapS = THREE.RepeatWrapping;
                tex.wrapT = THREE.RepeatWrapping;

                //let planeGemorty = new THREE.PlaneGeometry(500, 500, 500);
                let planeGemorty = new THREE.PlaneBufferGeometry( 1000, 1000, 250, 250 );
  
                let planeMaterial = new THREE.MeshLambertMaterial({map: tex});

                let plane = new THREE.Mesh(planeGemorty, planeMaterial);

                plane.rotation.x = -0.5*Math.PI;
                plane.receiveShadow = true;
                plane.castShadow = true;
                scene.add(plane);

                plane.position.set(0,(gridWeight/2)-0.1,0);
            })
        });
    }
    
    this.update = function(delta){
        

    }
    
    CreateMesh();  
}
View code on Github

Server and Network

The network is built with WebRTC. This is a peer to peer connection without needing a server. Yeah, you need a signal server that connects people to each other, but after that, there is no server power needed.

I had also some trouble with firewalls. Connections within a network are normally not allowed. To make this work, I used stun and turn servers. The idea behind it is that you send it to a server outside your network, than the server send it to the second computer. Therefore some networks needs a server.

For the use of WebRTC I used a library called PeerJs which takes care of connecting to others and sending/receiving data.