Updates from the Repl.it team about the product

← Back to all posts
KaBoom.js Alpha Release!!!
h
slmjkdbtl (54)

UPDATE: Kaboom.js is officially out right now: https://replit.com/kaboom

Video game, beautiful thing, so much fun. Games should be fun of course, but game making itself should also be fun, it should be a game on its own! We here at replit are imagining a fun collaberative game programming environment that makes game programming fun again, and here's our first step: KaBoom.js, a JavaScript game library that enables everyone to start making a small game from scratch in an instant!

This is a community alpha release, features and docs are not fully stable yet, we really want to hear everyone's opinions, any suggestions or bug reports please comment below!

try out in the template repl
doc
guide

let's start making that game!

Comments
hotnewtop
amasad (3536)

Hey everyone, @slmjkdbtl is working with us to design a game framework. Some of you might remember my work on Basic, which was fun, but the language felt too limited. Kaboom has similar goals but approaches differently and doesn't try to invent a new language.

frissyn (371)

@amasad :O That's really cool! How do you find people to help the Repl.it team with projects like that? Pick me please

amasad (3536)

@IreTheKID mostly people that apply for jobs

frissyn (371)

@amasad I guess that makes sense, I didn't get accepted for intern though. T~T

JBloves27 (1901)

Really cool!

hahahahahahaha

zplusfour (916)

@programmeruser :O
I made a simple CDN, but now it is in jsdelivr

amasad (3536)

@DynamicSquid hi squid, can you try and give us feedback?

DynamicSquid (5023)

@amasad It seems really good, but I'm not that good with JS. I'm more used to a Java syntax, like Processing. But it does seems really easy to use

DabDatBass (14)

How to gif sprite?

AbaanShanid (21)

@slmjkdbt @amasad Since KaboomJs doesn't have a GitHub repository, I will post my issue here, the clearCode function inside the init function doesn't work properly, I tried typing an rgb color code inside it and it doesn't seem to add the color I want. For example

init({
  scale: 3,
  width:400,
  height:145,
  clearColor:rgb(51,162,255),
  }
  );

This only makes the game's background white.
Thanks

slmjkdbtl (54)

@AbaanShanid all color values are 0.0 - 1.0 so i think you wanted rgb(0.2, 0.63, 1), sorry if that's not clear in the docs

AbaanShanid (21)

@slmjkdbtl Ohk great thanks! Would be better if specified in docs

98129182 (8)

Awesome, will use!

EpicGamer007 (1751)

Is there a github repository? I would like to access an older version but I do not know where I would

slmjkdbtl (54)

@EpicGamer007 Hi! Kaboom is not open source released yet so sorry no. Now we're working on a dedicated Kaboom environment on replit that have custom editor features for kaboom so stay tooned! If you want an older version (the version comes with this post I suppose?), I've put it in this repl: https://repl.it/@slmjkdbtl/kaboom-old

The only big change is the component system add([ comps ]), but you can still use the old style sprite(conf) with https://kaboomjs.repl.co/kit/starter.js (addSprite(conf))

EpicGamer007 (1751)

@slmjkdbtl oh ok, its just the kaboomjs thing i made does not work anymore cuz i used a cdn and stuff.

slmjkdbtl (54)

@EpicGamer007 oops sorry, but we'll have our official cdn, npm packages and stuff once it's fully released

mesquite2234 (279)


Something cool I made

HarperframeInc (456)

What happened to Replit Play?

tankerguy1917 (178)

do we need any previous knowledge of javascript syntax and other things like that, or can this be helpful even if you are just learning javascript?

slmjkdbtl (54)

@tankerguy1917 Yes it is helpful for learning JavaScript, I would say making games is the best way to learn any language!

Baconman321 (1103)

Try minifying this to make it faster to load... (Of course, keep an unminified copy).

amasad (3536)

@Baconman321 we'll worry about performance more in the future. For now can you try making something with it and giving us feedback?

Baconman321 (1103)

@amasad I'm not really good with canvas and all... :(

amasad (3536)

@Baconman321 the cool thing about this is that you don't even need to know what a canvas is

Baconman321 (1103)

@amasad XD how? From the looks of it, you need to know a bit about canvas. (NVM I looked, wow!)

Also, quick question, was wanting to know this:
You made repl.it in Golang right?
How do you redirect to https? I can't find out how to do it, because apparently https is hosted on a different port, but https is already set up on a repl even tho you didn't set up https yourself...

zplusfour (916)

also i can make a CDN
if you want one

zplusfour (916)

and why KaBoom?
when i looked at the post for the first time I thought it is a kahoot clone or seomthing

slmjkdbtl (54)

@ZDev1 oops, didn't know about kahoot before, sry for the confusion!

EpicGamer007 (1751)

Is there a cdn for this? Also, the link you put:

for github does not work.

slmjkdbtl (54)

@EpicGamer007 Hi! Sorry forgot to make the github repo public, it's good now, thanks for letting me know. It's not on a cdn yet, but for now you can get it pretty easily since it's just one file.

amasad (3536)

@EpicGamer007 hi epic, can you try making something with it and giving us feedback? Thx

EpicGamer007 (1751)

@amasad sure! I will try as soon as I can (probably today or tomorrow) :)

EpicGamer007 (1751)

@slmjkdbtl @amasad One thing to know, in your guide, when you make the bullets have random colors and sizes, there is a syntax error. You are supposed to put ; but there seems to be two commas:

One thing I also see you use is sup as a function. Though it does make sense, in my opinion, function names should describe what they are doing a bit more. I think that I would get confused by what the sup function would do if I first encountered it. I am still going through the guide to learn more about it but it looks pretty good so far!

slmjkdbtl (54)

@EpicGamer007 Thanks for the feedback! Yeah I also think sup is not the ideal name kinda ambiguous, goal is to have a name that's short and fun to type, if that doesn't work for people then we'll change it. If you happen to have any suggestion please let me know!

EpicGamer007 (1751)

@slmjkdbtl I am workin on a little game right now. and so far, everything has been pretty smooth. I am really enjoying how simple it is to code with it and it does not take that many lines of code either :).

slmjkdbtl (54)

@EpicGamer007 Hey that's awesome! Let me know if there's any problem

EpicGamer007 (1751)

@slmjkdbtl ok. also, one quick question. for the loop function. does the time update? like if i had something like

timeBetweenSpawn = 1;

loop(timeBetweenSpawn, () => {
  spawnEnemy();
});

and then have some code like:

if(numberOfEnemiesKilled == 10) {
  timeBetweenSpawn -= 0.1;

}

would the time between each loop update?

slmjkdbtl (54)

@EpicGamer007 That won't because the function cannot keep a reference to a number type, timeBetweenSpawn will only get evaluated once at start, if you want to do this you'll have to use recursive wait like

function spawn() {
    spawnEnemy();
    wait(timeBetweenSpawn, spawn);
}
spawn();

this is also more flexible cuz you easily decide to stop the timer loop (not call the next wait), with loop there's no way to stop the loop yet (there will be shortly)

EpicGamer007 (1751)

@slmjkdbtl another questions, how do we remove text from the scene? I tried destroy(text); and that didnt work.. (I am trying to display the users score but the text does not update so i am trying to find out how i can remove text);

slmjkdbtl (54)

@EpicGamer007 possibly because text is the name of the built in function, if you name it to something else it should work? also you can update the text value by changing its text field like this:

const score = text("score: 0", {
    value: 0, // a custom field for storing the score number
});

bye("enemy", () => {
    score.value++;
    score.text = `score: ${score.value}`; // modify the 'text' field to update visually
});

forgot to put that into doc, doing that now

EpicGamer007 (1751)

@slmjkdbtl ok thank you again! (By text, I just meant the text that i wanted to show).