Building a Web Game in C

  • If anybody is wondering "how the heck did Raylib solve the problem of running an actual render loop in the browser without a requestAnimationFrame callback", take note of the "-s ASYNCIFY" option that's passed to emcc.

    I guess the WindowShouldClose() function yields control back to the browser event loop, which only works if the WASM code has been transformed into an async/await style state machine (and that's exactly what ASYNCIFY does).

    I still wonder though how well this approach synchronizes with the swapchain presentation interval (which AFAIK is one advantage of using requestAnimationFrame).

  • This is a simple Pong-like I've written in Raylib compiled to WASM - https://wasm-stuff.netlify.app/pong

    Source code is here: https://github.com/rrampage/skitter/tree/master/pong-raylib

    It is fairly straightforward to get Raylib running in the browser. I used @flohofwoe's HTML shell file ( https://github.com/floooh/sokol-samples/blob/master/webpage/... ).

    Compilation is something like: emcc -o target/pong.html -Wall -Wextra -std=c99 pong-raylib/pong.c lib/libraylibweb.a -I ./include -sUSE_GLFW=3 -sSINGLE_FILE -Oz --closure 1 -sFILESYSTEM=0 --shell-file pong-raylib/shell.html

  • Similarly, I have a somewhat simple demo made for my website that is C++/Emscripten/Raylib. It's open source (MIT License) and you can grok the code here https://git.seodisparate.com/stephenseo/jumpartifact.com_dem... and check out the demo itself from the link within that page.

  • If you got a few hours or weeks to kill, Raylib is really fun. Highly recommend.

  • That is why I am creating https://www.exaequOS.com a new Unix like operating system running in a web browser

    I put a raylib game inside both for fun and for testing the graphics layer

  • Are web games actually viable now? Did they ever fix WebAudio? Can I access the modifier keys, or does the user still have to carefully avoid touching the lower half of their keyboard to avoid triggering browser/os shortcuts?

  • Couple years ago was experimenting with portable OpenGL rendering, and, interestingly of all platforms I had to deal with the Web was the easiest target :) - thanks to the excellent emscripten largely.

    If interested, you can find the code/demo here: https://github.com/schaban/crosscore_dev (the link to the online demo is there in the README)

  • And how to debug a running game from a browser? Or you can only debug native builds?

  • "You should see this if you did it right. If not, hang your head in shame."

    Nothing like a bit of humour and thinly veiled criticism to liven up a tutorial :)

  • ...and then package up the output into Redbean, and you have a single file executable that can launch a web server on Linux, Max, Windows, NetBSD, FreeBSD, OpenBSD...

    https://redbean.dev/

  • Raylib also includes a decent Makefile template that can manage cross-platform builds (including emscripten). I've been trying out the library as I've been an SDL die-hard for several decades now. Raylib seems a little more ergonomic in places.

  • Would have liked to see the html part too

  • If you rely on common game libraries and widely supported web APIs, you can get quite far with C. Here's an OpenGL and SDL2 game running in the browser that I ported (and also maintain):

    https://play.neverball.org/

    Getting it to render was the easy part; I've since spent the majority of time getting it to feel native to the browser, implementing responsiveness (web dev term for adapting to viewport size), touch controls, GUI tweaks, working around fullscreen API gotchas (e.g., the Esc key/Back button is reserved), and any other small things that might remind you that this is not a native browser game.

  • I would change the title to "Use Raylib in the Browser" or something like that. Calling the linked article a tutorial on how to build a game is a _bit_ of a stretch.