Show HN: Porting Terraria and Celeste to WebAssembly
velzie.ripPorting games to the web is a fun hobby! I've done Quake III [1] and Cave Story [2]. Just like in this story it's all about the details. Getting the game loading is just the start. Things like adding touch controls for mobile, handling multiplayer, managing save files, supporting modern screen resolutions and frame rates, they take more time than the initial port.
[1] Single player: https://thelongestyard.link/q3a-demo/ Multiplayer: https://thelongestyard.link/q3a-demo/?server=HN
It's really impressive how much worked out of the box, decompiling a C# binary, then recompiling it for a target as different as WASM.
And then it's also really impressive how much they did to get to the end.
> One of my favorite genres of weird project is "thing running in the browser that should absolutely not be running in the browser". Some of my favorites are the [...] the direct recompilation of Minecraft 1.12
Heh, you'd think Minecraft would be exactly the sort of thing that absolutely should be running in the browser, considering it was originally a Java applet.
I understand the point, I just find it amusing.
Early minecraft versions did run in the browser before it was made a standalone app, and they recreated it recently https://classic.minecraft.net
> recently
6 years ago? https://news.ycombinator.com/item?id=19861584
Even more interesting is this idea of running WebAssembly on the server, in containers, with orchestration services among them, and communicating across sandboxed environments.
Somehow it reminds me of something, but memory is getting fuzzier nowadays. /s
You’re obviously talking about the 1972 VM/370 right?
Naturally.
WebSphere!
This post presupposes a bit of knowledge about C#/WASM and Native code linking in the C# ecosystem. I wrote a post a while back that could be a complement to this that does some more level setting about what's possible these days with compiling C#-based engines to the web for those that don't already have the context:
So You Want To Compile Your C# Game Engine To The Web With WASM
https://kylekukshtel.com/csharp-wasm-game-engine-compile-web...
Getting firebase "bandwidth quota exceeded" error when trying the demo.
You shouldn't have to worry about this kind of stuff if it's just a static site.
I'd host this on a cdn like cloudflare or github pages (free!).
My bad! Switched over to the github pages fallback. Cloudflare pages isn't suitable because the wasm files (100mb+) exceed the 25mb limit. (i could bypass this with service worker jank but that tends to be fragile). Github Pages also isn't suitable because it doesn't have a native way of sending the coi/coep headers that are required for SharedArrayBuffer to be available. Can also bypass that with service worker jank but I would prefer not to
Cloudflare R3 might suit the scenario better for you in terms of the heavy assets, it's like AWS S3 except for the cool part where you aren't charged for data egress (last I checked! haha)
I'm about to buy Terraria after all these years, just so I can get the assets and check this out. You're cool :)
Oh Terraria is totally worth it, especially when spelunking with friends.
Its better than Minecraft, in my opinion.
R2
The service worker jank, while conceptually hacky, is actually remarkably un-janky and not really noticeable to users! It's very much fire-and-forget unless you also wanted to have another service worker (in which case it's time for suffering; service workers aren't even a little bit composable).
For anyone wondering: https://github.com/gzuidhof/coi-serviceworker or https://github.com/WebReflection/mini-coi
Depending on how well the files compress, you could try: https://developer.mozilla.org/en-US/docs/Web/API/Compression...
btw: this results in a white page on the first load until you manually reload, since the SW has not been loaded yet. May want to force a page reload on the SW install event to fix.
also: this is incredibly cool. thanks for writing this up and sharing!
I've recently started trying to do a bit of basic game development targeting the web through WASM+OpenGL+SDL, and I must say, I'm shocked with how easy it is. I spent more time fiddling with CMake files than I did trying to the code to run on the web. There are still some limitations and rough spots on the web platform, but I've honestly had a much harder time compiling things for Windows or MacOS than for WASM.
Dumb question: do you have access to any of the nice text rendering features of the browser when you use Wasm, or is it basically just drawing to a canvas
There's no difference between WASM and JS in this situation.
Once you are in canvas land, you'll have to do the text rendering yourself - that's not the fault of JS or WASM though, but of the broken web API stack (what's there is not properly layered, and the whole layer stack is inverted, e.g. canvas sits on top of the DOM instead the DOM sitting on top of canvas).
There is an Emscripten library which cross-compiles things to WASM. The means you can generally just pull in a dependency for font rendering, such as SDL_ttf.
Amazing work. But I'm wondering, this is only for your own personal use right? Because the projects you are talking about here are still covered by copyright and thus even if you were the one who ported them to the web it's still not possibile to redistribute them for other people benefit.
If you are interested in taking a look, we run a cloud gaming service based on WASM at https://gaming.inlinestyle.it with cloud saves support. Many of things you discussed are related to what we had to do too, but we tried to do it only for opensource and freeware games so that everyone can benefit from them and play them on the cloud.
Appreciate any suggestion you have on how to improve the service!
Your (?) website is so resource-demanding it's insane. I'm struggling to run it at any decent framerate on an i5-7500T. Makes the entire browser just crumble
I scrolled through the whole thing on my phone and it was fine
Weird huh
You can disable javascript on the site and it works perfectly. I'm guessing it's this thing that destroys performance https://velzie.rip/static/background.js
The moving background is absolutely intolerable, I didn't last ten seconds
Celeste Classic in WASM https://midzer.de/wasm/celeste/
For some reason that runs at like double speed for me, very challenging.
Sounds like the game uses a fixed 60hz frame step but maybe you're on a 120hz display? Chrome and FF run requestAnimationFrame at 120hz in this case (while Safari sticks to 60hz)
Possibly, I'm indeed on a 120Hz display. I still got up to 1600m, it's a good challenge.
edit: 2000m now that I revisited. Crazy hard.
Made it to the summit at double speed.
:strawberry:x14 3:17:46 deaths:1981
Don't link your world status updates to the frame rate please.
Even "AI"s know to show you how to do it in spite of requestAnimationFrame. I know, I asked.
But you have to ask them specifically to decouple game world updates from drawing, or they'll give you the dumb solution.
It's still a surprisingly tricky topic because simply measuring the frame duration (or using rAF's timestamp) gives significant timing jitter - which in turn introduces microstutter (and the other problem is that some browsers still limit timer precision to whole milliseconds due to the Specter/Meltdown fallout - but at least here the random jitter is useful because averaging over enough frames gives you the precise frame duration back, eg 16.667 or 8.333 ms instead of 15<=>17 or 7<=>9 ms
That’s no excuse if you ask me. Browsers aren’t consoles with fixed hardware. TBH not even consoles are fixed hardware any more …
Not an excuse, but the web platform should really offer better solutions to fix the microstutter problem when trying to implement a variable time step. Because currently there's no robust solution possible in "user space" (eg any type of noise removal filter will run into problems when the refresh rate suddenly changes, like moving the browser window to a display with different refresh rate).
This is very cool. However, the blog itself is not hitting 60 FPS on my Firefox. Probably that background effect?
I found that effect disturbing and distracting. It's rendered in a canvas element that you can delete via the inspector.
This is so cool. Last time I played Terraria was back in 2014. One minor complaint: the resolution is too high & everything is scaled down a ton. It would be nice if we could have it scaled at 200% so i can actually see the text and icons
Cool to see FNA/XNA projects projects working in the browser
It seems cool but haven't been able to get it working. I'm downloading terraria assets with the from steam option but its at only 5% after an hour.
This is absolutely amazing! I intend to use this on my Chromebook ASAP
Safari on ios really hates this, all 3 demos crash upon loading lol