Show HN: I made a browser-based RTS game

Show HN: I made a browser-based RTS game(battle-of-flags.com)

212 points by Gluten 4 years ago | 61 comments

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.

smegma2 4 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!

mizzao 4 years ago | |

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-...

smegma2 4 years ago | | |

This is interesting, thanks! So sounds like there is too much data to send the entire game state every time.

Gluten 4 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 4 years ago |

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

dt3ft 4 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 4 years ago | |

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

hejpadig 4 years ago |

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

mrstone 4 years ago | |

Exactly what I thought. I wonder if OP played

gberger 4 years ago | | |

The OP did play Tibia, in fact they develop Zezenia, which is essentially a Tibia clone.

https://news.ycombinator.com/item?id=8940655

iWillOffshoreU 4 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 4 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.

vvanders 4 years ago | | |

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).

Sebb767 4 years ago | | |

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.

boredtofears 4 years ago | | |

There’s no way you could do anything real time with full HTTP request round trips for updates

Gluten 4 years ago | |

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

ricardobayes 4 years ago | | |

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.

emteycz 4 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 4 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)

bytehowl 4 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 4 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 4 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.

all2 4 years ago | | |

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.

Ruthalas 4 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 4 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.

karmakaze 4 years ago | | |

Do an A/B test, and see how many enter the game when presented with a sign up form vs without.

Gluten 4 years ago | |

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

caretak3r 4 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 4 years ago | |

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

holografix 4 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 4 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 4 years ago | |

Awesome dude

visox 4 years ago | | |

Thx, did you find the second máp? :D

DistrictFun7572 4 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 4 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.

Sujeto 4 years ago |

Had some fun with the ai. That flag has a lot of hp and was tough

https://i.imgur.com/5AcAD66.jpg

mikenew 4 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 4 years ago | |

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

Eg. Red alert 2

gavmor 4 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?

mikenew 4 years ago | | |

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.

mLuby 4 years ago | |

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

all2 4 years ago | |

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

beebeepka 4 years ago | | |

This is how things have been for almost 30 years now. Are we old or are we old. WarCraft 2 was quite something

hombre_fatal 4 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 4 years ago |

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

smegsicle 4 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 4 years ago |

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

strongbond 4 years ago |

Please make the tutorial more prominent.

kwhitefoot 4 years ago |

Why can nicknames not contain spaces?

aliswe 4 years ago |

Looking real good!

ttty 4 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.