Online playground for Phaser

[hatemhosny]

LiveCodes now has a starter template for Phaser:
https://livecodes.io/?template=phaser

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: https://livecodes.io/?new

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).

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

• Phaser sandbox: https://livecodes.io/?x=id/ivdyq3paeat
  (based on https://phaser.io/sandbox/XyqPcjNr)
• TypeScript template: https://livecodes.io/?x=id/5qytr8rbf6q
  (based on https://github.com/phaserjs/template-vite-ts)
• React TypeScript template: https://livecodes.io/?x=id/26duem5v9k5&view=result
  (based on based on https://github.com/phaserjs/template-react-ts)
• Vue TypeScript Template: https://livecodes.io/?x=id/bnwer5asbwd&view=result
  (based on https://github.com/phaserjs/template-vue-ts)
• Solid Template: https://livecodes.io/?x=id/dw86rx8ckn9&view=result
  (based on https://github.com/phaserjs/template-solid)

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:

• shared (see examples above)
• exported (e.g. GitHub gist)
• deployed (to GitHub Pages): e.g. https://hatemhosny.github.io/phaser-demo/

LiveCodes also has a guide for adding assets: https://livecodes.io/docs/features/assets

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.

Thank you.