Show HN: I made a browser-based RTS game
battle-of-flags.comI'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. 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! It's probably a completely different architecture, see the classic article "1500 archers on a 28.8": https://www.gamedeveloper.com/programming/1500-archers-on-a-... This is interesting, thanks! So sounds like there is too much data to send the entire game state every time. In 2022 the bandwidth requirement is actually easily doable with some compression of the sent data. But an architecture that uses prediction (cool kids seem to call this 'rollback networking' nowadays) has other benefits, like zero latency for player input. For folks who are reading, the "simultaneous simulation" architecture used in almost all RTS games is still a very different beast than the "rollback networking" architecture used in some FPS (and fighting) games referred to by the above post. 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. Is it possible to play the game without having to register an account? 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. You can type in a random name/password/email if you want, and start playing. Cool, the graphics are very reminiscent of Tibia, an old school MMO that I loved as a kid. Exactly what I thought. I wonder if OP played The OP did play Tibia, in fact they develop Zezenia, which is essentially a Tibia clone. 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? > 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. Head of line blocking in TCP is what made/makes this hard. I've seen some approaches stagger multiple sockets to mitigate but it is highly dependent on packet loss. I would argue WebRTC is where this really became possible, although last I looked at the spec it made a best-effort at using UDP for datagram based messages but would fallback to TCP in some cases. It's a fun domain and lots of really interesting approaches(like lockstep called out above as well as other fun things like dead reckoning). Latency is far worse with AJAX. Also, browsers nowadays are much more powerful, both in rendering capabilities and Javascript engines. Servers have become a lot cheaper, too, which makes hosting this for free far more viable. Lastly, while a lot of stuff added to JS was just syntactic sugar, the whole ecosystem and tooling improved massively, which makes developing something like this a lot easier. I'm not saying this was impossible 15 years ago (in fact, Flash-based MMOs existed back then), but it would've taken a lot more effort. There’s no way you could do anything real time with full HTTP request round trips for updates The trick was to run many HTTP requests in parallel, using different subdomains so they wouldn't be subject to the browser limit on number of parallel connections to a domain, a dummy first request per subdomain so the interesting messages went over established persistent connections, and decoupling outbound from inbound messages to make a set of "short-long-polling" connections. That resulted in real-time message throughput close to the game frame rate, bidirectional, and no connection setup latency per message, just the transmission latency even over TLS (SSL back then). I've been working on this since 2014, but the actual time spent on development is maybe a few months. it's very nice, I enjoy the tutorial and love the fact there is both PvE and PvP optionally. Very well thought out game so far, hope it gets more depth later as in more things to build, train etc. I'd love to make a good browser game and I know how, but I am absolutely useless wrt. game design stuff itself. 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) 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.) 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. This showed up a few months ago, but I never got over the "activation cost" to actually try it out: https://blog.zkga.me/announcing-darkforest That is a super cool concept, thanks for mentioning! That's true. I don't think it would matter much, other than it being easier to make superhuman micro-capable bots in RTS or aim-bots in FPS games. For the former, a limit on actions per minute might work. On the other hand, once such bots exist it might just mean the game needs to evolve. This is a common vector for cheats, so most developers eschew some sort of P2P lobby system. 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. 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. 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 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. You could also do a "link to Steam" option or something like that in the user settings menu. So if someone is interested in continuing to play, or even just persist a user name, they have the option to link it to something more permanant. 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. 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. Do an A/B test, and see how many enter the game when presented with a sign up form vs without. Thank you for the feedback! This sounds like something that I will get implemented in due time. 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! Would love to see support for viewing the group of selected units, group hot-keys, fog of war, a* path finding... 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. 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 Awesome dude Thx, did you find the second máp? :D 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? - 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. Had some fun with the ai. That flag has a lot of hp and was tough 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. Left click to select and move is how the Westwood RTSs worked. Eg. Red alert 2 > 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? Not that I've ever come across, but Blizzard RTSs would have to be the gold standard. Age of Empires being second. Looking at those franchises would cover the majority of player expectations, at least in terms of basic mechanics like attack-moving, move-commands, unit selection, and so on. Agreed but maybe this is a concession for mobile users? Can't confirm without registering an account. This. I don't have nearly that much time in SC/2, but I still want to R-click to move. This is how things have been for almost 30 years now. Are we old or are we old. WarCraft 2 was quite something Always impressed by people like you who can do the impossible work of getting a game to the point of launching something. I love rts but i just have an old-ass android phone! look for me, 551154305985 TIM 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? This is pretty cool. I love a good RTS. Nice job. Please make the tutorial more prominent. Why can nicknames not contain spaces? Looking real good! 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.
