7 ms·
Show HN: My multiplayer custom-engine game that loads in less than a second
- crazypython 6y agoThe 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.
- crazypython 6y agoHi. 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.
- michaelpb 6y agoLooks 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.
- onion2k 6y agoI 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.
- iforgotpassword 6y agoI 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.
- skinkestek 6y ago> 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.
- redis_mlc 6y ago> I have not spent more than ~$250 on a computer in like a decade You're fine using the Internet even on netbooks if you disable web fonts and use uBlock Origin. Old computers can't run Docker, which requires VT-x: https://en.wikipedia.org/wiki/X86_virtualization https://en.wikipedia.org/wiki/X86_virtualization
- dom96 6y agoNice! 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 https://stardust.dev/play
- crazypython 6y ago> (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.
- smolder 6y agoLove 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.
- tobr 6y ago> nearer servers are closer This accurate statement is correct.
- lovelyviking 6y agoVery nice game, but would you add aiming with keys? I have no mouse for instance ... very difficult to win shooting in one direction only :)
- soared 6y agoCool 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.
- psawaya 6y agoGreat work! Are you using Websockets under the hood? Or something WebRTC-based, a la https://geckosio.github.io/ https://geckosio.github.io/ ?
- crazypython 6y agoWebSockets. 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.
- gibs0ns 6y agoExcuse 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?
- hathawsh 6y agoIn 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.)
- spijdar 6y agoAs 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.
- VectorLock 6y agoI like the diep.io a-like game. What other JavaScript resources did you use to build this?
- crazypython 6y agoNone. It's built completely from scratch, with no third-party dependencies. FullStory, Google Analytics, and Sentry for monitoring and analytics.
- VectorLock 6y agoI 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.
- crazypython 6y agoIt'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.
- daotoad 6y agoAGPL 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.
- VectorLock 6y agoI 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?
- XCSme 6y ago
- neodymiumphish 6y agoJust 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!
- crazypython 6y agoWe plan to add keybinds and theme support very soon!
- phreack 6y agoWhoa 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.
- defanor 6y agoIs 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."
- neogodless 6y agoIt works in Firefox 85.0 on Windows 10.
- crazypython 6y agoWhoops– 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.
- abhayhegde 6y agoI am using Firefox 84.02 and it is not working. Takes considerably more than a minute to show fill username screen.
- shakna 6y agorel="preload", which the author depends on for a lot of their performance, was only added in Firefox 85, which has only just been released.
- surround 6y agoSee also https://diep.io https://diep.io - original, abandoned https://arras.io https://arras.io - fan made sequel http://woomy-arras.io http://woomy-arras.io - sequel of sequel (None of these load as fast)
- listic 6y agoThere 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?
- redmattred 6y agoIt sounds cooler
- reidjs 6y agoOne less character and familiarity.
- jlbribeiro 6y ago.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"?
- Aeolun 6y ago.io still seems sort of reasonable, try a .jp domain :P
- rovr138 6y agoCheck .pr You’ll see why barely anyone in Puerto Rico uses them Instead we use examplepr.con
- healeycodes 6y agoI'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).
- imperio59 6y agoCool game, very fun to play, well done!
- swyx 6y agoi cant seem to turn my gun?
- jonplackett 6y agoThis might win the award for least mobile friendly website ever!
- sfgweilr4f 6y agoPut 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
- munro 6y agoAwesome!! 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?
- crazypython 6y agoIt'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 https://arras.io, the code was completely rewritten from scratch. Here's the code: https://gist.github.com/CrazyPython/bb9505d4813cbd68235bb2daa1e57182 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.
- nosefrog 6y agoCool, 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?
- ALittleLight 6y agoFun 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).
- crazypython 6y agoThanks for the detailed information. We just implemented that into "How to Play?" as you suggested.
- iruoy 6y agoWhy did you redirect https to http?
- crazypython 6y agoAuthor 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!)
- chairmanwow1 6y agoI respect the hustle.
- crazypython 6y agoMy 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.
- airstrike 6y agoMay I suggest adding life draining and "bleeding" as additional features?
- crazypython 6y agoWhat do you mean?
- XCSme 6y agoI tried the game but it says "Connecting, disable VPNs or proxies if this takes too long". Is the game down?
- 6y ago
- deleted 6y ago[deleted]
- timothyduong 6y agoNecromancer is the best build!
- gamegoblin 6y agoYes, 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.
- SamBam 6y agoYup. 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.
- crazypython 6y agoI 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.
- tcbasche 6y agoDoesn't look like it's loading at all for me ... hug of death?
- crazypython 6y agoTry updating your browser. It's having some issues on older browsers such as Firefox 78.
- schemescape 6y agoNice 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.
- manduz 6y agomy man am at 774k score and lvl 150, what do?
- felipemnoa 6y agoAwesome Game! It is actually a lot of fun!
- swayvil 6y agospace needs some kind of texture so I can see my movement better
- ggambetta 6y agoVery 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.html 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 :)
- tjchear 6y agoHow do you replicate something like UDP for web based games though?
- seangrogg 6y agoWebRTC 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).
- ggambetta 6y agoWhat 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.
- XCSme 6y agoThanks for the article! I think we used some of your resources when implementing the networking for https://curvefever.pro https://curvefever.pro I think the end-result is really good, almost no client-side input delay.
- Trung0246 6y agoWelp that was fun :) https://i.imgur.com/47f7IhU.png 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.
- joshxyz 6y agoi enjoyed the game lol amazing!~
- mnw21cam 6y agoIt'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.
- chrismorgan 6y agoThis 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?
- __alias 6y agoI 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/ https://speedcurve.com/blog/preload-scripts/
- chrismorgan 6y agoHmm, 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.)
- crazypython 6y agoYes, it makes the request high priority: https://medium.com/dev-channel/javascript-loading-priorities-in-chrome-57c54cfa6672 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.
- jtms 6y agoHow 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.