Welcome to Phaser World Issue 192

There's a lot of great content this issue, including new tutorials, a new release of Phaser Editor, team Dev Logs and some great new games! So, let's dive in...

Game of the Week
Loop Frogs
Guide two froggy friends through a pixelated, time-warping adventure now available on Steam.

Topsoil
Harvest plants and master your garden in this puzzle game, no green thumb required.

Arcade Racer Port
A port of the C++ arcade racer core to Phaser, for classic 2D driving action.

Blossom
You need to connect similar flower buds until 3 or more are connected. Then, the selected flowers will blossom, and your score will increase.

Newsletter Mini Survey:

Have you ever paid for a game dev course? (for any framework, not specifically Phaser)

Yes

No

Phaser Editor v4.2.0 Released
The latest version of our Editor launches with Video Game Object Support, Proxy Configuration, Audio previews and Enhanced UI.

How to create Twitch Extensions with Phaser
Learn how to create interactive Twitch overlays with Phaser using our step-by-step guide.

Part two of Phaser Editor tutorial released
Continuing the beginner-level tutorial by adding more GameObjects and JavaScript in Phaser Editor.

Phaser 3 Tutorial Series - Space Shooter Part 1 - Project Overview
In this video, we review the final version of the game that we will be building with Phaser 3.

Rich: August is always a generally slower month. The heat just makes everything feel a little sluggish. Plus, several team members (including myself) are taking short, well-earned breaks to recharge their batteries, ready for the onslaught of releases that September is going to bring.

That doesn't mean we've been idle - far from it. This week alone, you've got two exclusive new tutorials, one all about creating Twitch Extensions in Phaser and the second part of Mart's Phaser Editor tutorial series. We've also got the big new 4.2 release of Phaser Editor ready to download.

I've been working on some core internal updates to Phaser for v3.85 while Zeke has been working on merging in the new documentation and examples. This is no small task. We've literally thousands and thousands of new docs content to merge, and it's the kind of thing that sadly needs to be done manually. The end result will be more than worth it but that doesn't stop it being a genuine chore.

This is also the ninth month that Phaser Studio has existed. Time really is flying! When I took the funding from OCV back in December, I always knew it was meant to last us around 18 months. And in that time, we would only get a few shots at showing our hand and playing our cards right. Everything the team has been working on and continues to work on, including plenty of as-yet-unreleased projects, are all starting to naturally come to a head.

For now, it's time to continue planning the roadmap for the next quarter, take a week off with the family, and come back and kick everything up another gear.

Francisco: ¡Hola a todos!

This week I have continued working with Rapier and have created several examples that will show how to use Rapier with Phaser.

I have also been preparing a small library that will help us use Rapier in a simpler way and save us from writing so much code. Here's a gif of a small pinball game I made to test the library.

Can: Hello there (with the voice of General Kenobi),

This week, I revisited our web animation system to enhance its functionality. I'll keep jumping on our animation system as I see we can improve it more and more!

I created more examples to demonstrate the ripple effect and stagger animations using our new utility function, which works seamlessly with tweens. These examples make it easier to create complex animations quickly, and having the ease of use!

I also did R\&D for our particle system that integrates easily with Nexus. Our plan is not just having the system, but having pre-built vfx on your hands(confetti, explosion, snow, etc) so you don't need to deal with all parameters most of the time.

Till next week, keep your pixels sharp everyone!

Arian: Hello friends!

This is what we did last week: we released a new version of Phaser Editor and started developing the next version! I can't say what's more exciting, releasing a new version or starting to develop new features. For example, for the next release we are working on the workflow to import assets into the editor. We've made some progress, such as allowing you to drag files from the OS Explorer and drop them into the editor. We've simplified this experience of importing files, reducing the number of steps to follow. At the end, I show you a video of how we went from adding files from an image atlas to how we add an image to a scene. If you have any suggestions on how we can improve this workflow, be sure to comment on our Discord channel #phaser-editor.

Ben: 2024-08-09

Let's talk about texture coordinates.

No, wait, come back! This is useful stuff. It helps us understand why imperfections creep into our graphics - and it helps us fix those imperfections.

Let's start at the end. In WebGL, in the shader program, we read data from textures using texture2D. (This is in original WebGL; WebGL2 has different commands.) This method takes a coordinate as a pair of 32-bit floating-point numbers. It treats the texture as a square with the range 0-1 on each axis. In reality, the texture has integer (whole number) width and height values; but by treating them as normalized floating point values, we get smooth textures by sampling "between" discrete texels.

We have choices about how to do this sampling: the filtering mode. The simplest filtering, NEAREST, just rounds to the nearest texel, and returns a single color. This creates sharp edges on pixel art. The next level, LINEAR filtering, does linear interpolation between the nearest pixels, creating a smooth transition from texel to texel. And above that, there are MIPMap options, which we'll ignore because they don't play well with texture atlas and spritesheet layouts.

An "atlas" is a single texture containing multiple "frames", which can be used for different objects, animation, tiles etc. Because WebGL can only handle a small number of textures at a time, an atlas is super useful. You should always be using some sort of atlas in your games.

However, there are two problems lurking within this system: precision and contamination.

Precision creates problems with texture coordinates. See, not all numbers can be represented as float32s. Rather than describe this in binary, let's use decimal to demonstrate. Take 1 / 3. In decimal, we might write 0.3333... to represent the result. But unless we have infinite space, we can't write the correct result. 0.3333 = 3333 / 10000, but what we want is 3333 / 9999. (Think about it.) In a computer using binary, space is limited - here, just 32 bits - and so there are many numbers it can't represent properly either. In fact, the only fractions it can represent correctly are multiples of 1 / B, where B is a power of 2 (1, 2, 4, 8, 16, 32 etc).

Now recall that texture coordinates are normalized into the range 0-1. How do we do this? We divide the texel coordinate by the width and height of the image, so if we have a 100x100 image, and our coordinate is at 10x10, the texture coordinate is (10/100)x(10/100) or 0.1x0.1. But binary doesn't know how to divide by 100 properly! It can get very close - closer than 1 part in 16 million. But ultimately, it falls a tiny fraction short. So if you zoom in on this texture using NEAREST filtering, you'll eventually see a narrow seam where the texture coordinate is pointing to the wrong texel - the one next door to the one you intended to draw. You can solve this by using an image with power-of-two dimensions, e.g. 2048x64, and where possible you should always do this.

This is a very uncommon problem; who zooms in far enough to see such tiny details? However, this issue is much more visible when using LINEAR filtering in an atlas, because you get contamination.

Here's a set of tiles rendered with NEAREST filtering:

And here's a set of tiles rendered with LINEAR filtering:

LINEAR filtering has added unwanted seams along the edges of the tiles, in an unpredictable range of colors. Why has this happened?

Well, this isn't technically a mistake. LINEAR filtering is designed to do that. It blends each texel with its neighbors to create smooth transitions. But it doesn't know that there's a frame boundary there, so it samples off into another part of the atlas, which contains different graphics.

Traditionally, there are two ways to resolve this problem: extrusion and continuation. With extrusion, you repeat the texels from inside the boundary on the outside of the boundary, so problematic texture coordinates still point to the data you want. With continuation, you arrange frames so that they only neighbor frames they're intended to blend into; some tile sets have this property.

However, now that we understand the problem, we can fix it in Phaser itself. This means you don't need to add useless padding data to your textures any more.

There are three ways to treat frame boundaries: NEAREST, clamped, and smooth.

NEAREST boundaries just use NEAREST filtering. You can't get seams if you don't do LINEAR filtering. This already exists, with the pixelArt/roundPixels config options. It is still susceptible to precision issues under intense zoom.

Clamped boundaries add a restriction to the texture coordinates: they add 0.5 texels of padding inside the frame boundary. Within this range, texture coordinates are pushed back inside the frame, effectively switching the filtering from LINEAR to NEAREST. This will fix precision issues with NEAREST, but it has problems of its own. As it is no longer using LINEAR filtering, boundaries have a crisp line; and as texture samples aren't always aligned with the texel grid, it can induce "buzzing" along the boundaries as the camera moves. Still, clamped boundaries are perfect for sprites which don't touch the edges of their frame.

Smooth boundaries fix these problems too. They're only possible when we know what's beyond the boundary, such as in tile maps or TiledSprites. We can look past the boundary and into a tile in another part of the texture, then blend with that to get a perfectly smooth boundary. This involves doing more work than the other options, but it does things that you can't do with extrusion.

Right now, Phaser doesn't have clamped or smooth boundaries. But I'm working on them.

In the meantime, now you know why you get texture seams. And you know how to avoid them with extrusion. This is an option in TexturePacker and other tools, so make use of it! The right tool is a mixture of the right texture and the right boundary handling.

Phaser Releases

Phaser 3.85.0 Beta 2 released 23rd July 2024.
Phaser Editor 4.2 released 7th August 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