Published on 19th April 2024
Welcome to Phaser World Issue 176.
Oh boy, have we got something special for you in this issue! We are very pleased to announce a brand new book, Phaser by Example. Written by Pello Xabier Altadill and Richard Davey, it contains over 400 pages of brand-new, up-to-date content on building games with Phaser.
The book includes chapters on the creation of nine different types of games, from a basic infinite runner to a multiplayer shooter. There's a platformer, a puzzle game, a rogue-like, a story game, and even a 3D game using Enable3D. Plus, a deep dive into the core concepts of Phaser and a detailed look at Game Objects and all of their features and abilities.
The best part? The book is completely free!
Simply login to your Phaser account (yes, those are a thing now, too!), and the book will be waiting for you in your Downloads section after logging in. And once you've registered, you may as well take advantage of our brand new Phaser Sandbox too. More details on that are below.
Game of the Week\ Otteretto\ Otteretto is a puzzle game about palindromes (and otters). This isn't another Match-3 game; it's a whole new idea to wrap your head around! How long of a palindrome can you make?
PokéRogue\ PokéRogue is a browser based Pokémon fangame heavily inspired by the roguelite genre. Battle endlessly while gathering stacking items, exploring many different biomes, fighting trainers, bosses, and more!
Colorblind Curse\ Explore a dangerous tomb full of traps and treasures. But beware, one treasure carries a curse that affects your color vision. How will you survive when you can't tell the difference between safe and deadly spaces?
Phaser Sandbox
We are happy to announce the release of the Phaser Sandbox. This new feature provides a web-based code editor fully loaded with all the latest Phaser versions and a real-time preview.
You may have used something similar in the past on sites such as Codepen. Our version is, of course, dedicated to Phaser and will automatically load the Phaser TypeScript definitions, giving you code insight and auto-completion as you work.
The concept behind a sandbox is that you can use it to easily demonstrate small snippets of code. Perhaps you're stuck with a problem and need to show your code off in our Discord? Or maybe you've created a fun little effect or game you want to share?
GAP: Generic Atlas Packer\ GAP (Generic Atlas Packer) is a tool that allows you to pack multiple images of your games into single atlas.
Phaser Compressed Texture Plugin\ Compressed texture support for Phaser v3.24.1.
Build a HTML5 game like “Magick” iPad game using Phaser and ARCADE physics – making player stop, and maybe fall\ In this version, you can stop the player by clicking or tapping anywhere on a solid tile. I prefer this way rather than using tap and hold, because there won’t be any delay. See also the version updated to Phaser 3.60 and written in TypeScript.
Francisco: Saludos desde España por parte de un nicaragüense.
This week I have been working on creating a tool (the Phaser Sandbox) that allows people to upload and share their codes. In the current state of the tool, you can generate JavaScript code, and we have integrated different versions of Phaser automatically, which you can freely choose from. It also incorporates screen refreshing with ctrl + s or with cmd + s (on Mac), or through the tool's button. If you have already logged into our website, you will be able to save your code and share it. Have fun!
Arian: Hello!
It has been two short weeks since my last report. I say short weeks because a lot has happened in the world of Phaser. Among other things, we have finished with the first version of what will be Phaser Editor v4. This new age of the editor will be integrated into the new services hosted on the Phaser site. We also spent considerable time migrating the editor documentation to a format compatible with Phaser.io content. Additionally, we are working on coupling the online version of Phaser Editor with the Phaser Labs examples. There is still some work to be done but we hope to have these products released very soon.
Robert: ¡Feliz viernes de parte del equipo Phaser!
Since the last dev log I have been switched to Laravel work to get the Phaser site up and running. The labs will be integrated into the site and incorporated into the rest of the work flow from my co-workers! Overall just cleaning up the navigation, search and other utilities useful for the examples and then getting ready to get back into Phaser code. Enjoy!
Can: Greetings, fellow Phaser lovers!
As we dive into another edition of our DevLog, I’m pleased to say that a new book is coming out for Phaser members. This week was about working on the book, styling, editing, making examples working well, adding new content (with amazing cover art!), upgrading all to our latest v3.80.1, switching from Webpack to Vite so you can enjoy your development experience faster!
Ben: 2024.04.19
This week, I've been nailing down the foundational approach necessary to get the absolute most out of Phaser's rendering system.
The secret is quads. 99% of what Phaser renders is independent quadrangles. Every sprite is a four-sided shape; every FX is a four-sided area of effect. Unlike most game engines, these quadrangles are independent: they're not connected into larger 3D meshes.
This sounds simple, but it's actually key to finding the fastest approach to rendering. Phaser is already fast, but I want to take it to the limit. And using general rendering techniques isn't good enough.
In the current version 3.80, a quad is sent to the GPU as two triangles, a total of 6 vertices. Like most graphics technologies, WebGL uses triangles to draw every shape. But a quad only has 4 vertices, so this method uses 50% extra resources. It's also possible to use a mode called TRIANGLE_STRIP, which connects vertices into triangles as it goes; the strip can define a quad as two triangles with just 4 vertices. That seems great!
But Phaser also batches drawing commands, so a thousand quads can be drawn with just one command. If you line up several groups of 4 vertices in a strip, they'll connect themselves together, creating weird stretched geometry across the screen. Quads are supposed to be independent. We can fix this by introducing "degenerate triangles": repeating a vertex at the start and end of the quad to create triangles with zero area. (A triangle from A to A to B must have zero area.) But this means we're using 6 vertices again, and now two of them are meant to be thrown away.
Fortunately, there exists a method to draw similar geometric shapes repeatedly: instanced rendering. This allows us to do two useful things. We can define a shape, such as a quad, to be repeated. And we can "repeat" attributes that apply to the whole quad, like textures. The result saves GPU resources, by knowing exactly what we need to do.
Phaser Releases
Phaser 3.80.1 released 27th February 2024.\ Phaser Editor 2D 3.67 released 22nd February 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