-
Notifications
You must be signed in to change notification settings - Fork 4
Home
And see next questions.
I know JavaScript but I've never made a game before / I've made a game before but I've never used Phaser
Probably Phaser 3, especially if you're new to both of them.
Phaser 3 doesn't have
- Creature animations
- Box2D physics
- P2 physics
- Impact physics (soon)
See
- Dev Logs for progress reports
- feature requests
No.
Probably not, especially if you're new to Phaser 3.
Does Phaser 3 use PixiJS?
No.
Look in the browser console after creating a game, or in Phaser.VERSION
.
Use phaser.js until your game is done, then switch to phaser.min.js.
phaser.min.js is the minified (packed) build.
That is nearly impossible. Make sure you haven't switched Phaser versions by accident (look in browser console).
There are many and you may have some already installed.
If you already have Node/npm, then http-server is a good choice. Install once with
npm i -g http-server
Then run in your project directory:
http-server . -c-1 --open
-c-1
means don't cache and --open
means open a browser.
There's no particular requirement, except one HTML file that loads the Phaser library and your own game script.
Use a bundler such as parcel, rollup or webpack.
You can't use Phaser 3 as an ES module (<script type=module>
).
Yes. If you're publishing a game for general use, you should probably transpile it.
Since v3.17.0, Phaser's declaration file is included.
It's usually found automatically, but if it's not, you can add node_modules/phaser/types/phaser.d.ts to the files
entry of your project's tsconfig file.
Study the examples.
Start at new Phaser.Game() or the Scene menu.
How can I fix errors in the API docs or TypeScript definitions?
Make a pull request. Phaser uses the JSDoc format and generates the TypeScript definitions from them for each release.
How do I use Phaser with webpack?
phaser3-project-template is a simple configuration, and there are others.
See phaser3-custom-build or phaser3-project-template-custom-build.
Open the browser console.
Look in your browser's address bar. If you see a file:
URL, you need to run a local web server and open the game from there instead. The URL in the address bar should start with http:
or https:
, like http://localhost
or http://127.0.0.1
.
Open your browser's console and look for errors.
If you see Not found errors, open the full URL and check it for mistakes.
If you see error messages similar to Cross origin requests are only supported for HTTP, you need to run a local web server and open the game from there instead.
If you see errors similar to Origin [origin] is not allowed by Access-Control-Allow-Origin, you can try making cross-origin requests.
Set loader.crossOrigin
to 'anonymous'
in your game config, or use this.load.setCORS('anonymous')
. But this doesn't guarantee the cross-origin request will succeed; the server hosting the asset also has to agree to share it.
If you're loading assets from the same origin (usually the same domain or server), don't set crossOrigin
.
No. All of Phaser's caches are global. Assets need to be loaded (only once) before they can be used, in any scene.
Bind to the loader's start
, progress
, and loadcomplete
events during the preload callback, or earlier.
Bind to the fileprogress
event.
Yes.
- Scale the object by the camera zoom; or
- Create a second camera and split your game objects between it and the main camera, using ignore (this is a bit of a pain); or
- Create a second scene atop the first.
Call pause or resume on each scene.
This is not a true game pause but the browser suspending the page, which necessarily halts the update loop.
Use the game events BLUR, FOCUS, HIDDEN, and VISIBLE to respond to these changes.
setTimeout calls may run as often as once per second while in the background, depending on the browser. Web Workers can run more frequently.
It chooses WebGL if the device appears to support it and Canvas otherwise.
In v3.15, pass a resolution
value larger than 1 in the game config.
Since v3.16, resolution
is unsupported.
Since v3.16, use the Scale Manager.
Set antialias: false
or pixelArt: true
in your game config. You don't need to set both.
Avoid scaling a Text object or the game canvas larger than 100%.
A scene is like a self-contained "world" within the game. Every game has at least one scene. If you've used preload()
, create()
, or update()
, then you've already used a scene.
In multi-scene games, a scene can be a "screen", a menu, a level, or a window.
- What is a Scene? etc. in Scenes guide part 1 in Phaser 3 Dev Log #119
- Scene Updating and Rendering etc. in Scenes guide part 2 in Phaser 3 Dev Log #121
- Let's talk about scenes
- Scenes summary
- Scenes examples (mostly technical demos)
- Play through Cavern Quest and watch the scenes panel.
- Within a scene's method hooks (init, preload, create, update),
this
is the scene itself. - If you define your own scene methods, call them as
this.method(…)
to keep the scene context. - If you pass a callback that uses
this
, you must also pass a callback context. Passthis
if you want to keep the scene context. - If you pass a callback that doesn't use
this
, you don't need to pass a callback context.
For simple games, yes. Most of the examples are written this way.
It depends, but if you want to pause it, start/restart it, or move it, it could be a scene.
this.scene.start('key')
stops the current scene and starts another (named by 'key'). Using only start, you can move through scenes one at a time.
launch, run, and switch are variations on start. They affect the calling scene differently.
this.scene.restart()
or this.scene.launch('key')
When you stop a scene, the scene's display and update lists are emptied and the game objects they contained are destroyed (unlinked). The scene systems (clock, input, physics, tweens) shut down and clear their own data and event handlers. The scene's own event handlers are not cleared. The scene becomes inactive and invisible, but it's still there, and it can be started again.
When you restart a scene, it's stopped and then started again, calling init()
, preload()
, and create()
.
Look at the error message and trace. You may be able to figure out which object or event handler is involved.
- Before restarting, remove any scene event handlers (
this.events
) that reference game objects. - Before restarting, reset your own state variables, if you have any.
- Avoid
setInterval()
andsetTimeout()
.
The add methods use ordered arguments and register the new object with scene.
The make methods use configuration objects and register the new object with the scene only if specified, or by default, depending on the method. You might always pass an add
/addToScene
value to avoid confusion.
Phaser 3's display list is flat (mostly), so there are no child sprites. It does have a special game object, Container, that applies transformations to its children (including other containers).
Blitters and particle managers act like simple containers for their children (bobs and particle emitters).
Yes.
Yes, only if that container is not in another container.
Yes, only if the mask source is not in the container.
No, but you can position children around (0, 0).
You can use the traditional ES5 form, the Phaser.Class helper, or ES6 classes.
The most common mistake is to add the instance to the scene incorrectly, or not at all. From the scene, you can call
this.add.existing( new ExtendedObject(this, /* ... */) );
or from the class
this.scene.add.existing(this);
For a physics-enabled game object, use the physics plugin's existing
method as well.
this.physics.add.existing( new ExtendedObject(this, /* ... */) );
When in doubt, imitate the factory method of the parent class. Make sure you're passing the parent constructor's arguments correctly.
You can also write your own factory method and call it, or register your game object with the plugin manager.
- Bind the method to the scene's
update
event (you must also unbind it!); or - Add the game object to a group and set the group's
runChildUpdate
; or - Use a plugin
If the game object has a preUpdate
method (such as a Sprite, but not an Image), you can override the preUpdate
method instead. Make sure you call the parent class's method as well.
Make an interactive game object and go from there. See Buttons in Phaser 3.
No.
No.
Arcade Physics is a simple, high-performance model. It uses only circular or rectangular shapes.
Impact Physics is similar. You'll probably use it only if you're already familiar with it (from ImpactJS).
Matter is a full-body physics engine.
Geometrically, no.
No.
Use the arguments in the collision callback.
blocked is a collision/overlap with the world bounds, a tile, or a static body.
touching is a collision/overlap between two bodies (dynamic or static), but not embedded.
embedded is a collision/overlap between two bodies where, on at least axis, both bodies aren't moving.
It's a visual artifact of normal WebGL rendering. Use a tool to extrude the tileset image.
Why do I get the warning The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page?
This is normal when using Phaser with Web Audio in Chrome. By itself it doesn't signify a problem. Phaser will automatically resume the audio context when the user clicks/taps. Sound may be muted before that, though.
If your game doesn't use sound, disable it and you won't see the warning:
new Phaser.Game({ audio: { noAudio: true } });
- Open the console. Read errors and warnings.
- Expand error stack traces. Find the last point your own code was involved.
- Break on exceptions. Examine values in the debugger.
- If the problem isn't in the paused function, step backwards through the call stack and find it.
- Don't use the minified script (
phaser.min.js
) during development; the traces are hard to read. Usephaser.js
instead.
Use Phaser's debugging tools:
- Arcade Physics debug
- Matter Physics debug
- renderDebug() for tilemap layers
- enableDebug() for input hit areas
Use a plugin:
- Debug Body Colors Plugin for Arcade Physics
- Debug Draw Plugin
- Scene Watcher Plugin
Check your code against Phaser's API documentation.
Use your browser's debugging tools. You don't have to use Chrome; most of these are similar across the main browsers.
A few tools can be especially helpful for games:
- Conditional breakpoints (especially Safari).
- Canvas inspector (Safari)
- Spector (Chrome, Firefox, WebGL only)
- Web Audio Editor (Firefox)
Cannot read property 'property' of undefined / undefined is not an object / undefined is not a function
You tried to read a property from an undefined value, which is impossible (undefined
has no properties).
You need to find the expression that evaluated to undefined. Firefox and Safari give more helpful error messages in this respect.
If this
is involved, you've likely made a scope error: either accessing an undefined scope (this === undefined) or a scope different from the object you're expecting (so missing the named property).
Help people help you. :)
Clearly describe your original problem, e.g., what you expect to happen and what happens instead. Remember only you know how your game is supposed to work and what it's supposed to look like.
Provide a runnable example or the minimal code to produce the problem.
If there is an error message, include the error message and trace.
I want to X but it doesn't work, by itself, is not a good way to ask for help.
Possibly:
- It's not clear what you're asking
- You haven't given enough information
- The code is too long/complex to assess
- People who know the answer haven't seen your question yet
Use your browser's Performance/Profile/Timeline tool to identify bottlenecks. Usually, you'll use the Bottom-Up view or sort by Self Time.
Generally, it depends, but try:
- Combine images into atlases/spritesheets
- Render same-texture and same-blend-mode objects consecutively (by keeping them adjacent on the display list)
- Reduce the use of nested Containers, complex Graphics, or Text
- Reduce texture dimensions
- Reduce game canvas dimensions
If the game slows consistently over a few seconds, you may have made a programming mistake, e.g.,
- drawing repeatedly to a Graphic without clearing it
- adding duplicate event handlers
On itch.io (cli) or GitHub Pages or Surge.
Node-based apps can be deployed on Heroku.