Show HN: Porting Terraria and Celeste to WebAssembly

modeless 354 days ago |

Porting 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

[2] https://thelongestyard.link/cave-story/

dwattttt 354 days ago |

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.

underdeserver 354 days ago | |

And then it's also really impressive how much they did to get to the end.

delusional 354 days ago |

> 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.

voidUpdate 354 days ago | |

Early minecraft versions did run in the browser before it was made a standalone app, and they recreated it recently https://classic.minecraft.net

HelloUsername 353 days ago | | |

> recently

6 years ago? https://news.ycombinator.com/item?id=19861584

pjmlp 354 days ago | |

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

baq 354 days ago | | |

You’re obviously talking about the 1972 VM/370 right?

pjmlp 354 days ago | | |

Naturally.

pjc50 354 days ago | | |

WebSphere!

kkukshtel 354 days ago |

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...

jasonjmcghee 354 days ago |

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!).

coolelectronics 354 days ago | |

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

truemotive 354 days ago | | |

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 :)

NortySpock 354 days ago | | |

Oh Terraria is totally worth it, especially when spelunking with friends.

Its better than Minecraft, in my opinion.

vlovich123 354 days ago | | |

R2

bakkoting 353 days ago | | |

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

tech234a 354 days ago | | |

Depending on how well the files compress, you could try: https://developer.mozilla.org/en-US/docs/Web/API/Compression...

hoten 354 days ago | | |

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!

James_K 354 days ago |

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.

Fraterkes 354 days ago | |

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

flohofwoe 352 days ago | | |

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).

James_K 353 days ago | | |

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.

inlinestyle_it 353 days ago |

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!

71bw 354 days ago |

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

poink 354 days ago | |

I scrolled through the whole thing on my phone and it was fine

01HNNWZ0MV43FF 354 days ago | | |

Weird huh

doix 354 days ago | |

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

kunwon1 354 days ago | |

The moving background is absolutely intolerable, I didn't last ten seconds

midzer 354 days ago |

Celeste Classic in WASM https://midzer.de/wasm/celeste/

badmintonbaseba 354 days ago | |

For some reason that runs at like double speed for me, very challenging.

flohofwoe 354 days ago | | |

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)

badmintonbaseba 354 days ago | | |

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.

badmintonbaseba 354 days ago | | |

Made it to the summit at double speed.

  :strawberry:x14
  3:17:46
  deaths:1981

nottorp 353 days ago | | |

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.

flohofwoe 352 days ago | | |

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

nottorp 351 days ago | | |

That’s no excuse if you ask me. Browsers aren’t consoles with fixed hardware. TBH not even consoles are fixed hardware any more …

01HNNWZ0MV43FF 354 days ago |

This is very cool. However, the blog itself is not hitting 60 FPS on my Firefox. Probably that background effect?

dgb23 354 days ago | |

I found that effect disturbing and distracting. It's rendered in a canvas element that you can delete via the inspector.

_lvbh 353 days ago |

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

rlmineing_dead 356 days ago |

Cool to see FNA/XNA projects projects working in the browser

Spunkie 354 days ago |

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.

caminanteblanco 354 days ago |

This is absolutely amazing! I intend to use this on my Chromebook ASAP

parallax_error 354 days ago |

Safari on ios really hates this, all 3 demos crash upon loading lol