News for hackers. Stuff that matters.
Re:Tools we used to create a hit HTML5 game on Steam by ermir on Tuesday November 19, 2019 @11:08AM (#21574458)
HTML/JS is criminally underrated as a game development platform. You get so much from it, like instant deployment, delivery, multiplayer features, and so much more. You can just send a link to your friends and they can join your game with a single click.

The reason why business apps went all to the web still holds for games as well. Games like agar.io use these features, such as no downloads and instant start, and their success speaks for itself.

Re:Tools we used to create a hit HTML5 game on Steam by danShumway on Tuesday November 19, 2019 @01:54PM (#21576740)
My current project, Loop Thesis, is completely HTML5/Javascript. It's going to be a downloadable game, but (at least right now) I can bundle it entirely in a web browser, and often do for demos.

It's complicated.

I don't regret writing Loop Thesis in Javascript; there are substantial benefits to the web as a platform. If I went back to rewrite Loop Thesis from scratch, I wouldn't do anything different. But benefits aside, there are also complications and headaches, particularly around timers, audio, controller support, and garbage collection. I think there are concerns that have to be balanced.

There's definitely room for more games on the web, and there are huge benefits to looking at it as a platform, but I don't want to give the impression that it's all rainbows.

Re:Tools we used to create a hit HTML5 game on Steam by probably_wrong on Tuesday November 19, 2019 @11:22AM (#21574647)
I would bet that the reason HTML/JS is "underrated" is because it presents a unique problem: that no two browsers behave the same way when it comes to HTML rendering.

As a quick test I just opened two browsers in my PC (Windows), ran the Acid3 test, and got different results at different speeds. My phone's browser gave me yet a third result. That's a bad start for a multimedia platform that I'll be in charge of supporting.

For all its weaknesses, there was a platform that offered all you mentioned plus good portability and saw the success you speak of: Flash.

Re:Tools we used to create a hit HTML5 game on Steam by kyle-rb on Tuesday November 19, 2019 @12:32PM (#21575634)
When people refer to HTML5 for games (including this post) they usually mean the HTML5 canvas and its associated APIs (canvas/webGL), not using actual HTML elements to render game graphics.

From what I know, canvas rendering is pretty much the same across different browsers. It's a pretty low level API so there's not as much room for interpretation. In any case, the Acid3 test you're running is focused on the specifics of HTML/CSS layout, and don't think it tests the canvas at all.

I think that canvas has done a good job of taking over the use cases that Flash had, and is very portable these days (basic canvas has 98-99% support[0]).

[0] https://caniuse.com/#feat=canvas

Re:Tools we used to create a hit HTML5 game on Steam by jtolmar on Tuesday November 19, 2019 @04:35PM (#21578563)
Canvas rendering isn't that consistent, and when it goes weird it's often OS specific instead of merely browser specific. Some things I've run into:

- OSX likes to turn random Unicode symbols into emoji (extends past Canvas)

- Fractional font sizes on Chrome/Linux get bizarrely stretched out (after a transform that makes the font not a fractional size)

- Complex clipping operations freak Chrome out

- All the compositing rendering options are broken somewhere or mis-defined to the point that it's weirdly hard to render anything to an alpha channel

You also need input APIs to make a game, and the input APIs often have strange inconsistencies in function names, returned objects, or event ordering.

Canvas is nice and straightforward if you want a purely sprite-based game with only mouse/keyboard input (but even then you need to jump through hoops if you want pixel art). Anything beyond that is going to need cross-platform debugging.

Re:Tools we used to create a hit HTML5 game on Steam by Mirioron on Wednesday November 20, 2019 @04:47AM (#21582460)
Canvas has also had some really weird performance issues in the past that are browser specific. Chrome once decided that the number of images used was too many in an animation, so it had to decode some of the images in the animation on the fly. This obviously killed all performance. This bug has been fixed, but I'm sure there are many others like it around.
Re:Tools we used to create a hit HTML5 game on Steam by mrec on Tuesday November 19, 2019 @01:05PM (#21576054)
> ran the Acid3 test, and got different results at different speeds

It's worth checking the Acid Tests homepage [1] here:

> Acid3, in particular, contains some controversial tests and no longer reflects the consensus of the Web standards it purports to test, especially when it comes to issues affecting mobile browsers.

[1] https://www.acidtests.org/

Re:Tools we used to create a hit HTML5 game on Steam by ermir on Tuesday November 19, 2019 @11:28AM (#21574753)
Well, the rendering problem can be solved by using an existing game engine. Rendering is done in WebGL, and the engine abstracts away the browser-specific details.

Furthermore, because of Google's dominance, not many browser engines are left in the market. Essentially all you have to do is support WebKit, Gecko, Blink, and you'll cover 99.9% of your userbase.

Re:Tools we used to create a hit HTML5 game on Steam by vertex-four on Tuesday November 19, 2019 @12:34PM (#21575661)
The HTML part of javascript game engines is generally just enough to get a <canvas> on screen and dive into WebGL.

The thing is, you can target Unity/Unreal/etc at a browser and get most of the benefits listed above, plus the benefit of using more-or-less the same toolkit as everybody else.

Re:Tools we used to create a hit HTML5 game on Steam by Mirioron on Wednesday November 20, 2019 @04:49AM (#21582468)
Has Unreal improved their HTML5 offering? It used to be rather poor, because of the immense filesize of the engine. Have they got it down to reasonable levels yet?
Re:Tools we used to create a hit HTML5 game on Steam by greggman2 on Wednesday November 20, 2019 @02:22AM (#21581773)
How is that a unique problem? If you have an iOS native app and you want an Android native app the difference are probably 100x the differences needed to deal with Safari's quirks vs Firefox's vs Chrome's. Same for Mac->Win->Linux.
Re:Tools we used to create a hit HTML5 game on Steam by boomlinde on Wednesday November 20, 2019 @04:05AM (#21582277)
The context of the discussion is HTML/JS as a game development platform. Considered as a platform, that is rather unique. iOS and Android are generally not considered as a single platform.
Re:Tools we used to create a hit HTML5 game on Steam by kaycebasques on Tuesday November 19, 2019 @03:23PM (#21577859)
> HTML/JS is criminally underrated as a game development platform.

Tom Greenaway is making the same argument: https://web.dev/ready-player-web/

> You can just send a link to your friends and they can join your game with a single click.

Web Bundles takes it a step further and lets you share the entire game, P2P, as a single file: https://web.dev/web-bundles/

Disclosure: I work on web.dev

Re:Tools we used to create a hit HTML5 game on Steam by gavinray on Tuesday November 19, 2019 @04:42PM (#21578619)
Woah, I tend to keep up on the fairly bleeding-edge of web tech and I hadn't heard of Web Bundles before.

It seems pretty neat, my question is what the functional difference between this and running something like wget with recursive and convert-to-local flags?

Let's say I have some contrived portfolio website and it contains links to several sub-page sections, and some static resources (images, JS, fonts, CSS, etc).

I can run this and get an offline copy of the website that I can browse or distribute how I wish:

  wget --mirror --convert-links --adjust-extension --page-requisites --no-parent http://example.org
Re:Tools we used to create a hit HTML5 game on Steam by skymt on Tuesday November 19, 2019 @11:43AM (#21574984)
You don't need to develop for HTML/JS directly to target the browser as a platform. (Not to say it's not an option worth considering, just that you can get the delivery benefits from other stacks.) Many current engines can build for the browser as well as native applications: Unity, Godot, GameMaker, OpenFL come to mind.
Re:Tools we used to create a hit HTML5 game on Steam by ermir on Tuesday November 19, 2019 @12:24PM (#21575525)
Using things like DOM integration, WebRTC multiplayer, URLs as navigation requires you to develop for the web as a first class platform , which you can only do with JS directly.
Re:Tools we used to create a hit HTML5 game on Steam by izacus on Tuesday November 19, 2019 @12:34PM (#21575660)
And you lose being able to deploy native, responsive and less buggy code to mobile devices, consoles and other desktop OSes.

The value proposition just isn't there when Unity and similar engines exist.

Re:Tools we used to create a hit HTML5 game on Steam by ermir on Tuesday November 19, 2019 @01:53PM (#21576734)
Yes, you lose many of those capabilities, but you also gain new ones. I bet agar.io would never have been played had it been a Windows executable or a Steam game. The friction in starting the game and playing the game is so low, that it drawfs all other downsides by far.

In fact, this is the exact justification why HTML/JS business apps have thrived, because even though JS has tons of problems, all of them can be overlooked when you gain the capabilities of the web.

Re:Tools we used to create a hit HTML5 game on Steam by degenerate on Tuesday November 19, 2019 @01:26PM (#21576331)
Hacking in HTML5 multiplayer games is a difficult issue. There are cheats/hacks for Agar.io, Slither.io, etc utilizing JS injection scripts and extensions.
Re:Tools we used to create a hit HTML5 game on Steam by riadd on Tuesday November 19, 2019 @01:39PM (#21576544)
Fun fact: there is a hacking forum that still have failed to create trainers for Curious Expedition due to "weirdly changing memory addresses". I think if they would have realized that it was just a browser game it would have been much easier for them.
Re:Tools we used to create a hit HTML5 game on Steam by ermir on Tuesday November 19, 2019 @01:50PM (#21576688)
I have been thinking about this problem a lot and I may have a solution. Essentially, every time the user loads the page he gets a different obfuscated version of the base game. In this way, no script or plugin can be made to hook to your code since it's different every time the game loads. In addition, you can also obfuscate the protocol (for multiplayer) so that network sniffing tools can't capture the relevant data when communicating with the server. Finally, you can tie an obfuscated version of the game to a particular user, so you can find hackers or make it harder for them to run the game.
Re:Tools we used to create a hit HTML5 game on Steam by z3t4 on Tuesday November 19, 2019 @03:41PM (#21578035)
Or just run everything on the server (hit detection, positioning, etc) and just use the client for rendering and interpolation.
Re:Tools we used to create a hit HTML5 game on Steam by strbean on Tuesday November 19, 2019 @05:45PM (#21579156)
But that means writing a reasonable server!

Jokes aside, there are some Korean MMOs that rely on excessively trusting the client as a core part of their business model. If you offload as much state as possible to the client your server costs go way down. Maplestory is an example of this: if a player is alone on a map, essentially all map state, physics, etc. is handled purely on the client. When another player enters the map, half of the NPCs get 'handed over' to that player, and the server syncs state between the two clients.

On the other hand, you have to keep in mind hacks like bots and wallhacks. In the case of bots obfuscation is practically your only defense. In the case of wallhacks you can try to keep clients in the dark as much as possible, but there will always be a period where the client knows more than the player should (unless you want enemy players to 'pop in' once they are fully in view).

Re:Tools we used to create a hit HTML5 game on Steam by Mirioron on Wednesday November 20, 2019 @04:55AM (#21582485)
>If you offload as much state as possible to the client your server costs go way down.

It also makes the game much more fluid without adding a lot of complexity to hide the latency. I think South Korean games can get away with it because they require an SSN to register. If you get caught cheating then making a new account isn't easy.

Re:Tools we used to create a hit HTML5 game on Steam by Vekz on Tuesday November 19, 2019 @03:49PM (#21578116)
This is a really interesting idea and something i've been thinking on. Thanks for sharing.
Re:Tools we used to create a hit HTML5 game on Steam by boomlinde on Wednesday November 20, 2019 @04:37AM (#21582419)
Cheating using modified clients is hardly unique to HTML5 games, and the solution is the same everywhere: move game logic decisions on the server and only have the client predict those decisions while it sends its own choices to the server. The problem with Agar.io etc. is maybe that they don't have a sound multiplayer model designed with cheating in mind, or that the cheats concern things that the server can't control, like client decisions (e.g. aimbot) or client presentation (e.g. wallhack).
Re:Tools we used to create a hit HTML5 game on Steam by lord_braleigh on Tuesday November 19, 2019 @03:04PM (#21577648)
Can't all games be hacked/cheated? Clients are inherently untrustworthy...
Re:Tools we used to create a hit HTML5 game on Steam by meheleventyone on Tuesday November 19, 2019 @03:18PM (#21577800)
Yes but very few games bundle tools as good as those in Chrome to help you reverse engineer and manipulate them.
Re:Tools we used to create a hit HTML5 game on Steam by strbean on Tuesday November 19, 2019 @05:47PM (#21579173)
I still haven't figured out a way to disabled `debugger` statements in Web Developer Tools without disabling all breakpoints.

It's a pain when a site has heavily obfuscated code that constantly spawns anonymous functions that look like `function() { debugger; }`.

Re:Tools we used to create a hit HTML5 game on Steam by meheleventyone on Wednesday November 20, 2019 @06:23AM (#21582889)
At a guess you could make a custom build of Chromium with the debugger statement disabled?
Re:Tools we used to create a hit HTML5 game on Steam by Kinrany on Tuesday November 19, 2019 @03:55PM (#21578186)
On the other hand it's a great platform if you do want to support custom clients. Not all multiplayer games even need PvP.
Re:Tools we used to create a hit HTML5 game on Steam by ntr-- on Tuesday November 19, 2019 @09:18PM (#21580564)
Completely agree. Shameless plug: our game https://mnml.gg/

has been an absolute dream to develop for a 2 person team. One of the benefits we've found that rarely gets mentioned is that there are minimal fees. Our only outgoings are server costs and Stripe fees: no payments for Unity/Unreal, no App/Play store cuts. Another is that depending on your game mechanics lots of existing technologies solve problems that big game engines often handle for you. Thanks to Postgres transactions we have never spent a second thinking about client/server synchronisation.

For those who saw the game on HN a few weeks back, we have turbocharged our tutorial and game information and the player base is growing. Jump on and play a round!

Re:Tools we used to create a hit HTML5 game on Steam by pjmlp on Wednesday November 20, 2019 @03:02AM (#21581985)
The major problem is that you have zero control over canvas and webgl being hardware accelerated, and this destroys the whole experience.
Re:Tools we used to create a hit HTML5 game on Steam by pietrovismara on Tuesday November 19, 2019 @01:15PM (#21576177)
If only JS had better multithreading shared memory capabilities it would be perfect for me. But just with fixed length array buffers limited to numbers I can't do much. I tried regular IPC instead but there's too much latency. It is a huge shame.
Re:Tools we used to create a hit HTML5 game on Steam by BubRoss on Tuesday November 19, 2019 @03:04PM (#21577647)
When you say regular IPC, have you tried this?

https://github.com/LiveAsynchronousVisualizedArchitecture/si...

It should be MUCH faster than loopback IP IPC if that's what you were trying.

Re:Tools we used to create a hit HTML5 game on Steam by disease on Tuesday November 19, 2019 @01:51PM (#21576710)
I was going to reply "but SharedArrayBuffer!" until I checked the site below and came back to reality.

https://caniuse.com/#feat=sharedarraybuffer

Re:Tools we used to create a hit HTML5 game on Steam by littlecranky67 on Tuesday November 19, 2019 @04:24PM (#21578472)
Funny thing is, it is not supported on purpose. Most browser had support for SharedArrayBuffer but it got disabled when Meltdown/Spectre came to light (as well as high precision timers in the browser) [0].

[0]: https://www.sitepen.com/blog/the-return-of-sharedarraybuffer...

Re:Tools we used to create a hit HTML5 game on Steam by pietrovismara on Tuesday November 19, 2019 @02:40PM (#21577330)
And as I said, SharedArrayBuffer is a fixed length, number only array. While it may work well for some use cases, it really can't for many others. Or am I missing something?

By the way, browser compatibility is not a concern if you develop for Electron. Just target Chrome and you're done.

Re:Tools we used to create a hit HTML5 game on Steam by seangrogg on Tuesday November 19, 2019 @03:15PM (#21577771)
Although it's number-only said numbers can be used to represent anything, really. If you can convert your data to number-friendly formats and back there's really no issue.

If you need strings you can use the native TextEncoder/TextDecoder and shuffle things around as UTF-8. If you need JSON-like objects you can look at encoding formats such as Protocol Buffers, Thrift, and the like. This introduces non-zero latency shuffling data between formats but that's largely what normally occurs over IO boundaries anyways.

Re:Tools we used to create a hit HTML5 game on Steam by meheleventyone on Tuesday November 19, 2019 @03:13PM (#21577755)
I think they meant it’s not supported.

Although saying that memory in lower level languages is basically treated as an array of numbers and you can treat the array buffers similarly. It’s also how Wasm memory is exposed. So you can serialize JS and other data in and out of them.

Re:Tools we used to create a hit HTML5 game on Steam by Vekz on Tuesday November 19, 2019 @03:48PM (#21578107)
My game http://crashgiants.io/ is WEbGL + Webrtc multiplayer and has very fun to build because of all the features you mentioned
Re:Tools we used to create a hit HTML5 game on Steam by strbean on Tuesday November 19, 2019 @05:49PM (#21579192)
I need to check that out! I've been watching WebRTC since 2011, excited to have some equivalent of a TCP socket. It took them SOOOOOOO long to add data channels.

Are you using it for P2P, or making the 'peer' be a central server?

Re:Tools we used to create a hit HTML5 game on Steam by ermir on Tuesday November 19, 2019 @07:14PM (#21579869)
I did not make the game you are asking about, but WebRTC has an even better feature than TCP, which is unreliable datagrams (essentially UDP). Very few people have done anything with it, since server support for WebRTC data channels is very limited. Still, you can use dirty hacks such as leveraging Puppeteer as a WebRTC endpoint and make true lag-free experiences for the web.

Last I checked a few months ago this library was working for WebRTC data channels on node.js. Check it out, but it might not work properly:

https://github.com/node-webrtc/node-webrtc

Re:Tools we used to create a hit HTML5 game on Steam by gitgud on Tuesday November 19, 2019 @08:24PM (#21580275)
It's also the fact that JavaScript is an event-driven language which matches the impendence of the architecture of many games.