Moving from Phaser 2 to 3

phaser-2-to-3.md

Moving from Phaser 2 → 3: an incomplete guide

Summary

• I found that the best thing was to ask myself what this or that line was meant to accomplish, and then to search labs.phaser.io for a Phaser 3 example of that task.
• Usually the issue is just that a function has moved, or some property now requires a setter.
• There's a real migration guide here: part 1, part 2

Scenes have replaced states (and the game object… mostly)

• the default camera is now scene.cameras.main, not game.camera
  • 🕹️ Camera\Origin
• factories are part of the scene: game.add(x) → scene.add(x)
• game.world.bringToTop(x) → scene.children.bringToTop(x)

Animations now belong to a global animation manager

• they must be created (using .create) before they're added
  • 🕹️ Reverse Animation
• changing the frame for a sprite requires sprite.setFrame(x)
  • in fact, sprite.frame = x will break rendering for that sprite

No more sprite.exists

• sprite.exists = x → sprite.setActive(x)
  • or sprite.setVisible(x), depending on what you're trying to accomplish

Turn retrofonts into bitmapfonts

• retrofonts are gone as a first-class thing
• instead use RetroFont.Parse on a config object to create a bitmapfont and add that.
  • 🕹️ Retro Text 1

Changes to load.tilemap

• game.load.tilemap(key, url, null, Phaser.Tilemap.TILED_JSON) → scene.load.tilemapTiledJSON(key, url)
• AFAICT, the ability to pass an already-loaded json tilemap (i.e. the third argument to load.tilemap) is gone. I had to let Phaser fetch my tilemaps, which in turn meant having Webpack treat them as "data" files and not JS. The procedure for that is annoyingly nonobvious.

New top-level namespaces

• e.g. Phaser.Rectangle → Phaser.Geom.Rectangle