Welcome to Phaser World Issue 186

As we hit the summer month of July, things are starting to heat up around here. We've got a massive new version of Phaser Editor on the horizon, Phaser v3.85 is gearing up for launch, a new Technical Preview of Phaser Beam is imminent, we've got a brand new website design being finished, new examples about to land, new docs about to land and our physics-engine Zeus is proving to be a formidable addition to the ecosystem.

Where-as things tend to get a little slower and more sleepy during summer, we intend to be quite the opposite!

Game of the Week
Flames & Fortune
Play as a knight wielding powerful fire spells to conquer dungeons. Strategically clear all cards to escape each level, collecting gold and using your deck to overcome challenges and adversaries.

Blêktre 2081
The Real Life Simulator - Monde Persistant.

Loop Frogs
Guide two froggy friends through a pixelated, time-warping adventure. This 2D platformer will require you to master the time loop and leap your way across 30+ levels of hazards and puzzles.

Mr Football
Footy club's journey to glory.

Shoot'n Trade
Use the limited space of your ship to embark cannons, shields or merchandises. Resell your merchandise farther to make profit and buy more space.

TowerHanoi
Tower of Hanoi in JavaScript using Phaser.

Fixing Up My Phaser 2 Tutorial Game | Egee's DevBlog
I spent some time fixing up my old Phaser tutorial and I thought it would make for fun content if I reviewed my pull-request with you!

Game Dev | Claude 3.5 Sonnet | Aria's Tale | Phaser Web Game
Ladderly's YouTube video.

Integrating React and Phaser 3 Tutorial
While building a fun little punnett square in React, I wanted to expand to include some visualizations in a game engine. These are my steps to get React up with Phaser 3.

Watermelon Game using Phaser and Box2D powered by Planck.js updated with new square and pentagon shapes – Get it on Gumroad
Here we go with a big update to HTML5 Watermelon Game prototype powered by Phaser and Box2D. On Gumroad page now you can find a big update with square and pentagon shapes.

Rich: Hello!

This week, I've been up to my eyeballs in software certificate applications. The hoops you must jump through to buy an HSM EV Certificate these days are incredible. Masses of paperwork, phone call interviews, and then hours of complex configuration (Azure Key Vault, I'm looking at you). Thankfully, it's now all done, and we have both our Windows and macOS keys, so we can finally code sign Phaser Editor. This will allow us to provide it wrapped in a proper installer, which, honestly, I can't wait to see happen.

Code-wise, I've been primarily focusing on our new physics system, Zeus. It is now feature-complete, and I ported over our build system (nicknamed Overwatch) from Nexus, and it's now managing everything within Zeus as well. The next task is to start re-creating some of the Matter and Arcade Physics tests within Zeus. This will help identify any holes in the API and give us solid benchmark tests. If this truly is going to be the default physics system within Phaser, then it has to do everything the old ones used to, but better.

We're still on target to get the early adopter version of Zeus into subscriber's hands this month so you can start experimenting with it.

Francisco: Greetings everyone,

This week, at the beginning of the week, we put some finishing touches on the templates manager that handles the Phaser Editor templates, and now it's ready to update and generate new templates. But that's not the coolest thing we've done this week.

I'm researching what is possibly one of the most fun templates I've had the opportunity to try. Tauri is a toolkit created with Rust that allows you to create stand-alone desktop apps from web games. It uses Rust as a backend (more backend languages will be incorporated later), so we think making a template with it would be interesting.

I did some tests and a small build with a game we have in Phaser Examples Labs and wrote a few commands in Rust to make the window grow when we fail to pick the same cards, the result is quite entertaining to see.

We will continue researching more about Tauri and there will be more news related to it soon.

Stay tuned and see you next time.

Zeke: The Builders and Bug Busters Squad presents:

Weekly Report (June 28, 2024)

*[ The Bug Chronicles ]

Persistent Pests: 1

Oh, the horror! The dreaded iOS 17.5.1 update has unleashed a bug so sneaky, it has silenced our sounds and music! After an expedition into the depths of digital chaos, we found this rogue bug hiding out in the very heart of iOS itself, causing mayhem in other frameworks and software relying on Web Audio. Unfortunately, we can't storm Apple's fortress ourselves, so we're standing by, fingers crossed, for their engineering team to storm in and reduce this bug to ashes. Hold onto your hats, folks!

Deferred Defects: 1

In the land of Game Objects, our dear friends with FX applied are having a bit of an identity crisis and showing up at odd sizes when creating dynamic textures. Fixing this bug is like taming a dragon with a toothpick, so for now, we're letting it nap while we cook up a new renderer to give it the boot.

*[ The Feature Forge ]

Uplifting Upgrades: 4

Particle Wizardry
Hold onto your wizard hats! Particle emitters now have the magical ability to be updated in real-time with the updateConfig method. Abracadabra, particle control at your fingertips!

Friction Fun
The Arcade physics gang just got a makeover! Now, immovable game objects that are Tweened have friction, making riding moving platforms smoother than butter. A big shout-out to @samme for this much-requested feature. Glide on, brave platform riders!

MatterJS Mayhem
The MatterJS crew dropped their 0.20 update, and we've seamlessly woven it into Phaser's fabric. It's like adding a turbocharger to your tricycle – zoom, zoom!

Wrap it Up!
The old MatterJS Wrap plugin has packed its bags and moved in permanently as a native feature. Just toss in a wrapBounds object into every new Matter game object and watch in awe as it teleports to the opposite side of the boundary like a seasoned magician. Presto!

In the ever-expanding universe of game development, our squad continues to defy the cosmic odds, turning bugs into stardust and features into supernovas

Arian: Hello friends!

We have had a little bit of everything this past week, regarding the development of Phaser Editor. We have fixed some. We even did a release (v4.0.3) only to publish a bug fix. We've also added new features, such as a better workflow for creating a new project. In the next version, you can choose between the built-in templates and those available on our servers from the first screen. You can also filter the templates using a text search. Yes, because now we have a lot of project templates, thanks to Francisco's work.

But this does not end here. Some users, when they launch the editor for the first time, find that it cannot run the game. What happens is that many of the project templates depend on other tools like TypeScript, Webpack, or ViteJS. This means that in order to run the game, you must first install all these dependencies and start a local HTTP development server. This is common in the world of web development, but many of you come from other worlds, such as Unity or Godot. So, we are working on automating this process and giving better tools to the user who comes to the editor but is not yet familiar with web development.

And the good news continues. We already have the Microsoft and Apple certificates in our hands, to code-sign our software, so we will soon be able to finish the Phaser Editor installers. Having our software certified is a big step, as operating systems increasingly impose restrictions on non-certified software.

See you!

Can: This week started with a focused effort on refactoring our input system, achieving a more modular and maintainable structure that we're now quite satisfied with. Alongside this, we developed new examples to demonstrate its capabilities.

The work continued with the creation of a parallax background example, showcasing how simple it is to implement with multiple background images.

To round off the week, I delved into research and development on SVG path animations, exploring new possibilities and techniques for enhancing our SVG Path animation system. I'm pretty excited about it, SVGs are usually used for icons and logos, and some CSS animations - but the capability of it is much more that! Can't wait to show how far we can get! More details coming up by the next week.

Ben: 2024-06-27

Kia ora! I'm writing this entry well ahead of time, as it's Matariki tomorrow: the day when the stars known as the Pleiades rise for the first time after the June solstice here in the Southern Hemisphere. That means I get a long weekend, in which I try to control my urge to keep coding.

This week, I've done plenty of that. As noted last week, I was working on the Graphics renderer. This week, I put some finishing touches on it. It all has to do with rendering fewer vertices, and doing it more efficiently. These are at odds! We can either choose to render geometry triangle by triangle, or do some extra work to figure out which triangles share vertices, and write out an index buffer to give the most optimal pattern. We're doing the latter, because although it takes longer to process each vertex, we process fewer vertices on average, so it balances out - and the GPU does a lot less work, so it's a win.

While we process those vertices, we can make further optimizations. Graphics has lots of curved paths available: Arcs, Ellipses, Rounded Rectangles etc. Sometimes these curves are made out of so many vertices that there are several inside a single pixel. This is too much detail: you can only ever see one color per pixel! So we've added a configurable option to skip vertices within a certain distance of their neighbors. The default, 1 pixel, should be invisible to the eye, but in many cases it speeds up rendering by a factor of 2 or 3. Larger curves don't gain these benefits, unless you set a larger detail threshold like 2 or 4 pixels.

Finally, I looked at Shape, the cousin of Graphics. Phaser has lots of Shape types. For the most part, they plugged right into the Graphics render system. Note that they don't gain benefit from detail threshold optimization. Shapes pre-calculate their vertices, a different way to render fast.

The exception was the Grid Shape GameObject, which proved complicated. See, Grid lets you do a lot of cool stuff, like set an outline around grid cells. But... shouldn't the outline be called a "stroke", like other Shapes? Why does it obey stroke width rules in the Canvas renderer, but not in WebGL, and in neither case does it use stroke color settings? Why is there only ever a 1 pixel gap between cells? After discussing the issue, I rewrote the Grid itself, including the Canvas renderer - a region I don't normally touch. Now it still does all the same stuff, but in a more standard way, and with more options. You can change the padding around cells, set whether to draw lines on the outer edges of the Grid, etc. This is a big advantage of going through every game object; sometimes we find ways to improve what already exists.

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