Navigation

Phaser v3.60 Beta 22 Released introducing Timelines

Published on 31st March 2023

Another week and another Beta has been released 🙂 Here is Phaser 3.60 Beta 22. As usual, you can grab it from GitHub:

https://github.com/photonstorm/phaser/releases/tag/v3.60.0-beta.22

Or npm:

https://www.npmjs.com/package/phaser/v/3.60.0-beta.22

I have published new TypeScript defs into the `scripts` folder, and gammafp has published the Beta 22 documentation, too:

https://newdocs.phaser.io/docs/3.60.0-beta.22

The Labs site has also been updated with all the latest examples and the new release. So please, dig in!

To be honest, I'm finding it really useful to release a Beta every Friday. It gives me a nice short, fixed deadline to aim for. Plus, there's so much happening right now it makes sense, too!

And the Winner is ...

Thank you to everyone who responded to my previous March 2023 Dev Log post. In it, I questioned what version number we should give Phaser. Was 3.60 indication enough of all the effort in here? Should we go for Phaser 4? How about an elaborate 3.2023.1?!

After a lot of discussions, it was pretty unanimous: You mostly all wanted to stick with 3.60 as the version.

And I think I agree. We can keep the messaging around it as clear as possible to let newcomers know what a huge upgrade it is. And it keeps the way clear for Phaser 4 going forwards.

What's in Beta 22?

I have mostly been focusing on fixing issues for Beta 22. Lots of them have been reported on GitHub, and I've been working through them, bashing them down one by one. This release includes fixes for things like `putTileAt` (with null tilesets), some `pixelArt: true` weirdness on HighDPI displays, fixes in Post FX, and loads more.

However, it also sees the introduction of Timelines.

Timeline Class

New to Phaser 3.60 is a Timeline Class, which allows for fine-grained control of sequenced events. Previously in 3.55, the Timeline was part of the Tween system, and it never quite worked as intended. In 3.60, it has been removed from Tweens entirely, replaced with the much more solid and reliable Tween Chains, and Timeline has now become its own first-class citizen within Phaser.

It allows you to sequence any event you like, not just tweens.

A Timeline is a way to schedule events to happen at specific times in the future. You can think of it as an event sequencer for your game, allowing you to schedule the running of callbacks, events, and other actions at specific times.

A Timeline is a Scene level system, meaning you can have as many Timelines as you like, each belonging to a different Scene. You can also have multiple Timelines running at the same time.

If the Scene is paused, the Timeline will also pause. If the Scene is destroyed, the Timeline will be automatically destroyed. However, you can control the Timeline directly, pausing, resuming, and stopping it at any time.

Create an instance of a Timeline via the Game Object Factory:

The Timeline always starts paused. You must call `play` on it to start it running.

Click here to run demo

You can also pass in a configuration object on creation or an array of them:

In this example, we sequence a few different events:

There are loads of things you can do with Timelines. The time offsets don't have to be absolute - they can be relative to the previous entry in the Timeline, or they can just be set to fire at X seconds in the future.

Click here to run demo

You can sequence tweens, custom events, target setters, and sounds directly, with easy-to-use config options for them all. However, you can also sequence a callback that does literally anything you like. The Timelines can be played multiple times, although you will need to be responsible for resetting the state of any objects they create or interact with.

Equally, you can set events within the Timeline to be 'once' events, which means they will be removed from the Timeline the moment they execute. So on a future playback of the same Timeline, they won't be present.

There are lots of options available to you, this class is fully documented and finished, and you can find examples in the Labs. So please, go and play 🙂

Web Game Dev

Just a little shout-out to the Web Game Dev community. They have a great weekly newsletter which I'd urge you all to subscribe to, and a growing collection of resources on their site. They also have a friendly Discord worth joining. It's nice because it's not focused on any one framework or library. If it's web-based, it's fair game for discussion! Which makes it a good place to get a variety of opinions.

Not long to go

As I write this, I've just 12 days to go until the release of 3.60. That feels worryingly close, but at the same time, it's a nice solid end goal to have in sight. I know I'm not going to be able to close every issue on GitHub, but I'll certainly try for the most important ones (which, to be honest, I think I've got most of already).

Also, just because April 12th is the release date, it doesn't mean there won't be another version after it. Yes, I do intend to ramp up development on Phaser 4 again, but Phaser 3 won't be forgotten. I will still release patches for it as long as people keep using it.

Even so, I can't deny this is quite an exciting period of development, and honestly, I'm looking forward to unleashing 3.60 on the wider world!