top | item 31296227

Show HN: I made a browser-based RTS game

212 points| Gluten | 3 years ago |battle-of-flags.com

I've posted this game here before, hopefully a repost is fine as the game has changed quite a bit (improved AI, improved mapeditor, much quicker gameplay, etc).

Game is based on JavaScript/Canvas and WebSockets. On the browser side the map is pre-rendered (as a background image), just the mobile units/buildings and animations are dynamically rendered. The lobby server is made in node.js, but the game server is C++ for performance reasons (mainly the pathfinding). I found the C++ WebSocket libraries out there to be too difficult to use so I made my own based on the rfc. Overall I think making a game like this is quite easy with the browser performance/features nowadays. The game server and client side JavaScript are around 5000 lines of code each.

If you have any questions about the tech I'm happy to answer them.

61 comments

order

smegma2|3 years ago

Hi Gluten, I never wrote a real-time game, so I'm curious about a lot of things.

* Does the server have a tick rate and it updates clients at a set interval, or does it only update when things happen?

* Did you ever run into any issues getting enough throughput from the server? e.g. maybe too many events happening at once to update everyone?

* Do you have to manage situations where two clients have a different view of the game state (due to extra latency for example)? If so, how do you resolve it? For example, I know that Team Fortress 2 follows the rule for guns that "if the shooter thinks it hit, then it hit", which means that people get shot around corners sometimes.

I'm working on a turn-based game using websockets which has been hard enough, a real-time game seems much harder to make! Thanks for sharing!

Gluten|3 years ago

The server runs at ~100 FPS, but things like worker updates and attacks happen at a 1.5 second interval. Only the changes (like walking a step, collecting a resource) are sent to the client(s). There is no client side prediction. There is no specific aiming on targets like in FPS games, just need the opponent id, so don't really need to do that Team Fortress thing.

closedloop129|3 years ago

Is it possible to play the game without having to register an account?

dt3ft|3 years ago

I was going to ask the same question. I'd love to try it, but creating an account just to do so is a deal breaker.

bmacho|3 years ago

You can type in a random name/password/email if you want, and start playing.

hejpadig|3 years ago

Cool, the graphics are very reminiscent of Tibia, an old school MMO that I loved as a kid.

mrstone|3 years ago

Exactly what I thought. I wonder if OP played

iWillOffshoreU|3 years ago

Nice, big fan of browser based multiplayer stuff. I think there's so much potential now to make some crazy browser based games given current state of web apps.

Edit: How long did it take you to create?

bmacho|3 years ago

> I think there's so much potential now to make some crazy browser based games given current state of web apps.

I believe that this could have be done ~20 years ago with about the same effort.

Websocket is maybe minimally easier than AJAX + 20 years old javascript, and the newer ECMA standards also have some nice syntactic sugars, but nothing radical. Objects, classes, closures, passing and modifying functions, javascript was so powerful and easy to work with from the beginning. People just didn't used it back then.

I remember playing e.g. travianer 15 years ago, different genre, but the technology was given.

Gluten|3 years ago

I've been working on this since 2014, but the actual time spent on development is maybe a few months.

emteycz|3 years ago

I'd love to make a good browser game and I know how, but I am absolutely useless wrt. game design stuff itself.

mLuby|3 years ago

I'm curious if it's reasonable to push more processing to the browsers to save on server costs.

I know multiplayer games generally need a server to "referee" (and to matchmake) but I wonder if games ever offload most of that work so the client does the heavy lifting (e.g. find a path from A to B) and then submits its work for the server to validate (e.g. this path from A to B works) and broadcast rather than the server doing all the game simulation work. My understanding is that multiplayer game clients generally just do graphics/sound and user interaction processing.

(yeah yeah distributed consensus don't say the B word)

Matheus28|3 years ago

There are games that run exclusively on the clients by being deterministic. Like Starcraft 2. Server is just proxying packets back and forth, but doesn't actually know what's going on with the game.

It works really well with RTSes because of the number of things moving around. Unfortunately the drawback is that the client knows everything that's going on in the game. So fog of war is entirely client-side too. Another drawback is that rejoining a game (or a new player joining) is much harder (need a way to encode/decode the entire game state, or client needs to replay the game inputs up until that point to be able to play).

It has some really elegant side effects (tiny replay files, easy to reproduce most bugs, easy to check if a bug is fixed by playing a replay file with a new version, etc.)

lolinder|3 years ago

A client-solves-server-verifies model introduces an interesting metagame that you'd have to be prepared to embrace. To run with your pathfinding example: odds are the stock client's pathfinder isn't ideal for every circumstance. You'd inevitably see alternate clients emerge with better or specialized pathfinding that would still check out with the server but would accomplish the player's goals better.

As far as I can tell there's no way to have the server prevent this while still saving any compute time, so you would have to design your game around the idea that this metagame exists. It could be really interesting for a certain type of player, but frustrating for many others.

junon|3 years ago

This is a common vector for cheats, so most developers eschew some sort of P2P lobby system.

oneoff786|3 years ago

This is the idea behind prediction. It’s used to reduce delays between client inputs and seeing the actions happen. More important in high reaction time things like fighting games.

bytehowl|3 years ago

I would recommend allowing people to just pick a name and hop in. One of the keys to the success of web games is that there's (often) literally no barrier to entry, including the need to create an account.

mLuby|3 years ago

Skip picking a name, just jump in. If they want a name, that's when they register an account.

A recent web game on HN ("Pounce") did the first part well: https://news.ycombinator.com/item?id=31073332

Also I suggest making it really easy to invite someone else to play with you by sending them a link. That's more complex though.

Also since you already have a spectator mode, it'd be cool if people see an active game when they go to the home page, like lichess.org. That might be even harder to do that invite links.

Nice that you can share the result of a game! http://www.battle-of-flags.com/match/index/695

adventured|3 years ago

I second this. The likelihood that I'll try the game out is drastically increased if I can enter a throw-away name and quickly start playing.

You could automatically assign a throw-away generic name, and then slap a 'try it right now' type button prominently on the home page. If the game is good, then I'd be willing to create an account.

Ruthalas|3 years ago

I second this.

I opened a tab to give it a try, but backed out when I had to provide an email to see how it played. Assuming I enjoyed it, I'd then be motivated to make an account to keep track of my play.

z3t4|3 years ago

My experience is that almost 100% do sign up. Signing up is not a barrier. Funny statistic I had in a game was that while almost 100% did sign up, only 50% of those entered the game. After highlighting the "enter game" button, that 50% went up to something like 85%. But the takeaway is that almost everyone do signup almost automatically.

Gluten|3 years ago

Thank you for the feedback! This sounds like something that I will get implemented in due time.

caretak3r|3 years ago

Yeah the AI is pretty tough, pretty much only spams workers and warriors. Only issue for me is being able to accurately click on my base and/or individual chars. But otherwise pretty fun!

all2|3 years ago

Would love to see support for viewing the group of selected units, group hot-keys, fog of war, a* path finding...

holografix|3 years ago

This is so cool! Is there a dev blog?! I’m particularly interested in the netcode and things like path finding and object collision detection at scale.

visox|3 years ago

remind me of my old old abandoned side project where i tried to create a diablo clone in browser with scala.js

does not work in most browsers, think in safari it works :D

http://diablo-forever.com/

crickcreek|3 years ago

Awesome dude

DistrictFun7572|3 years ago

That looks great.

* By JavaScript/Canvas I suppose you are talking about WebGL?

* Is the source code available for public viewing?

* Did you use any of the popular frameworks like ThreeJS?

* Do you use differently sized textures depending on whether the user is on a mobile phone or desktop?

Gluten|3 years ago

- Not WebGL, there are just some "canvas" draw functions. - Source is not public currently. - Just jQuery - Game is desktop only, based on 32x32 sprites, there is an option to scale though if you are on a high resolution display.

mikenew|3 years ago

This is awesome, but I do have a nitpick. Using left click to select as well as move feels really unnatural to somebody coming from other RTS games. I probably have over 5k hours in StarCraft 2 and WC3, and that's a lot of muscle memory to contend with.

8note|3 years ago

Left click to select and move is how the Westwood RTSs worked.

Eg. Red alert 2

gavmor|3 years ago

> Using left click to select as well as move feels really unnatural to somebody coming from other RTS games.

Is there a documented standard for RTS controls, at least for baseline features?

mLuby|3 years ago

Agreed but maybe this is a concession for mobile users? Can't confirm without registering an account.

all2|3 years ago

This. I don't have nearly that much time in SC/2, but I still want to R-click to move.

hombre_fatal|3 years ago

Always impressed by people like you who can do the impossible work of getting a game to the point of launching something.

crickcreek|3 years ago

I love rts but i just have an old-ass android phone! look for me, 551154305985 TIM

smegsicle|3 years ago

this obviously isn't as simple of a game as tagpro or agar.io, but i think one factor for their success was being able to pop in without making an account.. i guess they call that ".io" style browser games?

dandigangi|3 years ago

This is pretty cool. I love a good RTS. Nice job.

strongbond|3 years ago

Please make the tutorial more prominent.

kwhitefoot|3 years ago

Why can nicknames not contain spaces?

aliswe|3 years ago

Looking real good!

ttty|3 years ago

Related to multiplayer rts games this is also done with same tech but node.js only to reuse code between client and server side https://bitplanets.com/

I wonder what performance issues you had with node.js that justified a bridge to c++ (including the increase of complexity of the architecture). Pathfinder is not terrible in node.