Add kaboom.js to available libraries

[SugarRayLua]

Meta info

• Is this a bug or suggestion?: suggestion
• Version (click on help icon in footer): 6.0.0
• Context - Web app, Chrome extension or both?: Web app

Hi, thanks for the beautiful app! Really works well on iOS (iPad)

Would you consider adding kaboom.js to the available libraries to use in the editor? It is another handily FOSS library.

Thanks!

[chinchang]

Added! Its available in templated too! https://x.com/webmakerApp/status/1787384562449875242

Thanks for suggesting this awesome game engine!

[SugarRayLua]

Thank you very much, @chinchang !

😊

[SugarRayLua]

@chinchang , Sorry to ask you a follow-up question (I wasn't able to find any other way to write you an email):

Web-maker seems to work really well with Kaboom and maybe an ideal platform for me to use to create Kaboom projects on my iPad. I saw that Web-maker can download a single-file .html of the project which is ideally what I'm really looking for (so I can distribute my projects to other non-tech savvy friends and family that don't have to run the projects on their own local servers or require me to host my projects on a server). However, I'd really like to include assets (like images) in the project and saw that your 'Pro' plan includes the ability to load assets. I'd likely purchase a "lifetime" subscription to Web-maker if Web-maker would also 'in-line' those assets into a single html file. On the projects I work on right now, I'm creating single-file-htmls with Kaboom and images by using node and the npm package html-inliner-external-- but if could do design and create single-file Kaboom projects with assets all on web-maker Pro, I'd definitely be interested in purchasing a subscription 😊

[chinchang]

@SugarRayLua I'll be happy to epxlore this feature! Few questions:

Is it just the images that you expect to get inlined?

Also, say you uploaded an asset through Web Maker and it ends up in your Kaboom file as: loadSprite("bean", "https://assets.webmaker.app/bean.png");

Now how do you expect this to be inlined? Does Kaboom accept base64 string in loadSprite or is there another way?

[SugarRayLua]

Thanks, @chinchang!

Yes, I'd be looking for at a minimum images to be inlined; Kaboom does accept base64 strings in loadSprite and that is how I was using the npm inlining package to do so. I don't know how you've currently got Web Maker set up to inline its javascript when downloading a Web Maker project, but the inlining package I use (and I think most of the npm inlining packages I looked at) automatically converts src attributes for css, js, and img tags to base 64. I would then do:

loadSprite("bean", document.getElementByID('idOfImgSource').src)

or something similar.

If Web Maker converted html audio tags that would be a bonus and could loadSound() similarly.

Alternatively, if Web Maker somehow just converted any Asset I uploaded to a base64 dataURL (perhaps by identifying the proper daraURL format by the uploaded file's extension?) and then let me know how I could access the dataURL in the javascript section of my Web Maker project that even be a better solution (e.g.: upload oceanSounds.wav to Web Maker 'assets' and then access that sound file by inserting an alias like dataURLoceanSounds into a function by writing something like:

loadSound("ocean", dataURLoceanSounds)

A Web Maker user could then load other Assets into Kaboom the same way and use it to upload Assets into projects containing non-Kaboom libraries to be inlined in other Web Maker projects.

PS,

On a related request, would you also consider (perhaps in 'settings') enabling an option to inline the kaboom.js engine itsel into the downloaded single-file html instead of a http: url to download the kaboom.engine? Would enlarge the size of the download single-file html but enables Web Maker to be my 'one' IDE to create web apps that don't require any internet connection at all to run.

😊

[chinchang]

Understood! I am creating a new issue for this to explore further -> https://github.com/chinchang/web-maker/issues/560