7 ms·
Building a Web Game in C
- seodisparate 3y agoSimilarly, 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_demo_0 https://git.seodisparate.com/stephenseo/jumpartifact.com_dem... and check out the demo itself from the link within that page.
- keyle 3y agoIf you got a few hours or weeks to kill, Raylib is really fun. Highly recommend.
- 4pkjai 3y agoAbsolutely, when Unity changed their pricing I expected more people to switch to Raylib. It really makes Game Dev fun again. Also it has tons of bindings (you don’t have to code in C)
- superb_dev 3y agoI love RayLib and I use it a ton, but it’s by no means a replacement for Unity. You would need to implement a lot of stuff yourself that Unity provides before you could switch a project over
- 4pkjai 3y agoYeah I suppose you’re right. Probably makes more sense for new projects to be in Raylib than to move a Unity project over. Another big thing is it doesn’t support iOS at the moment.
- pjmlp 3y agoMakes totally sense, write everything manually in C, versus a full blown middleware engine using C# and C++ with industry wide support.
- 4pkjai 3y agoI’m happy for you to code your game however you want. I like doing it this way.
- pjmlp 3y agoSure, good luck with it, not everyone needs Unity, Unreal, Godot, Frostbite, CryEngine,...
- flohofwoe 3y agoThat absolutely works for many 2D games where Unity is currently used just because it is the "industry standard" but is also complete overkill.
- rahen 3y agoWhy so salty? His game will probably have a fraction of the resource requirements of the overkill, overbloated, kitchen-sink engines written in C# and C++. I would command this author for not going the easy way. This takes skills.
- pjmlp 3y ago
- IceMichael 3y agoWould have liked to see the html part too
- 4pkjai 3y agoYou should be able to if you click view source in the example. It’s a lot of not that interesting code so I didn’t include it in the blog post.
- IceMichael 3y agoexactly, I would have liked the grisp of the interesting part of it
- 4pkjai 3y agoAlright here's a link to the HTML: https://github.com/BallerIndustries/raylib-wasm-example/blob/master/shell.html https://github.com/BallerIndustries/raylib-wasm-example/blob...
- IceMichael 3y ago"exactly, I would have liked the grisp of the interesting part of it" And that is all, no interesting excerpt, I was able to get source code of the entire page myself :) You are writing an article/tutorial. This kind of work should be in, this was my initial feedback.
- artemonster 3y agoAnd how to debug a running game from a browser? Or you can only debug native builds?
- 4pkjai 3y agoI think you can easily log out to the browser console. I believe hooking up a debugger to your IDE is also possible. I haven’t tried it yet though: https://emscripten.org/docs/porting/Debugging.html https://emscripten.org/docs/porting/Debugging.html? Maybe I’ll give it a go and write about it in my next post.
- shortrounddev2 3y agoChrome has experimental support for debugging symbols in was but I've never gotten them to work. Personally I'm not going to bother with working on a project unless I can easily pit breakpoints in the original source
- flohofwoe 3y agoCheck out this new-ish extension for VSCode: https://marketplace.visualstudio.com/items?itemName=ms-vscode.wasm-dwarf-debugging https://marketplace.visualstudio.com/items?itemName=ms-vscod... ...IME this is a lot easier to setup than the Chrome extension (the problem in Chrome that's easy to overlook is to allow Chrome access to your source code directory, the VSCode extension doesn't require such brittle details). The blog post I posted in a sibling comment above details how to setup VSCode so that debugging works by just pressing F5 in VSCode like it would work for natively compiled code.
- flohofwoe 3y agoI actually wrote a blog post about this just recently: https://floooh.github.io/2023/11/11/emscripten-ide.html https://floooh.github.io/2023/11/11/emscripten-ide.html TL;DR: there's a new WASM DWARF debugging extension for VSCode which allows a 'traditional' debugging experience for WASM code running either in Node.js or Chrome.
- 3y ago
- baudaux 3y agoThat is why I am creating https://www.exaequOS.com 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
- Chabsff 3y agoQuick bit of feedback: Having the project's GitHub link point to your personal profile comes across as rather gauche. If you want to refer to a collection of repositories, using a GitHub organization, even if you are the only member, prevents people from assuming you are self agrandizing.
- baudaux 3y agoDo you mean I should not use a GitHub organization ? I planed (not yet done) to put all the repo in the organization
- Chabsff 3y agoI mean that an organization would be a lot better than what you are doing now. Alternatively, a "central" repo linking to the others would also work. Right now, the site says that the link leads to the project, but instead, it links to you. That's giving the impression that the project's primary goal is to raise your personal profile.
- baudaux 3y agoThanks. I will finish the migration of the repo to the organization
- flohofwoe 3y agoFWIW that thought (of self-promotion) didn't even cross my mind when I clicked the Github link. All the git repos on your root page are related to that project, and looking at the git history it's not a "community driven" project. Maybe start thinking about creating an organization when there are other maintainers with push- and merge-rights, but until then keeping the subprojects under your user is completely fine. Also: your project, your rules - just do what feels right to you :)
- abrookewood 3y ago"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 :)
- ReleaseCandidat 3y agoI 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.
- evrimoztamur 3y agoShamelessly plugging my own Show HN post here if anybody is actually wondering how to get web games done https://news.ycombinator.com/item?id=38613265 https://news.ycombinator.com/item?id=38613265 (in Rust!) I see so many posts like the OP here where somebody will just draw a rectangle with a texture on it and call it a game, whereas the real process to get to a playable game is a lot more complex than that, both technically and practically. You have to think about how the pieces will fit together, how it will be deployed, supporting multiple platforms, and much more.
- deleted 3y ago[deleted]
- SotCodeLaureate 3y agoCouple 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 https://github.com/schaban/crosscore_dev (the link to the online demo is there in the README)
- flohofwoe 3y agoIf 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).
- baudaux 3y agoSwap buffers is done “automatically” by the browser after the drawing loop
- flohofwoe 3y agoYes, but you'd want your per-frame code to be called as early as possible after a swap so that your code has as much time as possible to do work without missing the next swap (YMMV of course if there's a pipeline of buffered frames waiting for presentation - but this should be kept low to reduce button-to-screen latency).
- baudaux 3y agoYou can do what you want during a next event loop (timer, key press, …)
- rzzzt 3y agoSource code for the method: https://github.com/raysan5/raylib/blob/c5ebdb8ba77afa5745eb01032cf1909b5a03bffa/src/platforms/rcore_web.c#L128-L138 https://github.com/raysan5/raylib/blob/c5ebdb8ba77afa5745eb0... Asyncify docs (different from the emterpreter-async option mentioned in the comment block): https://emscripten.org/docs/porting/asyncify.html https://emscripten.org/docs/porting/asyncify.html
- 3y ago
- parasti 3y agoIf 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/ 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.
- swingingFlyFish 3y agoDude this is really cool. Do you have a repo or other site where you talk about this?
- PennRobotics 3y agoLooks like https://github.com/Neverball/neverball https://github.com/Neverball/neverball and https://www.neverball.org https://www.neverball.org
- all2 3y agoI don't think I've ever played a game where the laptop touch pad made so much sense. I think that's the most natural feeling UI I've ever used.
- deleted 3y ago[deleted]
- hejira 3y agoGreat game! My four year old got hooked on it too!
- parasti 3y agoThat's awesome!
- rrampage 3y agoThis is a simple Pong-like I've written in Raylib compiled to WASM - https://wasm-stuff.netlify.app/pong https://wasm-stuff.netlify.app/pong Source code is here: https://github.com/rrampage/skitter/tree/master/pong-raylib 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/shell.html 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
- agentultra 3y agoRaylib 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.
- VikingCoder 3y ago...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/ https://redbean.dev/
- winrid 3y agooh this is neat! I've been trying to figure out a nice way to package Django + Django Unicorn into a portable app and then sync the sqlitedb to the remote server.
- deleted 3y ago[deleted]
- phendrenad2 3y agoAre 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?
- 4pkjai 3y agoI'm working on a visual novel, and I suspect 'low tech' people will enjoy playing it. I also suspect 'low tech' people don't have steam installed on their computers, but they will know how to click a link and play a game in their browser. I'm hoping to sell the game through Stripe on my own domain as well as on Steam. Time will tell whether I finish this game and whether the Web build defeats the Steam build. I'm hoping Web wins.
- andai 3y agoI tried plain WebAudio gamedev in 2021, making a small 2d game library with no dependencies. Web Audio was the only place where I eventually caved and broke my no deps rule and used Howler.js instead. I forget the exact reason but I think autoplay on mobile devices was the thing I couldn't figure out, and howler had some workaround. If I did the project again I'd just copy paste the 3 lines or whatever that Howler uses for the workaround and bring dependencies back to zero.
- pjmlp 3y agoNot really, other than the usual causal stuff, for console like games, only streaming.