Phaser Round-Up - January 2022

Welcome to the first Phaser round-up of 2022. An awful lot has been happening over the past few months and while I cannot explain everything just yet, it felt right to give everyone an update. Consider this part Dev-Log, part newsletter, with a firm look towards the future and recent achievements.

In this Round-Up:

1. Preparing for the future of Phaser 2. Make Games with Phaser Book 3. GM Frens Accelerator Program 4. Phaser Dev Log 5. Vampire Survivors - 5 Steam Key give-aways 6. Get your games on AirConsole 7. Prince of Persia Remake

Preparing for the future of Phaser

I've been working on Phaser for a long time now. A really long time. Make no mistake, we have come so far and the community constantly amazes me with its output - you'll find several stunning examples of that in this Round-Up. Yet, I've been working mostly on my own all this time. There's so much I want to do with Phaser, but it's held back by the fact that tasks bottleneck with me because my time is finite and considerably limited. It's at the point where I simply cannot achieve everything that I wish for Phaser by remaining the sole developer on this project.

Plus, I'm noticing another significant shift bubbling away in our industry. Regardless of what your personal feelings are about the blockchain, I don't think anyone can deny the Web 3 movement that is happening. Phaser is, of course, built exclusively for the web. We've seen it utilized in some fascinating areas. From powering Twitch overlays to running games on car dashboards. That reach is only possible because of web technology. And increasingly, Phaser is being used to create what can be classed as Web 3 games: those built for or built on, the blockchain.

I'm not here to give you a crypto sales pitch. That would be pointless. I recognize there is a lot to criticize, with the space bursting full of scams. Yet there is a kernel of something technologically interesting going on that simply will not go away, no matter how much people yell on Twitter. It's important that Phaser positions itself so that it's just as appealing to use for Web 3 projects as it is for any other. The modular nature of Phaser 4 will allow for this easily. We can provide cross-chain APIs for those that require them, and for those who don't, it won't impact your games at all.

Seeing all of this change happening I knew I needed to act fast. Over the past couple of months, I worked extremely hard putting together a Phaser pitch deck and then presenting to a variety of organizations, both inside and outside of the blockchain space. And so far, things have been going very well.

The proposal is split into two halves. The first is the creation of a development team around Phaser 4 that will be responsible for working on the core engine and getting a steady flow of releases out over the next few years, as well as features we all really want to see. The second half of the pitch is centered around building a repository of education and learning resources for web game development. Because as great as I believe we can get the technology, if we don't equally build out the teaching materials then it will almost be for nothing.

As those of you who have taken part in fundraising will appreciate, it's a daunting and time-consuming process. But I believe it's essential, too, if I want to fully realize the potential that Phaser has. As it stands now, nothing has been signed. This is why I don't want to go into any more detail just yet. This could all crumble apart. I sincerely hope that isn't the case but only time will tell. Hopefully, my next post here will be the start of a mass recruitment drive for the Phaser team :)

The only downside of this work has been it has meant I've had a vastly reduced amount of time to code on Phaser. If it all pans out, then a couple of months delay now could lead to rapid acceleration, years of development, and fresh new resources. This is an opportunity just too great for me to pass upon. So I have to try for it, for the benefit of all of us. I'll keep you posted.

Make Games with Phaser Book

Thomas Palef has updated his best-selling Phaser book so all code and chapters are now based on Phaser 3.55.

Make 2D Games in JavaScript with Phaser is a 110-page book that starts from scratch, teaching you how to create a 2D platformer and slowly adding in features, such as mobile controls and juicy effects.

By the end of the book you'll have a real game to play with and enough knowledge to build your own games.

GM Frens Accelerator Program

GM Frens aims to help indie developers build, publish, and monetize their games on the blockchain. Join their Accelerator Pilot Program to receive training from experts in the field and up to $100,000 in funding for your game. You'll also have access to their strategic partners, including Yield Guild Games (YGG), who will mentor you and help you fundraise.

The application deadline is February 4th (although this is likely to be extended) and the program begins March 1st. Apply now!

This is a great opportunity for Phaser developers who either have existing games they'd like to get on-chain or who have ideas for new concepts. Read the full article for details on how to apply. The deadline is quite soon, so don't delay!

Phaser Dev

Despite hours spent pouring over pitch decks, Phaser development hasn't been completely idle. There are hundreds of updates and new features in the forthcoming Phaser 3.60 release and one of these worth discussing is the new Sprite FX Pipeline.

Phaser 3 already has the Post FX Pipeline. This allows you to apply a shader effect to a Game Object (or group of them) after they have been rendered. This is powerful for certain types of effects such as hue saturation or if you want to blur the entire Scene. The new Sprite FX Pipeline works in a similar way, however, it is used during the actual rendering flow of the Game Objects. This allows you to change the rendering of the Sprite itself, rather than just applying effects on top of it.

The way it works is to create a Frame Buffer for each Game Object you enable. This is backed with a WebGL texture that is based on the size of the Game Object plus an extra area of padding you can control. For example, if you wanted to make an effect that added an outline around a Sprite, then you can define the extra space the texture will require to draw this.

Sprite FX Pipelines can be written in ES6 as regular modules. Here's an example of a Swirl FX Pipeline:

Here you can see we just extend the core SpriteFXPipeline class, passing in our fragment shader and setting up a few properties, such as the radius, position, and strength of the swirl. These are mapped to shader uniforms and the whole process should look the same to anyone who has created a Post FX Pipeline before.

The final part of the puzzle is the 'onDraw' method, which does, as its name implies, draw the renderTarget to the game canvas, via our shader.

The Sprite FX Pipeline has the ability to get much more complex than this, including passing the render targets through multiple buffers.

Using the pipeline works exactly the same as for any other. You add it to the Pipeline Manager then set it on any Sprite that requires it, using the optional 'setFXPadding' to control how much extra space is added around our texture:

The end result is a lovely swirl effect that ripples back and forth through our Sprite:

You can view this demo running here. This example contains all the code shown above.

Note: this only works with Phaser 3.60 Beta 4 currently.

Sprite FX Pipelines round-out everything I want to do with shaders in Phaser 3. Combined with Post FX and the batch pipelines this concludes the triumvirate of shader power that you can use in your games.

Aside from Sprite FX, I've also recently upgraded the Spine Plugin to use the final of the 3.8.x series of runtimes which includes some fixes for missing meshes. I'm well aware that Spine 4 is now out and that we'll need to support it eventually, and I'm in talks with Esoteric about that at the moment.

A surprising new release that also dropped just before Christmas is a brand new version of Matter Physics. The developer, Liam, sent me a link to test it and it's a seriously impressive improvement! There are optimizations across the board, including in the Detector, Composite handler, Pairs, Resolver, SAT and Vertices objects. On average we're seeing a 40% speed boost just by upgrading.

However, we modified our version of Matter to blend it more easily with Phaser 3 because we were not expecting any new releases, after all, the project had been dormant for quite some years. Those changes are quite minimal though and well documented, so I'm excited to get the new 0.18 release merged in with Phaser 3 in the coming days.

In the meantime, you can play with the Matter Tools sandbox to see it in action.

As always, keep an eye on the Phaser Discord and the Phaser 3.60 Change Log for further updates. I'll summarize them in the next round-up of course, but if you're active in our community you'll nearly always find out faster!

Vampire Survivors

Here's a question for you: Which game is currently the 16th most played game on Steam right now? Which, at the time of writing, over 51,000 people have played in the past 10 minutes?

Welcome to Vampire Survivors. The blurb is elegantly simple:

"Mow thousands of night creatures and survive until dawn! Vampire Survivors is a gothic horror casual game with rogue-lite elements, where your choices can allow you to quickly snowball against the hundreds of monsters that get thrown at you."

Those of you who hang with us on the Phaser Discord will have seen an early version of Vampire Survivors some months back. It was great even in that iteration. Since then, developer Luca Galante took this ridiculously addictive concept, cranked it up to 11, packaged it with Electron, and unleashed it on to Steam where it absolutely exploded, thanks in no small part to being picked up by some major Twitch streamers, drawn-in by the frenetic gameplay.

Let's be clear about this for a second. This game is made entirely in Phaser 3 and uses the Rex Plugins for some UI controls. And it's ranking higher in the charts than FIFA 22 or Warframe, with a staggering 17,643 overwhelmingly positive reviews. That's just incredible and a real testament to the skills of Luca.

I'll be honest, a bullet-hell styled game is possibly one of the last I imagined being created in Phaser :) but I'm so glad it was!

Luca was kind enough to give me 5 Steam keys to give away. To enter, all you have to do is retweet this tweet about the game. I will pick 5 winners at random on Feb. 7th.

If you can't wait that long, buy Vampire Survivors on Steam for just $3 :) Warning: I'm not responsible for any loss of productivity once it sinks its teeth into you!

Get Your Games On AirConsole

This is a good month if you're a Phaser developer looking to make money from your games! First, we had the GM Frens indie fund and then I had a call with the guys at AirConsole who told me all about a great opportunity for Phaser developers on their platform.

"AirConsole is browser-based technology that transforms TVs and PCs into a fully-fledged video game console where smartphones are used as gamepads. Players don't need to buy any additional hardware to play together."

Their Game Hub is installed on millions of Android and Amazon Fire TVs around the world and they're looking for polished HTMl5 games that can engage a casual audience to be added to their portfolio.

These are local multiplayer games, that can be played with 1 - 8 players, each with a smartphone. Games that take creative advantage of using a smartphone as a controller are likely to do especially well, think secret identity, board games, card games, etc.

There is a leaderboards API and an established monetization system via subscriptions. Devs get revenue share every time their game is played by AirConsole Hero players, so the more engaging your game is, the more you'll earn.

If you are interested in exploring this emerging platform and making some recurring revenue then email Rafael rafael@n-dream.com and tell him you read about AirConsole on the Phaser Patreon.

If you'd like to check in advance, you can find all AirConsole API documentation on their developers portal. You're also welcome to join their Discord to chat with other devs making AirConsole games.

Prince of Persia Remake

Back in 2015, when Phaser was on version 2, developer ultrabolido took a stab at porting the classic 1990 MS-DOS version of the game Prince of Persia to the web. A lot of progress was made and a playable, although slightly incomplete version was released. It was a fun experiment, thankfully preserved on GitHub in this repo.

Fast forward to April 2021 and developer oklemenz forked the original repo and started fixing everything that was missing or broken. As the year progressed more and more features landed until he released the finished game on princejs.com - and it's really quite remarkable.

The addition of touch controls makes it playable in mobile browsers, the query string can be used to 'cheat' your way through hard sections or modify the settings and it can even load in custom levels designed by the wider PoP fan community.

And then on December 28th MrDoob, which you probably know as the developer of three.js, decided to tweet about the game - and it all went a little crazy as it went viral :) Sites such as imore wrote about it and IGN got in on the action once it was realized you can even play the game on an Apple Watch.

I guess this is really a remake of a remake :) But kudos to oklemenz for all the hard work he put in finishing it off. You can find his repo at https://github.com/oklemenz/PrinceJS and should of course try the full game. Although I warn you now, those baddies with the swords are still a real challenge to get past!