1

I was toying with socket.io, ThreeJS, Javascript, and NodeJS to create a simple client/server using ThreeJS's graphics. I wasn't sure if all of these frameworks would even work together, but I decided to give it a shot since I've seen similar examples online before even though I cannot find a simple one to dissect or experiment with. It's mainly to experiment with, but I also wanted to make a small little concept-game as proof of what I've learned so far.

I posted my code here: https://gist.github.com/netsider/63c414d83bd806b4e7eb

Sorry if it's a little untidy, but I did my best to make it as readable as possible.

Basically, right now the server-side NodeJS script seems to run fine (Run with "node server-alpha.js"), and the client script (client-alpha.html, which you can just open in a browser) connects to the server, and displays a list of users (who are also connected). However, my intention was for each user to be able to move his/her own cube around, and right now each cube only gets added to the screen (rather than being added, subtracted, and then added again - to give the illusion of movement). If you run both pieces of code and connected one or two users and move the arrow keys a few times for each, you'll see what I'm talking about.

Can anybody help me with this? I tried several different ways to remove the cube (and remembered to call render(), after each)... but everything I tried didn't seem to work. It always resulted in the cubes just being added to the screen, and never subtracted.

I added comments in the code to make things a little easier, as I know this is quite a bit of code to go through (if it's not your own, anyway).

Thanks, any help would be greatly appreciated... as I'm really stuck trying to make the cubes just move.

Also, I'm having trouble adding the Fly-Controls (FlyControls.js - it's commented out ATM), so if someone could tell me where I went wrong I'd appreciate that a lot also.

Improve this question

1 Answer 1

Reset to default
5

Ok so you don't want to keep remaking the cubes, all you need to do is change the position.

Also in game development, it is almost a requirement to use object oriented design, a good way to go about this would be to make a player object, so..

CPlayerList = new Array(); // an array of player objects

function ClientPlayer()
{
    this.Cube;
    this.Name = "unnamed";
    this.Id = 0;

    this.Create = function(name,pos,id)
    {
        this.Name = name;
        this.Id = id;

        var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 'red', transparent:false, opacity:1.0});

        this.Cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

	this.Cube.position.x = pos.x;
        this.Cube.position.y = pos.y;
        this.Cube.position.z = 20; // don't know why this is 20, remember y axis is up & down in opengl/threejs
	    
        scene.add(this.Cube);
    }
    
    this.Move = function(vector)
    {
        this.Cube.position.set(this.Cube.position.x + vector.x, this.Cube.position.y + vector.y, 20);
    }
}

So on the server you need a ServerPlayer object which holds similar data, and assign ids on the server before sending them to the clients. So when you send it to the client you want to make a new ClientPlayer, call player.Create() and then push it to the CPlayerList, like so:

function newCPlayer(data)
{
    var newPly = new ClientPlayer();
    newPly.Create(data.name,data.pos,data.id);
    CPlayerList.push(newPly);
}

Then when you call your movePlayer() function, you can simply loop through your players array

function movePlayer(keyStroke, clientID)
{
    if (keyStroke == 39) 
    {
        CPlayerList.forEach(function(player,i,a)
        {
            if(player.Id === clientID)
            {
               player.Move(new THREE.Vector3(1,0,0));
            }
        }
    }
}

This is just the client code, but this should help you get started, let me know if there's anything you're unclear on.

Also here's an example of a game using a similar design: http://82.199.155.77:3000/ (ctrl+shift+j in chrome to view client sources) and server code: http://pastebin.com/PRPaimG9

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

gist.github.com/ol-bones/57dcb0695389b914719d#comments Edited it a bit and left a comment at bottom,
I finally got it working. Yeah, I think I was making it too complex, maybe. I didn't need to do anything to the server except emit a request through websockets to call the playercreate() function in the client script, which then creates the first player.. and also had to do a couple things to the client for the other players to be created. Here it is: gist.github.com/netsider/63c414d83bd806b4e7eb (This one fully works, but it's rough - I'm still amazed I figured it out). Thanks for all your help, especially with making it object oriented. Everything has been much appreciated :)
Awesome, keep going - there's a lot of fun to be had the more you build it up. It's amazing how fast a roughly working piece of code can become something almost resembling a game :v

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.