Welcome to Phaser World Issue 187

For our US friends, I hope you had a happy July 4th. Here in the studio, things are really hotting up as we prepare for a massive new release of Phaser Editor along with Phaser v3.85. Check out more details in the Dev Logs below!

Game of the Week
Bubble Tumble
A high-quality, challenging bubble shooter with top-notch presentation and gameplay.

Lisotaire
A fun way to pass time with 3 solitaire games. Solitaire, Freecell, and Spider.

Castlevania NES Remake
This a fangame/remake of the first Castlevania on NES made for learning purposes, where you controls Richter instead of Simon.

Snake Fun
Classic snake, but more fun.

Monster truck with suspension demo
Monster truck with suspension demo using matter physics. Use Z/X to drive, B for beep, 1, 2, 3 to select vehicle.

Texture Packer Optimized Phaser 3 Exporter
We're using pure Grantlee/Django template syntax which is implemented in C++, resulting in super fast - nearly instant speed and almost no memory overhead.

Monster Tamer - RPG Tutorial with Phaser 3 - Ep. 111 - Multiple Monsters Part 2
We start working on enhancing the classes tied to our battle logic in order to support switching between multiple monsters.

Full Screen Size and Responsive Game in Phaser 3
Whenever you make a game for website, the major and big issue comes of responsiveness for all devices.

Add a Bootstrap navbar to your HTML5 Phaser games and let it manage the UI
It’s way simpler than building it in Phaser, because I do not have to worry about bitmap fonts, events, listeners and other boring stuff, allowing me to focus on the thing I love the most: developing games.

Rich: There are a lot of things cooking in the Phaser Studio kitchen right now, and several of them are coming to a boil. We're very close to releasing the latest version of Phaser Editor, Phaser v3.85, and a new Technical Preview of Phaser Beam, too.

We've also got a brand new tutorial and code combo, exclusively for subscribers, which covers how to make Twitch Extensions using Phaser. The tutorial goes through the process in-depth and includes a Phaser template and sample interaction on which to base your own extensions. This will be available this week for all subscribers.

I've also been working hard on Zeus, our new physics engine, with hundreds of code commits, including new stress tests and feature improvements. Zeus is a full-body physics system written in TypeScript. It is entirely modular, meaning if you don't need features, such as one of the many Constraint types available, then they don't get included in the bundle. This allows the core engine to fit into 24KB min+gz. Right now there's still a list of tasks to complete, not least of which includes documentation. But it's progressing nicely and I'd still love to get it into subscribers hands by the end of this month, even if only in a beta form.

Francisco: Saludos.

This week has been another week of experiments with Tauri and preparation of the templates for a new version of Phaser Editor and an update of our command-line template installer.

Template installer: Starting from version 1.2.3, you will notice that if you install a template with any (famous) package manager, the name of the package manager appears dynamically. It's a small change but one that many wanted.

Regarding Tauri, I have been researching and looking for information on how to interact with operating system elements and the games that can be made with Phaser and the ease we would have when using Tauri.

Zeke: Greetings, Code Warriors and Pixel Magicians!

Welcome to the latest chronicle from the Builders and Bug Busters Squad! Buckle up as we dive into this week's escapades, filled with epic fixes and magical enhancements. Ready? Let's go!

Weekly Report (July 5, 2024)

*[ The Bug Chronicles ]

Bugs banished: 1

We received a report about a sneaky little bug in the arcade physics engine that caused Group vs Group collisions to collapse faster than a house of cards in a hurricane when changing the default group collisionMask and collisionCategory. But fear not, brave coder! We’ve given this bug the boot by setting the default collisionMask value to a whopping 2147483647, ensuring it plays nice with any collisionCategory. Big shoutout to @codeimpossible for the heroic assist!

*[ The Feature Forge ]

Boosted bits: 4

Farewell, MatterJS Attractors Plugin!
We’ve kicked the old MatterJS Attractors plugin to the curb and welcomed a shiny new native feature. Now, when you want a Matter game object to attract others, just toss in an attractors array with a method container of two properties: bodyA and bodyB. bodyA is the charming attractor, while bodyB are the mesmerized bodies gravitating towards bodyA. It’s a dance party with code!

Bye-bye, MatterJS Collision Events Plugin!
Our goblin techies ripped this plugin out and stuffed it back in as an integrated native feature. It ain't pretty, but it works so well, you’ll hardly notice it’s there.

MatterJS World Game Update Loop: The Epic Overhaul!
We've given the MatterJS World game update loop a legendary transformation. Behold the improvements:

1. Enhanced Time Management\ We’ve mastered time itself! Handling frame delta time like pros, even in bizarre edge cases like 0, NaN, or freakishly large frame deltas.

2. Frame Delta Smoothing\ We’ve added a smoothing mechanism to keep those frame deltas in check, reducing outliers like a bouncer at an exclusive club.

3. Frame Delta Snapping\ Snap, crackle, pop! We’ve introduced an option to snap the frame delta to the nearest 1 Hz, ensuring your updates are steady as a rock.

4. Time Buffer Management\ We’ve improved time buffer management, clamping it to a maximum size so it doesn’t go all wild and crazy.

5. Performance Budgets\ We’re budget-conscious now! Added checks to defer updates if the processing time looks like it’s going to blow the maximum frame time budget. No overspending here, folks.

6. Update Count Tracking\ Now tracking the number of updates in a single frame and keeping an eye on deferred updates. It’s like having a personal accountant for your updates.

Dynamic Textures Get a Makeover!
Want to erase a part of an existing texture? Now you can! Specify a position, width, and height, and voila! The selected portion vanishes like magic. Big thanks to @SelfDevTV for suggesting this enchanting addition.

Enhanced Image Handling!
We’ve spruced up the default image handling, missing image handling, and white image support. Now they allow for null values, skipping the loading of these images when Phaser boots up.

That’s all for this week’s report. Stay tuned for more thrilling adventures to come. Until next time, happy game-making!

Arian: Hello friends. This week we have made progress on many fronts finalizing the details to publish a new version of the editor. We already have the installers ready for Windows and macOS, fully certified for these platforms. We have worked hard on the first user experience with the editor. From installing it, opening it, creating a project, and running it. We have a large number of project templates available for you. Since most of these templates use third-party tools and frameworks, they must be installed and run using Node/NPM. The good news is that we have also worked on this aspect, and now Phaser Editor will include an internal Node/NPM distribution to install and run the projects. Many of you have had some confusion because you are not clear about what to do to execute a project. Now we have automated this entire process.

To complete this version, we only have to write the documentation for the new features and finalize some details. Stay tuned!

Can: Hello hello,

This week, my primary focus has been on R\&D related to integrating SVG path animations with the Web Animations API. By leveraging the Web Animations API, we're aiming to achieve faster and smoother animations for our game objects, enhancing the overall performance and user experience. This integration not only promises more efficient animations but also provides greater control and flexibility in animating SVG paths, allowing us to create more dynamic and visually appealing game elements.

In addition to the Web Animations API, I've been exploring the use of CSS animations to offer optional animation methods tailored to our specific needs. CSS animations provide a lightweight and easy-to-implement alternative for certain game objects, allowing us to optimize performance where necessary. This dual approach ensures that we can choose the best animation technique based on the requirements of each game object, striking a balance between performance and visual fidelity. I'm also making sure that all these working properly on every major browser!

Stay tuned for more, because examples are on the way! Keep the pixels high quality everyone.

Ben: 2024-07-05

I'm rewriting the WebGL renderer, so it's vital that I do a lot of comparisons. I need to know that everything from before the change will look the same as it does after the change.

Well, this week I was comparing some BitmapText scenes, when I noticed something unusual. All the characters in the text had changed slightly. What could be causing this?

Some investigation revealed that it was the lighting shader. It was our old friend roundPixels again, causing unexpected results. In this case, some leftover code from years ago had halved the resolution passed to the shader, making the rounding effect much stronger than intended. But while I was digging, I found a second issue.

Lights in Phaser are 2D: their position is in XY. But true 2D lighting wouldn't allow light to enter sprites. So we add an offset into the third dimension, illuminating relief in normal maps. The issue is, that offset is constant. But it's constant in WebGL clip space, which is always in the range -1 to 1 on the XYZ axes, no matter the resolution of your game. This means that, if the resolution changed, the effective 3D offset also changed. The light would appear to slightly change its height above the surface. And we don't want that!

We could do something complicated to fix this. But why bother, when we could do something cool and empowering instead?

So I just added an explicit Z axis to the Light. This allows you to move a Light in and out of the screen, changing the amount of relief it illuminates. It's a tiny change, but it opens up a lot of cool artistic opportunities. It eliminates all the issues I found, and gives you lighting superpowers. I attach two images to show what I mean.

In fixed-z-light.png, there is just one light, at the default height above the surface. The lighting is harsh and leaves large areas unlit.

In free-z-light.png, I added a few lights with radius 5000 pixels to approximate directional light, and positioned them at greater heights to get fuller lighting and really bring out the form of the sprite. Sure, I'm cheating by adding extra lights - but each light looks much nicer, now that I can control the relief illumination. At least, I think it looks good!

And that's why I do a lot of comparisons. Because sometimes I discover a really great opportunity.

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