Kaboom – JavaScript game programming library and environment(replit.com)
replit.com
Kaboom – JavaScript game programming library and environment
https://replit.com/kaboom
73 comments
OK, do yourself a favour and watch the introductory video. Probably the most unique intro I've yet to see for a programming library.
:) fully produced in-house by our designer Tga. Song on SoundCloud too https://m.soundcloud.com/replit/kaboom
I hope you used kaboom to create the kaboom video! Was fun to watch indeed, All the best.
Reminds me of the Land of Lisp video—in a good way.
http://landoflisp.com/
http://landoflisp.com/
Time to port Grand Theft Wumpus (the most violent programming example ever put into a textbook) to Kaboom.js?
this honestly made me happy
Best intro video in years
thanks for the hint, it was worth watching it!
Thanks too lol a nice bedtime vibe
wasn't going to watch it. I'm glad I saw your comment
I wish I had such tools when I was growing up building games! I had to battle ncurses, Allegro, OpenGL, and many more lower-level tech just to get some basic I/O. I'm not too sad about it because it paved the way to my stronger understanding of computer technologies, but at the same time it took me way longer to build playable games.
I think this is a step before making Minecraft mods or Roblox games, but definitely a welcome one for the coming generation of creative kids.
I think this is a step before making Minecraft mods or Roblox games, but definitely a welcome one for the coming generation of creative kids.
Amos on the Amiga was pretty great. I was able to get sprites moving around, respond to mouse clicks, even some simple 3D with an extension. Admittedly never actually made a playable game, as my programming chops weren't good enough yet. There was a small community making games with it, and they would be distributed among other shareware.
Last week I found my old floppy disks for the STOS (AMOS equivalent for the Atari ST) I never managed to build a real game with it at the time although I had created some on the Amstrad CPC 6128 before. If we had had the internet back then, it would have made such a difference to be able to connect to those communities !
As an adult at the time I made a game with AMOS (Mouse Impossible) and it was published free as a magazine cover disk. I was prouder of that than anything I did at work!
That's something I encounter a lot too when wondering what tool to propose kids to start programming.
I had GW-BASIC. It took two lines to draw a line on the screen. There are not a lot of things as easy nowadays
I had GW-BASIC. It took two lines to draw a line on the screen. There are not a lot of things as easy nowadays
Python implementation of logo turtle graphics in the standard library:
https://docs.python.org/3/library/turtle.html
Isn't a terrible option for that sort of thing.
https://docs.python.org/3/library/turtle.html
Isn't a terrible option for that sort of thing.
Logo is great in whichever form. And great for kids as well, the concepts are very easy to grasp at a young age
I was looking for a GW-BASIC comment.. "back in my days". Glad to see you wrote one, otherwise I would have to!
[deleted]
Hahaha. I had a z80 processor and 16kb. I wish I had OpenGL.
For a 8-9 year old OpenGl is too much. I started with z80 too and was making crappy games but it was fun.
All these simplistic game making frameworks are a great resource for young people and the simplicity is welcome even at more advanced levels. Sometimes you just want to be at high level and concentrate on the whats of the game not the hows.
There was Click and Create, I recall having some fun with that back in the day, with very little coding (none really)
I used click and create and others by clickteam very heavily growing up. Paved the way for making games very heavily for me.
Wish that methodology was still around, you could do a lot with it.
Wish that methodology was still around, you could do a lot with it.
It is still around, although basically only from Clickteam still. You can get Clickteam Fusion: https://www.clickteam.com
I think Construct is similar: https://www.scirra.com/
It seems this is aimed at young people learning how to program. My main problem with using Javascript as the first programming language to learn is the asynchronous callback paradigm, I believe it's too complicated a concept to teach in the very beginning (and you can't get around that with Javascript).
When I evaluated different languages / environments to start teaching programming to my daughters I decided not to use Javascript because of that, chose Python instead (and now I'm also considering making games with Roblox, which is based on Lua. The dev environment is quite complex but with supervision Lua is a nice & simple programming language)
When I evaluated different languages / environments to start teaching programming to my daughters I decided not to use Javascript because of that, chose Python instead (and now I'm also considering making games with Roblox, which is based on Lua. The dev environment is quite complex but with supervision Lua is a nice & simple programming language)
I had a similar concern, that's why we started with Python initially (see my top-level comment). However, Kaboom's programming model is actually quite simple. It doesn't suffer from any callback hell. You should give it a go.
It's modeled a bit after the block-like paradigm introduced by Scratch, which I guess you can call "async" but seems really intuitive for kids.
It's modeled a bit after the block-like paradigm introduced by Scratch, which I guess you can call "async" but seems really intuitive for kids.
Maybe try little javascripter would be good for your kid. https://www.crockford.com/little.html
JavaScript itself is not async. It's the programs/engines that runs the scripting language that have decided to make it async with callbacks. For example Microsoft JS is not async.
* ES2022? do have some garbage collection hook that uses a callback, so if that makes it into the standard you could say that JS/ES is async. JavaScript itself does not (yet) have any async functions.
'Async' here refers not only to the keyword but also to what is achieved, in classic javascript, through callback functions
Even though there is the async keyword and Promise() there are no async functions nor callbacks in JavaScript itself. For example setInterval and setTimeout is not part of the language and needs to be implemented by the runtime/program that runs the JavaScript.
Hm, but how does it work in python? Don't you have asynchronous calls there, too?
(my main problem with JS as a programming first language is its C-Style syntax)
(my main problem with JS as a programming first language is its C-Style syntax)
Yes, but it isn't the core way the language works -- you don't need to approach asynchronicity very early on as you do with JS, and it's not all closures. At some point someone learning Python will have to do something async. But what they can do up until then is just not do anything async, and that's fine (just wait for stuff to complete...). That's not really an option in JS: the great benefit of the language from a learner perspective is that it just runs straightaway in the browser, everywhere. But to actually do anything interesting (click a button, make something happen), that's async.
Re. the syntax, anecdata but I've helped beginners through their initial steps for about 6 years now in JS (and Python) and C-type syntax is just not an issue that slows down learning or causes issues. There are only so many different ways syntax can be structured so it's sane for a compiler to parse, they all work basically the same way, and people get used to a syntax really quickly
Re. the syntax, anecdata but I've helped beginners through their initial steps for about 6 years now in JS (and Python) and C-type syntax is just not an issue that slows down learning or causes issues. There are only so many different ways syntax can be structured so it's sane for a compiler to parse, they all work basically the same way, and people get used to a syntax really quickly
Hey there, I've also taught lots of students online!
In my JS courses, I actually don't touch upon async things until I get to rather advanced/intermediate courses. Universally, I think the fundamentals of programming languages can be taught without too many drawbacks and agnostic of language choice unless the language is super verbose.
For example, all the things with closures, this, and asynchronous programming probably aren't relevant until a student runs into them/their gotchas while making web applications. By that point, I think framing it as event driven programming makes a lot of sense and gives context without being forced to deal with the details.
I think doing anything cool in other languages is also almost similar. A while loop/game loop in Python or other languages is pretty similar to the event loop which where the asynchronous nature of JS comes from. This becomes really apparent when working with games like Roblox/Lua and Minecraft/Minecraft plugins+mods.
In my JS courses, I actually don't touch upon async things until I get to rather advanced/intermediate courses. Universally, I think the fundamentals of programming languages can be taught without too many drawbacks and agnostic of language choice unless the language is super verbose.
For example, all the things with closures, this, and asynchronous programming probably aren't relevant until a student runs into them/their gotchas while making web applications. By that point, I think framing it as event driven programming makes a lot of sense and gives context without being forced to deal with the details.
I think doing anything cool in other languages is also almost similar. A while loop/game loop in Python or other languages is pretty similar to the event loop which where the asynchronous nature of JS comes from. This becomes really apparent when working with games like Roblox/Lua and Minecraft/Minecraft plugins+mods.
Yes, yes, it is similar, and I maybe didn't get that across as well as I could have. JS is the default (for good reasons!), but IME if we're talking about game engines aimed at beginners that are suitable for getting programming concepts across, I feel a [synchronous] game loop is often easier to get across conceptually, to build on. And then yes, definitely framing it in the same way works really well because when they get stuck, you can point them at that and say "well you've already done something really similar here, here's the comparison, {unpack how the async stuff is working by framing it in the same way}, you should be able to now link these concepts together"
(Apologies to other commenters as well! I got a little bit salty when people mentioned async in relation to beginner programmers because it's not a simple thing. It's abstract and doesn't really make a bunch of sense until the beginner has built a floor of very basic programming to stand on)
(Apologies to other commenters as well! I got a little bit salty when people mentioned async in relation to beginner programmers because it's not a simple thing. It's abstract and doesn't really make a bunch of sense until the beginner has built a floor of very basic programming to stand on)
I’m sure you know about async/await in JavaScript? It sounds like the issue you have is not so much with the traditional paradigm of using callbacks, but the fact that the “default” environment in JavaScript is a GUI rather than a CLI, meaning that you need to figure out things like event handlers pretty early on?
Yes, default environment is the browser, that's a given and that's fine: if you are a beginner, making stuff happen there is easy and rewarding. Everyone has easy access to it
[I apologise for being a little snippy here]. I don't have an issue here: I don't think you & sibling commenters are really getting that these are beginners I'm talking about. Yes, I am aware of async/await. With the browser being the default environment, a beginner has to understand callback-related programming with JS quickly: they need to be able to say "I want to do this then this". You have do this via callbacks. You can write JS synchronously, but IME this isn't practical.
Using async/await isn't some magic bullet here. You can write synchronous-looking asynchronous code, but the level I'm talking about is: what does asynchronous mean? What does synchronous mean? Once they've got that (which is not simple), what's a Promise? That one's fun because you need to explain the concept and how they work first, and generally that's gibberish. Async/await helps, so say I ignore Promises and go straight to that. At which point the learner starts getting errors to do with unresolved values. And back to Promises we go. And so on.
I would say that I don't think there's any magic language that makes things easy for learners, and JS has many advantages over any other one, mainly to do with its general accessibility. But it's a fairly weird language in how it works, it isn't the simplest.
[I apologise for being a little snippy here]. I don't have an issue here: I don't think you & sibling commenters are really getting that these are beginners I'm talking about. Yes, I am aware of async/await. With the browser being the default environment, a beginner has to understand callback-related programming with JS quickly: they need to be able to say "I want to do this then this". You have do this via callbacks. You can write JS synchronously, but IME this isn't practical.
Using async/await isn't some magic bullet here. You can write synchronous-looking asynchronous code, but the level I'm talking about is: what does asynchronous mean? What does synchronous mean? Once they've got that (which is not simple), what's a Promise? That one's fun because you need to explain the concept and how they work first, and generally that's gibberish. Async/await helps, so say I ignore Promises and go straight to that. At which point the learner starts getting errors to do with unresolved values. And back to Promises we go. And so on.
I would say that I don't think there's any magic language that makes things easy for learners, and JS has many advantages over any other one, mainly to do with its general accessibility. But it's a fairly weird language in how it works, it isn't the simplest.
I fully respect that these things are not easy for a complete beginner! I might not have expressed it very clearly but that’s what I tried to say; the browser environment requires you to deal with asynchronicity to do almost anything other than log to the console, so that makes it a tough place to start.
In node, nearly all of the stuff has sync versions and global await is around the corner.
For every other saner environment (read: browser consoles), global await is a thing already, and you get immediate feedback, and have a canvas (with sync APIs!).
That being said, I do think that the best programming language to start learning is the one your parents/friends speak.
For every other saner environment (read: browser consoles), global await is a thing already, and you get immediate feedback, and have a canvas (with sync APIs!).
That being said, I do think that the best programming language to start learning is the one your parents/friends speak.
Great. I have no idea what "global await" means, but anyway, what's Node?
[shows them Node]
Oh, It's a calculator. Wow. I mean, wow. That's emm, really impressive.
[No, it's a runtime environment for JavaScript]
It's a what? So how does that help me move things around on the screen?
[It doesn't]
So explain what the point of Node is?
[etc]
[shows them Node]
Oh, It's a calculator. Wow. I mean, wow. That's emm, really impressive.
[No, it's a runtime environment for JavaScript]
It's a what? So how does that help me move things around on the screen?
[It doesn't]
So explain what the point of Node is?
[etc]
Sorry, you need to be less cryptic for me to understand what you mean :)
When you're teaching beginners: what you're talking about won't really make any sense. It's an implementation detail (and a complex one at that).
A beginner at basic level, that's "what's a variable", "what's a function", "I don't see what the point of a function is". And something like Node -- it's just not a great environment to explain that: it doesn't do much that's interesting, like move stuff around on a screen. You can type stuff into the REPL, and it will spit things back, but that's just going to look like a calculator. Something like Processing, or a simple game engine aimed at beginners, or even making things happen on a web page using JS: that's good, it holds interest.
A beginner at basic level, that's "what's a variable", "what's a function", "I don't see what the point of a function is". And something like Node -- it's just not a great environment to explain that: it doesn't do much that's interesting, like move stuff around on a screen. You can type stuff into the REPL, and it will spit things back, but that's just going to look like a calculator. Something like Processing, or a simple game engine aimed at beginners, or even making things happen on a web page using JS: that's good, it holds interest.
Its been a while that I did somehing with python - but shouldn't event handlers work pretty much the same? Or in other words, how can eventhandlers work any other way than asynchronous?
And you need eventhandlers for games.
And you need eventhandlers for games.
in python you would do a loop for a game, unless you're using an event driven framework that does the loop for you.
On the front page twice in less than a week! https://news.ycombinator.com/item?id=26728774 Wonder if that's a record. /me resists urge to write a script to find out
Way to dodge nerd sniping yourself :)
We are at times our own worst enemy.
We are at times our own worst enemy.
I love the music video for the library: https://cms.replit.com/assets/kaboom/kaboom.mp4 -- can you tell me any code library which has a music video about it? That's a great way of introduction.
The video was great but the first 10 seconds of black screen is questionable.
I want all libraries and frameworks to be presented this way
I want all libraries and frameworks to be presented this way
Correction, its not totally black, it says “fwonky intro” xD
Nice...I have used Phaser for couple of games...API looks bit similar to Phaser...
Would like to understand the differences if anyone explored already?
Would like to understand the differences if anyone explored already?
We love Phaser, but while possibly more powerful, we felt it's a lot more complex and harder to get started with. To demonstrate try comparing the hello world examples from Phaser vs Kaboom.
https://kaboomjs.com/ seems a better URL
Previous discussion (from 5 days ago): https://news.ycombinator.com/item?id=26728774
This is such a wonderful initiative and could bring so many kids into programming! So many people start programming in order to make games and I could see this developing into the new standard for it & it being supported first class in replit makes it super simple to create and share your game.
I got a chance to try out kaboom last weekend and while it's already great for games, I'd love for it to also have more support for visualizations, something I used to spend a ton of time on in high school in khanacademy's processing.js editor[1]. Kaboom's support for ES6 and WebGL, focus on gaming, and integration with replit would make it a much better tool than KA for this. Some things in particular I'd like to see from kaboom for viz - it's missing basic raw functions like drawEllipse, the docs were difficult to read (I wish it would say what params something takes instead of "[conf]"), and in the end I failed to port over my voronoi viz[2][3]. If they decide this would be a good focus for them, I'd suggest having one of the built-in kaboom examples on replit to be a visualization.
[1] https://www.khanacademy.org/profile/raphaelrk/projects
[2] https://www.khanacademy.org/computer-programming/quick-voron...
[3] https://replit.com/@raphaelrk/CumbersomeAdmiredStrategies
I got a chance to try out kaboom last weekend and while it's already great for games, I'd love for it to also have more support for visualizations, something I used to spend a ton of time on in high school in khanacademy's processing.js editor[1]. Kaboom's support for ES6 and WebGL, focus on gaming, and integration with replit would make it a much better tool than KA for this. Some things in particular I'd like to see from kaboom for viz - it's missing basic raw functions like drawEllipse, the docs were difficult to read (I wish it would say what params something takes instead of "[conf]"), and in the end I failed to port over my voronoi viz[2][3]. If they decide this would be a good focus for them, I'd suggest having one of the built-in kaboom examples on replit to be a visualization.
[1] https://www.khanacademy.org/profile/raphaelrk/projects
[2] https://www.khanacademy.org/computer-programming/quick-voron...
[3] https://replit.com/@raphaelrk/CumbersomeAdmiredStrategies
The addLevel() function seems especially interesting. It takes an array as input to generate the level, with each index being another row of the level. Here is the level from the linked platformer example.....
" $ ",
" ==== ",
" ",
" ^^ ",
"=============",[deleted]
Cool to see Kaboom on HN again! Kaboom is the culmination of multiple attempts at creating a game programming environment aimed at new coders.
It started in 2018 when we noticed that many kids come to Replit from Scratch ready to transition from blocks to coding and get lost trying to find the best way to make games. There are many ways to make games with Replit -- pygame, html, love2d -- but based on our research there was still a big gap between the focused and intuitive experience at something like Scratch and anything that we offered at Replit. It felt like we were letting them down.
We thought in order to meet their needs we needed something that satisfied the following constraints:
1. required no setup, importing modules, or any other scaffolding before you start coding
2. had powerful primitives to make something interesting in a handful of lines of code
3. simple programming model
4. easy to import and use images and other assets
Our first attempt at this was a Python library called Play (https://github.com/replit/play). Play satisfied many of the constraints but because it was written in Python, and we execute Python on the server and stream graphics down to the client via VNC (https://blog.replit.com/native-graphics-love), the experience wasn't uniformly good for everyone using Replit. For example, for kids in India it was really bad (since then we started replicating our servers in India and other places in the world https://blog.replit.com/global).
Our second attempt was a classic BASIC implementation. BASIC was easy to get started with, it had zero bloat, and you could get something on the screen quickly. Sadly, users grew out of the language really quickly. BASIC made simple things straightforward but anything slightly more advanced was hard to impossible to make. I kept trying to evolve the language until it became kind of like QBASIC (optional line numbers, labels, etc). But it felt like sisyphean task.
BASIC HN discussion: https://news.ycombinator.com/item?id=23052050
BASIC docs: https://docs.replit.com/misc/basic
Last year, around the same time I gave up on "completing" BASIC I saw a job application come in for a designer from an indie game dev Tga. Tga was not only a great designer but also an awesome programmer, so we hired him. I pitched him on this project, we started prototyping it in Replit and got something working fairly quickly (early prototypes here: https://replit.com/@gameenv). When we rolled out an alpha version the most surprising thing that happened was that people on our team got addicted to making games. We weren't the target audience, but that's always a good sign. Then kids in our community started having a lot of fun with it -- the more we tested the more conviction we had that we had a solution to the problem.
The last few months we spent working on the Kaboom environment on Replit. It has an awesome asset editor, and a kick-ass debugging tools. And pretty soon we're going to have great autocomplete and intelisense.
To learn more check out the following:
- Kaboom blogpost: https://blog.replit.com/kaboom
- Show HN by designer: https://news.ycombinator.com/item?id=26728774
- Repo: https://github.com/replit/kaboom
Some games from the community:
- ReplJewled https://replit.com/@ConnorBrewster/ReplJeweled
- Flappy Mark https://replit.com/@slmjkdbtl/flappymark
- Bamboo Ninja https://replit.com/@RoBlockHead/KaboomJam
- Cookie Vs Oreo https://replit.com/@Coder100/COOKIE-VS-OREOS-KABOOMJS-BOOMOM...
It started in 2018 when we noticed that many kids come to Replit from Scratch ready to transition from blocks to coding and get lost trying to find the best way to make games. There are many ways to make games with Replit -- pygame, html, love2d -- but based on our research there was still a big gap between the focused and intuitive experience at something like Scratch and anything that we offered at Replit. It felt like we were letting them down.
We thought in order to meet their needs we needed something that satisfied the following constraints:
1. required no setup, importing modules, or any other scaffolding before you start coding
2. had powerful primitives to make something interesting in a handful of lines of code
3. simple programming model
4. easy to import and use images and other assets
Our first attempt at this was a Python library called Play (https://github.com/replit/play). Play satisfied many of the constraints but because it was written in Python, and we execute Python on the server and stream graphics down to the client via VNC (https://blog.replit.com/native-graphics-love), the experience wasn't uniformly good for everyone using Replit. For example, for kids in India it was really bad (since then we started replicating our servers in India and other places in the world https://blog.replit.com/global).
Our second attempt was a classic BASIC implementation. BASIC was easy to get started with, it had zero bloat, and you could get something on the screen quickly. Sadly, users grew out of the language really quickly. BASIC made simple things straightforward but anything slightly more advanced was hard to impossible to make. I kept trying to evolve the language until it became kind of like QBASIC (optional line numbers, labels, etc). But it felt like sisyphean task.
BASIC HN discussion: https://news.ycombinator.com/item?id=23052050
BASIC docs: https://docs.replit.com/misc/basic
Last year, around the same time I gave up on "completing" BASIC I saw a job application come in for a designer from an indie game dev Tga. Tga was not only a great designer but also an awesome programmer, so we hired him. I pitched him on this project, we started prototyping it in Replit and got something working fairly quickly (early prototypes here: https://replit.com/@gameenv). When we rolled out an alpha version the most surprising thing that happened was that people on our team got addicted to making games. We weren't the target audience, but that's always a good sign. Then kids in our community started having a lot of fun with it -- the more we tested the more conviction we had that we had a solution to the problem.
The last few months we spent working on the Kaboom environment on Replit. It has an awesome asset editor, and a kick-ass debugging tools. And pretty soon we're going to have great autocomplete and intelisense.
To learn more check out the following:
- Kaboom blogpost: https://blog.replit.com/kaboom
- Show HN by designer: https://news.ycombinator.com/item?id=26728774
- Repo: https://github.com/replit/kaboom
Some games from the community:
- ReplJewled https://replit.com/@ConnorBrewster/ReplJeweled
- Flappy Mark https://replit.com/@slmjkdbtl/flappymark
- Bamboo Ninja https://replit.com/@RoBlockHead/KaboomJam
- Cookie Vs Oreo https://replit.com/@Coder100/COOKIE-VS-OREOS-KABOOMJS-BOOMOM...
Terrific for teaching gamedev to K-12!
But I can't believe you missed the opportunity to implement (Activision) Kaboom ;)
https://archive.org/details/a8b_Kaboom_1983_Activision_US_k_...
But I can't believe you missed the opportunity to implement (Activision) Kaboom ;)
https://archive.org/details/a8b_Kaboom_1983_Activision_US_k_...
This is great! I remember working with my son when he was transitioning from Scratch to "code" about 4 years ago -- I wrote about my experience teaching him Javascript and the different analogies I used to explain functions, closures, arrays, etc. (https://medium.com/hackernoon/how-my-10-year-old-learned-jav...). Replit wasn't around back then, but he now uses it frequently with his school coding club. Great job!! If you need any help, feel free to reach out.
alternate/main url from 6 days ago: https://kaboomjs.com/
previous discussion: https://news.ycombinator.com/item?id=26728774
previous discussion: https://news.ycombinator.com/item?id=26728774
What does bloat free mean in this case? There seems to be no explanation
Maybe boilerplate free?
Yes, no boilerplate but also the library is pretty straightforward. All in this one file: https://github.com/replit/kaboom/blob/master/src/kaboom.js
This looks like a better version of scratch.
Scratch is drag-and-drop, no actual typing code, so this is quite different.
Jonathan Blow is going to love this.
In one of his (J.B.) talks [1] he explained how prototyping of game ideas is important. From that perspective having a platform like this helps.
[1] https://www.youtube.com/watch?v=ISutk1mauPM&t=12s
[1] https://www.youtube.com/watch?v=ISutk1mauPM&t=12s
bloat free!