Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Acolytefight.io – Multiplayer Skillshot Arena HTML5 Game (acolytefight.io)
66 points by BSTRhino 7 months ago | hide | past | web | favorite | 63 comments

Performance is bad on firefox but on chrome it worked fine. As for the game I think the gameplay is very awkward. In a skillshot game I want to be in really good control of my character. This could be improved by faster turn and movement rate(and perhaps being able to stop) or alternatively a more cave flier style both hands on keyboard combat where one hand is controlling the ship(arrow keys/wasd) and one hand is controlling weapons. As for the skills/weapons there are way too many in my opinion and the synergy of them feels awkward and the cooldowns are way too long. If you have 2 defensive spells I think they should be on a sub 5 second cooldown but maximum 1 sec duration and have all offensive spells kill on first or second hit to make to combat fast paced.

Yeah, I've got that feedback from some people. Something I've realised is that everyone is that there are two broad categories that this game looks like it could be similar to: * A twin stick shooter * A MOBA And I've got two distinctly opposing sets of feedback from those two groups. MOBAs have long cooldowns and you move and shoot with the mouse. Twin Stick Shooters let you move and shoot using separate controls (it's common to run away and shoot forward at the same time) and have very short (almost non-existent) cooldowns. I'm a MOBA person, and I based this game off my happy experiences with Warlock, the WarCraft 3 map, so I've ended up making something which is more like that. I think the genres are fun for different reasons and I can't please them both.

Moba’s feature a number of low-cd spells. I’d say the bigger differentiator is that mobas usually have a “skillset” while twin stick shooters usually have “set of skills”. That is, the former features a very high degree of synergy, and performing the whole combo is main task you want to achieve. That latter features shooting as the main goal, and your skills support that one basic task.

Your game is in an awkward spot because it fits neither: there’s no real combo to act out (i didnt look through the skills too thoroughly so maybe there are some interesting combos to derive), so your primary task is fireball’ing, with skills to support that task. Yet the cd is annoyingly long, so you’re mostly waiting!

The high risk shots dont seem to have real any way to allieviate the risk too: think of the basic moba combo: snare & pummel. You can still fire off the slow as hell ultimate, but its only really risk—free if they’re pinned first (and so pinning, not the ultimate, is really the thing you’re trying to avoid as the enemy).

Again, I haven’t gone through your game with any thouroughness to really judge; this is just my ideas on how skills play a significantly different role in the genres you’re coming from, and how theyd function in yours

Can I please NOT have to play against other people?

Why does my super cool laser ball marble madness character move like a beach ball in a bath tub?

I can't even figure out what to do, or why I should care about laser balls and triangle ghosts, and they're just killing me before I figure out how cool my lasers are.

Ah, that's fair enough, I should really add a training mode. That is good feedback! Thanks for trying!

Update, I figured out the beach ball problem: Firefox on a Mac.

I switched over to Chrome, and even Safari, and it was better, so it seems like Webkit/Blink/V8 is the best browser scoped runtime, for some reason.

If it helps, you can create a party and then click "Make Private" and then you won't have to play with other people (you'll just be in a party of 1). I should really make that workflow easier though, I wouldn't expect a new player to figure that out.

Yup, I had to dig to find it. The "party" link didn't seem like the option I was looking for, until I saw the "private" option.

Also, I created a private party link, and figured out how to add an AI bot, after learning the controls.

The AI bot was still too strong, and beat me every time, so I need dumber bots, to have more fun up front. I sent the link to myself, and opened it up in multiple private windows, to learn the rules, against dummy sessions I created by invite.

But either way, maybe add a default practice button, that puts people in a private game, against a really weak AI, and you have your trainer option for new users.

I think a big, obvious training button sounds like a good idea. Especially for users that get killed in a competitive game with other people.

Oh good, yes glad you found it. I will take all your feedback into account. I really should add a training mode! Thanks!

Was this inspired by a custom map on Warcraft 3? Name is escaping me right now.. Been such a long time since I played it!

Would love to know about some of the tech you used to build it

Yes, it was based on Warlock, the WarCraft 3 map! I had many fun Friday night LAN parties playing that map and wanted to recreated it!

It's TypeScript, canvas, React (for the UI elements), NodeJS and socket.io on the server. The entire simulation is run on the client. It is deterministic so it is just replaying the action stream identically to all the other clients to stay synced. The server is running a pretty simple loop really, every 32 milliseconds it collects all the actions and broadcasts them to all the clients. If there is anything else you want to know, feel free to ask, I'm happy to talk about it :).

Did you use any server or client game or rendering framework? eg. Phaser, pixi or the like. And when you say the simulation is running on the client, do you mean it is client authoritative and the server just acts as relay? What sort of actions do you send?

The only thing I'm using is Planck.js as the physics engine, besides that it's just raw canvas. I did spend quite a bit of time deciding whether I should go for WebGL or Canvas, but Canvas was just easier and it performs well enough.

There are actually 5 canvases stacked on top of each other - background, glows, objects, interface, cursor. The glows layer has a CSS blur property on it, which lets it be done on the GPU. Initially I just used the canvas shadowBlur everywhere but it was horribly slow, so this was one of the biggest performance boosts. The other layers are just there because they're invalidated/refreshed at different rates for performance reasons. The interface layer is particularly slow to update as its got to draw all the button icon paths, so it only ever rerenders the parts as they change, as opposed to some of the other layers which rerender every frame.

That was it! Man completely forgot about that game! This is a great take on it, I was able to quickly have fun, especially once I was able to recognize the concept. I love that you can mod via JSON as well. Do you have the code open sourced anywhere?

Thanks! I'm not open sourcing the game at this time, maybe in the future I might consider it.

Reminds me of the game Magicka (https://en.wikipedia.org/wiki/Magicka)

I've never heard of that game but Magicka looks awesome! Thanks for sharing it with me!

It’s hilarious to play with friends, you’ll frequently mix up keys and drop a boulder on yourself or party members.

If you want something similar with a Starship Troopers vibe, also check out Helldivers!


I really loved magicka wizard wars, it was such a shame when it was shut down.

This is super cool! Networked games are a special kind of challenging to pull off, and I'm always really impressed by people who manage to pull these kinds of projects off at any level of polish. Any plans for further development?

Yeah, the multiplayer part certainly was a big part of the challenge of this game! In terms of future development, I have some ideas but I think I will hold on to them so they can be more surprising later :)

Unplayably slow on this old thinkpad (core 2 duo)

:( sorry, I guess it's still quite demanding, too demanding, despite being a browser game

Are you using Chrome?

No, FF 52.9.0 x86_64 as shipped in debian 9.5.

That may well be why. There are tons of reports of FF being unusably slow even on the newest processors.

I'll see if I can try newer versions of FF when I get around to it.

Chrome, like all Google trash, is not an option [0].

[0] https://www.theregister.co.uk/2015/06/17/debian_chromium_hub...

Design question: are the players click-to-move because that improves performance compared to, say, following the cursor at all times? Compare this with agar.io, where the player is always moving towards the cursor.

Well done on this game. I assume I'm playing on American servers but as an Australian this hasn't caused me many issues.

It's not for performance reasons actually, in fact it is already sending every single mouse move to the server because there is a certain spell (Acolyte Beam) that tries to follow your cursor and needs this information.

I did some user testing with following the cursor at all times and people didn't seem to like it. I think the difference between this and agar.io is its quite common to want to be aiming and moving in two different directions, so the mouse click gives more control.

On this topic, one interesting thing which came up in testing was how important it was for the Acolyte to "move through the spells". Initially movement was a spell, and so if you cast another spell, it would stop movement. The game was very stuttered. When I separated out the code for movement from spellcasting, the Acolytes started moving fluidly and the game was much better :).

As for the servers - there are three servers - in Australia, US and EU - so you're playing local. I'm from New Zealand, and US lag was unbearable for the reaction time required for this game. Google Cloud Platform is awesome in that it automatically connects you to your closest server :).

Hmm... and now it's time to make bots that play the game better than I ever could.

If you go to the AI page you can program your own bot there! It's built-in.

I really enjoyed this. Bookmarked! Would be great to get some sound effects, currently all the actions don't feel that heavy.

Woohoo! Yeah sadly being a solo developer I could only do what I knew how to do, don't yet know how to do sound effects, but I think that would be worth looking into! Thanks for playing!

BSTRhino, would you consider open sourcing this so that I can contribute to the development?

Or can I talk to you about joining your project?

Thanks for your offer... at this point I want to keep doing it myself, I think when I run out of time/energy I will probably open source it. If you want you can message me your contact details (you can message the Facebook page http://fb.com/acolytefight maybe) and if I change my mind in the near future I will at least have your contact details.

How does server architecture look like and how much it costs?

I'm using Google Cloud Platform. There are three servers - Australia, EU and US. The Google Cloud load balancer automatically connects people to the closest one. I had to do some special things to make websockets work correctly - configured session affinity (with a cookie) and the HTTP timeout has to be set to a large number. It costs around $150 US a month, which means at some point I will probably stop running the game because that's a lot.

The entire game is simulated on the client. It is a deterministic simulation, so the same sequence of inputs will generate the same state. The server doesn't do any of the simulation at all, it just passes the action sequence to all the clients. Every 32 milliseconds the server wraps up all the messages received and sends them to all clients in the game as the next frame. I used the nanotimer library in NodeJS to get this 32 millisecond interval as accurate as possible. Because the server does none of the computation, it theoretically can support lots of clients. I don't know how many yet, but maybe a thousand? Even at its peak usage of 40 users yesterday it was still only taking about 1-2 milliseconds to do each frame.

$150 for 40 users is quite a lot, is it fixed rate or will it rise when DAU rises?

This game is pretty much unplayable on Firefox on Linux due to how slow it is, even with an 8th gen i7 processor. Seems to run fine on Chrome, but having to switch is super obnoxious

Yeah, I'm on a Mac and it's unplayable with Firefox. Firefox works fine on Windows though, weirdly enough. I've made all the performance improvements I can think of and it's still really slow. I don't know how to fix it, if I could I would!

Have you tried turning off the

#glows { filter: blur(5px) }

Canvas can be fast but if you step into the unoptimized areas the slowdowns can be substantial. Blurring can slow things down a lot. Drawing strokes with a thickness other than one also seems to be an issue. I had one game running at 10fps on an i7 with fancy 3d card, it ran at 30fps on a $200 arm ChromeBook.

This wee game prototype http://www.fingswotidun.com/ld42/post/ runs fine on fairly modest cellphones but the puff of smoke on death kills performance due to the multiply composite mode not being accelerated.

The only thing you can really be sure of is that drawing images is fast. Untransformed images are very fast, rotated and scaled images, less so but still quite impressively fast.

This http://www.fingswotidun.com/ld42 uses only unscaled images and ran at full FrameRate on an 900Mhz Arm9 Mali400.

For reference. A machine that handles only a few fps on Acolytefight handles 40,000 bunnies on this https://lemon07r.github.io/kha-html5-bunnymark/

OMG... that's exactly what the problem was. I turned that off and performance is 60fps on Firefox once again. Now I need to figure out how to I detect the conditions that I need to turn it on/off... it actually works fine on some Firefox Windows installations at least.


Looks like Firefox does the blur in software whereas the other browsers do it in hardware, but apparently you can turn on gfx.webrender.all to make Firefox do it in hardware, not that it seems to work for me...

Edit: It's just easier to turn off blur in Firefox always. So I'm doing that. Turns out there is a clever way to detect Firefox from CSS. Thanks so much for the suggestion!

This is how it goes.

Remember when Microsoft started to move faster then specs with IE? At first, all office applications required IE to work and nobody cared. Then games. Then it was a mess and netscape died. Then it got better again.

Now we have chrome, with google moving faster then the specs. I can't even join a hangouts in my office because google didn't bother to update the plugins (after they forced their own plugin into obsolesce by pushing the chrome extension format as a standard and lobbying firefox to adopt it). Now games. Wonder how long firefox will last this time.

> with google moving faster then the spec

What does that mean?

Specs take a long time to arrive. There's a lot of toing and froing, discussions and revisions. Many take years, some take decades.

Netscape, Google, Microsoft and Apple have all been guilty of losing patience and ploughing ahead by adding features to their browsers that aren't fully standards-backed at one point or another, but it's usually the decisions of the market leader that have the biggest impact. Lots of people develop for Chrome and assume it'll work elsewhere as a result, or worse they don't care.

"Guilty of losing patience" is nonsense. If you look at the process by which web standards advance, it requires that two or more vendors have created proof-of-concept implementations, before the standard can be standardized. That, in fact, how standards have always worked.

As a Firefox user, I don't like the results either. But I don't think any of the actors in question are acting in bad faith. Not even the lazy web developers who build Chrome-only games; why should they build shit for me, if they don't want to?

I'm a web game builder and I'm definitely guilty of that. However, I make the games for myself. If other people want to play, fine, but I have no personal reasons to support anything other than my own setup. I presume a lot of other indie game developers are the same. I don't make any money on the games and have neither time, resources nor interest in making it compatible for browsers I don't use.

Yeah, this is pretty much it. I definitely have tried with a lot of browsers, I learnt about a lot of quirks of different browsers doing this project. I just gave up on Firefox because I ran out of ideas to try. It wasn't due to lack of trying.

Anyway, someone made a suggestion of what to try in another comment, and turns out it was really easy, so now it's fixed. Firefox just does software blurring which is super slow and so I just had to turn that off entirely for Firefox. So Firefox performance is now okay enough, although still not quite like Chrome.

For example Chrome has implemented Web Components which Polymer uses. Most Google sites (e.g. Google Play Music) use Polymer, so they work fine and speedily on Chrome, but on other browsers they use a slow Javascript polyfill.

Actually I think Firefox supports them natively now but until very recently it didn't.

car analogy. imagine one car maker sells 80% of the cars. tomorrow they change how the gas pump works to only fuel their cars, but it fills a tank 5s faster! and they use the fact that they got 80% of the market already to force all gas stations to change to their pumps or lose their customers. now everyone buys their car because they can't even find a gas station with the universal pump anymore.

companies that move "faster than the standards" always do so under the guise of offering better products faster, but with the actual goal of locking in consumers to later enjoy a monopoly. see sony trying to always come up with a new media device, minidisc, memorystick, etc.

People who weren't there don't know, and this is why they don't care either.

It's exactly the same with Google, they have become the Microsoft from before, being bad guys.

Slowly people are seeing it but they are not going to help by switching browsers it seems, so we are doomed to repeat this.

It's kind of a shame that this is the most up voted comment where this guy is just sharing something cool he made, he's not saying it's the next big thing. It may not be worth spending the time to optimize for these other platforms unless he can get some initial traction.

I would be curious to know where the performance lies and what could be done to improve. I saw on another commend he mentioned how using a css blur was a big performance gain over canvas shadowBlur

I was curious what the networking looked like as I loosely floated the idea of how hard it would be to make a bot for this.

Well, the networking's very trivial JSON as WS text frames. Hardest task to do is reason through the X and Y attack direction information. I probably won't do that; others surely will.

But there is an absolute firehose of frame data flying over the wire, I would say maybe 10 per second.

So, my guess is this: the dev only ever tested in Chrome, so they inherently avoided what Chrome is slow at.

Bot programming is built in, see the AI page. It runs your JavaScript as a web worker and gives you the world state.

It would take a lot of work to write a bot on the raw network data because you're missing the simulation code that applies the actions and so won't know the world state.

There are actually specific lines of code for Firefox, Edge and Safari all through the code. Edge can't draw a line if it's width is bigger than its length, so I had to code around that. Safari and Firefox tell you the wrong mouse button on the mousemove event. Firefox performance improved dramatically when I removed all the alphas from the top objects canvas layer. I've tried lots of different ways to stop the scrolling on iOS and Android, and both required different approaches. It's not due to lack of trying. At some point I just had to give up on Firefox for Linux. No one is paying me to make this game!

Ooh wow. I feel stupid for not at least seeing what the AI page was about, haha. That's awesome.

I tried using the default AI, and since nobody else was connected I picked "Play vs AI". Apparently the bots also use the same AI... and so they all proceeded to engage in a hilarious (and cute) sped-up standoff dance with each other.

And regarding making my own bot, I originally did mean that to mean figuring out/reverse engineering the world state, etc. This is absolutely trivial because this is computed by the clients so there's no server to headscratch about. But the AI system you're using is several levels cooler.

The only suggestion I'd make is to include a socket.io+etc bootstrap that lets people run bots using Node. A rainy-day project might be a login system that lets people tie bot instances to specific rooms...

I had no idea you'd poked the various browsers. Sorry about joining in the flamewar on that, heh. I (honestly) wonder why FF is so much worse than Chrome :/ I wonder if everyone who had issues was using it on Linux.

This is fun, btw. Thanks for building it. :P

On Windows with a 8700k and GTX 980ti and it runs at about 10fps in Firefox. Runs slightly better in Edge, but not by much.

On Windows 10 with a 8700K and a 1080Ti and it runs fine on Firefox. Clearly you need a GPU upgrade!

Based on the descriptions of poor performance on otherwise fast hardware in this thread, I was really expecting something a lot more graphically impressive. That's the web for you I guess, keep adding layers of abstraction until even the simplest stuff runs like molasses.

Yeah, I'm confused about this too. It's literally just circles and lines, so I was surprised how much effort it took just to get it to this level of performance.

The solution is for Firefox to fix their broken performance. I don't understand how all comments make it sound like this is a problem with Chrome.

Not likely. There are tons of webgl demos out there, performing quite advanced tasks, well beyond what this game is up to, and Firefox and Chrome produce equal results.

Example: https://zenphoton.com/

My guess is there's some sort of misplaced network hook, introducing latency into OP's event handlers, and it's producing a noticeable side-effect in Firefox, which, perhaps Chrome optimizes for, as a common, anticipated programmer tendency, that gets re-ordered behind the scenes.

Seems a big part of it was the software rendering of the filter: blur(5px) in Firefox, where other browsers are doing this in hardware. I've removed that CSS class for Firefox specifically now, and it's performing a lot better. The profiler now says 60% idle, 14% graphics, whereas previously there was no idle and it was 85% graphics.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact