Summary:
Creating a close to real-time MMO archer game in Javascript.
((TL;DR jump to Development Plan))
History:
I’m a big fan of game mechanics, everything else may come second, but if the eye-hand challenge don’t feel right, the game most certainly goes down the drain.
The inspiration for this project came about 5 years ago:
Game design
I’ve been thinking of this project since i first shot birds at Bowman 2. The game played under this mode (sandbox) on Android 2, is dead simple. Drag and release to shoot an arrow! Simple but interesting graphic behaviours emerge. Like one arrow hitting 2 or more birds, one arrow that goes up 90 deg, and hit your archer in the head! Maybe go turbo and create an arrow storm!
None of the effects I mentioned give out any score, there is no positive reinforcement mechanism either! It’s plain that screen made for sadistic individuals like myself. And yes, i got tired of it quickly, but still, the mechanics just felt so good for a few minutes.
Add MMO capabilities, a persistent world, one arrow that would teleport my character so now it can move through the scenario, of course some level design.. easy (not easy).
But then I thought, that’s too simple.. I want to embed some great elemental combinations, like Magicka! That would make the game more dynamic and engaging. Of course it would at least double development time, but not a single fuck is given about it in imagination world.
Of course I’m also a big fan of LoL, Kog’Maw being my favourite champion. So i thought i’d embed a somewhat similar cooldown system for each arrow, probably a skill tree would also be in place.
Well then, considering elements I want in the game and overlooking a bit of level design that should be enough to think about.
Enter technical choices.
Question: what free game framework support real time multiplayer, is performant and use pure HTML5? … none.
Partial answer, I love Phaser.io, so easy and fun to develop with. But 2 elements held me back at choosing it right away.
Biggest one was, how to sync multiple players on the same space? After all people should be seeing the same arrow flying and hitting the same stuff. When microseconds matter for accurate shots to happen, sync can’t be taken for granted. In fact there are many techniques online shooting games use that were not available out of the box for browser games. Even Websockets couldn’t support it as it’s based on TCP, not UDP. WebRTC just came in years later.
So… Unity 3D? 😢
They do pack all i’d need for game design, asset management, physics, and i bet there is much more. There was a cost at the time to deploy at mobiles but it would deliver a much superior performance than something in HTML5.
But 3 factors drove me away:
- vendor locking
- no HTML5 deploy for browsers
- considerable learning curve
- real time networking (MMO) was still crawling
So specially for the networking implementation complexity i gave up on this lib.
I thought another of many other libs that use SVG or WebGL, so we could pack more interesting visual effects, but a decision was never made. Work took a huge space in my life, along with moving to new places and investing in more ‘social time’ something new for the geeky me.
🕛🕝🕞🕘🕙🕚🕐
Development Plan – proof of concept
Present day, present time: 2016-03-08 6PM. In between jobs is probably my most accurate status.
There is no time limit set for this project, nor I consider delivering consistently.
Current goal: rendering something that shoots something, and the scenario should sync for every player connected within 1 second. Ideally, the world state persist.
Pragmatically, the floor will be a flat plain and limited in length. The ‘archer’ spawn at a random position, it represents under control of a player while they are connected. It should be able to shoot a basic physical object, it goes off horizontally at the press of a button – so controls are reaaaally simple.
Architecture lowdown
Clients will run the all of game logic, it should as usual process inputs, events and send (ideally) deterministic information to the server. Almost all input is transmitted, but also the results (where arrow hits, what happened, etc).
The server would be pretty much ignorant of all game logic, not validating inputs / results but storing events and transmitting it to connected clients. When a client come to reconnect the server would send all events.
Needless to say, this is not a secure client-server architecture, it’s much more of a p2p. In traditional multiplayer architecture, the client acts as a vessel for input & rendering, while the server is in charge of processing action, events & results. Our case is simplified as proposed:
- game spawn player 1 at randomly generated X/Y position (send event with position)
- player 1 holds down button to shoot arrow (send event with position)
- player 1 release arrow 1 (send event with angle, force, …)
- arrow 1 hits the floor or enemy and become immovable (send position it hit)
All events should be sync in between clients as they arrive. Still unsure on how to fine sync certain things, like arrow trajectory.. some funky jitter may happen.
Tech choices:
The foundation laid made upon Phaser.io & Firebase for a 1st try.
Using Browserify + npm for managing packages.
Most likely deploying @ Heroku or GitHub Pages.
Unknowns and risks
¿Can firebase add any arbitrary data on server side, when it receives my json Object, and before re-transmitting it? I really need to set a timestamp when an event it arrives.
¿Can I really sync physics in such simplistic way?
¿Will the delay of Firebase events be acceptable? If not i could run some WebRTC solution on the side.
¿Is it going to work on mobile as is?
Wrapping up
Hope to deliver a first version soon, stay tuned!
Fabiano PS 