Easy Web Games in C

  Рет қаралды 45,178

Tsoding Daily

Tsoding Daily

3 ай бұрын

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

Пікірлер: 146
@jarek.zegarek
@jarek.zegarek 3 ай бұрын
I am surrounded by JS lovers. I am so happy I found you.
@ecosta
@ecosta 2 ай бұрын
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... 😆
@MrKevinontube
@MrKevinontube 3 ай бұрын
There was a time when I thought this line was a cool intro - looks like we are ALIVE. I know I misheard.
@roastyou666
@roastyou666 3 ай бұрын
Yeah I also heard ALIVE instead of LIVE
@blackhaze3856
@blackhaze3856 3 ай бұрын
I've been following Tsoding for years. Always thought he says 'alive' 😂
@ecosta
@ecosta 2 ай бұрын
Amista Azozing saying Alive? Maybe you misheard... 😆
@Ronoaldo
@Ronoaldo 3 ай бұрын
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!
@juniuwu
@juniuwu 3 ай бұрын
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.
@wlycdgrTheEverydayWorld
@wlycdgrTheEverydayWorld 3 ай бұрын
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.
@balaururazvanandrei
@balaururazvanandrei 3 ай бұрын
You blow my mind with how much you know.
@jiraibozo
@jiraibozo 2 ай бұрын
bro said "Please save me Linus Torvalds"
@joesenenfelder683
@joesenenfelder683 3 ай бұрын
Educational and inspirational, as always.
@MikAlexander
@MikAlexander 3 ай бұрын
Electron, Nwjs too. Used that in construct. That's why learning how to do thing in c and raylib.
@louis1001
@louis1001 3 ай бұрын
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.
@magikworx3748
@magikworx3748 3 ай бұрын
Super impressive. Way cool engineering.
@hubstrangers3450
@hubstrangers3450 3 ай бұрын
Thank you....certainly education...."never complicate things until, complicate complicate things"....wise folks yester years stated...
@chriscoyc
@chriscoyc 3 ай бұрын
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.
@replikvltyoutube3727
@replikvltyoutube3727 3 ай бұрын
If you're serious about making electron alternative, maybe call it neutron
@replikvltyoutube3727
@replikvltyoutube3727 3 ай бұрын
atom and proton taken, however atom is discontinued sooo..
@VVoytus
@VVoytus 3 ай бұрын
*positron, i.e. an antielecton en.wikipedia.org/wiki/Positron
@CoolestPossibleName
@CoolestPossibleName 3 ай бұрын
well it already kinda exists. it's called tauri
@charliegnu
@charliegnu 3 ай бұрын
​@@CoolestPossibleName sadly, Tauri still uses a web browser. What Tsoding wants to do is more like Flutter or Avalonia but with C.
@CoolestPossibleName
@CoolestPossibleName 3 ай бұрын
@@charliegnu at least it doesn't ship with one
@muhammedyasinhanyasar539
@muhammedyasinhanyasar539 3 ай бұрын
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.
@hbobenicio
@hbobenicio 3 ай бұрын
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)?
@pat1938
@pat1938 3 ай бұрын
Hey, why do you daily drive debian? I'm curious of your opinion.
@forayer
@forayer 3 ай бұрын
Pretty cool video, ty
@SCALENE5
@SCALENE5 3 ай бұрын
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
@boccobadz
@boccobadz 3 ай бұрын
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.
@Nate77HK
@Nate77HK 3 ай бұрын
I am super sad the snake game streams are lost - that approach to multiplatform games is something I'd be interested in trying myself
@louiehoosk
@louiehoosk 3 ай бұрын
Same, but this stream comes very close to showing all the puzzle pieces necessary to understand how the snake game was implemented
@ecosta
@ecosta 2 ай бұрын
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.
@ecosta
@ecosta 2 ай бұрын
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"... 😄
@theevilcottonball
@theevilcottonball 3 ай бұрын
Never tried compiling C to wasm, now I can't wait.
@NyanCoder
@NyanCoder 3 ай бұрын
Good luck on having fun with memory allocation/freeing (or with wasi if you want to use standard library)
@theevilcottonball
@theevilcottonball 3 ай бұрын
@@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.
@NyanCoder
@NyanCoder 2 ай бұрын
@@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
@NyanCoder
@NyanCoder 2 ай бұрын
@@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 )
@NyanCoder
@NyanCoder 2 ай бұрын
@@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
@revenevan11
@revenevan11 Ай бұрын
Your take on Electron is absolutely based.
@revenevan11
@revenevan11 Ай бұрын
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 😂
@RussTrotter
@RussTrotter 3 ай бұрын
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.
@MikAlexander
@MikAlexander 3 ай бұрын
Yo, are you on the discord too? Other team ported raylib to PSP!
@nystwysrt
@nystwysrt 3 ай бұрын
Anybody got the twitch link for the snake-c-wasm video ?
@flexzuu
@flexzuu 3 ай бұрын
i would love to see webgpu thrown in the mix
@edhahaz
@edhahaz 3 ай бұрын
So you can use game logic from C but anything to do with graphics (raylib) has to be reimplemented in js. Hmm
@BeenYT
@BeenYT 3 ай бұрын
what do you use to zoom in on the text?
@antonpieper
@antonpieper 3 ай бұрын
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
@ratchet1freak
@ratchet1freak 3 ай бұрын
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
@KingBobXVI
@KingBobXVI 3 ай бұрын
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.
@RuslanQurbanov-co9hr
@RuslanQurbanov-co9hr 3 ай бұрын
in st actually,you can patch scroll and a lot of other functionalities,that's how suckless applications work mr.Zozin
@unnamed1479
@unnamed1479 3 ай бұрын
im kind of surprised mr zozin doesnt pieces of the suckless suite like dwm and st
@Proace15
@Proace15 3 ай бұрын
You could solve the game loop problem with asyncify.
@weekipi5813
@weekipi5813 3 ай бұрын
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();
@Tigregalis
@Tigregalis 3 ай бұрын
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.
@albinekb
@albinekb 3 ай бұрын
10:00 react-native does the thing you're talking about, making native applications, platform-independent!
@KooShnoo
@KooShnoo 3 ай бұрын
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
@101abuse
@101abuse 3 ай бұрын
Will you get back on porth?
@nullternative
@nullternative 3 ай бұрын
17:43 fuqq bruh... you just slipped that in there, huh? Impressive.
@U20E0
@U20E0 3 ай бұрын
lol. the microphone (and maybe compression) make it sound like an actual drum set
@0ne87
@0ne87 3 ай бұрын
Probably once a stream he does a little beatbox.
@nullternative
@nullternative 3 ай бұрын
continued at 1:05:04
@nullternative
@nullternative 3 ай бұрын
further continued at 2:11:04
@JohnDoe-np7do
@JohnDoe-np7do 3 ай бұрын
0:07 assert(program.output == "x is now 2" + " "); // yes?
@jadBN
@jadBN 3 ай бұрын
Can you make a video about the hardest problem you solved in c?
@glowiak3430
@glowiak3430 3 ай бұрын
"Easy Web Games in C" then spends 3 hours figuring out how to get it working.
@Nate77HK
@Nate77HK 3 ай бұрын
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
@felipenascimento6118
@felipenascimento6118 2 ай бұрын
Locan man suffers from milliseconds
@diegorocha2186
@diegorocha2186 3 ай бұрын
The time has come to create Nlutter (Not Flutter) framework!!!!
@SteveRowe
@SteveRowe 3 ай бұрын
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.
@TsodingDaily
@TsodingDaily 3 ай бұрын
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
@mattanimation
@mattanimation 3 ай бұрын
2:35:31 ROFL
@kevinkkirimii
@kevinkkirimii 3 ай бұрын
Tsoding's surname is Raylib
@nahuellescano
@nahuellescano 3 ай бұрын
I wish I could see twitch chat, :D
@chriscoyc
@chriscoyc 3 ай бұрын
my man wanna make a better flutter, 🗿chad af
@glowiak3430
@glowiak3430 3 ай бұрын
I tried to compile my game to wasm many times, but it never succeeded.
@jeremyjurksztowicz6278
@jeremyjurksztowicz6278 3 ай бұрын
It took me a long time, but you can get it to work in the end.
@jiraibozo
@jiraibozo 2 ай бұрын
18:55 `less` ftw
@kwyrky
@kwyrky 2 ай бұрын
Wabt = Wabbit = Web 🐰
@TurtleKwitty
@TurtleKwitty 3 ай бұрын
"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
@itachielarbi3304
@itachielarbi3304 28 күн бұрын
You can use raylib with pascal 😂😂😂😂
@cron3x
@cron3x 3 ай бұрын
Did he mention why he didn't used clang anymore?
@KingBobXVI
@KingBobXVI 3 ай бұрын
He mentioned it was because he reinstalled his OS and hadn't installed clang yet -_-
@lame_lexem
@lame_lexem 3 ай бұрын
10:04 tsoding reinvents dioxis/flutter/qt(?)/raylib(?)
@colleenlove2114
@colleenlove2114 3 ай бұрын
Bright 🍬 🏆🙂🙏🏼
@ecosta
@ecosta 2 ай бұрын
So it was easy until we decided to add a third-party library... Classic software engineering... EDIT: classic *modern* software engineering...
@MonkeeSage
@MonkeeSage 3 ай бұрын
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.
@KooShnoo
@KooShnoo 3 ай бұрын
yeah but its cross platform
@LeFede
@LeFede Ай бұрын
why it has to be soo difficult >:(
@DaviSimDoP
@DaviSimDoP 3 ай бұрын
You misspeled "hard" in the title
@MuhammadJamil-ho6wl
@MuhammadJamil-ho6wl 3 ай бұрын
Could you start teaching C programming from basic to advance.
@musashi542
@musashi542 3 ай бұрын
i dont think he'll do that lol
@nefrace
@nefrace 3 ай бұрын
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.
@rasputindasilva858
@rasputindasilva858 3 ай бұрын
Nobody learns C anymore, it's an obsolete language. Learn HTML and VisualBasic the languages of the future.
@mobod6822
@mobod6822 3 ай бұрын
Learning C is the easy part. You need to learn programming using C.
@ade5324
@ade5324 3 ай бұрын
he's already doing that
@weekipi5813
@weekipi5813 3 ай бұрын
It's so weird to see tsoding coding html5 code 😂
@KalinRangelov
@KalinRangelov 3 ай бұрын
"Web version of Raylib should be implemented in JavaScript". So the proof of concept failed.
@edhahaz
@edhahaz 3 ай бұрын
Emscripten is worse (supposedly). Porting the whole of raylib to JavaScript is better (supposedly).
@KalinRangelov
@KalinRangelov 3 ай бұрын
​@@edhahaz The result of the "proof of concept" is - we need to reinvent raylib in JavaScript. An example for fail "proof of concept"
@LuizFernandoSoftov
@LuizFernandoSoftov 3 ай бұрын
And something like react native does? A bridge between stuff...
@nevokrien95
@nevokrien95 3 ай бұрын
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
@flleaf
@flleaf 3 ай бұрын
52:31
@ctxz9580
@ctxz9580 3 ай бұрын
32:30, LLVM optimization are useless. My language is 1-2% faster than rust (both optimized). And becomes 3% slower without optimization, while rust slows down 30-50%. Maybe optimizations are just a fix for shitty compilers. (Both compilers are memory safe and track ownership, so dont start about that none-sense)
@YannBOYERDev
@YannBOYERDev 3 ай бұрын
Are you saying you made a programming language ? (with a compiler ?)
@Xotchkass
@Xotchkass 3 ай бұрын
And what is your language? Does it have a name?
@shrddr
@shrddr 3 ай бұрын
have you considered writing a non-shitty rust compiler instead of inventing a 123th language
@Xotchkass
@Xotchkass 3 ай бұрын
@@shrddr why would you write non-shitty compiler for a shitty language?
@ecosta
@ecosta 2 ай бұрын
What is the issue about LLVM as "fix" for shitty compilers? Does it matter how the code gets optimised? I'm not sure what is the use case for a 1~2% improvement, but I gladly accept that loss whenever I write a new compiler on top of LLVM - I favour investing my time into language/compiler features and testing.
@user-bn4wn7ll3e
@user-bn4wn7ll3e 3 ай бұрын
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.
@bekorn
@bekorn 3 ай бұрын
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 👍
Responding To The Tailwind Conspiracy
37:25
Theo - t3․gg
Рет қаралды 73 М.
Parsing Lisp with Rust (Tula Ep.03)
2:42:18
Tsoding Daily
Рет қаралды 12 М.
НЕОБЫЧНЫЙ ЛЕДЕНЕЦ
00:49
Sveta Sollar
Рет қаралды 7 МЛН
😱СНЯЛ СУПЕР КОТА НА КАМЕРУ⁉
00:37
OMG DEN
Рет қаралды 1,8 МЛН
I tried React and it Ruined My Life
1:19:10
Tsoding Daily
Рет қаралды 110 М.
I regret doing this...
1:20:07
Tsoding Daily
Рет қаралды 60 М.
Is C++ better than C?
1:46:10
Tsoding Daily
Рет қаралды 27 М.
Will Ada Replace C/C++?
44:57
Tsoding
Рет қаралды 68 М.
How I make games in C
9:57
crypticsea
Рет қаралды 6 М.
I hope FFmpeg's Twitter won't Cancel me for This...
2:27:17
Tsoding Daily
Рет қаралды 19 М.
You don't need Generics in C
1:37:38
Tsoding Daily
Рет қаралды 55 М.
Async Engine in C
3:12:16
Tsoding Daily
Рет қаралды 31 М.
Machine Learning in C (Episode 1)
2:31:07
Tsoding Daily
Рет қаралды 208 М.
Я Создал Новый Айфон!
0:59
FLV
Рет қаралды 3,2 МЛН
The power button can never be pressed!!
0:57
Maker Y
Рет қаралды 43 МЛН
Xiaomi Note 13 Pro по безумной цене в России
0:43
Простые Технологии
Рет қаралды 1,5 МЛН