Welcome to Phaser World Issue 174. Try out our new create-game cli app, learn how to build the game snake from scratch and read the latest Phase Dev Logs.
Game of the Week
Jump, Run and Slash game in this side scrolling adventure.
Use arrow keys to move, climb the vines to get around.
Catching minecraft essence - reshaping your world with your friends. Use shovel to terraform your World in real-time and plant to place some trees.
Based on the classic arcade game Space Invaders released in 1978.
We're very pleased to announce the release of our Create Game app. This is a new CLI / terminal app for Windows, macOS, or Linux that allows you to get started with Phaser faster than ever. Issue one command to invoke the app, and it will interactively guide you through setting up a default Phaser project, ready and configured to use any of the wide range of front-end frameworks or web bundlers we have available.
The app also includes 3 demo games. You can install a matching pairs game, a pixel-art shoot-em-up game, or a coin clicker game. These serve as example projects to help you dive in and learn quickly. Try it out by using this command in your terminal or Powershell:
npm create @phaserjs/game@latest
Phaser 3 Tutorial: Building a Snake Game from Scratch
This guide offers a step-by-step approach to Phaser 3 game development, crafting an HTML5 game, and applying JavaScript game development techniques.
Want to see me talk about CosmoPirates?
Here's an interview about our little sci-fi comedy made during Pax East 2024 by KingKool.
Introduction to Phaser 3 - Getting Started with the Game Framework in JavaScript
I'll guide you through the very basics to get you started with Phaser 3, a powerful tool for creating games in the JavaScript language.
Mini Archer is a simple little mobile game by Nanovation Labs available on Apple App Store and it’s a good game to port to HTML5 using Phaser. See also part 2, part 3, part 4, part 5, and part 6.
Here is what the team has been up to this week:
Arian: Greetings friends. This week we almost finished our first version of the online editor. This editor will be available to everyone, and despite being online, you will be able to access your local projects. We have also worked on the desktop version of the editor, integrating it with the authentication of Phaser.io users. Next week will be very similar to this one, except that we hope to have both versions of the editor ready: online and desktop. See you!
Robert: ¡Otra semana ocupada que pasó demasiado rápido!
The ES6 build is almost here, just working out a few pieces of glue I had to get specific parts working and replacing them with proper solutions. The trickiest part being the renderer and pipelines playing nicely with the new build, for test purposes its all included but this isn't why we are upgrading. Tree shaking is one of the more popular benefits and renderers would be a good target for it, cutting out bloat if you're not using WebGL specific features for example. Next week will be cleanup and linting, but at least it's coming together!
Francisco: Greetings from Spain (and also Nicaragua from my heart).
This week we've released the first version of the create-game cli template installer. We've also resumed development of phaser-fiber, and I've spent time cleaning and getting up to speed with the code to continue developing it.
We've started to create base components such as Game and Scene. These components will be the entry points for Fiber, and I intend for all updates to occur within the scenes.
I hope you warmly welcome this new project, until next week.
Can: Greetings fellow Phaser lovers,
We are in spring time in Cyprus and it’s boiling here! Despite the heat(in spring!), I have some amazing news. Following the launch of our Discord template, we are not stopping there! I started working on Discord Colyseus Phaser template so you can make your favorite multiplayer game to be shared with your loved ones on Discord! I’m itching to complete and serve it to you all!
Rich: There are lots of things all coming together right now, but one of the most exciting for me personally will be the launch of proper User Accounts on the Phaser site. I know, it sounds so basic and trivial, right? It's something I have felt the site lacked for many years now. Our community was always split between Discord, Patreon, our Forum, and Twitter. If you wanted to comment on one of the news articles on our site, you couldn't do it. If you wanted to ask a question about a code example in the labs, you couldn't do that either.
By opening user accounts on our site, we can finally start offering all kinds of fun services! Plus, of course, with Arian and Phaser Editor as part of the team, it's time to fully integrate the Editor with our site too.
As well as this, we're also in the process of collating all our legacy content and pulling it back to the new site. For example, our Dev Logs first started life on my personal PhotonStorm blog! Then they moved to a mixture of Patreon and this newsletter, some on the site, some not. It's all a bit of a mess, really. So we sat down and scraped and converted all of this content into markdown, imported it all into the new CMS and will finally be able to present the whole Phaser story and journey with you, starting right from day 1.
The Phaser Labs will also be revamped and merged with the site. And with proper user accounts we can even let you do things like forking the examples and tweaking them for your own use, or submitting your own examples for inclusion on the site. Much like CodePen does, we want to foster a similar kind of feeling and feedback loop for Phaser examples.
Finally, did you know that next Friday (April 12th) is Phaser's 11th birthday?! We probably ought to do something to celebrate, although I'm not entirely sure what yet :) If you've any suggestions, please let me know in Discord!
Ben: My hacked-together new renderer is doing something and is now using the new data structures to handle all of the WebGL calls.
A simple test scene with a single Image in it takes 6 WebGL commands in 3.80:
▪ bindFramebuffer
▪ clearColor
▪ clear
▪ enable SCISSOR_TEST
▪ bufferSubData
▪ drawArrays
In the new version, it's down to 3:
▪ clear
▪ bufferSubData
▪ drawArrays
Because it knows the full state, it knows it doesn't need to bind the same framebuffer again, or set a new clear color, or change the scissor state. Those are all being called by the DrawingContext, but the state management is skipping them.
It's successful in automatically assigning a DrawingContext, and passing it through a RenderStep. The DrawingContext is correctly assigning the Canvas, and correctly clearing itself when it figures it's time (visible via debug). The RenderStep is correctly compiling a shader program, connecting its attributes to a buffer, computing basic transform matrices, and setting uniforms.
In its current state, the system can only render Images and Sprites. But it's already fine with animations on Sprites.
This isn't using Compositor nodes yet. I really aimed for minimum viable proof of concept. However, it's giving me lots to work on.
As mentioned, I need to tighten up some of the attribute handling, and allow more control over data types.
There's also a lot of boilerplate around vertex transforms. I've just inlined it in my hacky code to get it working, but it needs a better place to live. What started off as WebGLPipeline.batchSprite is probably going to be broken up into some smaller functions, such as a universal function for computing vertex transforms. And maybe there'll be a topology helper function for zipping that coordinate data together with other attributes like tints and texture units; TRIANGLES topology requires repeating two vertices out of every six and we might as well automate that. Splitting this all up can make it really efficient; a MultiTexture step wants the same vertex transform data as a SingleTexture step, but it treats texture units differently. This also helps us pull data off individual RenderSteps, leaving them very svelte and single-purpose. Right now I've got several temporary matrices on the Single step, which might be able to live entirely in a more specialised step. I'd love for each Step to be just a couple hundred lines of code.
Like Pipelines, but lighter, more focused, and with fewer points of friction.
It's feeling good, though. I can see the nodes coming together as simple parts of a complex system, the drawing contexts controlling framebuffer usage, the programs efficiently handling their inputs. Once I've got all the basic parts in place, we're going to see an explosion of nodes restoring all the old functionality, only more efficient and intercompatible. And then we can start setting blend modes and FX in places they've never been seen before.
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