Welcome to Phaser World Issue 190

This week, we've got a new beta version of Phaser v3.85, a brand new comprehensive tutorial for Phaser Editor, and loads of great games to enjoy!

Game of the Week
Pet Fall
Slide cute animal pets to complete full lines in this highly polished puzzle game where Tetris meets Sokoban.

PIPES
The plants need water and it's up to you to solve puzzles and get it to them.

Popcorn Mayhem
Oh no! All you wanted was some microwave popcorn and now your are trying to run for your life. Use arrow keys to get out of there as fast as you can.

Orcball!
Multiplayer (local or online) game where you take turns to move a ball towards your opponent's goal.

Newsletter Mini Survey:

Have you ever released an html5 game? Either on your own or as part of a team. Click one of the buttons below:

Yes

No

Phaser v3.85 Beta 2 Released
The final beta release of Phaser v3.85 is now available on GitHub and npm.

First steps with Phaser Editor tutorial released
A beginner-level tutorial about adding and manipulating GameObjects in Phaser Editor.

Teaser for upcoming space shooter tutorial
Get ready to learn from Phaser expert Scott Westover as he prepares to release his new tutorial series.

Hackathon offers P225K prizes for social impact projects
The event, dubbed “Pump Up The Jam,” is held in collaboration with the Rotary Club of Midtown Diliman and DEVCON.

How to add looping audio in Phaser 3.60
Hey Wizardy Game Devs! Today, you will learn how to add a looping audio to your Phaser 3.60 game.

Rich:

I managed to do quite a lot of coding this week, which was a rare treat! I had assigned myself a bunch of gnarly issues on GitHub, which I completed, and then I released Phaser v3.85 Beta 2 and added it to our Phaser Sandbox. I then got to work on a new template and tutorial combination, which should be out 'soon' and finally started helping out Zeke with our massive documentation migration project.

We've created thousands of new examples that help demonstrate how to use all aspects of the Phaser API and we've written thousands of new pieces of documentation. And the time has come to carefully merge these into v3.85. It's a complex and time-consuming process, but the benefits will more than pay for themselves. Having access to better documentation is a win for everyone, beginner and experienced alike.

We also completed the design of our new website and put the final illustrations in place. There's still a lot of integration effort to go, but I'm very happy with how it has turned out. The first pass at our new site was just a little bit too 'SaaS' and not fun enough, but our illustrator has smashed it out of the park with some great set-pieces that really bring it to life and keep the 'Phaser charm' intact while giving us a much needed modern facelift.

August is going to be a busy month for us. We'll release Phaser v3.85 and Phaser Editor v4.2, along with updates to all of the templates we've created. We also want the new site live, a new Trial version of Phaser Editor launched, Phaser Beam will be nearing the end of its gestation period and Zeus will be ready to be unleashed. Lots of very important milestones all coming to a head at similar times.

So strap in tight and hold on, because it's going to be quite the ride.

Francisco: Hola a todos.

This week has been a week of research and more showcase exports.

With the goal of having and being able to better publish the games that our users have published in Phaser, we have exported all the Phaser showcases in JSON and md format, and we have been able to export the showcases from the Discord forum, Discourse, and the first showcase channel we created on the Phaser Discord.

In addition to the export, I have been researching some node systems that may possibly allow us to create more tools to make it easier to work with Phaser. I am attaching a screenshot of one of my favorite libraries that I found.

Arian: Greetings friends.

This week I have focused mainly on coding a new feature for Phaser Editor: the Video object. That is, for the next version you will be able to add videos to Phaser Editor scenes, very easily.

Developing the support of Video objects in the editor scenes is not such a simple task, since you have to handle the update loop and the playback of sounds well. Fortunately, we are using some of the UI elements we introduced in the editor to handle the particle emitter animations. Also, Following the editor's philosophy, we must show thumbnails of the video files in different parts of the editor UI.

Almost all of this is ready. This week we must complete the full development that supports Video game objects.

Perhaps for the next release, we will incorporate a video player built into the editor, so that you can watch videos without having to leave the editor window.

Here is a screenshot of a video object in a scene. This video object has applied some visual effects (Sepia Color Matrix and Vignette) available by default in the editor, and it has also been combined with other objects, such as the PC frame.

I have been sharing screen records of the work we are doing with the video object. You can watch them in our Discord #phaser-editor channel. If you are not there yet, join us and say hi!

Can: This week, I focused on enhancing the animation capabilities of Nexus by introducing a new CSS animations API. This API allows you to create sophisticated animations for both DOM elements and SVGs.

Here is a quick example:

Structure looks like you're writing CSS, so you feel like home while defining your rules. Oh, GetRandomHexColor() is our new utils function to generate random hex color! It's quite handy when you want to demonstrate different colors.\ More examples are on the road to show what you are able to do with our animation API!

In addition to the animations update, I had a quick fix for pixel rendering.

Nexus now ensures sprites render crisp and clear. Just call SetPixelated(sprite) to apply. Otherwise, it wouldn't be fun enough without pixel art juice, right?

As we progress through animations, I'm shifting my work to keyboard input manager & particle system for the upcoming weeks!

Until then, keep your pixels sharp all!

Ben: 2024-07-26

This week, I've been pushing the limits of WebGL. It's good to know where those limits are! Cool game tech is nice, but you can't play it if it goes beyond the limits.

Of course, those limits are different on every machine. So BrowserStack has been a big help. This lets us connect our test code to real mobile devices and operating systems, and watch what happens when we try to do ludicrous things.

The most obvious limit is memory. If I want to make a million game objects, I'm going to need a lot of memory. In fact, that much memory can quickly become a problem even for powerful desktop systems. Stored as a conventional JavaScript object, an object can take a kilobyte or more of data. That's nothing, until it's a million nothings, at which point it's a gigabyte of memory and your browser kills the tab.

This can be averted by storing data in compact numeric arrays. Using ArrayBuffer and TypedArray views lets us store structured data as compactly as possible. A million complex objects can fit in just 188 megabytes, instead of several gigabytes. This is still nothing to sneeze at, but it's typically not going to crash common devices. It's also why this technique isn't suited to interactive game objects: extracting and replacing that data is costly!

But we can't overlook initialization, either. How do we actually define that compact numeric data? We don't want to pass dozens of arcane numeric values, most of which aren't even relevant. A configuration object is much easier to work with. But we don't want to make a million configuration objects, or we're back at square one, running out of memory. We've found that a reusable configuration object makes the most sense.

The next limit is vertex shader performance. This is typically pretty good! You can expect smooth 60fps performance up to several million objects, even with very complex vertex shaders, on most devices. Exceeding this limit typically just slows down, rather than crashing, but it's a good idea to understand target devices and what level of performance they can support.

Another GPU limit is fill rate. A GPU can only process so many pixels at once. It's smart enough to skip drawing anything outside the screen, through a process called scissor which looks at vertices and ignores pixels outside the render area. But it's still easy to cram way too much stuff into the screen, at which point the tab crashes. It's easy to see why when you look at some figures. Suppose you have a million sprites, each just 64x64 pixels. That's still 4,096,000,000 pixels! A 4K screen has about 8,300,000 pixels. If you put all those sprites on one screen, you'd be drawing 500 pixels to each physical pixel, which is a colossal waste. This is called "overdraw". The solution is to avoid layering things too much - just have some self-control. The benefit of millions of game objects is not to cram them all into one place; it genuinely just looks like static. The benefit is to spread them out over many screens, let the GPU do the work, and use the CPU for more interesting things like game logic.

GPUs also have attribute limits on how much data you can send to the shaders. This is typically 16 vec4 attributes, a fancy way of saying "64 floating point numbers per vertex". That's a lot, but it runs out fast when you're trying to do something clever. WebGL is very limited here; you can't address additional buffers from the shader program. But you can sample textures! So one technique for handling data is to load it into a texture, sample it in the vertex shader, and convert the colors into numbers. This technique has its limitations: it's only safe to store 16.7 million pixels, and even that is too big for efficient access. A GPU can only look at a few kilobytes of data at a time, so it likes to load textures in chunks. Using too much texture data can slow things down as it swaps chunks in and out. Still, we've found that this is efficient for storing data such as texture UV coordinates.

One final GPU limit is shader compilation. It takes the GPU a little time to get shaders ready for use, and if the shader is complicated, that time expands. It can take hundreds or thousands of milliseconds. Some older devices can't cope with very complex shaders! They just give up and return an error. So it's imperative that we write shaders to be simple and fit-to-purpose.

As you can see, pushing performance up to the limits can be risky. It's no good to make a game which just crashes for many users! Standard Phaser sprites are good up to several 10,000, depending on device, and don't risk crashing a browser tab. But knowing these limits, we can go forward with better efficiency.

And maybe next week some of this will play into enhancements to tile map rendering...

Phaser Releases

Phaser 3.85.0 Beta 2 released 23rd July 2024.
Phaser Editor 4.1 released 12th July 2024.
Phaser CE 2.20.0 released 13th December 2022.

Have some news you'd like published? Email support@phaser.io or tweet us.

Missed an issue? Check out the Back Issues page.

©2024 Phaser Studio Inc | 548 Market St PMB 90114, San Francisco CA 94104