The Interledger Community 🌱: Richard Davey

Game Web Monetization Plugin - Final Report

Richard Davey — Fri, 22 Oct 2021 16:47:04 +0000

It has been 5 months since the release of our Game Web Monetization Plugin. Billed as "an easy-to-use Web Monetization Plugin for HTML5 game frameworks, including Phaser and Pixi" we released it in April 2021. Although this final report is shockingly overdue, the time span has at least given us some insight into adoption of the plugin since then.

Progress on Objectives

Our objectives were as follows:

To release the Game Web Monetization Plugin.
To publish a comprehensive tutorial on using the plugin.
To translate the tutorial into Spanish and Chinese.
To help promote the plugin.

We completed all of these tasks in April 2021, although the promotion has of course been on-going since then.

Game Web Monetization Plugin

This was our main area of focus. We spent a good amount of time developing the plugin, writing the documentation and creating an example game to give developers the best chance possible at learning how to web monetize their games.

The plugin and all related material was published fully-open source, under the MIT license, to GitHub.

You can find it all at: https://github.com/photonstorm/gamewebmonetization.

I am very happy with the plugin. The API is clean and consistent, it's really easy to use and we provided plenty of details and instructions on implementation.

The plugin itself was developed in TypeScript, allowing us to publish the TypeScript definitions along with it, something that TypeScript devs love. Of course, it works great for standard JavaScript developers, too.

The plugin comes with full build scripts, so developers can run a simple npm command and it builds the plugin for them using ESBuild. We provide a modern ES module and also a CommonJS bundle in the distribution, covering all possible development bases.

In the GitHub repository we also included all of the original markdown files that were created as part of the tutorial. You'll also find the source code for the 3 Candies game that demonstrates use of the plugin.

Important links:

Plugin Report 1
Plugin Report 2

Comprehensive Tutorial

We knew from the start that the plugin on its own, even fully documented, wouldn't be enough. So we also wrote a detailed 7-part tutorial all about how to get started and use the plugin in your games. Although the game we created for the tutorial was written in Phaser, the tutorial itself was framework agnostic and works with any HTML5 game framework, such as Pixi or MelonJS.

You can find the tutorial here: https://phaser.io/tutorials/game-web-monetization but we also included the original markdown files inside the GitHub repository, as well.

Tutorial Translation

In order to reach even more developers we had the tutorial translated into Spanish and Chinese.

The Spanish translation was handled in-house by one of our developers, Francisco Pereira Alvarado, which was really good because he knew the technical aspects of the plugin inside-out, so understood how to phrase the translation perfectly.

The Chinese translation was created by a translation company based in the UK that we worked with. They were paid to translate the tutorial, using some of the funds from the Grant for the Web.

Both translations went live in April 2021.

Plugin Promotion

At the time of release we featured the plugin heavily on our web site, in Twitter, in our Patreon Developer Log posts and in our newsletter. As anticipated this saw a good influx of developers at the beginning.

We were serving about 800 tutorial views a day at its peak. Over time, however, this has reduced down. We still get views of the tutorial every day but not as many as at the start.

In terms of translations, English was the most popular tutorial, however Spanish was second, with just over 15% reading the Spanish version instead.

Chinese didn't factor very highly in the stats. It's possible they either prefer to translate it themselves from the English version, or that we just don't have enough Chinese developers interested in this subject yet.

What went well. What could be improved?

Although a little delayed starting, we completed everything we wanted to do. And, I believe, we did it as well as we could have done. I'm very pleased with the quality of the plugin, documentation, tutorial and example game.

We didn't even plan to create a game as part of our proposal! This was just something we did organically as it became evident it was going to be the best way to demonstrate use of the plugin.

The game was fun to build and hopefully was a good incentive to get more developers to look at the plugin. I believe that without it, we would have had less traffic overall.

I'm very pleased with the quality of the plugin, as well. The code is modern, clean and easy to follow, with good documentation for every single part of it. We didn't cut any corners or leave any stone unturned.

Also, I'm pleased that we managed to reach thousands of developers since launch. However, the recent drop-off goes to show that sustained promotion is required to keep the interest high.

Or, it's possible that once they had actually read about it, the developers concluded that web monetization wasn't for them at that point in time. As visits to both the Phaser site and GitHub are entirely anonymous it's impossible for us to truly know the reasons.

At the very least we have sown the seed of web monetization education in to a lot of people. Perhaps when the technology standardises, they will return to investigate it again? I believe that on-going promotion of the concept as a whole, such as that undertaken by Andrzej and the stellar work he does on JS13K, are what is needed to keep the bubble of an idea alive in the minds of web game developers, while we wait for the W3C process to conclude.

They've got the resources, they've got the knowledge, they now just need the reason to dive in.

In terms of what we could have done better: Communication. I can only apologise to Chris, Erika and the others for our often months of radio silence as we worked on the next stage.

What's next?

We are deep in development of Phaser 4.0.0. It is a complete rewrite of Phaser, from the ground-up, using modern web technology. Although not part of our proposal, we plan to make sure that Phaser 4 has full support for web monetization built in to it from day 1.

We will also still continue to promote the plugin and respond to any issues or questions we may get about it.

What community support would benefit your project?

In hindsight, it would have been worth trying to get some other game frameworks onboard with this, such as Defold or Unreal.

Although doing so was completely outside the scope of our proposal, I honestly believe it would help cement the idea of the web monetization ecosystem, as a whole, in the minds of more game developers.

The reach of Phaser to web game devs is good, really good, but we're still only a fraction of game devs as a whole, and that's really important. When developers see lots of people talking about tech in their social channels, they're far more likely to take notice of it.

Additional comments and closing remarks

I'm very glad we were able to be a part of this project, and I thank the Grant for the Web team for allowing us to be so (even if we did cause them headaches along the way!).

I believe it's now up to the browser vendors to make web monetization a reality for the masses. The spec is progressing through the W3C. It's taking a while, but that is to be expected.

Once it matures and we see it start to ship in major browsers, that will be an undeniable shift in perspective. Developers will really start to take notice and, thankfully, our plugin will be there, ready and waiting for them!

Game Web Monetization Plugin - Report #2

Richard Davey — Fri, 23 Apr 2021 15:54:26 +0000

Project Overview

The objective of this plugin was to make it as easy as possible for Web Game Developers to access Web Monetization from their games. This would be supported by a comprehensive tutorial, translated into Spanish and Chinese.

Project Update and Progress

This week was all about finishing things off and that is exactly what we've done! I'm very pleased to say that the Game Web Monetization Plugin is now live and ready to download, along with the full documentation, a sample game, and the English version of our 7-part tutorial.

The Game Web Monetization Plugin

The Game Web Monetization Plugin can be downloaded from its GitHub Repository at https://github.com/photonstorm/gamewebmonetization. Here you will find the full TypeScript source code, an ES5 "script tag" bundle, and an ESM (ES Module) version, too.

Plugin API Documentation

You can view the full API Documentation online. This documentation is generated directly from the TypeScript source code. It's also included in the GitHub repository, so developers can access it offline if they wish.

3 Candies! Sample Game

We did a lot of work on the game this week, implementing the final graphics and polishing everything up.

You can play the game here (be sure to use a Web Monetized browser 😀)

The full source code is, of course, included in the GitHub repository and we also use it as the sample game in the tutorial.

Comprehensive 7-part Tutorial

The final tutorial is now live on the Phaser website and can be read here.

Spread over 7 parts we take the readers from the very basics about what Web Monetization is, through the sign-up process and then into using the plugin and making the sample game Web Monetized, finally concluding with further thoughts and ideas.

If anyone here reads it and spots any mistakes, or thinks it needs further detail, please leave a message and we'll edit it.

Writing the tutorial was honestly as much work as coding the plugin! Our thanks to Andrzej Mazur and the Coil team for some technical clarifications.

Right now the English version is live and the Spanish version will go live on Monday, April 26th. The Chinese translation has also been commissioned.

What’s next?

Once the Spanish and Chinese tutorials are live, this will conclude all of the authoring work we had to do for this project and we can begin social promotion.

Promotion will include coverage on Twitter, a news article on the Phaser site, a feature in the Phaser World newsletter, and coverage in the upcoming Phaser Development Logs. The tutorial will become part of the Phaser Learning Resources page and will also be added to the Phaser GitHub README and documentation.

In total, we hope that these combined avenues will make more web game developers aware of the potential of web monetization.

Game Web Monetization Plugin - Report #1

Richard Davey — Mon, 19 Apr 2021 16:58:01 +0000

Project Overview

Project Update and Progress

After a rocky start (thanks COVID-19!) we hit our stride this year and have nearly finished everything we set out to achieve, and more.

The original plan was to create plugins specifically for Phaser 2, Phaser 3, and Pixi 5. However, instead, we created a global plugin that can be used from any web game framework. This plugin is called GameWebMonetization to make it clear it's suitable for any web-based game framework.

It has been developed in TypeScript and development is fully complete. We then implemented a build process to generate both an ESM (ES6 Module) and ES5 Bundle from the source. As the plugin is written in TypeScript, we've also been able to easily generate full TypeScript definitions, as well. These 3 formats mean we support all common development flavors. From those who wish to just stick a <script> tag in their HTML to those who want to ingest it as a module.

Here is an image of the class structure:

We're using TypeDoc to generate the full class documentation for the plugin. It is 100% documented, including all private methods and events.

All of the development work has been completed. We've finished the plugin, build process, prototypes, and example game.

Tutorial

The original plan was to author a tutorial, which would be published both on GitHub and on the Phaser website. This has been finished and is going through a final round of proofreading.

We anticipate it being ready to go live by the end of this week (April 23rd).

We've also authored the Spanish translation of this tutorial in parallel with the English one, so both of those will go live together. Once they are published we will get the Chinese translation commissioned.

The tutorial is broken up into the following parts:

An introduction to Web Monetization
What is Coil and Uphold
An overview of the plugin
How to use the plugin in a real game
Next steps

We felt it was important both to educate and inform the readers, as well as provide them with the guidance required to implement the plugin in their game and be able to successfully test it, hence the section on Coil and Uphold.

The Phaser web site saw its busiest month ever in January 2021 with over 1 million page views. So we're confident that when the tutorial goes live it will have good visibility.

Demo Game - 3 Candies

Although we didn't budget for this originally, we figured the best way to demonstrate the plugin would be to create a full game. And thus, 3 Candies was born.

Written in Phaser 3, this puzzle game tasks the player with the ability to find 3 matching candies as quickly as possible. The more they match, the faster it gets!

We commissioned cute pixel-art graphics for the game along with some suitably bouncy and happy music.

The game detects if Web Monetization is running, or not (and allows you to toggle it from the page) and is hooked into the different events the API exposes.

If enabled, you get an extra life and also get to chose an exclusive bright Coil background for the game. If not enabled, you still get to play, just with one less life and a more plain background.

The game is fully open source and is part of the GitHub repository for the plugin, along with the tutorial files. This means the one single repo will provide everything a developer needs: the plugin, full documentation, an example game, and the tutorial.

What’s next?

Finish proofreading the tutorial and ensure the English and Spanish versions are fully in sync.
Publish the tutorial to the Phaser website and begin social promotion.
Commission the Chinese translation.

Although this is our first project report (sorry!) we're actually in the very final stages and look forward to having the plugin, game, and tutorial out there by the end of the month.