SplashKit Online is a browser-based development environment for beginner programmers! With it you can immediately get started programming in Javascript (and experimentally C++!) using the SplashKit library, which is an easy to use library for handling input, graphics, and sound - everything you need to make a game!
Standard installation (of JavaScript support only) involves two steps:
- Setting up the IDE
- Importing the SplashKit Wasm Library
See the bottom of the readme for how to set up experimental C++ support.
The IDE is just a simple node project with few dependencies, and can be setup with the following lines:
git clone --recursive https://github.com/thoth-tech/SplashkitOnline.git
cd SplashkitOnline/Browser_IDE/
npm install
npm run serverNow you'll be able to load up localhost:8000 in a browser and see the IDE! However, we also need to import the SplashKit library, as its not included in the repository by default.
Installing the SplashKit library involves:
- Getting the SplashKit Wasm Libraries - two files called
SplashKitBackendWASM.js,SplashKitBackendWASM.wasm- and copying them intoBrowser_IDE/runtimes/javascript/bin/ - Getting the SplashKit Autocomplete file
splashkit_autocomplete.json, and copying it intoBrowser_IDE/splashkit/
For getting those three files, you can either compile them yourself or get pre-built ones.
You can find unofficial pre-built files for SplashKitBackendWASM.js, SplashKitBackendWASM.wasm and splashkit_autocomplete.json here.
- Download
SplashKitBackendWASM.jsandSplashKitBackendWASM.wasmand copy them intoBrowser_IDE/runtimes/javascript/bin/. - Next, download
splashkit_autocomplete.json, and place it inBrowser_IDE/splashkit/.
Having done that, you're good to go! They're WebAssembly(Wasm) files so they'll run on any OS.
Manual compilation is a little more involved.
First you'll need to install Emscripten, which will be used to compile SplashKit to Wasm so it can be used in the browser. The easiest way to do this is via the emsdk. Installation instructions are here - Getting Started
Once you've got Emscripten installed and activated, you can compile the SplashKit Wasm library! We've included SplashKit's source code as a submodule, along with the scripts to compile it as a Wasm library, directly in this repo.
Currently only cmake builds are supported, so navigate to the cmake project and build it using Emscripten's emcmake and emmake wrappers.
cd SplashkitOnline\SplashKitWasm\cmake
emcmake cmake -G "Unix Makefiles" .
emmake makeIf all goes well, you should find the three files built and copied to inside Browser_IDE/runtimes/javascript/bin/ and Browser_IDE/splashkit/ - if so, you're done!
The goal of the SplashKit Online IDE is to provide a beginner friendly programming environment targeted towards using the SplashKit library. It has REPL like functionality to allow rapid feedback, with emphasis on game related functionality like interactivity, graphics rendering and audio playback. To support this, code execution should definitely happen in the browser (hence compiling SplashKit to run in the browser), and ideally compilation does as well. Currently Javascript is the only language supported (as it is quite easy to execute in a browser), however work on involving other languages is also under way.
The IDE is written as simply as possible, using straight HTML, CSS and Javascript. The code editors use the CodeMirror library (version 5) to provide syntax highlighting and other editing features. It is currently ran by using node for some reason, however as demonstrated by the unofficial demo, any sort of static page server can do the trick (such as python -m http.server)
Currently Javascript is the language supported by the IDE, and it is executed securely inside an iFrame after some code transformations to make it run asynchronously and within a custom scope.
The SplashKit API has been exposed to the global scope of Javascript, allowing the user to interface with it in much the same way they can in other languages, like C++ and Python. Calls to the SplashKit API are then executed by the SplashKit Wasm module as native code (or as native as it gets in a browser).
The SplashKit library handles all input, graphics, audio and file handling, and is invoked by the user's Javascript. The library has been compiled into a WebAssembly (Wasm) module via Emscripten. This module is loaded into the page as soon as the IDE starts, and the functions in it exported as Javascript functions.
It is also possible to use C++ within SplashKit Online! This is still experimental, and as such certain features such as file access and audio don't work yet. However, the majority of graphics and input functionality works, and you can still use it to compile and test regular C++ programs too!
Assuming the IDE is set up correctly, installation of the C++ side involves three more steps:
- Installing the Compilers
- Installing the C++ Runtime
- Switching to C++
Currently the binaries for the compilers can be found unoficially here
- Download compiler.zip
- Extract the files in it, and place them all inside
/Browser_IDE/compilers/cxx/bin/ - You'll also need wasi-sysroot.zip - this goes in the same directory (don't unzip it!)
- Download the files
SplashKitBackendWASMCPP.jsandSplashKitBackendWASMCPP.worker.jsfrom here, and place them inBrowser_IDE/runtimes/cxx/bin/
If you want to compile some of this yourself, currently the repository supports building both the C++/JavaScript runtimes, and the Compiler System Root Files (partially).
To compile these:
- Place sysroot.zip at
SplashKitWasm/prebuilt/(don't unzip it!) - Run:
cd SplashkitOnline\SplashKitWasm\cmake
emcmake cmake -G "Unix Makefiles" -DENABLE_CPP_BACKEND=ON .
emmake make -j8For more info, see the this pull request.
Once its all setup, you can head to localhost:8000, which will bring up the normal JavaScript runtime. To switch to C++, just go to localhost:8000/?language=C++ - you'll probably also want to click New Project to create the default C++ project. You can also use localhost:8000/?language=JavaScript for JavaScript.
Most of the SplashKit Online IDE is licensed under the GNU General Public License v3.0 Some of it is unlicensed - this code will be either removed shortly (it is no longer unused) or the original authors contacted and properly licensed.