Phaser Editor Svelte Template

This is a Phaser Editor v4 project template that uses Svelte for bundling. It supports hot-reloading for quick development workflow and includes scripts to generate production-ready builds.

Versions

This template has been updated for:

• Phaser 3.85.2
• Phaser Editor v4.0 and above

What is Phaser Editor?

Phaser Editor enables you to visually create Phaser games. Instead of entering numbers in your code to position Game Objects, you can drag and drop them into place, tweak their animations, adjust their physics bodies, enable special effects, and more. It's quicker and faster for both artists and developers alike and publishes pure Phaser code.

See more at phaser.io

Requirements

Node.js is required to install dependencies and run scripts via npm.

An active subscription to Phaser Editor is required to load and use this template within it.

Available Commands

Writing Code

After cloning the repo, run npm install from your project directory.

To start the local development server use npm run dev.

Deploying to Production

To create a production build use the command npm run build.

This will take your game code and build it into a single bundle, ready for deployment. This bundle is saved to the dist folder. Please note that some templates save to the build folder instead. The deployment script will also copy any assets your project imported, or stored in the public assets folder.

To deploy your game, upload all of the contents of the dist folder to a public-facing web server.

Note: In some templates, the dist folder has been renamed to build to remain within that framework's conventions.

Phaser Editor considerations

Excluding files from the project

You don't want to add every file in this template to your Phaser Editor project. For example, the whole of node_modules can be excluded.

The /.skip file lists the folders and files to exclude from the editor's project.

Learn more about resource filtering in Phaser Editor

Asset Pack

Phaser has the ability to load what are known as 'asset packs'. These are JSON files that describe all of the content that your game needs to load, such as images, audio, and fonts. Phaser Editor will generate and use asset packs intensively and tools such as the Scene Editor depend upon the information stored in the asset pack files.

You can have multiple asset packs per project, which is the recommended practice for larger games, allowing you to load only the pack of assets the game requires at that specific point.

In this template, we have pre-configured two types of asset packs: boot-asset-pack.json and preload-asset-pack.json.

The boot-asset-pack.json file is used to load assets when the game first boots. Typically, you would store a small selection of initial assets in here, such as a loading screen image and progress bar.

The preload-asset-pack.json in this template contains the rest of the assets the game needs. You are free to create additional packs as required, but for the sake of simplicity, this template has been configured with just these two packs.

Learn more about Asset Pack loading in Phaser

Join the Phaser Community!

We love to see what developers like you create with Phaser! It really motivates us to keep improving. So please join our community and show off your work 😄

Visit: The Phaser website and follow on Phaser Twitter
Play: Some of the amazing games #madewithphaser
Learn: API Docs, Support Forum and StackOverflow
Discord: Join us on Discord
Code: 2000+ Examples
Read: The Phaser World Newsletter

Created by Phaser Studio. Powered by coffee, anime, pixels and love.

The Phaser logo and characters are © 2011 - 2024 Phaser Studio Inc.

All rights reserved.