[HN Gopher] Kaboom - JavaScript game programming library and env...
___________________________________________________________________
Kaboom - JavaScript game programming library and environment
Author : kiyanwang
Score : 245 points
Date : 2021-04-13 07:10 UTC (15 hours ago)
(HTM) web link (replit.com)
(TXT) w3m dump (replit.com)
| ChrisArchitect wrote:
| alternate/main url from 6 days ago: https://kaboomjs.com/
|
| previous discussion:
| https://news.ycombinator.com/item?id=26728774
| luke2m wrote:
| This looks like a better version of scratch.
| Wowfunhappy wrote:
| Scratch is drag-and-drop, no actual typing code, so this is
| quite different.
| tomcooks wrote:
| https://kaboomjs.com/ seems a better URL
| areille wrote:
| "Replit now supports KaboomJS" seems a better title
| qnsi wrote:
| it did support replit from the start, KaboomJS was created by
| replit guys
| raphaelrk wrote:
| 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
| gammalost wrote:
| What does bloat free mean in this case? There seems to be no
| explanation
| laszlokorte wrote:
| Maybe boilerplate free?
| amasad wrote:
| 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
| [deleted]
| tobyhinloopen wrote:
| 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
| amasad wrote:
| Correction, its not totally black, it says "fwonky intro" xD
| 92g3r2ogr9asof wrote:
| Jonathan Blow is going to love this.
| sublimefire wrote:
| 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
| ktpsns wrote:
| 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.
| re wrote:
| Previous discussion (from 5 days ago):
| https://news.ycombinator.com/item?id=26728774
| lrmunoz wrote:
| 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)
| amasad wrote:
| 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.
| z3t4 wrote:
| 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.
| zzbzq wrote:
| 'Async' here refers not only to the keyword but also to what
| is achieved, in classic javascript, through callback
| functions
| z3t4 wrote:
| 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.
| deepstack wrote:
| Maybe try little javascripter would be good for your kid.
| https://www.crockford.com/little.html
| hutzlibu wrote:
| 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)
| RobertKerans wrote:
| 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
| patates wrote:
| 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.
| RobertKerans wrote:
| 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]
| tobr wrote:
| 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?
| RobertKerans wrote:
| 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.
| tobr wrote:
| 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.
| hutzlibu wrote:
| 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.
| dec0dedab0de wrote:
| in python you would do a loop for a game, unless you're
| using an event driven framework that does the loop for
| you.
| crooked-v wrote:
| The secret of Javascript syntax is that, once you grok how
| functions are just special objects, it's actually a Lisp with
| a bunch of weird cruft attached to it.
| foobarbecue wrote:
| 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
| beansontoast wrote:
| bloat free!
| grenoire wrote:
| 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.
| megablast wrote:
| Hahaha. I had a z80 processor and 16kb. I wish I had OpenGL.
| tartoran wrote:
| 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.
| bemmu wrote:
| 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.
| mlok wrote:
| 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 !
| Iv wrote:
| 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
| HenryBemis wrote:
| I was looking for a GW-BASIC comment.. "back in my days".
| Glad to see you wrote one, otherwise I would have to!
| [deleted]
| harry8 wrote:
| 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.
| tartoran wrote:
| Logo is great in whichever form. And great for kids as
| well, the concepts are very easy to grasp at a young age
| _joel wrote:
| There was Click and Create, I recall having some fun with that
| back in the day, with very little coding (none really)
| spicybright wrote:
| 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.
| MattRix wrote:
| It is still around, although basically only from Clickteam
| still. You can get Clickteam Fusion:
| https://www.clickteam.com
| itsbits wrote:
| 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?
| amasad wrote:
| 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.
| amasad wrote:
| 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...
| neovive wrote:
| 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.
| ArtWomb wrote:
| 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_...
| abrookewood wrote:
| OK, do yourself a favour and watch the introductory video.
| Probably the most unique intro I've yet to see for a programming
| library.
| sunsipples wrote:
| this honestly made me happy
| thomasfromcdnjs wrote:
| Thanks too lol a nice bedtime vibe
| high_byte wrote:
| wasn't going to watch it. I'm glad I saw your comment
| simonknoll wrote:
| thanks for the hint, it was worth watching it!
| sscarduzio wrote:
| Best intro video in years
| Romanulus wrote:
| That burp at the end reminded me of Earthbound (SNES). Sweet.
| amasad wrote:
| :) fully produced in-house by our designer Tga. Song on
| SoundCloud too https://m.soundcloud.com/replit/kaboom
| Abishek_Muthian wrote:
| I hope you used kaboom to create the kaboom video! Was fun to
| watch indeed, All the best.
| r6203 wrote:
| Reminds me of the Land of Lisp video--in a good way.
|
| http://landoflisp.com/
| vanderZwan wrote:
| Time to port _Grand Theft Wumpus (the most violent
| programming example ever put into a textbook)_ to Kaboom.js?
___________________________________________________________________
(page generated 2021-04-13 23:02 UTC)