Add ability to load dataURLs for Kaboom objects (sprites, sounds, etc). #854

SugarRayLua · 2024-05-05T19:57:36Z

SugarRayLua
May 5, 2024

Hi! I'm a newbie mobile iOS programmer and really like Kaboom's ease of use! I've been looking for a javascript engine that can produce output to package up as a single file html to distribute projects to friends and families (i.e. not have them have to use a local web server to load or need for me to host on my own web-server). Although the Kaboom introduction suggests using a local web-server, I've found that basic Kaboom runs fine when packaged inline into a single-file html and then used alone on a client browser (e.g. I use a npm package html-inline-external to package kaboom.js inline into my kaboom.html file). The html-inline-external package will also automatically package images into the html so that kaboom.js could theoretically access them without having to retrieve them from a local file. However, when I try to put the dataURL into URL to load the sprite

loadSprite("nameToAssignToSprite", dataURL)

Kaboom.js gives me a script error.

I think if Kaboom.js added the ability to load dataURLs into its objects, users like myself would be able to package up projects as single-file htmls and share with others without having to server from a remote or local server 😊

Thanks for considering.

lajbel · 2024-05-06T15:32:04Z

lajbel
May 6, 2024

You can!

loadSprite("kat", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA6CAYAAAADZ1FRAAAAAXNSR0IArs4c6QAAAsRJREFUaIHdm91NAzEMx32nDkAnoM9UDNIFGIAOwCwMAAN0AQZB9JlOQDeAF1Kdrrbjz1zUv4SEdPn62U7iS64D3JDu7x5+a2VO5+MwYIVP5+OQNbAMSWCnGmoVejaAFraoCj1VLwawwhapoIuWgpeO9bDfXf5/evu4er7ydt7CABZYSqfzcbiCLhUxC9UGhBnAE0leWIqB9HQtRDB555qmHYlXKY2SQof9ztVJtCRjwRxVIghdyKyNtlRtjBy0aSGzAH++v4jKPT6/qsaAwXPAAACr0/mo2rY0wFJQqo7EABw8JXKVlFqwyAKokcQAh/2u6mUAIfSSsHNJw38qFBqABu8JeCopPJY7sNCclgSeqgbPQgPIwTXAUo94jEj1QaXIqi0rAxYrHxFF3DuBOFeWDMSyyFDyGpiDFqWh1o5btYcZiJuqo6RgzepW4O+fr5R2a6p62gvMgW3WW/j++br8eaTx9oorYAWeAmzWW7aNeT1NeavC5nSRFZiSd25jIqElDfSSoGgV7mmPd1uENsA/dNQxT1EZfG1xKs83620zYIAAT1MhLgGRlMmYQii0tqOMgX2+v4S0i0Vx2JyOBM9eIMfI+ewdbIR3JfVNB4PWTqPfpKy6gs4cTC/7evg+vbQkGdzNQUt089DYYcIVdNY7bE9q6unH59dUo0rbHiMu1QsM1+n02dLR5Pb0HCACKCoiKId2t5C1iAgU2tPZUgmIZswjQOzHMljnS8/hudLDWwNsNY72sJ+9wIv+esAi681KkxuODGUAA0ygsYItbhw9bVojrNnJieaAwAMsWZRFt5a9vAcD8N6V7kKhV7WZsnxxQAkt2AO4Zr5q8wyyMHdgmAFvXZQsiRVbQXJSqjVA1J7uySKrFTVHxHMDZCQtESmzqIHouy6NMj6iVzXYAr7FLwXMHXgNsOSPYEI6lhqgl1/7/AGdp5Ixi1pUmwAAAABJRU5ErkJggg==")

0 replies

SugarRayLua · 2024-05-07T04:49:58Z

SugarRayLua
May 7, 2024
Author

Wow, thanks, @lajbel! I initially thought I had tried that but it didn't seem to work. However, after I was reassured by your example, experimented more with that feature and figured it that (at least on iOS) there must be some javascript restrictions even from opening up a dataURL since doesn't work on Microsoft Edge in iOS (loads Kaboom but then says 'script error'). However, same file opens on and works fine locally on iCabMobile browser on iOS and on Google Android 11. For others interested in building single-file .html Kaboom projects that can be opened from client browser and don't require a server, I'd recommend the following steps:

Build one's Kaboom project as one normally would (e.g. in a directory with image and other asset files but be sure to download the kaboom.js engine locally)
When ready to assemble the project into a "single-file" Kaboom .html that can be opened by other users, transfer the project/folder somewhere where can use node.js + npm (e.g. desktop or even mobile devices using certain apps [Node.Js Lab on iOS App Store or using Termux or other Node environments on Android).
Add an extra step to your project: specify the images you want to use in img tags in your kaboom .html script (e.g.

<img id='kat' src=/filePathToImage width= "pickImageWidth" height = "pickImageHeight" hidden = "hidden">

*Note that hidden parameter was set to "hidden" so that when your .html loads it doesn't attempt to show the image in addition to the canvas Kaboom projects are mainly set up to utilize

Kaboom .html example ready to be 'in-lined':

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Kaboom</title>
	<img id="oceanPict" src="Ocean.jpg" width="100" height="100" hidden="hidden">
</head>

<body>
	<script src="kaboom.js"></script>
	<script src="game.js"></script>
</body>

</html>

When loading assets (e.g. image files into sprites), utilize the format as described by @lajbel above (e.g.:

loadSprite("nameYouChooseToNameSprinte", document.getElementByID('idTagOfImgFileYouWillImportInYourHTML').src)

Note the modification I made from @lajbel's code-- as will be explained in the steps below, will use a node npm package so that you don't have to manually generate a dataURL of your image files (the npm package below will do it for you and replace the .html

<img src= /filePathToImage>

with

<img src= "dataURL...">

as noted in @lajbel's example above

example kaboom game.js:

kaboom();

let imageUrl = document.getElementById('oceanPict').src;
console.log(imageUrl);
loadSprite("ocean",imageUrl);

add([
	sprite("ocean"),
	pos(80,40),
	area(),
]);

Install NPM package "html-inline-external" (npm install html-inline-external -g)
Create a simple javascript installer script that uses the html-inline-external package to "inline" (insert all of your non-html files into your .html file so that end up with a 'single-file' .html project).

*Note that the html-inline-external package I believe only inlines javascript, image, and css files so you'll likely either need to find another npm package if you want to automatically inline other assets or manually convert other types of files to dataURLs and then load them into Kaboom. Here is an example of a simple javascript script which I use to do the inlining:
html-inline-external.js:

const htmlInlineExternal = require('html-inline-external');
const fs = require('fs');

htmlInlineExternal({src: './kaboom-js/kaboom.html'}).then(function(output){
	fs.writeFile("./singleFileKaboom.html", output, function(err) {
	if(err) {
	return console.log(err);
	} else {
	console.log("The file was saved!");
	}
 	})
});

Last, run the above sample javascript in-liner script on your Kaboom project:
Example: If the above files are contained in the following directory:

/root (folder)
-- html-inline-external.js
-- kaboom-js (folder)
---- kaboom.html
---- Ocean.png
---- game.js
---- kaboom.js

Running:

$ node html-inline-external.js

in the /root directory will generate:

singleFileKaboom.html

in the root directly that you can open up from client browsers without needing a local or remote server 😊

*Please note though that if you embed a lot of image files you're single-file .html will grow quite large and be harder to read since it will include a lot of base64 encoded text so you may want to make single-file .htmls for projects that use only a limited number of assets

The above instructions might seem like a lot; perhaps others know how to create single-file Kaboom .htmls that open from client browsers more efficiently. For me, I've been searching a long time to find an engine that lets me create graphics projects that I can share with non technologically savvy friends and family on any platform using javascript that doesn't require them to access remote severs or set local servers up themselves and consider the steps worthwhile.

The caveat is that mobile iOS still seems to be restrictive about allowing users to open up javascript containing files stored locally in their own browsers so the above single file .htmls will probably only work with a limited number of iOS Browsers (unless Apple in the future allows developers to use different browser engines). The only iOS browsers that the single file Kaboom .html seems to open up in that I found is using:

iCabMobile Web browser (I'd be happy to try others if anyone find others work).

The single file Kaboom.html seemed to also open up and work well in Google browser on my Android 11 device.

I hope this is helpful to others. I'm excited to start my journal on programming in Kaboom and creating single-File .html files from my projects.

PS,
I was so excited about finding Kaboom that I suggested to the developer of the "WebMaker" Web app that he add on kaboom.js as one of the templates to use in his app (seemed like a nice complement to the Kaboom playground)

chinchang/web-maker#554 (comment)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ability to load dataURLs for Kaboom objects (sprites, sounds, etc). #854

{{title}}

Replies: 2 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Add ability to load dataURLs for Kaboom objects (sprites, sounds, etc). #854

SugarRayLua May 5, 2024

Replies: 2 comments

lajbel May 6, 2024

SugarRayLua May 7, 2024 Author

SugarRayLua
May 5, 2024

lajbel
May 6, 2024

SugarRayLua
May 7, 2024
Author