TITLE=Phaser ROUTE=/platforms/phaser LOCALE=hu MODIFIED=1792476547 URL=https://wiki.teletypegames.org/hu/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 A Phaser nyílt forráskódú HTML5 keretrendszer 2D játékokhoz, JavaScriptben/TypeScriptben. WebGL- és Canvas-renderelés, arcade és matter.js fizika, tweenek, részecskék, rengeteg plugin. Egy Phaser-játék egyszerű weboldal — nincs mit fordítani —, így a pipeline-ja a legegyszerűbb az összes motorunk közül. bWeboldal:0 https://phaser.io 1Tutorialok 1══════════ • 1iMaking your first Phaser 3 game • 2iPhaser 3 Examples • 3iPhaser 3 API Documentation • 4iPhaser by Example (ingyenes könyv) • 5iHTML5 Game Development mini-degree cikkek (Zenva) r────────────────────────────────────────────────────────────────────────────── 1Makefile 1════════ Nincs bundler, nincs cnode_modules0. A rögzített verziójú cphaser.min.js0 és a HTML-váz buildidőben töltődik le, a csrc/*.js0 fájlokat pedig bfájlnév szerinti bsorrendben0 fűzi össze egy cgame.js0-be — ha számít a betöltési sorrend, tegyél a fájlnevek elé számot. A repó csak a játékkódot tartalmazza. A sablonok a 6phaser-tools repóban vannak: másold az cexample-makefile.make fájlt cMakefile0 néven, és állítsd be a cPROJECT0 és cPHASER_VERSION0 értékeket. 2Változók 2──────── t┌────────────────┬─────────────────────────────┬─────────────────────────────┐ t│h Változó t│h Leírás t│h Alapérték t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cPROJECT0 t│0 A kimeneti fájlnevekben t│0 cphaserdemo0 t│ t│0 t│0 használt név t│0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cPHASER_VERSION0 t│0 A Phaser kiadás a t│0 c3.90.00 t│ t│0 t│0 jsDelivrről t│0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cSRC_DIR0 t│0 A játék forrásai t│0 csrc0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cDIST_DIR0 t│0 Exportált artifactok t│0 cdist0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cWEB_DIR0 t│0 Az összeállított webes t│0 cdist/web0 t│ t│0 t│0 csomag t│0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cVERSION_FILE0 t│0 Verziófájl a CI-hez t│0 c.version0 t│ t├────────────────┼─────────────────────────────┼─────────────────────────────┤ t│0 cINDEX_HTML_URL0 t│0 HTML-váz t│0 phaser-tools cweb/index.html0 t│ t└────────────────┴─────────────────────────────┴─────────────────────────────┘ 2Célok 2───── p make build # node --check a src/ minden fájljára p make web # phaser.min.js + index.html letöltése, a src/*» p .js összefűzése p make serve # a webes csomag a http://localhost:8000 címen » p (python3 http.server) p make export VERSION=1.0.0 # a dist/web/ phaserdemo-1.0.0.html.zip néven » p becsomagolva p make watch # újraellenőrzés a src/ alatti változásra (fswa» p tch kell hozzá) p make clean # a dist/ törlése 2VS Code 2─────── Másold az cexample-tasks.json0 fájlt c.vscode/tasks.json0 néven. Feladatok: bServe (alapértelmezett, cCmd+Shift+B0), bBuild Web0, bMake build0. 2Előálló artifactok 2────────────────── t┌──────────────────────────────┬─────────────────────────────────────────────┐ t│h Fájl t│h Leírás t│ t├──────────────────────────────┼─────────────────────────────────────────────┤ t│0 cdist/web/0 t│0 Webes csomag (index.html, phaser.min.js, t│ t│0 t│0 game.js) t│ t├──────────────────────────────┼─────────────────────────────────────────────┤ t│0 cphaserdemo-.html.zip0 t│0 Webes build t│ t└──────────────────────────────┴─────────────────────────────────────────────┘ 2Követelmények 2───────────── Csak helyben: cmake0, cgit0, cjq0, czip0, ccurl0, cnode0, a cmake serve0-höz cpython30, watch módhoz pedig cfswatch0. A CI-image-ek hozzák a saját eszközeiket. r────────────────────────────────────────────────────────────────────────────── 1Pipeline 1════════ A pipeline nincs benne a játékrepóban. A Woodpecker az update szervertől kéri el, a WarpEngine pedig a teljes konfigurációt a c/build/config0 végponton szolgálja ki (sablon: clib/warp_engine/ci/woodpecker/platforms/phaser/pipeline.yaml.erb0). A repóhoz három dolog kell: p # .woodpecker.yaml p platform: phaser p name: phaserdemo # csak akkor, ha a szoftvernév eltér a repó nevétől • cmetadata.json • az capplication_token0 Woodpecker-secret: egy WarpEngine ApplicationToken az cupdate0 + cupload0 jogosultságokkal A builder image-ek az update szerver cci_platforms0 konfigurációjából jönnek. A kiszolgált pipeline megtekintése: p curl "https://teletypegames.org/build/config?platform=phaser" 2Lépések 2─────── t┌────────────┬───────────────────────────────────────────────────────────────┐ t│h Lépés t│h Mit csinál t│ t├────────────┼───────────────────────────────────────────────────────────────┤ t│0 1. version t│0 a ctools0 image-ben (a teletypegames.org-on cci-tools0; nélküle t│ t│0 t│0 sima alpine-on): verzió a cmetadata.json0-ból, különben gitből t│ t├────────────┼───────────────────────────────────────────────────────────────┤ t│0 2. build t│0 a cphaser-builder0 image-ben (Node + make/zip/curl, a t│ t│0 t│0 phaser-tools cbuilder.Dockerfile0 fájljából): t│ t│0 t│0 szintaxisellenőrzés, a runtime és a váz letöltése, t│ t│0 t│0 összeállítás és becsomagolás t│ t├────────────┼───────────────────────────────────────────────────────────────┤ t│0 3. upload t│0 cPOST /build/upload0, cX-Update-Secret0 fejléccel t│ t├────────────┼───────────────────────────────────────────────────────────────┤ t│0 4. publish t│0 cPOST /build/publish?platform=phaser0 t│ t└────────────┴───────────────────────────────────────────────────────────────┘ 2Demóprojekt 2─────────── 7phaser-demo — animált „TELETYPE GAMES" hullámszöveg Phaser 3.90-en, ugyanaz a demó, mint az 8ebitengine-demo.