Easy Web Games in C
ฝัง
- เผยแพร่เมื่อ 3 ก.พ. 2024
- More Episodes: • Raylib.js
References:
- Raylib: www.raylib.com/
- Tsoding - Snake C WASM - github.com/tsoding/snake-c-wasm
- Raylib - Working for Web (HTML5) - github.com/raysan5/raylib/wik...)
- Tsoding - raylib.js - github.com/tsoding/raylib.js - วิทยาศาสตร์และเทคโนโลยี
![Fc ครับ ขอแนะนำให้รู้จักกับ "น้องเปียโน" l [Nickynachat]](http://i.ytimg.com/vi/HQU6Q_IYTLo/mqdefault.jpg)
I am surrounded by JS lovers. I am so happy I found you.
Welcome! I'm the same but also a lot of Java lovers surrounding me. I wish he could do some Java-bashing as well, but it might be like kicking a dead dog... 😆
There was a time when I thought this line was a cool intro - looks like we are ALIVE.
I know I misheard.
Yeah I also heard ALIVE instead of LIVE
I've been following Tsoding for years. Always thought he says 'alive' 😂
Amista Azozing saying Alive? Maybe you misheard... 😆
Fully agree with the frustration around emscripten. However, I guess the same justification you made at the end is why it was not implemented yet: the simpler port to js may require more resources than available by raylib author. Keep up the grear work!
Yeah, its the main thing that holds me back from using cpp for wasm target. wasmbindgen makes emscripten look like a joke in comparison. not even comparable.
Ray is a super genial friendly and approachable guy (also he's the real deal in terms of how long and how hard he's been working on raylib, most of that time with little or no funding). I recommend just connecting with him if nothing else.
You blow my mind with how much you know.
Electron, Nwjs too. Used that in construct. That's why learning how to do thing in c and raylib.
The idea of doing Electron style development (same code for web and native) implementing just a portion of the browser is basically what the Rust gui approach has been doing for a while now. Specially everything around wgpu and egui.
Educational and inspirational, as always.
Thank you....certainly education...."never complicate things until, complicate complicate things"....wise folks yester years stated...
bro said "Please save me Linus Torvalds"
Super impressive. Way cool engineering.
If you're serious about making electron alternative, maybe call it neutron
atom and proton taken, however atom is discontinued sooo..
*positron, i.e. an antielecton en.wikipedia.org/wiki/Positron
well it already kinda exists. it's called tauri
@@CoolestPossibleName sadly, Tauri still uses a web browser. What Tsoding wants to do is more like Flutter or Avalonia but with C.
@@charliegnu at least it doesn't ship with one
I like Tauri but it's for Rust. You can even enable usage of dev tools in production builds, if you want to give them to your users.
tsoding, flutter basically does the thing you said, it compiles nativaly to each platform and also use a graphic engine to render its interface. So you can even make games with flutter, using a lib called flame.
so flutter uses that approach, native apps on android, ios, windows, linux. And also create websites. But websites are not very optimised as plain html, because it is how browser rendering systems work. But flutter also have an html renderer or something like that to be more optimised on web. Flutter allow you to create even your own shaders! damn cool.
1:13:40 - I hate to double-comment, but the Tsoding way is my way as well... I love to see those streams because I can say "hey, I'm not that crazy if someone else thinks the same way as I do"... 😄
I think this approach might work really well when building a game/engine from scratch, but it's not very good for porting.
The trick imo is to minimize the number of exported functions so you don't have to do so much in javascript. For canvas, this is kind of useless, because you're really just using the C code to drive the Javascript - the C isn't really doing anything. But if you were using WebGL, you could use WASM to build the various buffers you need, and send them all over in as few draw calls as possible.
It's similar in concept to what I've been wanting to do for a project (WASM+native), which I'll be starting soon - this has been a helpful demo and example of how to do it.
58:10 - emscripten
-game.wasm 89K
-game.js 170K (x1.9)
goddammit I will do it better
2:45:12 - handcrafted
-game.wasm 1.7K
-raylib.js 3.5K (x2.0)
goddammit
great video btw, learned a lot 👍
please please please tweet your Sweet Home Alabama riff!! dude, you are a multi-cultural unicorn. Where in the world did you even hear that song? I grew up in that region of the US and I never thought that song would make it out of the deep south much less across the Atlantic ocean.
I am super sad the snake game streams are lost - that approach to multiplatform games is something I'd be interested in trying myself
Same, but this stream comes very close to showing all the puzzle pieces necessary to understand how the snake game was implemented
You need to define a very simple interface (like the one Tsoding describe around 4:00) and implement it in C and in WASI. I tried that - it is fun and kinda easy. I had a lot of issues trying to find online help - looks like Tsoding is the only one who cares about not using Emscript. It is really cool for simple 2D games, but the complexity of that API outgrew its benefits for me when I started more complex things like resource management.
The thing that is really missing in webassembly is a WebAssembly.Instance#pause and WebAssembly.Instance#resume method. This would allow for wrapping async functions and exposing them to webassembly. Ypu could even return some kind of identifier to make APIs async in the embedded language
IMO it's more that they made the mistake of going with the callback by default method of calling back to js, instead of a more flexible coroutine style. Though that one is a lot more convoluted to use api-wise
instead of calling into the instance and having it callback, instead it will return an object containing the information about the callback (name and parameters) and then you have to call again with the new result
Pretty cool video, ty
The promise of Tauri + Servo is Electron, but shipping just the parts of the browser that you actually use. Electron, no, you have to ship the whole browser. I think you even ship Node.
01:38:00. You don't need two functions to request an animation frame. Just create a function in C called NextFrame or something like that, and then in your JavaScript file call requestAnimationFrame and pass the exported C function NextFrame to be executed. Here's What I mean:
game.c:
void NextFrame(float dt) {
// Do your drawing calls.
}
game.js:
function updateFrame(dt) {
wasm.instance.exports.NextFrame(dt);
requestAnimationFrame(updateFrame);
}
updateFrame();
Never tried compiling C to wasm, now I can't wait.
Good luck on having fun with memory allocation/freeing (or with wasi if you want to use standard library)
@@NyanCoder Is it really that much more difficult than using C normally? If so I'll just mark all my large memory buffers as static, so I don't have to dynamically allocate/free anything. Or I'll just allocated from a big global static char array/arena, and turn strict aliasing off.
@@theevilcottonball well, some people really rely on standard library. If you do too, I'd recommend emscripten or wasi, if you not - I think you will not face any difficulties
@@theevilcottonball well, some people really rely on standard library. If you do too, I'd recommend emscripten or wasi, if you not - then I think you will not face any difficulties )
@@theevilcottonball idk why moderators or yt deletes my comments (I'm pretty sure there wasn't any insults or hate speech)
All I wanted to say: if you use standard library you'll need wasi or emsdk (it basically only wraps wasi if other libs wasn't used), if you write code without libc functions - the experience would be pretty much the same as native
i would love to see webgpu thrown in the mix
10:00 react-native does the thing you're talking about, making native applications, platform-independent!
Yes but have you considered that js bad? Js monkey poopoo language? Did you know? Js is toy scripting language for children, flies, and fleas?
/j btw
in st actually,you can patch scroll and a lot of other functionalities,that's how suckless applications work mr.Zozin
im kind of surprised mr zozin doesnt pieces of the suckless suite like dwm and st
You could solve the game loop problem with asyncify.
interesting. Couldn't you also use a transpiler to get 80% of the c api converted to js? Though I suppose that is what emscripten set out to do
17:43 fuqq bruh... you just slipped that in there, huh? Impressive.
lol. the microphone (and maybe compression) make it sound like an actual drum set
Probably once a stream he does a little beatbox.
continued at 1:05:04
further continued at 2:11:04
Hey, why do you daily drive debian? I'm curious of your opinion.
Your take on Electron is absolutely based.
Your assertions that it's possible and even more sensible to just code your program platform-agnostically and then fairly easily code some wrappers for the minimum system-calling functionality you need for each platform is a breath of fresh air! It gives me hope that just maybe we can move things towards a little more efficiency and simplicity again, without making things impossibly difficult lol.
I've known a little of a handful of code languages for a number of years, but I am just recently getting into learning how to really *make* an application or game. So starting that freshly, my principle is develop any real project I make to be as cross platform or extremely portable as possible from the start... but I've avoided Electron at all costs because I hate the idea of packaging a whole web browser with my 1000 lines of code and whatever script kiddie libraries I admittedly rely on lol. Electron apps just suck ime, but that could be partially due to the low barrier of entry (and so even big companies cut costs by putting the minimum effort into their Electron port 🤦♂️). I started learning Javascript through the game bitburner, the steam version, so that's the only Electron app I love lol. Again, all that means this video gives me great encouragement lol. The part about 64bit web assembly being difficult because it's javascript and would need to be the bignums type to address 64 bits was hilarious 😂
Would an implementation of raylib in js be efficient enough? Can it also be implemented in C/Wasm without libc and make it become the raylib implementation (avoiding libc bloat and restricting js only to web api calling)?
Anybody got the twitch link for the snake-c-wasm video ?
So you can use game logic from C but anything to do with graphics (raylib) has to be reimplemented in js. Hmm
Locan man suffers from milliseconds
You can't say that implementation of sqrt is slow until you know how many iterations it does. Or you could inline assembly the fsqrt instruction and piss off the Mac users.
I think clang even had some sort of intrinsic to directly emit the instruction but I was just too lazy to figure that out :P
0:07 assert(program.output == "x is now 2" + "
"); // yes?
The time has come to create Nlutter (Not Flutter) framework!!!!
Yo, are you on the discord too? Other team ported raylib to PSP!
"Easy Web Games in C" then spends 3 hours figuring out how to get it working.
TBF he demonstrates the easy way in the snake game and then tries to figure out Raylib's approach, but nobody knows how long the snake game really took to figure out either
Can you make a video about the hardest problem you solved in c?
I wish I could see twitch chat, :D
what do you use to zoom in on the text?
Tsoding's surname is Raylib
Wabt = Wabbit = Web 🐰
Will you get back on porth?
2:35:31 ROFL
"emscripten is shit cause you need to change stuff" and then does the same thing... all you had to do was give control of the convas to a worker... which you successfully identified then did the complicated thing instead XD
18:55 `less` ftw
my man wanna make a better flutter, 🗿chad af
I tried to compile my game to wasm many times, but it never succeeded.
It took me a long time, but you can get it to work in the end.
10:04 tsoding reinvents dioxis/flutter/qt(?)/raylib(?)
You can use raylib with pascal 😂😂😂😂
Did he mention why he didn't used clang anymore?
He mentioned it was because he reinstalled his OS and hadn't installed clang yet -_-
Bright 🍬 🏆🙂🙏🏼
Seems kind of pointless to use wasm here at all since you're just writing a js lib that actually does the work and the wasm is just some function names and a little bit of static data.
yeah but its cross platform
Could you start teaching C programming from basic to advance.
i dont think he'll do that lol
What's really funny to me is that every time someone makes something interesting with programming, someone will definitely ask to make some kind of tutorials and full courses.
Learning C is the easy part. You need to learn programming using C.
he's already doing that
literally just do shit you want to do and it will learn itself
You misspeled "hard" in the title
It's so weird to see tsoding coding html5 code 😂
why it has to be soo difficult >:(
And something like react native does? A bridge between stuff...
Uk with wasm i keep thinking "Dam we REALLY should have made it assembly to begin with"
Like u could have just liked c 8n and the python or js and have the same thing
"Web version of Raylib should be implemented in JavaScript".
So the proof of concept failed.
Emscripten is worse (supposedly). Porting the whole of raylib to JavaScript is better (supposedly).
@@edhahaz The result of the "proof of concept" is - we need to reinvent raylib in JavaScript. An example for fail "proof of concept"
So it was easy until we decided to add a third-party library... Classic software engineering... EDIT: classic *modern* software engineering...
52:31
This approach is spirit of tsoding, not raylib. You should just get rid of Raylib at all. You shall not implement raylib APIs but invent your own APIs. Or just create a language takes the spirit of C but simpler than C and compiles to multiple platforms as you demonstrated. You majorly use C because other languages are worse. You don't like C as well. You do abstract programming, not programming in C or any language.