SplashKit Online is a browser-based development environment for beginner programmers! With it you can immediately get started programming in Javascript using the SplashKit library, which is an easy to use library for handling input, graphics, and sound - everything you need to make a game!
Installation involves two steps.
- Setting up the IDE
- Importing the SplashKit Wasm Library
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/WhyPenguins/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 - three files called
SplashKitBackendWASM.js,SplashKitBackendWASM.wasmandSplashKitGlobalAPI.js. You can either compile them yourself or get pre-built ones. - Copying them all into the
Browser_IDE/splashkit/
You can find unofficial pre-built files here; just download those three files and copy them into Browser_IDE/splashkit/, and 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/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.
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.