Today we are publishing our weekly release, a new version of Phaser Editor where we continue to polish details that make the editor a simpler tool to use. This time, in addition to some isolated features, we have dedicated ourselves to improving the experience of users who use plain JavaScript to code their games.

JavaScript with modules

Phaser Editor provides different project templates with which you can start your game. These templates cover a wide range of technologies, such as web bundlers, front-end frameworks, TypeScript, CapacitorJS, etc. But it also provides a project template that is as simple as it can possibly be. One that uses only the technologies present in modern browsers, without the need to use third-party tools. This project template is called Basic JavaScript and is the first option that appears on the New Project page of the editor:

basic javascript template

If you're new to the world of web development, then this is the project template we recommend to get started with.

What's new in this template? Several things.

The code in this template now uses standard JavaScript modules, which has several advantages:

  • It's the modern way of programming JavaScript, so you may already be familiar with it from other JavaScript tutorials.
  • Modules are loaded in the browser on demand, and the user doesn't have to worry about setting the order of the JavaScript files or explicitly adding them all to the main index.html file. There is no 'race condition' event.
  • Most third-party tools require the use of modules, so it will be easier for you to port your game to these technologies should you need to in the future.

In addition to updating the content of the project template, we have also made some changes to the editor's scene compiler. These are:

  • The compiler no longer generates a line of code to import Phaser as a module, as this is not needed in the Phaser runtime. That is, this line of code has been removed:
import Phaser from "phaser"
  • The use of JavaScript modules is not new to the editor, but it was primarily intended to be used in conjunction with bundlers like Webpack or Vite, where using the full name of a file is optional. To make this work with browser native ESMs you can now enable a new parameter that tells the scene compiler to include the files extension in import clauses:

import file extension parameter

import file extension in code

  • This parameter is present not only for the scene compiler, but also for all other code generators in the editor.

Script Nodes refactored

Script Nodes are a powerful tool in Phaser Editor, but they are still in active development and missing learning materials. For that reason, we made a couple of adjustments related to the script node libraries.

First, we grouped all script node libraries into two:

  • @phaserjs/editor-scripts-base: it is included in all project templates but is minimal, it only contains the ScriptNode and UserComponent classes.
  • @phaserjs/editor-scripts-quick: Contains a wide range of scripts and components that cover different aspects of game development, such as events and actions to manipulate animations, the camera, object physics, among others.

Now the basic project templates only include @phaserjs/editor-scripts-base, which contains only a couple of classes.

Script Node dialogs

We've also reworked the dialogs for script nodes and user components, grouping them into folders. This allows for better navigation of all the elements in your project.

The Add Script Node and the Go To dialogs show the script nodes grouped in folders:

add script node

go to dialog

Built-in code editor

Not only have we improved the dedicated JavaScript project template, but we've also included a better JavaScript editor within Phaser Editor. When you edit a source file from within the Editor it will now use Monaco to do this, rather than the older editor we had. Monaco is the underlying editor behind Visual Studio Code, so is much more powerful. Of course, you can still use VS Code itself instead of the built-in editor, but this change will make quick code edits a breeze.

monaco editor

New ways to open a project

For this release we've enabled two new features that are very simple but very useful. If you're working on macOS, you can now open a folder in Phaser Editor by simply dragging it from the Finder onto the Phaser Editor icon in the Dock:

For the other platforms we've also implemented a simple way to open a project. You can now drag your project folder from the operating system to the Start page of the editor:

What's next

The next major feature to be added is integrated Tilemap support. So you can build-up tilemap levels directly in the Editor. We will keep you updated on progress with this feature soon.

Available Now!

Phaser Editor v4.5 is available for download for Windows, macOS and Linux from the Downloads page of your User Account.

If you don't have a subscription we have a 30-day trial on offer at the moment.

Free 30-day Trial Subscription