Turning a Scratch project into a Windows executable

Some background: I took a course called Multimedia Storytelling this semester and its assignment requires us to create a courseware for tertiary students. It has to be interesting, interactive, contains the 5 main multimedia elements, and lastly submitted as a standalone executable file that can be presented in front of the class. Definitely sounds daunting enough for a short semester that only lasts for a month…

As soon as the assignment requirements are out, our group started to tinker around the possible solutions and ideas for it. After discussing for around a week, we decided to use Scratch for this project - quite a big brain idea that seems to going to work well. Storyboards are done, content ideas are finalizing, information piles are flowing in, and I only have one very special job to do…

…that is to find a way to turn Scratch projects into standalone executables.

---

Before really diving my head (recklessly) into this thing, I expected Scratch to have an “Export to EXE” function or whatever that enables it to spit out an .exe file without the end user tinkering too much. It’s considered as a very beginner programming languages after all (although I disagree that it’s programming…well probably, just not with code). But much to my surprise, even in their latest version, this feature is not available yet. The widely requested feature to change the project display’s aspect ratio is also not here, and the assignment also requires our project to be in 16:9, not 4:3…this is going to be headache-inducing. That’s what you get for deciding on project details before fully understanding the tools you are going to use…

Anyways, with Scratch being a programming language (ahem) with a vibrant community, many things are possible…here I go for solutions.

One of the possible methods I could use is to use an older version of Scratch, convert the project into a Flash(SWF) file, and use Adobe’s super old version of Flash Player to turn it into an EXE file. It would work, but using old software doesn’t sound like something nice, and it doesn’t completely solve the display aspect ratio issue. Black borders will be displayed and it looks ugly as hell. The lecturer said that she won’t mind them, but I do. So, we have to find a better solution…

Since Scratch 3.0 (their latest version released just a few months ago), the entire software is running on HTML5 and JavaScript. That means, there should be a way for me to turn the project into a webpage and then wrap it up with some browser wrapper. Indeed, some brilliant guy in the Scratch Forums made a tool for that for the new format and named it “htmlifier”. Weird name for sure, but it works. The logic of that tool is easy, it just downloads your project and the Scratch engine, links them together and gives you a very huge HTML file in the end. The file works all by itself and the project can be ran by opening the file in any modern web browser (preferably Chrome anyways, it’s the best for weird stuff like these).

That’s really a huge HTML file.

Oh, the HTML file also has black borders too, but it's pretty easy to fix - just edit that HTML file to remove the black background property from the body element 😛

Since our project isn’t even near completion and I’m just trying it out, I kept a local copy of the website in my hard disk. Who knows if it wants to go down two days before my assignment submission…just in case, right?

Packaging a HTML file into an executable isn’t the most impossible thing to do, I had done it in the past…I guess. Last time I did it by using a WebKit element in a Python app, it works but crashes pretty easily. WebKit isn’t the best engine for heavy apps like these, so I should be using something more modern, like Electron. It’s quite widely used, from Discord to Visual Studio Code, so I guess I don’t need to say much about its abilities…let’s just implement it right away.

After poking around quite a number of sites and documentations, I decided to go lazy and just use what we have on the Electron tutorial docs. Created a new folder, placed the HTML file in it, copied the contents of the main.js and package.json as well as did some necessasry edits (such as setting the name, correct screen resolution as well as removing the window’s ability to be resized so that the display aspect ratio will always be correct).

Honestly I could just clone their repository…all I did was just copying and pasting.

Upon starting the app through a specified command, a window like this appears.

Not too bad, we’re on our way…now we just have to package this into a single EXE.

This is quite the tricky part as most packagers will package the app into an installable format instead of a standalone click-and-run portable format. electron-builder however does support packaging apps into portable formats so I decided to use that as well. Again, I decided to be lazy and just copy their sample code…I mean, it works.

For some reason, setting target to portable doesn’t give a portable application (it gives an installer instead), so I passed --win portable to the command instead and it worked. --ia32 tells it to package a 32-bit executable, who knows if the lecturer uses an ancient PC...

And here we go with a huge standalone Electron app that takes up resources just like Chrome does. I mean, it’s just a sprite change and audio play upon hovering the cat and it took 100+ MB of RAM when running…

Anyways, if it works I’m not gonna complain much. I might just replace the HTML file after we completed the project and build it again to get our executable. It shouldn’t be hard, but I can always refer back to this post, right? 😉

If you’re scratching your head on how to build a standalone executable for an Electron app or Scratch project, I hope that this helped you a little. And if you have just accidentally stumbled upon this and is interested in Scratch - go for it, it’s a pretty fun way to learn programming. It’s more or a learning tool instead of a production tool (and we’re clearly abusing its capabilities this time), but getting some product while learning doesn’t sound like a bad thing after all.

See you next time!

–Lilacse

---

Posted from my blog with SteemPress.