Phaser

This example uses Phaser 3.90 and the VNLE JavaScript player. It shows the same story in a Phaser scene, including portrait, choices, inventory and saved games.

Play the Phaser example · Download the web examples

Run locally

1. Extract the ZIP. Open the extracted folder in Visual Studio Code.
2. Install the Live Server extension by Ritwick Dey. Right-click examples/phaser/index.html and choose Open with Live Server.
3. Your browser opens the game. Choose Talk to Mira, Continue and the purchase reply. Files are loaded through the local web server; do not open the HTML file by double-clicking it.

Understand the files

examples/phaser/index.html  Page and Phaser library
examples/phaser/game.mjs    Scene, buttons, inventory, portrait
examples/phaser/phaser.min.js Phaser 3.90
examples/harbour/vnle-player.mjs VNLE player
examples/harbour/story.json Story data
examples/harbour/guide-map.json Example IDs
examples/harbour/assets/    Images

Connect it to your Phaser game

game.mjs loads story.json and guide-map.json in preload. create sets up the player. draw updates the UI. Continue calls player.next(); answer buttons call player.choose(id). Start by using this scene. Then replace the inventory list in onCommand with your inventory system.

Use a conversation state in your game: pause movement when starting, then hide dialogue controls and enable movement when finished. Next, adapt colors and positions in draw and create to your game UI.

Player calls and game actions