Show HN: My multiplayer custom-engine game that loads in less than a second | Hacker News Reader

Show HN: My multiplayer custom-engine game that loads in less than a second

vnav.io

198 pointscrazypython85 comments

Hi. To make my game load quickly, it uses <link rel=preload> on JavaScript resources, smallest scripts first. While the game itself is loading, the server selector's inline JavaScript immediately loads the list of servers from a CDN, surge.sh. The idea is network requests that depend on network requests should load first, because they have the longest chain of roundtrips.

It pings a random server in each region to find the nearest region, which is found by finding the server that replies first, since nearer servers are closer. Then it pings all servers in a region to find the number of players. It randomly picks from the server with the two least number of players. Then the JavaScript transparently pre-loads game resources (mockups.json and skillmap.json) by appending a <link rel="preload"> to the <body>. That way, once the game starts, "fetch" will find preloaded resources.

80% of players said it was very fun.

Looks like a fun io game, congrats! One day i'll have the time to finish one of my games hahah

Also congrats on the fast load time! Slow JS is my biggest peeve about the modern web. My "daily drivers" are all under-powered hardware -- I have not spent more than ~$250 on a computer in like a decade -- which 1) forces me to develop lightweight & quick frontends, and 2) reveals just how awful so many websites are for anyone who isn't using the maxed-out MacBook Pro that the original developer used.

I test all my frontend code on a $200 Chromebook. It's a really nice way of finding bugs that I'd never have noticed on my main dev machine.

I want to upvote this multiple times. And we've reached a point where not only web devs should do this. Even the (Linux) open source world starts to move towards bad performance when a decade ago they broadly prided themselves by being not as bloated and slow as all the "Windows crap". Use your own stuff on a middle class machine with a spinning disk from 10 years ago once a week for the whole day to get a baseline.

And sure there are exceptions, some programs just need a beefy machine, but many times there are mundane things like fi. a dozen unnecessary redraws of a list that go unnoticed on the latest threadripper with RAID-0 NVMe disks, but make the UI jump and twitch in an irritating way on slower hardware.

> Even the (Linux) open source world starts to move towards bad performance when a decade ago they broadly prided themselves by being not as bloated and slow as all the "Windows crap".

We've ended up collectively trading availability of applications for performance I'd say because of things like electron.

And yes it is a tradeoff.

KDE and Linux however is still blazing fast so there's still some[1] speed advantage.

[1]: and sometimes, like with git, command line applications and compiling - a whole lot.

Nice! Interesting approach. I'll have to try to replicate this for my game[1] where the loading of some JS scripts is sometimes annoyingly high (in particular for the cookie consent for some reason).

> 80% of players said it was very fun.

Curious how you got this statistic, do you ask this in-game or did you do a case study with some friends?

Btw I just played and found the FPS to be quite low (there was a lot of things firing on me). This was Firefox on Windows. (Edit: tried Chrome and there is a visible difference, so you seem to have a bottleneck on FF)

1 - https://stardust.dev/play

> (in particular for the cookie consent for some reason)

I suggest making that script async, so it loads after defer scripts, which you should add to your main game scripts.

> Curious how you got this statistic, do you ask this in-game or did you do a case study with some friends?

With friends and based on online feedback.

Love to see this kind of craftsmanship. It's nice to make things snappy, especially because it broadens the reach to people who don't have the best hardware or connections.

> nearer servers are closer

This accurate statement is correct.

Very nice game, but would you add aiming with keys? I have no mouse for instance ... very difficult to win shooting in one direction only :)

Cool project. Now that you've done the hard work, you need to do the next hard bits - cheating so it seems like it loads even faster. I see the "Loading..." for <1 second - but why do I see it at all? Give me the form to fill out my username first, because that will take me more than a second to type and you can load in the background. Sometimes ux hacks are worth just as much as actually good building blocks.

Author here. I'm 17 years old and applying for college. If you work at or are an alum of a decently good college (or a great college like Yale and Stanford), I'd appreciate if you put a word in for me for admissions. Email in bio.

(And if you can't do that, please share my game on social media!)

I respect the hustle.

My first word of advice for aspiring tech entrepreneurs: Be determined.

I kept working on this with almost all my free time even after making zero technical progress (on making it high-performance and smooth) for four months.

My second word of advice: Never make a logo or name before your MVP, unless you need to convince investors. (I don't have investors so I can't speak on the relevance of a good logo and name.)

- If you're making something good, people will make logos for you. My logo was made by a community member for free.

- My team started choosing our name an hour before we launched. Once you know your market well and your product well, choosing a name is easy.

May I suggest adding life draining and "bleeding" as additional features?

What do you mean?

I tried the game but it says "Connecting, disable VPNs or proxies if this takes too long". Is the game down?

That's a different game. Our game's here: http://vnav.io

Fantastic work, and very fun game! Thanks for sharing :)

There seems to be a fashion for .io domains among the cool sites. From what I see, the domain isn't cheap: this one is $32.98/yr from NameCheap. When I am going to start a web experiment, I think I am going to go with .xyz which goes for $1, because I'm cheap.

Is there anything inherently useful in running a domain like .io?

It sounds cooler

One less character and familiarity.

.io are indeed "expensive", but to add one datapoint to your question: there's a concept/genre called "io games", mostly involving browser-based multiplayer games like this one (e.g. Agar.io, Krunker.io, and many others. a quick search leads to several lists of those; some of them don't use an .io domain, but lots of them do). That's probably another reason why, besides the "cool factor"?

.io still seems sort of reasonable, try a .jp domain :P

Check .pr

You’ll see why barely anyone in Puerto Rico uses them

Instead we use examplepr.con

I've read that .xyz domains (specifically email from .xyz domains) are blocked by default by some email providers because there has been so much spam from those domains historically (perhaps due to the price).

correct, spammers bought them when they were heavily discounted and attached negative brand association to them.

plenty of other options without baggage out there nowadays.

Problem I have with .io is that .com is more familiar with 1/3 the cost.

Very nicely done, congrats!

I connected to a geographically far away server (US West, from Europe) and there's a bit of a delay between keypresses and movement, and the movement of other units is somewhat choppy, I imagine due to network latency.

Have you thought of implementing client-side prediction and entity interpolation? Your game seems uniquely well-suited for these techniques, and if you made them part of the core engine, you might find yourself with an extremely popular product, since it's a complex feature to implement that everyone wants.

I've written at length about the topic here: https://gabrielgambetta.com/client-server-game-architecture.... If you go for it and you have questions or get stuck, I'll be happy to help :)

How do you replicate something like UDP for web based games though?

WebRTC datagrams could be used for this purpose, however it would likely add a lot of annoying complexity to the back end (dealing with STUN/TURN).

What transport to use and whether to use CSP are somewhat orthogonal problems. It's probably best to use both if you can, but either will improve things by themselves.

Thanks for the article! I think we used some of your resources when implementing the networking for https://curvefever.pro

I think the end-result is really good, almost no client-side input delay.

See also

https://diep.io - original, abandoned

https://arras.io - fan made sequel

http://woomy-arras.io - sequel of sequel

(None of these load as fast)

Is it supposed to work in Firefox? I've allowed all the scripts to run in FF 78.7, but there's an empty screen after pressing "play". There's a lot of errors in the web browser console though, mostly CORS ones. And the following: "Uncaught TypeError: CanvasPattern.setTransform: Argument 1 does not implement interface SVGMatrix."

It works in Firefox 85.0 on Windows 10.

Whoops– looks like we need to use feature detection and avoid using that on older browsers. Your Firefox is outdated, that's why it's not working.

I am using Firefox 84.02 and it is not working. Takes considerably more than a minute to show fill username screen.

rel="preload", which the author depends on for a lot of their performance, was only added in Firefox 85, which has only just been released.

This is a pattern that I have seen quite regularly in recent times, mostly via Next.js, I think:

  <link rel=preload href=FOO.js as=script>
  <script async src=FOO.js></script>

That is, a preload, followed immediately by using it (rather than using it much later in the document, as was the original intent of preload links).

(On this submission, servers.json receives this treatment. While talking of servers.json, two things are odd about it: although served as JSON, it’s actually JavaScript, and a random cache busting parameter is added to its query string, rather than the server just instructing the client not to cache it.)

I cannot imagine any way in which this makes sense: the preload line should be 100% superfluous (and thus mildly counterproductive). Is there some utterly bizarre reason why this does actually help things, or is it just simple cargo culting of a corrupted idea as I presume?

I think it's more of a resource prioritisation thing.

I THINK If the resource is async, it will still scan the document to find all resources before the downloads begin. Adding preload basically just tells the browser that the resource is important and should begin the download immediately.

Found this, kind of explains it https://speedcurve.com/blog/preload-scripts/

Hmm, interesting. That makes sense. Thanks for the info.

Every single time I’ve seen it done, it’s been used for all scripts. I’ll have to check at some point whether what you think is correct or not. I can easily imagine it going either way.

(Edit: actually, on reflection, sometimes there may be analytics-type scripts that don’t get this treatment, so yeah, if that’s the case it would make sense.)

Yes, it makes the request high priority: https://medium.com/dev-channel/javascript-loading-priorities...

> than the server just instructing the client not to cache it

Easier said than done, especially when it's served from a CDN you don't control the headers of.

Using a <script> tag and a callback is known as JSONP– this technique is used to bypass Cross-Origin Resource Sharing (CORS) for data fetching.

The game is lagging a bit because of the sudden influx of new players– new servers are being spun up as fast as we can.

Edit: New game servers are up. If your game is lagging, refresh the page.

Put a star field or some other background so movement is more obvious.

Some instructions might help or even a highlight on the points allocations at the bottom left.

or did I miss these? probably :D

Whoa I opened this on mobile (Opera) and it was a mess of overlapping text. I suggest you add a screen saying it's desktop only.

Chrome and FF mobile as well.

Yeah looks wrong on my mobile Chrome.

This might win the award for least mobile friendly website ever!

Great work! Are you using Websockets under the hood? Or something WebRTC-based, a la https://geckosio.github.io/ ?

WebSockets. I found that WebRTC was complicated, full of bloat, and less reliable. Most home TCP connections don't have enough packet dropping to warrant something like SCTP, the transport protocol behind WebRTC. If we wanted to mitigate head of line blocking we'd just alternate between two websockets.

Excuse me if this doesn't make sense, I'm non-US and don't understand the ordeal with college. Based on this project and your comments here on HN, you seem more knowledgeable than the average college-goer. Is college really necessary for you? Could you not skip straight to university?

In the US, people go to "college" at a "university". College is a level of education and a university provides that level of education. One alternative to a college education is what's called a "technical school", and you're right, the submitter probably doesn't need a technical school.

(To add to the fun, there are also community colleges, state colleges, and private colleges, all of which provide a college education but on a smaller campus than a university. Universities are generally quite large.)

As a US-ian who is surface level familiar with some non-US education, here in the US "college" and "university" tend to refer to the same thing, which is post-highschool education. Essentially, any higher-education that you aren't required to take, and likewise, have to pay for.

(Edit: for fellow US-ians, I'm vaguely aware that in some non-US places, "college" refers to something we'd either call highschool or in-between highschool and college)

College is (generally) divided into two categories, undergraduate, and graduate education. Undergrad constitutes broad and shallow education with an emphasis on a particular subject. Graduate education is much more in-depth and more selective of potential students.

I believe it's technically possibly to skip the undergrad phase and skip to getting a master's or doctorate degree, but almost never happens in practice. The hierarchy, both for higher education and the job market, expects you to have all of your "lower level" degrees, in spite of your actual abilities.

Even if you drop out of highschool and have a college degree, some jobs will still require you to get a highschool diploma substitute.

Doesn't look like it's loading at all for me ... hug of death?

Try updating your browser. It's having some issues on older browsers such as Firefox 78.

Just a suggestion:

I'd love a way to change the keybinds; using Dvorak means this is wholy unplayable for me (also a mech keyboard that doesn't have up-down-left-right in a traditional/usable access as you'd expect on most keybs.

Anyway, it definitely looks fun, and man did that load fast!

We plan to add keybinds and theme support very soon!

Fun game. Worth mentioning to other players that you need to use the number keys to upgrade your ship (see bottom left) right away. You're useless without upgrades.

I died a few times before figuring this out (and killed a few players who were obviously flying without upgrades).

Thanks for the detailed information. We just implemented that into "How to Play?" as you suggested.

Why did you redirect https to http?

Welp that was fun :) https://i.imgur.com/47f7IhU.png

Honestly the game really needs more balancing as I took a while to find a build which can defeat Necromancer.

Nice work taking the time to make your game load quickly! I'm sure I'm not the only person who closes most browser games' tabs when they take longer than a couple seconds to load. First impressions matter.

Cool, this is great! I was working on a multiplayer game and I found it difficult to make client movement smooth. Are you using client-side prediction for the player's movements?

Awesome!! How are you serializing data over the network? I see you're using WebSocket's arrayBuffer--did you use any tools to help with serialization?

It's currently using fasttalk2-re, a library capable of transmitting arbitrary dynamically typed values we developed in-house. While it uses the same protocol as https://arras.io, the code was completely rewritten from scratch. Here's the code: https://gist.github.com/CrazyPython/bb9505d4813cbd68235bb2da...

License: GPLv2+. Note the GPL doesn't apply to your server code or any art you use. The only thing this asks you to do is publish your client source code.

How does one get the square shaped ships? They seem far more powerful than the round ones and I can't find any in the upgrades.

I like the diep.io a-like game. What other JavaScript resources did you use to build this?

None. It's built completely from scratch, with no third-party dependencies.

FullStory, Google Analytics, and Sentry for monitoring and analytics.

I dug down into your comment history where you said you were using a custom Canvas2D engine. Hopefully you'll open source it like you said, this is right up my alley.

It's a difficult decision to open-source something you've worked very hard on and could very well make it much easier for competitors to destroy your moat. I wonder if anyone would support such an open-source framework financially.

AGPL might make sense with dual licensing so that any potential commercial competitors who use your library have to give you a vig, but anyone willing to use a compatible free license can use your code.

I understand that sentiment. You recreated diep.io so obviously their moat wasn't wide enough. Is the moat of having a Canvas renderer enough to prevent someone from making another diep.io game? Or does making any game from that renderer naturally compete with your game?

That's a lot of 3rd parties (I assume there are also some ad platforms).

If you ever decide to replace some of those analytics platforms with a more private solution you can have a look over my project: https://usertrack.net/

> (I assume there are also some ad platforms)

We don't have ads yet because of the Google monopoly that leads to them not partnering with games with fewer than 1 million MAU. We plan to add ads. However, I want to migrate our business off the ad market. Ideas include merchandising. Please feel free to send me suggestions for migrating off, ideally without making the game toxic or addictive.

Awesome Game! It is actually a lot of fun!

Cool game, very fun to play, well done!

Necromancer is the best build!

Yes, just played and Necromancer with auto-fire on, maxed out bullet damage, bullet speed, and reload speed. Got boring winning easily after half an hour.

Fun game though! Just needs a little more balancing.

Yup. I eventually finished with 500,000 points, at level 131, with a Necromancer.

I think the biggest thing is discoverability, both of the ship types and of the fact that you have resource points to put into the ship at the start. I embarrassingly didn't find that until probably my 20th death, and, on the turn I found it I cruised to the top of the leaderboard and never want back, leading me to think that no one else was finding it either.

I just made it show the player a toast/message to use their upgrades/skills/resource points on the bottom left, in addition to the message in "How to Play?" Hopefully people see that and it clears it up.

space needs some kind of texture so I can see my movement better

i enjoyed the game lol amazing!~

i cant seem to turn my gun?

It's been sitting there saying "Loading..." for the last few minutes. My guess is that the web site probably needs Javascript turned on in order to work correctly. That's not a problem, as I can see that the functionality of a game requires the abilities of Javascript. However, you should put up a message along the lines of "This game needs Javascript to work - if you want to play, please turn Javascript on. I promise to not do nasty things". And you should serve from HTTPS.

Reply on news.ycombinator.com