Welcome to Phaser World Issue 185

Are you a Phaser dev who likes to hang out on Reddit? Then, you may wish to check out /r/phaser. We've recently gained moderation rights to this subreddit and are now posting to it - so it's no longer the wilderness it used to be. Feel free to join us there.

Game of the Week
Guard the Tower!
A tower defense game filled with 12 varied levels across 7 biomes and 14 unique monsters with 3 increasingly harder difficulties to challenge even the most experienced of tower defense gamers lurking in their strongholds.

Relax Islands
Chill floating islands. Click anywhere... and relax.

Matchday
How many players from the top five leagues do you know?

Get Ten
Get Ten v2.0 is a simple and fun game made with Phaser 3.

Phaser v3.85 Beta 1 Released
A brand new beta version of Phaser 3 is now available to download. Plus, learn more about what's planned beyond this.

Phaser Editor Templates
You can now access over 20 framework and bundler templates, including React, Vue and Bun, directly from within Phaser Editor.

Fungies.io
Craft your game’s perfect website in minutes with zero coding involved. Combine Phaser and Fungies.io for seamless game promotion and distribution.

Top down RPG made with Phaser 3
Zelda-like game made with Phaser 3. Credits to Ninja Adventure on Itch.io for the asset pack.

Block It HTML5 game ported to TypeScript with some new features, powered by Phaser and Arcade physics
Ball bounces randomly each time it touches the upper or lower walls. See also Block It now working with no physics engine, just using continuous collision detection between a moving circle and static lines.

Web Game Dev | Aria's Tale | Phaser 3 | Next.js
Ladderly's YouTube video.

Rich:

Welcome, dear readers, to another meaty Dev Log from the Phaser Studio team. I could say, "We've been busy this week," but honestly, that really wouldn't be different from any other week. I've come to the dawning realization that we are permanently busy - and that is just the way startup life is and has to be. Because we have a finite time in which to create something compelling enough that investors will want to see our journey continue. And that means delivering on lots of different fronts, all at the same time.

This week feels as if I've made small chunks of progress across lots of different tasks rather than a significant stride forward in any one of them. I'm sure we all have weeks like that. My job now is as much about planning and meetings, as it is coding. However, in between planning out the new website design and interviewing coders, I did also have one of those lucid moments that just perhaps, there was a way to try a very different approach to rendering game elements in Phaser Nexus. So I gave it a go, and the results were a genuine shock.

For those new here, Nexus is our in-development game framework that uses the power of pure DOM and CSS for all rendering. There's no canvas, WebGL, or WebGPU in sight. Why? Because while we've all been chasing bouncing bunny sprite benchmarks, the browser has turned into an utter rendering beast. I intend to cover this change in more depth in future Dev Logs. However, the test I created was to try an entirely different way of DOM rendering, and it worked incredibly well. The image below shows a fully dynamic scene with 212,000 game elements, fluidly scrolling in all directions (under key control) at 60fps and averaging 92% CPU idle. This is not your Dad's 'div: position absolute'.

With what we're building here, combined with the staggering tech Ben is building out for Phaser Beam, I've never felt quite so confident about the future of Phaser. Yes, time is moving by at an alarming rate. But so is our progress. All we have to do now is focus to ensure they meet together and a new chapter will be born.

Francisco: Greetings everyone, another week.

Richard, Arian, and I have been working on converting and going live with all Phaser Studio templates in Phaser Editor.

As we discussed last week, each template is a particular case, but with a game base that has four possibilities, two based on JavaScript and two based on TypeScript. To achieve the conversion of the templates we already have published, I prepared a script that copies the four possibilities depending on whether it is a JavaScript or TypeScript template or a template with some framework. Then the script replaces all the readme.md of all the templates and automatically publishes the updated templates to GitHub.

Thanks to this automation, we can now generate templates for the CLI and templates for Phaser Editor, and also have the Phaser versions updated in an easier way.

Zeke: Hello from the Builders and Bug Busters Squad.

We squash code bugs with the precision of ninjas and fury of squirrels on espresso while magically constructing new features like digital wizards! From zapping gremlins to crafting code magic, we transform chaos into pure, unadulterated awesomeness.

The Bug Chronicles

Bugs Bashed: 6

Input Buttons Bug
We encountered a tricky bug that was causing mayhem by interpreting multiple button presses as just one. This bug was swiftly elimanated, ensuring the system now counts every press with perfect precision.

Physics Bug
This rascal was making Arcade Physics circle bodies pushable, even when set to be unpushable! We tweaked 5 lines of code, vanquishing the bug and restoring the rightful order to our circle bodies.

Bitmap Text Bugs
We had two bitmap text bugs causing trouble. The first was miscalculating spaces between characters in WebGL, and the second created empty lines when the first word’s width exceeded the preset max width. Both issues were fixed, making text beautifully readable once more.

Line Intersections Bug
This sneaky bug was throwing NaN errors instead of returning a null response for line intersections. One swift line of code later, the bug's nonsense was nullified, bringing clarity and peace to the realm of intersections.

Particles Death Zone Bug
After a recent update, we found that Death Zone coordinates were using global positions instead of local ones, causing quite the kerfuffle. With a single line of code, order is restored to the Death Zone.

The Feature Fiesta

New Toys Plugged In: 5

Web API

1. We’ve added a new public method called setContextHandlers, allowing you to use custom contextLost and contextRestored methods.
2. We updated device orientation change events to include landscape-secondary and portrait-secondary, ensuring you stay informed no matter how you twist and turn.
3. Added screen.orientation change events, with the classic orientationchange as a fallback for older devices, making sure all screens are covered.

Texture Cropping and Repositioning
This brand-new native feature allows textures to be cropped and repositioned with ease, putting the power of precision into your hands.

Wipe FX Example
We've added a Phaser Labs code example to show how to use Wipe FX to wipe and reveal sprites using separate methods. This magical touch makes sprite transitions smooth and mesmerizing.

And there you have it! Another week, another victory for the Builders and Bug Busters Squad, turning bugs into stories and features into fun. Stay tuned for our next digital escapade, where coding chaos meets creative conquest!

Arian: Hello friends!

In this week of intense work in Phaser Studio, we did not write a single line in the Phaser Editor code. However, we are making progress on other no less important issues: developing installers for Windows, and integrating a huge number of project templates.

Developing an installer may seem like a simple task, but it has taken us quite some time to evaluate the different options. I think I had told you that we first tried it with Inno Setup, but our CTO is not one to settle for the first options, so we began to evaluate other variants to make our installer, and that is when MSIX enters the scene. The MSIX format is an evolution of MSI, but much more elaborate, and among other features, it allows the editor to be updated automatically. Fortunately, Advanced Installer is a complete and intuitive tool that allows you to create MSIX installers very easily. But there is a second issue, the certification of our software. For the next version, we want Phaser Editor to be certified as a trusted app for both Windows and macOS. This process takes a while, but it is already underway.

As I mentioned at the beginning, we updated the list of project templates available for Phaser Editor v4. These templates are hosted on our servers, so they are available for all versions of Phaser Editor Desktop v4. You can read more about it in Francisco's devlog, who did the immense work in creating an editor version of all the templates available in Phaser. For the next version we will improve some aspects of the interface to create projects, but the most important thing now is that you have a wide range of templates based on different web technologies. I hope this makes using the editor easier for many of you.

If you have any problems with the templates, feel free to contact us on our channel #phaser-editor.

See you!

Can: Hey there, Phaser Wizards!

This week in the Phaser lab, we've been brewing up some cool new features. I’ve added a bunch of mobile gestures to the Input system, like Pinch and Rotate. The tests went great, and everything works like a charm. We're just tweaking a few custom events to make sure they play nice. Once that's done, these new gestures will be ready to roll.\ I also have to mention that after re-structuring Input system, it looks more modular now, I’m happy with the current results!

For a misc addition, I also implemented SetCursor method for custom cursors, as we have it in Phaser itself too!

Keep an eye out for more updates, and happy hacking!

Robert: ¡Vaya calor!

The examples have been integrated into the Phaser templates which is looking nice and spiffy! The final touches are going into effect, bug fixes and the sorts, which is surprisingly all going smoothly. After a quick effort figuring out how the existing templates work, some logic had to be switched around but mostly migrating CSS styles so everything looks like it fits. I also wanted to do a final round of testing with tons of users, tons of examples and well it didn’t break, I call that success. The final aspects of a project always feel like they take the longest. And well here is a screenshot of folder navigation:

Ben: 2024-06-21

It was supposed to be an easy mission. In and out, no fuss. No... complications.

At first, that was how it went. I enhanced the Lighting component so we could use it on more objects, then I used it on more objects. I made the quad rendering nodes more flexible - they could take pregenerated data or additional render nodes, supporting both standard objects which render single independent quads, and more complex objects which involve several quads with related geometry. I got Blitter and Particle working.

Then I turned to Graphics, and I thought it was more of the same. But things kept going sideways. Sometimes it had triangles instead of quads. You can make a triangle out of a quad, but you probably shouldn't. I did and it was bad. Sometimes it drew connections between different shapes. That turned out to be because of zero-length lines which we skipped and accidentally a new line. And sometimes we needed to turn the roundPixels flag off.

That was what finally tipped me off that I'd made a mistake. I'd been treating Graphics as an extension of the Standard Batch Render Quad. That's how Phaser handled it before. But it wasn't. It had never been. It was a different way of drawing. It routinely draws lines thin enough that roundPixels makes them disappear, hence needing to turn the flag off. It turns out that this was affecting some other game objects, making sprites blurry where they shouldn't be. There was no way to do this correctly with a shared batch.

So I bit the bullet, and turned Graphics into its own batch handler, with its own shader. Instead of treating triangles as tinted quads with a white texture, like we did before, we now treat them as triangles with vertex colors. This is much faster than my previous approach, and uses less than half of the buffer space. It's also got plenty of room for improvement, as we can enhance our use of element index rendering.

It got complicated, but we got it right in the end.

Phaser Releases

Phaser 3.85.0 Beta 1 released 21st June 2024.
Phaser Editor 4.0.2 released 30th May 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