Jump to content

[Phaser] [Multiplayer] Race To The Hive


Zef
 Share

Recommended Posts

Hi there,

 

A while ago I created a realtime(ish) multiplayer game for a university assignment using Phaser, Node and Web-sockets. I haven't been able to put it anywhere before it was marked, but now that it has been people can take a look :)

 

This was the first proper game I have made and for some crazy reason I decided to attempt a multiplayer game. I didn't really have a clue how to implement multiplayer so there is probably (definitely) a lot of insane stuff going on in my networking code but it seems to work not too badly. Eventually I will upgrade the networking code to follow more along the lines of this valve article https://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking

 

I have previously detailed how my networking works in this post: http://www.html5gamedevs.com/topic/5798-updating-players-positions-using-nodejs-and-socketio-multiplayer/#entry34974

 

Anyway, the game is essentially a racing game with flappy bird mechanics. Get the the hive first while avoiding the obstacles. The backend is powered by node.js which handles starting the games etc. I also randomly generate a level each game so that the obstacles are in different positions/ move at different speeds/ etc etc each round.

 

There are a few elements of the game that are in there just to fulfil the spec set by my uni, like the little video at the end of the course, and I may remove these if I get time. The game is a little buggy in places I know, but worked well enough to get me very good marks hehe 

 

Currently it is running on a single digital ocean server, and to be honest I have no clue how many clients it can handle before things start to go boom, so it might be interesting to find out! I have tested it with around 5 with no problems. How laggy the other players appear seems to depend a lot on your distances from the server which is located in Amsterdam. Here in Brighton UK the lag doesn't seem too bad.

 

I created all the graphics myself, but they were greatly inspired by Chasing Aura. I am pleased with how the game looks, and think that it could benefit from a  few more obstacle types along the course. 

 

One pretty big issue with this game is that the server is not authoritative, meaning that it relies on the clients to inform it about their positions accurately and truthfully. This in theory means anyone with a little bit of js know how can cheat by modifying the code client side. I'm not really sure of a good way to get around this with this sort of game so if anyone has ideas let me know!  

 

Anyway, you can take a look at the game here: http://188.226.161.72

 

I would love to know what you think, if you have any suggestions on how it could be improved etc. Likewise if you have any questions about how the game works please ask and I will do my best to explain!

 

Bye for now

Zef

 

post-7386-0-28711700-1400602982.png

post-7386-0-44056800-1400602968.png

Link to comment
Share on other sites

Thanks for taking a look! :) Yeah its not really optimised for mobile/tablets unfortunately and doesn't perform too great, also I only tacked on touch controls at the last minute so their not great either. I may make a lower res version for mobile and try to perform some optimisations. 

 

So server side their really isn't too much complicated stuff going on and there is a lot of room for improvement actually. I am using node and socket.io to handle the web sockets. The server will start a new game every 2 minutes or 30 seconds after the first player finishes the current course. Or if there is currently now one playing and a new player connects it will start a game almost immediately. 

 

20 seconds before the next game begins the server will generate a new random level layout abiding by a number of constraints, and then sends it to each of the clients. The clients then parse this data to populate the level with the obstacles. 

 

While playing the game the clients constantly keep the server updated with their location etc. The server stores this info for each of the clients and relays it to everyone at a set interval so you can see the other player's ghosts during a race. Seriously the server side is actually fairly simple, its dealing with the info received on the client side in an effective way which is tricky! 

Link to comment
Share on other sites

Thanks :)

 

All the graphics were produced in Photoshop mainly using the pen tool. Organisation was not really too hard as there aren't actually a huge number of assets. They are simply in an asset/images/ folder and are all preloaded at the beginning. 

 

I have been making a few other game since and would highly recommend an app called Sketch for graphics over Photoshop. http://bohemiancoding.com/sketch/

 

It is vector based and makes it super easy to export your images at different resolutions. The workflow for creating, apps, websites, games etc is so much better than photoshop if I am honest, and I am now using sketch for the majority of my work. Can't recommend it enough!

 

Seriously though the hardest part of this game was the networking side, everything else was very straightforward in comparison!

 

Let me know if there is anything more specific you want details about. I think I might write a post giving an overview how this game is working as there seems to be a decent amount of interest :)

Link to comment
Share on other sites

Thanks, yeah the multiplayer relies on more than one person being on at once but it does work I promise :) Haha 

 

Yes I received the highest mark in the year so was very pleased. Introducing multiplayer went well beyond the spec for this piece of coursework.

Link to comment
Share on other sites

Thanks :)

 

All the graphics were produced in Photoshop mainly using the pen tool. Organisation was not really too hard as there aren't actually a huge number of assets. They are simply in an asset/images/ folder and are all preloaded at the beginning. 

 

I have been making a few other game since and would highly recommend an app called Sketch for graphics over Photoshop. http://bohemiancoding.com/sketch/

 

It is vector based and makes it super easy to export your images at different resolutions. The workflow for creating, apps, websites, games etc is so much better than photoshop if I am honest, and I am now using sketch for the majority of my work. Can't recommend it enough!

 

Seriously though the hardest part of this game was the networking side, everything else was very straightforward in comparison!

 

Let me know if there is anything more specific you want details about. I think I might write a post giving an overview how this game is working as there seems to be a decent amount of interest :)

 

Thanks for your answer and recommendation Zef,

 

I think idea about a post is a great ! :)  

Could you write more about animation in your overview, for me right now is dark place. I like how bounce text on menu, like parallax effect with strange snowflakes and countdown and ... :) 

 

 

Link to comment
Share on other sites

No problem :) Well I finished university today so for the first time in ages have a lot of free time. I think what I will do is write a blog post going into detail about the process of creating this game. 

 

At the same time I think I'll remake it in Phaser 2.x as currently it is using 1.x, and also I might try and optimise it for mobile a bit more because as people have mentioned here, currently its a bit rubbish on tablets etc. 

 

Anyway I'll let you know once its ready, it may turn out to be a multipart thing because there will be a lot of areas to cover!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...