Welcome to Phaser World Issue 181

Thank you to everyone who reached out last issue and booked a chat with me. It has been fascinating learning about how you use Phaser, both professionally and personally, along with hearing your suggestions for how we can improve it going forward.

I'm still more than happy to talk to you - so please book some time and tell me all about what you use Phaser for and how we can help improve it for you.

Game of the Week\ Chrono Switch
Chrono Switch has incredible visual aesthetics, using the 1-bit style along with the cool scene effects as well as smartly designed levels. Switching between the world is indeed a fun concept for platformer types. Controls are easy to go with too!

Powertoys
Powertoys is a well-made physics based puzzle platformer game where you can use multiple vehicles to reach to end point. Visuals look great, mechanics are easy to handle.

Circuit Rescue
Circuit Rescue is a cute pixel-art with a hacker character, well polished puzzle platformer. We are trying to solve each stage by activating different spots based on our character and interactive environment.

NanoRevolt
It's really cool to being able to switch modes and fight in a different way with the reckless enemies. It was smooth to follow the platforms to proceed stages.

Shinobot
Shinobot is amazingly polished platformer survivor-like game where you get upgrades each level to choose. Although having core loop fully with a goal would take it another level!

Power Crisis
Power Crisis is a cool board game with resource management mindset mixed in order to build enough energy to be the saviour! Be careful with the nuclear waste!

Phaser Bun Template
The template, which is available on GitHub, features TypeScript support and utilizes Vite for bundling, offering a modern and optimized setup for game development. By leveraging Bun, developers can expect faster install and build times, making the development process more seamless.

Phaser 3 Tutorial: Custom Level Transitions With Bitmap Masks
We take a look at how we can create really nice custom level transitions by using the built in Phaser 3 BitMap Mask objects.

Full source code of HTML5 game "Drop the Square" built with Phaser, written in TypeScript
Full commented source code of a complete HTML5 game like "Drop the Square" using Phaser framework all written in TypeScript, using the official Phaser webpack template.

Wallpaper-engine-web-phaser-template
Wallpaper Engine HTML Phaser v3.80.1 template.

Francisco: Greetings to everyone for another week.

Originally, we were meant to release Sandbox v3 this week, but Richard and I worked hard on version 3 last week and managed to have it ready early.

Because of this, I have had time to add new templates to our already extensive list of Phaser Project templates.

We have published the Bun template and will soon have a new one with Remix.

In addition to the template, a new version of the Create Phaser Game CLI Tool arrives that brings the two new integrated templates to download.

Remember to use the latest version of the CLI with: npm create @phaserjs/game@latest (if you are using Node).

Thank you for reading, see you in more updates on this exciting journey of Phaser.

Arian: Greetings from Phaser headquarters in Florida. The weather is getting hotter and Phaser Editor is on fire!

We continue working on the particle editor. We have made a lot of progress, especially in implementing a huge number of parameters, and we have already started to implement code generation. As you probably know, Phaser Editor compiles scenes into readable JavaScript or TypeScript code, which you can also modify. And this is essential for particle emitters because even though the editor may not support some features, you can continue editing the emitter in code. For example, you can animate some properties using tweens or you can implement different behaviors through the "on emit" and "on update" callbacks.

Perhaps, by next week, we can have the first version of the particle editor with a fairly complete feature set. Although the world of particle emitters is quite broad, we will have several iterations in this regard. Follow us on the channel #phaser-editor on Discord to stay up to date and see exclusive videos of the new system in action.

Can: Hey there, fellow devlog readers!

Welcome back to another week of Phaser Studio behind-the-scenes!\ In the realm of Phaser Nexus, our glorious fight with Shapes came into shape! Me and Richard worked on Shapes API to generate SVG based basic shapes: Rectangle, Line, Circle, Ellipse, Path and Polygon.

Path and Polygon are the ones where you can create your more complex shapes of your own by providing a series of points or path commands.

Right after, I was wrestling to generate more complex built-in shapes that you can directly implement into your project, such as: Star (who does not like stars to show your game's high rate!), heart, arc, cloud, hexagon, infinity, spiral, star, wavy edge and more. You can customize some of them with a few parameters! During adding shapes, we did some performance tests which looks very promising with thousands of objects! We know it's just beginning but it's great to see how it's shaping out!

Till next week, happy coding, and may your frame rates be high and your bugs be low!

Rich: Greetings, everyone! This week has been a nice mixture of overseeing the many different projects we have running and finally getting time to write a bit of code, which is a rare treat these days!

I've been putting the finishing touches to Phaser Compressor, which we will release this week. It has always been possible to significantly decrease the bundle size of Phaser by making a custom build of it. However, it has never been very easy to actually do this, requiring creating custom entry points, webpack bundles, and lots of trial and error.

Compressor solves this by giving you a nice and simple web front-end. Just tick the options you want in the build and hit a button, and it'll spit out a bundle directly for you to use. Don't need Matter Physics? Un-tick it. Only need the Image Loader Filetype? Quickly exclude the other 32. There are over 300 components to disable, giving you fine-grained control. You can even save the configurations, load previous configs, and modify build settings such as browser targets, global namespace, and export format.

I developed this system using ESBuild WASM. You run it fully in-browser, and it spawns a web worker that generates the builds. This was a fascinating problem to work through. Because in order to bundle something as complex as Phaser, it needed to use a 'virtual' file system, because ESBuild WASM cannot load any of the files locally as they need to reside in memory. This required creating a custom ESBuild plugin to handle the file resolution and 'loading' process - in the end, the plugin ran to over 1,200 lines of code but it works flawlessly and the build sizes are significantly smaller than using even webpack. Which should be a massive benefit to lots of professional Phaser devs.

I'm still not 100% decided on the name though! Phaser Compressor is technically correct, but honestly a little dull :) If you've a better idea, send me a message on Discord or just reply to this email. If we end up using your name, I'll give you a free Phaser developer account subscription as a thank-you.

Ben: 2024-05-24

This week, I've been setting up systems for configuring render nodes. Currently, Phaser supports custom WebGL render pipelines, but they're not as flexible as we'd like. When we replace pipelines with render nodes, we'll have a system with more flexibility.

For example, it should be possible to switch connections between nodes at runtime, allowing you to change performance settings while the game runs.

This exposes a lot of complexity, but we want to keep the experience simple. It should be possible to just say "I want to use this fragment shader", and the system will do it for you. Any extra uniforms and attributes will need to be hooked up, of course, but we're making sure that's as fast and simple as possible too. And if you want to really get into the bowels of the system, you can write a layout description telling Phaser exactly how you're going to construct a vertex buffer. This is one we're using internally:

That might look technical, but consider that it's actually translating to a series of calls like gl.vertexAttribPointer(location.index + column, size, gl.FLOAT, false, layout.stride, offset + bytes times column times size) - and we haven't defined half those terms, or said when to apply them, or specified how to store them. We take care of things like Vertex Array Objects (VAOs) and buffer size calculations and tracking buffer stride (how far into an array a new vertex starts) so that you don't have to!

Phaser Releases

Phaser 3.90.0 Technical Preview 1 released 2nd May 2024.
Phaser Editor 2D 4.0.1 released 26th April 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