microstudio icon indicating copy to clipboard operation
microstudio copied to clipboard

Enhancement: ability to create standalone .html files with microStudio to open in mobile client browsers

Open SugarRayLua opened this issue 5 months ago • 0 comments

Hi!

Novice mobile lua programmer that recently discovered microStudio and really like it! As a mobile iOS user, I'm not able to open folders with .html files and run them in my browser. Thus, in order to run microStudio projects, I either need to serve them up with a local server or access them from someone's website. However, it doesn't seem that difficult to convert microStudio projects to a single standalone .html file to be able to open in mobile browsers and have done so as a proof of the concept by:

  1. inline all the microStudio .js files into the index.html (e.g. microengine.js, fengari.js, etc.)
  2. store base64 encoded sprites in a javascript array in the body of the index.html project file (e.g.):
var imgArray = [base64dataURLSprite1, base64dataURLSprite2, etc]

then add names of sprites stored in imgArray (above) in the "resources" variable that microStudio exporter creates at the start of the index.html

(e.g.):
var resources = {"images":[{"file":"icon.png","version":0,"size":0,"properties":{}},{"file":"sprite.png","version":2,"size":322,"properties":{"frames":1,"fps":5}},{"file":"sprite2.png","version":2,"size":322,"properties":{"frames":1,"fps":5}}],"assets":[],"maps":{},"sounds":[],"music":[]};

and finally, change the 9th line of the microengine.js "start()" function from:

s = LoadSprite(this.url + "sprites/" + i.file + "?v=" + i.version, i.properties, () => {

to

s = LoadSprite(imgArray[j], i.properties, () => {

The result will be a packed index.html that won't be so easy to read or debug, but it will be able to be opened easily by anyone who download the index.html file in their browser-- including users on mobile devices which will make it even easier to share projects with others cross-platform. While I can do this manually as indicated above, it would be much nicer if microStudio could provide an option to create a standalone .html file in its html exporter. In addition, the exporter could likely also be setup to inline other base64 encoded assets (e.g. sound files) in arrays.

Thanks for the considering the suggestion. 😊

SugarRayLua avatar Jan 13 '24 23:01 SugarRayLua