Welcome to another issue of Phaser World! It’s quite incredible to think that we’re closing in on 200 issues. That’s an awful lot of content over the years. And this issue is no exception! We’ve got videos, exclusive new tutorials, games, and, of course, the Developer Logs.
🎥 Phaser 2024 Games Showreel
We’ve released another new video onto our fledgling YouTube channel. This time, a showreel of Phaser games to give you an idea of what it’s capable of when placed into talented hands!
🎮 Hawaii Match 5
Enjoy over 4,000 levels of this addictive tropical puzzle adventure.
SoftGames has released their latest game, Hawaii Match 5! Set in the stunning landscapes of a tropical paradise, this puzzle game will take you on a journey through dreamlike island scenes, packed with vibrant fruits and flowers. With over 4,000 levels, players are challenged to match five or more symbols to achieve goals and earn stars, all while managing limited moves.
🌟 Phaser Editor 4.4 Released
The latest release includes enhanced Go To support, tighter integration with VS Code, built-in Live Chat and has been updated for Phaser v3.85.2
It was only last week that we announced the 4.3 release, but we’ve added so many cool new features that we pushed out 4.4.
Included are new UI improvements, the ability to see animated sprites in real-time in the Scene Editor, buil-in Live Chat support (with a human, not a bot!), better Visual Studio Code integration, and updates for Phaser v3.85.2, which was also released last week.
Read the full release notes for details about all of the improvements.
Subscribers can update to this version immediately. Just grab it from your account's Downloads page or pick ‘Check for Updates’ within Phaser Editor. If you don’t have a subscription, we offer a 30-day trial.
🚀 Phaser Enterprise Plans
Does your company use Phaser as part of its development process? Then, you may want to consider a Phaser Enterprise plan. Benefits include:
Access to your own private Slack / Discord channel with Phaser staff for direct technical support
30 minutes worth of 1:1 video calls per month for support or pair programming
Help porting your game/s from other platforms or systems to Phaser
Help with upgrading older Phaser 2 games to Phaser 3
Access to Phaser Editor, with SSO and on-premises versions available
Interested? Please email Richard Davey (rich @ phaser.io) with further details about your company and we can take it from there.
💻 Making Phaser games for iOS and Android
Read this great exclusive new tutorial on using Phaser with Capacitor
We have just published a new tutorial where you'll learn how to deploy your Phaser game to iOS and Android by wrapping it with Capacitor. We use an existing game, Starshake, as an example.
The tutorial features:
Integrating Capacitor into your project, a cross-platform native runtime for web apps, to easily transform your Phaser game into a mobile app.
Changes to be more mobile-friendly, including touch controls, resizing the game for mobile devices, and adding safe area support.
Setting up live debugging on Android or iOS devices to display game changes immediately.
You can bring your Phaser game to mobile in just a few steps.
💻 3 New Tutorials!
Here are three new tutorials from the community.
Making a game in 1 month with Phaser and AI: Oleg Shabrov made a new take Vampire Survivors in a very unique manner, without a single line of JavaScript code!
Device rotation prompt in JavaScript: A small library that solves a big problem!
Connect Four Tutorial: Phaser YouTuber Scott Westover returns with a classic puzzle game!
Phaser Studio Developer Logs
👨💻 Rich
Work on the new Phaser documentation site continues to take priority. This involves collating together a huge amount of resources, ensuring they are properly formatted and then generating the correct front-matter for every single file. It’s a huge task but the 3 of us are making good headway.
As I mentioned last issue, we’re using the Hashnode Docs service. Their system works by having TypeScript configuration files in each folder. These files are similar to JSON files, in that they map out the contents of the folder, the slugs, the sidebar content, nav links and so on. Working with them is quite tedious though. Not as tedious as working with JSON! But still lots of manual copy/paste work. It’s also quite easy to accidentally make a typo that leads to broken links or conflicting slugs.
As developers so often do when faced with a daunting task, I coded something to help. This took the form of a library that allows us to generate these config files programmatically. It also checks to ensure the files exist, have the correct extensions, have properly aligned slugs and so on. In short, we get to code the structure of our docs like this:
import { Export, Guide, Link, Page, Section, SideBar } from './HashnodeDocs';
Guide('Phaser', 'phaser');
SideBar('Phaser v3.85.2', 'v3.85.2', true);
Section('Getting Started', [
Page('what-is-phaser'),
Page('installation'),
Page('set-up-dev-environment'),
Page('project-templates'),
Page('make-a-game'),
]);
Section('Concepts', [
Page('scenes'),
Page('game-objects'),
Page('cameras'),
Page('events'),
Page('factories'),
Page('plugins'),
]);
Link('Phaser Discord', 'https://discord.gg/phaser');
Export();
Which, honestly, is a lot easier for us 😊
I also finished and published Phaser v3.85.2 last week. There wasn’t much in it, mostly just fixing a few high priority issues, but it was important to get it out fast.
We will stay on top of issues reported in GitHub but our focus, once the docs site is live, is building Phaser v4 with the new renderer inside of it. As I’ve said before, we want to keep the API as close to v3 as we can to ensure a seamless transition. After all, we’ve spent a year working on our incredible new renderer, so we want as many devs to use it as quickly as possible without having to abandon v3 projects to do so. Yes, we still want to transition to ES6/ESM internally, but it’s not essential for us to do this before getting v4 out.
👨💻 Francisco - Phaser Docs
This week has been very productive in the development of scripts that automatically generate the Phaser API. One of the biggest improvements has been the restructuring of the code, moving from a rough draft (hardcode) to a much more organized and modular structure. This has not only made future modifications easier but also made the code more maintainable.
A key achievement was enabling the script to generate its own phaser.json file. This step is crucial as it allows me to keep the documentation automatically updated without having to manually regenerate this file using an external tool.
Additionally, I grouped functions, constants, and events, which significantly reduced the size of the documentation. In fact, the documentation size was reduced from about 50 MB to just 18 MB, making it lighter.
I also worked on the overall organization of the code, separating functions and migrating the rough draft JavaScript code (hardcode) to TypeScript, improving both readability and scalability of the project.
👨💻 Arian - Phaser Editor
Hello friends! Last week we released a new version of Phaser Editor. It was a lightning release, which we worked on for about two weeks. The main feature of this new release is a new communication channel between editor customers and the Phaser Studio team. You will find an icon to open a chat window on the top right. In this window, you can contact us and we will respond as quickly as possible.
In addition, we implemented some other features such as a button to launch Visual Studio Code. If you press this button, Phaser Editor will open the project folder in Visual Studio Code, and if you are editing a scene or user component, the code for it will open in the popular Microsoft editor.
We also improved the dialog to open a scene. This improvement consists of, first, showing a button to launch the dialog, and second, we added a lot more content to the dialog, so that now you can quickly access not only scenes, but also user components, animations, and asset packs.
This week we will be working on another lightning release of the editor, mainly dedicated to simplifying project templates and the use of script nodes.
See you soon!
👨💻 Zeke - Phaser Docs
Hi there. Here’s the documentation I’ve been working on the past week.
Camera: Did you know that Phaser has some amazing camera features available for use in your games? Check out our code lab for examples here
Multiple cameras. Having multiple cameras opens up the possibilities to create in-game minimaps and split screen games. From Defender (1981), Diablo, Age of Empire, these games include a minimap to help players keep track of their current position within the game world. Other games like Sonic the Hedgehog 2, Rock n’ Roll Racing and Mario Kart show how multiple cameras can make local co-op games fun.
Camera follows the player. Movement and zoom effects. Cameras can move (pan), zoom and even trigger shaking effects.
Camera fade in / out for scene transitions. Round pixels for crisp and clean pixel art games.
Shader effects. Check out the link above for all our current examples.
Loader: The Phaser Loader is responsible for loading all external game assets. Here’s a complete list of file types that you can use in-game: audio, binary, glsl, html, htmlTexture, image, json, script, spritesheet, svg, text, tilemapCSV, tilemapJSON and xml.
Events: Events send signals to other systems that are listening to act on. For example, if the player clicks their mouse on your game, that will internally emit a sequence of events within Phaser. Or if the Loader finishes downloading a file, that will emit related events. The documentation provides examples for adding/removing event listeners, triggering events and creating custom event emitter classes.
Renderer: The Renderer draws everything you see on the screen. Phaser comes with 2 built-in renderers: Canvas and WebGL. Phaser automatically queries the browser to see if it supports running WebGL to create a WebGL renderer, otherwise it uses Canvas.WebGL advantages:* Lights, shaders, sprite effects, tints Mesh, Nine Slice, and Rope game objects Better performance, usually Canvas 2d advantages:* Extra blend modes Better performance for Canvas Texture and Text Smaller build * Slightly faster startup and canvas resizing
Caching: The Phaser internal Cache stores downloaded files for quick access. Files are stored using unique string-based keys. If the file uses the Loader, it will use the same key to store it in the Cache. The Phaser Cache is separate from the browser cache and only persists during the game session.
Textures: Create and store textures with the Texture Manager. A Texture is made up of one or more Frames. Frames allow you to split a single Texture into different sections. Sprites can be assigned to show a texture with different frames at any time. Phaser supports Sprite Sheets with multiple frames of the same size or Texture Atlases that use a single large image that combines multiple images and data to create the frames for use. Phaser also allows Dynamic and Canvas Texture generation that can create Textures at runtime.
Arcade physics: Used to create 'arcade' or 'retro' style games, Arcade Physics is a lightweight physics system that can only handle rectangle and circle collisions. It is ideal for platformers, top-down games and puzzle games as it’s very fast and easy to use, with lots of helper functions. If performance is your primary concern, consider using Arcade Physics.
Matter physics: Based on an open-source third party physics library, Phaser comes bundled with a customised version of MatterJS. Matter Physics provides a more advanced 'full body' physics system and can be used to create complex physics shapes, polygons and compound bodies. It is also able to simulate behaviours that include constraints, joints, springs, soft body dynamics and more.
Tales from the Pixel Mines
September 20th, 2024 by Ben Richards
Last week, I talked a lot about implementing new framebuffer rendering techniques. Long story short, FX and masks become the domain of something called a Box, and framebuffers are only seen in a Box and DynamicTexture.
This week, I set about implementing those framebuffer systems. Much of this is still in progress, but I do have one thing to show off: the Stamp GameObject.
The Stamp GameObject is similar to an Image, except it ignores camera transforms. It doesn't just set them to zero - it doesn't even calculate camera transforms. This is different to the scrollFactor properties of other GameObjects, which reduces the amount by which camera scroll transforms the object. The Stamp also ignores camera zoom and rotation.
This is visible in the following image. Here, the background doesn't scroll as the camera moves, to create the impression of parallax; but it still rotates and zooms. But the bar at the bottom of the screen is a Stamp, so it doesn't rotate or zoom.
Stamp also works properly with lighting. Lights are calculated in screen space, so the Stamp's position on the screen lines up perfectly. In the following example, we've moved the camera many screens away from the origin, but the car (a Stamp with a normal map) is still lit properly.
A Stamp has some limitations, however. It is just an Image. It can't play animations like a Sprite, or display repeating textures like a TileSprite or Tilemap.
To create complex camera-independent elements, such as an involved HUD or a background moving independently from the level, your best option is to create a whole new Scene and render it before or behind the game world. Cameras are not linked between Scenes, so you can build a HUD and leave it in place.
Light does not pass between Scenes, though, so a more complicated option is to use a Container which follows the camera in the same scene, and put your HUD in there. Like most things in game development, there are many ways to get results.
Of course, the main purpose of the Stamp is to simplify drawing a DynamicTexture. I'm in the middle of reorganizing the logic for this system now. Next week, we'll hopefully have a lot more to report!
Submit your Content
Created a game, tutorial, sandbox entry, video, or anything you feel Phaser World readers would like? Then please send it to us! Email support@phaser.io
Until the next issue, happy coding!