Launching HTML5 Games In The ARK Desktop Wallet — Part Six
Welcome to the final part of our tutorial series looking into launching an HTML5 game in the Desktop Wallet with ARK Core and Construct 3! We’ve come a long way from our first tutorial. At this point, we have built an entire blockchain game including a lobby, wagers, all the game logic and paying out prizes or refunding wagers.
What’s left is to set our game to run as a plugin inside the ARK Desktop Wallet. This will entail exporting our game as HTML5 and setting up a basic plugin to load our game inside the wallet. This plugin is not the Core plugin we already made since that is already finished and runs on our server. Instead, we will be making a Desktop Wallet plugin which will appear in the Plugin Manager within the ARK Desktop Wallet. Once we accomplish this, our game will be displayed to an entirely new audience who can download, install and play our game!
Optimizing your Game to run as a Plugin in the ARK Desktop Wallet
First, we’ll need to export our completed game as an HTML5 page and upload everything to an internet-accessible HTTP server. To do this, we choose Project > Export from the Construct 3 menu.
We are then presented with a series of different platforms we can export our game to, such as HTML5, to Facebook, for Android, iOS, or the Windows Store. Who knows, maybe one day there will be an ability to export directly to the ARK Plugin Manager, but for now choose Web (HTML5) and then click Next.
This will show us another dialog box to pick our export options. We want to make sure to deduplicate images, recompress images and use the Simple minification mode. This saves space and reduces bloat in our game. Then click Next, and the export process will begin. This can take a few minutes, so grab your favorite beverage and take a well-earned break!
When it’s done, you will be presented with a link to download your completed game as a ZIP archive. Extract it and upload its contents to your internet-accessible server. For the purpose of this tutorial, it was uploaded to https://www.arkfun.io/connect-4/.
Now that our game is online, it’s time to make the Desktop Wallet plugin. For this, follow the steps in the ARK Learning Hub to set up a skeleton Desktop Wallet plugin. When you’ve done that, we’ll make the necessary modifications so it runs our game.
First up, we’re going to edit our package.json file to change some permissions. This is because some features of the Desktop Wallet require authorization from the end-user to use, for security reasons. The boilerplate package.json file from the skeleton project looks like this:
"version": "0.0.1",
"description": "Testing my first plugin on Ark Desktop Wallet",
"main": "src/index.js",
"desktop-wallet": {
"title": "My First Plugin",
"permissions": [
"COMPONENTS",
"ROUTES",
"MENU_ITEMS"
]
}
}We need to add a WEBFRAME permission to this list so that we can open external web pages inside our plugin. Add it on a new line immediately after MENU_ITEMS, like so:
"permissions": [
"COMPONENTS",
"ROUTES",
"MENU_ITEMS",
"WEBFRAME"
]We’re also going to add a couple of new sections to our package.json file which will make our plugin appear in the Gaming category of the ARK Desktop Wallet, with some keywords to help people find our game:
"desktop-wallet": {
"categories": [
"gaming"
]
},
"keywords": [
"@arkecosystem",
"desktop-wallet",
"plugin",
"game",
"games",
"gaming",
"connect 4",
"multiplayer",
"pvp"
]Notice the first three keywords are in bold. That’s because those are required for our plugin to appear in the Plugin Manager once we publish it. Any extra keywords will be used in the search engine within the Plugin Manager to help others to find your plugin. Also remember to change the name, version, title and description to match the details for your plugin, and when you’re done you can save and close the file. Now open my-first-plugin.js that is part of the skeleton Desktop Wallet plugin. Replace its entire contents with (replace <your url> where your game will be hosted):
module.exports = {
template: '<div class="flex flex-1 bg-theme-feature rounded-lg overflow-y-auto"><WebFrame class="w-full rounded-lg" src="<your url>" /></div>'
}You probably already have a good idea of what this does already. It renders a WebFrame component (remember that WEBFRAME permission from earlier?) inside a <div> element that is styled using internal ARK Desktop Wallet classes to make the component appear full-sized with rounded edges so it fits in with the overall aesthetic style of the ARK Desktop Wallet. We also set the source of the WebFrame to the location where we uploaded our HTML5 game, as that is what we will render in our WebFrame component.
Save our file, and, drumroll please, we’ve made all the necessary changes! If you restart the ARK Desktop Wallet and enable our plugin from the Plugin Manager, as described in the ARK Learning Hub article earlier, you should see our game launch from inside the wallet.
All that is left is to publish our game for others to find and play it! This will require a free account at the NPM registry. If you already have one, great, if not, go sign up now. Then, from a command prompt inside the folder where you made the Desktop Wallet plugin, enter npm login and supply your login credentials for your NPM account. Run npm publish --access public and you should see various bits of text flying up the screen. When it’s finished, your work is done, and your completed plugin is now available worldwide in the Plugin Manager inside the ARK Desktop Wallet.
Next Steps
Congratulations, your game is now available in the ARK Desktop Wallet! We hope that you have found this series helpful. This is a great way for developers to add blockchain functionality to their games, earn additional revenue, and introduce their game to a new audience!
If you become stuck at any point make sure to consult our documents on the Learn ARK hub. In addition, our team and developers are active on Slack so do not hesitate to reach out to us!
Check out previous posts in this series for reference here:
- Part One: How to import an ARK wallet address into your application
- Part Two: Creating the Backend for your Plugin
- Part Three: Making your game work with a betting system
- Part Four: Implementing Game Logic into your Plugin
- Part Five: Determining how Prizes Work
