Online playground for Phaser

Showcase
1

LiveCodes now has a starter template for Phaser:

image
image2239×1093 366 KB

LiveCodes is a feature-rich, open-source, client-side, code playground that supports 90+ languages and frameworks. The announcement post gives a general overview and you can find here what makes LiveCodes different.

Check starter templates: LiveCodes

npm modules are automatically loaded (from CDNs) when imported in code (with typescript type definitions) without any npm installs. No bundling is needed. Type definitions provide great editor features like auto-completions and show info on hover even when using JS (TS is obviously also supported).

image
image1121×651 39.1 KB

These are examples for the official starter templates running in LiveCodes:

LiveCodes is a client-side app, with no backend. All processing (including compilation, code formatting, running tests and automatic loading of modules and types) occurs in the browser. This allows LiveCodes to be totally free for unlimited usage with no account required. It also allows self-hosting on any static file server.

Projects can be:

image
image2239×1100 333 KB

LiveCodes also has a guide for adding assets: Assets | LiveCodes

Playgrounds can be embedded in any webpage, using a powerful, yet easy-to-use, SDK.

This is an example for an embedded playground: (open in LiveCodes)

<h1>Phaser Demo</h1>

<div id="container" style="height: 500px"></div>

<script type="module">
import { createPlayground } from "https://unpkg.com/livecodes";

const options = {
  config: {
    mode: "simple",
    // layout: "vertical",
    activeEditor: "script",
    editor: "monaco",
    tools: {
      status: "none",
    },
    script: {
      language: "js",
      content:
        "import * as Phaser from 'phaser';\n\nclass Example extends Phaser.Scene {\n  constructor() {\n    super();\n  }\n\n  preload() {\n    this.load.setBaseURL('https://labs.phaser.io');\n\n    this.load.image('sky', 'assets/skies/space3.png');\n    this.load.image('logo', 'assets/sprites/phaser3-logo.png');\n    this.load.image('red', 'assets/particles/red.png');\n  }\n\n  create() {\n    this.add.image(400, 300, 'sky');\n\n    const particles = this.add.particles(0, 0, 'red', {\n      speed: 100,\n      scale: { start: 1, end: 0 },\n      blendMode: 'ADD',\n    });\n\n    const logo = this.physics.add.image(400, 100, 'logo');\n\n    logo.setVelocity(100, 200);\n    logo.setBounce(1, 1);\n    logo.setCollideWorldBounds(true);\n\n    particles.startFollow(logo);\n  }\n}\n\nconst config = {\n  type: Phaser.AUTO,\n  width: 800,\n  height: 600,\n  physics: {\n    default: 'arcade',\n    arcade: {\n      gravity: { y: 200 },\n    },\n  },\n  parent: 'game-container',\n  scene: Example,\n  autoFocus: false,\n};\n\nconst game = new Phaser.Game(config);\n",
    },
    markup: {
      language: "html",
      content: '<div id="app">\n  <div id="game-container"></div>\n</div>\n',
    },
    style: {
      language: "css",
      content: 'body {\n  margin: 0;\n  padding: 0;\n  color: rgba(255, 255, 255, 0.87);\n  background-color: #000000;\n}\n\n#app {\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n',
    },
  },
};
createPlayground("#container", options);
</script>

The SDK is also available for react, vue and svelte.

In addition, the SDK allows communication with the embedded playgrounds using multiple methods (e.g. set/get code or config, watch for code change or console output, run tests and get results, etc)

This allows making interactive tutorials. See the blog post: Let’s Make an Interactive Coding Tutorial

LiveCodes is mobile friendly, has responsive (vertical vs horizontal) layout and supports multiple code editors: the powerful Monaco editor on desktop and the lighter-weight, touch-friendly codemirror6 on mobile. There are also light and dark modes.

I believe this can make it easier for more people to try Phaser and get started.

Disclosure: I’m the author of LiveCodes.

(also posted on GitHub discussions)
Thank you.