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.
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.
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 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.
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.
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)
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!)
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.
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?
.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"?
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).
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.
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.
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."
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.
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.)
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?
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.
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.)
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!
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).
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?
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.
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/
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.
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.
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?
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.
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.
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.
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.