TITLE=Phaser ROUTE=/platforms/phaser LOCALE=en MODIFIED=1792476547 URL=https://wiki.teletypegames.org/platforms/phaser L=1 https://phaser.io/tutorials/making-your-first-phaser-3-game L=2 https://phaser.io/examples L=3 https://newdocs.phaser.io/docs/3.90.0 L=4 https://phaser.io/news/2024/04/phaser-by-example-book L=5 https://gamedevacademy.org/category/tutorials/phaser-tutorials/ L=6 https://git.teletypegames.org/build/phaser-tools L=7 https://git.teletypegames.org/demos/phaser-demo L=8 #58 Phaser is an open source HTML5 framework for 2D games, written in JavaScript/TypeScript. WebGL and Canvas rendering, arcade and matter.js physics, tweens, particles, many plugins. A Phaser game is a plain web page — nothing to compile — so its pipeline is the simplest of all our engines. bWebsite:0 https://phaser.io 1Tutorials 1═════════ • 1iMaking your first Phaser 3 game • 2iPhaser 3 Examples • 3iPhaser 3 API Documentation • 4iPhaser by Example (free book) • 5iHTML5 Game Development mini-degree articles (Zenva) r────────────────────────────────────────────────────────────────────────────── 1Makefile 1════════ No bundler, no cnode_modules0. The pinned cphaser.min.js0 and the HTML shell are downloaded at build time, and csrc/*.js0 is concatenated bin filename order0 into cgame.js0 — prefix files with numbers when load order matters. The repo holds game code only. Templates are in 6phaser-tools: copy cexample-makefile.make0 to cMakefile0, set cPROJECT0 and cPHASER_VERSION0. 2Variables 2───────── t┌────────────────┬─────────────────────────────┬─────────────────────────────┐ t│h Variable t│h Description t│h Default t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cPROJECT0 t│0 Name used in output t│0 cphaserdemo0 t│ t│0 t│0 filenames t│0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cPHASER_VERSION0 t│0 Phaser release from t│0 c3.90.00 t│ t│0 t│0 jsDelivr t│0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cSRC_DIR0 t│0 Game sources t│0 csrc0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cDIST_DIR0 t│0 Exported artifacts t│0 cdist0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cWEB_DIR0 t│0 Assembled web bundle t│0 cdist/web0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cVERSION_FILE0 t│0 Version file for CI t│0 c.version0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cINDEX_HTML_URL0 t│0 HTML shell t│0 phaser-tools cweb/index.html0 t│ t└────────────────┴─────────────────────────────┴─────────────────────────────┘ 2Targets 2─────── p make build # node --check on every file in src/ p make web # download phaser.min.js + index.html, concat s» p rc/*.js p make serve # web bundle on http://localhost:8000 (python3 » p http.server) p make export VERSION=1.0.0 # dist/web/ zipped as phaserdemo-1.0.0.html.zi» p p p make watch # re-check on change under src/ (needs fswatch) p make clean # remove dist/ 2VS Code 2─────── Copy cexample-tasks.json0 to c.vscode/tasks.json0. Tasks: bServe0 (default, cCmd+Shift+B0), bBuild Web0, bMake build0. 2Generated artifacts 2─────────────────── t┌───────────────────────────────┬────────────────────────────────────────────┐ t│h File t│h Description t│ t├───────────────────────────────┼────────────────────────────────────────────┤ t│0 cdist/web/0 t│0 Web bundle (index.html, phaser.min.js, t│ t│0 t│0 game.js) t│ t├───────────────────────────────┼────────────────────────────────────────────┤ t│0 cphaserdemo-.html.zip0 t│0 Web build t│ t└───────────────────────────────┴────────────────────────────────────────────┘ 2Requirements 2──────────── Local only: cmake0, cgit0, cjq0, czip0, ccurl0, cnode0, cpython30 for cmake serve0, and cfswatch0 for watch mode. CI images bring their own tools. r────────────────────────────────────────────────────────────────────────────── 1Pipeline 1════════ The pipeline is not in the game repo. Woodpecker asks the update server, and WarpEngine serves the whole config from c/build/config0 (template clib/warp_engine/ci/woodpecker/platforms/phaser/pipeline.yaml.erb0). The repo needs three things: p # .woodpecker.yaml p platform: phaser p name: phaserdemo # only when the software name differs from the repo name • cmetadata.json • the capplication_token0 Woodpecker secret: a WarpEngine ApplicationToken with cupdate0 + cupload0 scopes Builder images come from the update server's cci_platforms0 config. Preview the served pipeline: p curl "https://teletypegames.org/build/config?platform=phaser" 2Steps 2───── t┌────────────┬───────────────────────────────────────────────────────────────┐ t│h Step t│h What it does t│ t├────────────┼───────────────────────────────────────────────────────────────┤ t│0 1. version t│0 in the ctools0 image (cci-tools0 on teletypegames.org; plain t│ t│0 t│0 alpine without one): version from cmetadata.json0, else git t│ t├────────────┼───────────────────────────────────────────────────────────────┤ t│0 2. build t│0 in the cphaser-builder0 image (Node + make/zip/curl, from t│ t│0 t│0 cbuilder.Dockerfile0 in phaser-tools): syntax check, download t│ t│0 t│0 the runtime and shell, assemble and zip t│ t├────────────┼───────────────────────────────────────────────────────────────┤ t│0 3. upload t│0 cPOST /build/upload0, cX-Update-Secret0 header t│ t├────────────┼───────────────────────────────────────────────────────────────┤ t│0 4. publish t│0 cPOST /build/publish?platform=phaser0 t│ t└────────────┴───────────────────────────────────────────────────────────────┘ 2Demo project 2──────────── 7phaser-demo — animated "TELETYPE GAMES" wave text on Phaser 3.90, the same demo as 8ebitengine-demo.