Turning Godot games/apps into iNFTs on PaintSwap
For this we will use a sample open sourced game from Godot’s showcase
- Download the godot demo projects zip archive from: https://github.com/godotengine/godot-demo-projects
2. Open Godot, for this example we are using the latest stable version of this of writing (Feb 2022) v3.4.2.stable.official
3. Click Scan and select the folder containing the demos
4. You can select any demo, but for this example we will use a simple app which is widely compatible called Platformer 2D, double click it.
5. It is recommended to use GLES2 where possible to support a greater number of devices, can be changed in the top right:
6. Now click Project -> Export
Followed by Add -> HTML5
If you see any errors it could be because you need to download & install the HTML5 files that are suggested in the error message.
Change any settings as you see fit, then click “Export Project”. Create a new folder and the files to that. You can keep Export With Debug on while testing, but make sure it is removed when creating the release game.
Navigate to the folder, the files should look something like this:
7. If you try and open up Platform 2D.html directly, you will get something that looks like this:
Because it is not run through a web server which can locate the files. The next step for us is to combine these into a single .html file that we can upload to IPFS as a self-contained web app.
8. Open the folder in a development environment, we use VSCode for this example. Inside the Platformer 2D.html delete this line that loads the external javascript file:
Inside the next script tag (ending with //<![CDATA[) add the following code:
Thanks to https://gist.github.com/dio/ae79cf546e808a9bc46515bf9400ad5d for this code. This adds a `decode()` function that is necessary to turn base64 code into an array buffer.
9. Create a file called base64.js inside the same directory, this will convert the .wasm and .pck binary files into files of base64 strings, and add the following to it:
Install nodejs if you do not have it already https://nodejs.org/en/download/ Then run the command in a terminal prompt:
node base64.jsThis will produce 2 files called base64.wasm and base64.pck.
We will now use the contents of these inside the file. Just below the newly added decode snippet from above. Type the following:
We will replace the contents of wasmCode and pckCode later.
10. Now open Platformer 2D.js, search for Engine.load, it should look something like this:
Replace the entire function with:
Search for this.preloadedFiles = [], which looks something like this:
Replace the this.preloadedFiles & this.preload function contents with this, updating the pck variable if using another project:
(Alternate steps for other Godot versions) If these files look different on your set up, you can just update the 2 necessary areas instead, initializing preloadedFiles:
And adding this check if pathOrBuffer is the pck string
11. Copy the whole of this javascript file into the html file under the pckBuffer line where we left off before (e.g here):
12. Back in step 9 we added wasmCode & pckCode with dummy string contents. Now we must paste the contents of base64.wasm & base64.pck into their respective variables. We left this step till last as the long strings can cause the editor to slow to a crawl.
And that’s it… try open up the html file now!
Go to https://paintswap.finance/marketplace/factory/mint select the community contract or your own one, and then pick the “Interactive” option and choose your single HTML file and it should load and be immediately interactive!
This example also works on mobile:
The entire HTML file can be downloaded here if you are having trouble setting it up and want to see where mistakes may be: 0
https://gist.github.com/0xSamWitch/e5692530f5305dd69876a1a0cd682504
Demos of various iNFTs, most of which are from Godot can be found here:
A showreel:
Special thanks to https://twitter.com/0xDoubleSharp for figuring out the steps needed to embed the files into a single HTML file
Keep painting everyone!
