Welcome to Phaser World Issue 180.

Hello new Phaser friends!

My name is Brian, and I am thrilled to be joining Phaser Studio Inc. as its new interim CEO. Over the past few months, I've had the pleasure of getting to know Rich and the incredible team behind Phaser. Their passion for this project and the vibrant community that supports it has been truly inspiring. I am excited to join this journey and help shape the future of Phaser.

My immediate focus will be on gathering user feedback and helping to define our roadmap. Your experiences and insights are invaluable as we continue to improve and evolve Phaser. I’d love to hear from you directly about how you use Phaser, your experiences so far, and any improvements you'd like to see. Please feel free to book some time with me here for a chat.

A bit about me: I previously co-founded Blue Shell Games, a social/mobile gaming company, and Hideout, where we were building delivery-first restaurants. I have always been passionate about crafting great user experiences, whether in software, physical products, or real-world experiences. Some of my favorite gaming memories include playing River City Ransom on NES, Street Fighter 2 on SNES, GoldenEye on N64, Age of Empires and DOTA on desktop, and FTL on mobile. These experiences have shaped my love for gaming and drive my commitment to fostering a fantastic development environment for all Phaser users.

I’m eager to get to know the community better and to hear your thoughts on how we can make Phaser even better. The future holds exciting possibilities, and I look forward to building it together with you.

All 4 games this week were the GameDev.js Jam 2024 Phaser Category winners. They are just fantastic, and we urge you to try them out! Next issue, we'll feature the remaining 6 games from our Top 10.

Game of the Week
Puckit!
Everything about this game is slick. The graphics are perfect, the audio is great - especially the effects, the controls feel lovely too. An amazing example of what's possible for a game jam!

Mech Motion
The little robot is super-cute (reminds me of Wall-e) and the gameplay is simple while being a real challenge. Presentation is slick as can be, too.

Power-Up Adventure
So good and so frustrating in equal measure! Such a brilliant concept, too - the way the power-ups speed towards the player adds a whole other dimension to factor in when timing dropping them. Visually it was brilliant and I loved the music and effects. Solid, polished, mostly on-theme and unique.

IONCLAD
Really nice game! I loved the plasma effects, the waves of aliens, the smart bombs and the super-loud thumping music.

Phaser Sandbox v3 Released
The latest version of the Phaser Sandbox is live, with themes, favorites and more: offering an enhanced experience for testing, editing, and forking Phaser source code directly in the browser.

I have replaced Arcade Physics with Box2D-WASM in the examples of the “Making your first Phaser 3 game” tutorial
Check out the GitHub repository with Rollup guide.

Building a Mobile Game with Phaser and Ionic Vue Series' Articles
Thanks to Phaser, along with Ionic, Capacitor, and Vue, I was able to get a mobile game up and running on an iOS device working only a few hours here and there over two weeks.

Richard Davey ~ Atari Crypt Interview
In this interview, Richard talks to the Atari Crypt site about his origins with the 16-bit Atari ST, including screenshots of some of the games he worked on and how the experience would go on to shape his life going forward.

“Bouncy Light” HTML5 prototype built using Phaser to handle game logic and Three to render 3D graphics, written in TypeScript
This is the result of an experiment I built while I was about to port the first step of Godot “Stairs” prototype in Phaser using Three.js to render 3D objects moving according to Phaser sprites.

Francisco: ¡Hola a todos!

Update week!

This week I have been working on polishing the details of Sandbox V3, and I have also updated the templates.

In Sandbox, you will now see that you can modify themes, titles, have three starter templates, load examples from examples labs, and many more things that you can see in the respective post on Phaser.

As a curiosity, I internally give each version an (unofficial) food name; this version is nacatamal. In case you don't know, it's a traditional dish from Nicaragua :D.

More exciting updates are coming soon, so stay tuned.

<hr>

Arian: Greetings friends. Are you about twenty years old? Congratulations, you are a dreamy and daring programmer. At forty... I don't know, at least I have to think about it many times, and although pleasant, programming is quite hard work for me. However, I have some tricks.

I'm now working on a particle editor for Phaser Editor. It is a long and complex task, and I am going to show you how I am undertaking it.

First, I talk about it with the team! I am no longer a lone wolf, and teamwork gives me confidence and helps me define what we have to deliver in a first version.

Then, I study what the particle emitter in Phaser can do. This means spending hours and hours reviewing documentation and playing with Phaser examples. Fortunately, Phaser Labs allows you to modify an example and run the modifications. Additionally, we now have Phaser Sandbox, which allows you to save and share your changes.

Finally, let's do it! Where to start? For coding a new extension for a new object type: ParticleEmitter.

The editor uses a model of plugins and extensions to incorporate new features. A fundamental extension is the SceneGameObjectExtension. This has several functions, the most basic is that a new element appears in the Blocks view, which you can drag into the scene and create a new game object. That is, at this stage, you can drop a Particle Emitter block into your scene, select a texture, and voila, the first particles appear! And since it's healthy to have fun, I implemented it with some default parameters, like speed = 200.

To give it a little color, the second thing I did was implement a section in the Inspector view to add frames to the emitter. And this is one of my tricks: start with something less complex and achieve some visible result, even if it was minimal. Seeing makes faith.

There is something completely new in the particle editor. Particles are a kind of animation that we want to show in real time, in the same place in the scene. So I had to implement a button to start and pause the scene update loop. Completing this step was very satisfactory as it will fit very well when we implement other types of animations in the scenes, such as tweens.

Up to this point, the path was more or less trodden. Now came the hardest part: how to do everything else. So I tried a second trick: warn everyone at home that I'll be pensive and possibly in a bad mood for a day or two. Well, something distinctive about the particle emitter is that it has a lot of parameters that even use a particular pattern.

For example, you can give the particle speed a fixed value, such as 200. Or you can set the speed to a value that will go from 50 to 300 over the life of the particle. That is, here the speed parameter is specified with a structure that has the fields start, end, and other optional fields such as random and ease. Or you can assign it a random value within an array of possible values. And more, there are many more ways to configure the same parameter.

Finally, after looking at some third-party particle editors, and with the help of the Phaser team, we came to a solution regarding the UI: each emitter parameter will have a menu where we select the type, and then the field of the selected type will be displayed . We also decided to group the parameters into sections, such as Particle Emitter Transform, Particle Emitter Physics, Particle Emitter Timing, and others.

Along with the UI there is always the data model of the objects. The normal thing in the scene editor is that each parameter of an object has a primitive value. This makes serialization and issues like prefabs easier for us. Since this is not in the case of the emitter, the parameters would have to be decomposed into fields with primitive values. Say, if you assign the speed parameter the value {start: 0, end:200, random:true}, the editor would internally represent it using four fields: speed_type="StartEnd", speed_start=0 , speed_end=200, and speed_random=true.

Writing each of these fields "by hand" is a rather tedious and error-prone undertaking, so I had to dedicate a lot of time and mental effort to find a slightly more instrumentalized solution but in accordance with the patterns already established in the editor.

Once the UI and the data model of a good part of the parameters have been resolved, I proceed to the next trick: inform everyone at home that I am happy and that the most difficult part of the work had already passed.

From now on, everything will be faster. Although... experience says that surprises and complications can always appear, and there are other tasks such as implementing the rest of the parameters (still many) and code generation. In addition, we want to make it easier for you to create particles with common effects such as explosions, fire, smoke, confetti, rain, and others, in a very simple way. What else would you like us to incorporate in the particle editor? Let us know in the Phaser Discord, in the #phaser-editor channel.

Can: Well, well, well…

This week of work is something I’m really excited to mention for. Our brand new project, Nexus - A CSS renderer for games/playables. I’m working on new examples to test the capabilities of it, what’s missing, and what else to improve. I made a simple matching game, which all the assets are fully SVG. You can treat them as game objects and do the transformations you need. Some of them are - positioning, scaling, rotating, tweeting, blendMode, etc. And more of them coming soon! We are working on SVG shapes generation on the Nexus side, hopefully more content from it by the next week!

Until then, happy coding all!

Robert: ¡Feliz inicio de semana!

I continue to work on the Examples. Mostly organizing and assessing what is needed to get this thing out the door. The examples will be portfolio of sorts with plenty of features to expand upon like trash can support and file history. Still thinking out some of the specifics on each user area but labs 2.0 is on its way with multi file project management. Everyone else showed screenshots so…

Despedida.

Rich: Hey everyone!

As is the case with most of my weeks now, the previous one was a real mixture of tasks and projects. I spent time working with Can on planning out the next stages for developing Phaser Nexus. I spent time working with Francisco on releasing the awesome new Phaser Sandbox v3 (I'm the one who coded all the back-end API for it!) and of course plenty of meetings, planning and decision making for the coming weeks.

However, I also started work on Phaser v3.85.0. We've decided that Ben requires more time to really get the new renderer honed before we can consider merging it into the main Phaser branch. So, we will do an interim release to keep things moving on the framework front. There are no plans for anything groundbreaking; it will nearly all be bug fixes and quality-of-life improvements, but those are just as important as features. So, expect to start seeing more PRs merged and issues closed starting this week.

I also spent some time working on Phaser Compressor (this is a working project title). We all know that crafting custom builds of Phaser is more complicated than it should be. Compressor provides a nice, clean web interface for the whole process. Tick the elements you want to be included in the build, hit a button, and then a compact minimal bundle falls out the other end, ready for immediate use. It was really quite fun to work on and I now have an intricate understanding of ESBuild plugins deeper than I honestly wanted. There's more testing to do, and then we'll release this for Phaser subscribers first. Yes, ultimately, moving to ESM will replace the need for Compressor, but there are a lot of projects using 3.80 that cannot easily migrate away from it, and this tool exists for them.

Ben: 2024-05-17

Last week, I talked about testing on real hardware. This is really important, and it's driven me to make some necessary changes.

Long story short: On some mobile devices, using several textures, instanced rendering is unviable. So we're switching to indexed rendering as the next best thing.

Short story long: Rendering takes two tasks - uploading the data to render, and drawing the data. Both are more efficient when you do more within each task: upload a bigger buffer, and draw more data from that buffer. But uploading is more flexible and less efficient, so we prefer to upload one large buffer and then use several draw calls to render different parts of it. This allows us to use different textures for every draw call, without having to upload a new buffer.

However, this is not practical with instanced rendering. The ANGLE_instanced_arrays extension provides drawing methods for instancing, but they do not support offsets into the instanced data. Every draw call must start from the beginning of the buffer. So we would need to upload a new buffer.

There is a workaround, but it is also not practical. Instead of uploading new buffers, we can update the vertex attribute bindings for the old one, altering the offsets that WebGL uses to extract the data. However, this entails several extra WebGL calls per instance, and Phaser supports huge numbers of instances. Every quad on screen is a new instance. This quickly inflates the number of WebGL calls, ultimately spending as much as 85% of the frame on updating vertex attributes. It's hideously impractical.

There is also a substitute, which we can't use either! The WEBGL_multi_draw extension solves the offset issue. However, this extension is not baseline available to all browsers and devices, and Phaser must work for everybody.

So we're going back to indexed rendering, which does the job. We hide the problems in WebGL, so you don't have to worry!

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