--- title: Phaser url: 'https://wiki.teletypegames.org/hu/platforms/phaser' markdown: 'https://wiki.teletypegames.org/hu/platforms/phaser.md' lang: hu date: '2026-07-31' description: '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…' taxonomy: tag: - howto --- # Phaser 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. **Weboldal:** https://phaser.io # Tutorialok - [*Making your first Phaser 3 game*](https://phaser.io/tutorials/making-your-first-phaser-3-game) - [*Phaser 3 Examples*](https://phaser.io/examples) - [*Phaser 3 API Documentation*](https://newdocs.phaser.io/docs/3.90.0) - [*Phaser by Example (ingyenes könyv)*](https://phaser.io/news/2024/04/phaser-by-example-book) - [*HTML5 Game Development mini-degree cikkek (Zenva)*](https://gamedevacademy.org/category/tutorials/phaser-tutorials/) --- # Makefile Nincs bundler, nincs `node_modules`. A rögzített verziójú `phaser.min.js` és a HTML-váz buildidőben töltődik le, a `src/*.js` fájlokat pedig **fájlnév szerinti sorrendben** fűzi össze egy `game.js`-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 [phaser-tools](https://git.teletypegames.org/build/phaser-tools) repóban vannak: másold az `example-makefile.make` fájlt `Makefile` néven, és állítsd be a `PROJECT` és `PHASER_VERSION` értékeket. ## Változók | Változó | Leírás | Alapérték | |---|---|---| | `PROJECT` | A kimeneti fájlnevekben használt név | `phaserdemo` | | `PHASER_VERSION` | A Phaser kiadás a jsDelivrről | `3.90.0` | | `SRC_DIR` | A játék forrásai | `src` | | `DIST_DIR` | Exportált artifactok | `dist` | | `WEB_DIR` | Az összeállított webes csomag | `dist/web` | | `VERSION_FILE` | Verziófájl a CI-hez | `.version` | | `INDEX_HTML_URL` | HTML-váz | phaser-tools `web/index.html` | ## Célok ```sh make build # node --check a src/ minden fájljára make web # phaser.min.js + index.html letöltése, a src/*.js összefűzése make serve # a webes csomag a http://localhost:8000 címen (python3 http.server) make export VERSION=1.0.0 # a dist/web/ phaserdemo-1.0.0.html.zip néven becsomagolva make watch # újraellenőrzés a src/ alatti változásra (fswatch kell hozzá) make clean # a dist/ törlése ``` ## VS Code Másold az `example-tasks.json` fájlt `.vscode/tasks.json` néven. Feladatok: **Serve** (alapértelmezett, `Cmd+Shift+B`), **Build Web**, **Make build**. ## Előálló artifactok | Fájl | Leírás | |---|---| | `dist/web/` | Webes csomag (index.html, phaser.min.js, game.js) | | `phaserdemo-.html.zip` | Webes build | ## Követelmények Csak helyben: `make`, `git`, `jq`, `zip`, `curl`, `node`, a `make serve`-höz `python3`, watch módhoz pedig `fswatch`. A CI-image-ek hozzák a saját eszközeiket. --- # Pipeline 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 `/build/config` végponton szolgálja ki (sablon: `lib/warp_engine/ci/woodpecker/platforms/phaser/pipeline.yaml.erb`). A repóhoz három dolog kell: ```yaml # .woodpecker.yaml platform: phaser name: phaserdemo # csak akkor, ha a szoftvernév eltér a repó nevétől ``` - `metadata.json` - az `application_token` Woodpecker-secret: egy WarpEngine ApplicationToken az `update` + `upload` jogosultságokkal A builder image-ek az update szerver `ci_platforms` konfigurációjából jönnek. A kiszolgált pipeline megtekintése: ```sh curl "https://teletypegames.org/build/config?platform=phaser" ``` ## Lépések | Lépés | Mit csinál | |---|---| | 1. version | az engine közös lépése (a WarpEngine 1.7 óta): a verzió a `metadata.json`-ból; tagnél a verziótagnek egyeznie kell vele; a repó alapágán kívül és egy `dev-<ág>` tagen `dev--<ág>`, verzió nélkül `dev-`; megírja a `.version` fájlt | | 2. build | a `phaser-builder` image-ben (Node + make/zip/curl, a phaser-tools `builder.Dockerfile` fájljából): szintaxisellenőrzés, a runtime és a váz letöltése, összeállítás és becsomagolás | | 3. upload | **csak tagre:** `POST /build/upload`, `X-Update-Secret` fejléccel | | 4. publish | **csak tagre:** `POST /build/publish?platform=phaser` | | 5. tag | az engine közös lépése (a WarpEngine 1.9 óta), **csak push után**: a forrás új verziója megkapja a `v` tagjét, és annak pipeline-ja futtatja a *csak tagre* jelölt lépéseket; egy már tagelt verzió nem ad ki semmit; egy dev build az ág `dev-<ág>` tagjét a commitra helyezi, így mindig a legfrissebb dev build van kiadva. Lásd: *Verziók és kiadások* a [WarpEngine](https://wiki.teletypegames.org/hu/engines/warp-engine) oldalon | A verzió emelése maga a kiadás: a push buildel és tagel, a tag pipeline-ja tölt fel és publikál (WarpEngine 1.9). Egy push, amely nem emeli a verziót, csak buildel. ## Demóprojekt [phaser-demo](https://git.teletypegames.org/demos/phaser-demo) — animált „TELETYPE GAMES" hullámszöveg Phaser 3.90-en, ugyanaz a demó, mint az [ebitengine-demo](https://wiki.teletypegames.org/hu/platforms/ebitengine). '; var prevLevel = 2; for (var i = 0; i < headings.length; i++) { var h = headings\[i\]; var text = h.textContent.trim(); var slug = text.toLowerCase() .replace(/\[áàâä\]/g,'a').replace(/\[éèêë\]/g,'e').replace(/\[íìîï\]/g,'i') .replace(/\[óòôöő\]/g,'o').replace(/\[úùûüű\]/g,'u') .replace(/\[^a-z0-9\]+/g, '-').replace(/^-|-$/g, ''); if (!slug) slug = 'heading-' + i; if (used\[slug\]) { slug += '-' + i; } used\[slug\] = true; h.id = slug; var level = parseInt(h.tagName.charAt(1)); var cls = level > 2 ? ' class="toc-child"' : ''; html += '- [' + text + '](#'%20+%20slug%20+%20') '; } html += ' '; toc.innerHTML = html; // Scroll-spy: highlight current heading var links = toc.querySelectorAll('a'); var ids = \[\]; for (var j = 0; j < links.length; j++) ids.push(links\[j\].getAttribute('href').slice(1)); function updateActive() { var current = ''; for (var k = 0; k < ids.length; k++) { var el = document.getElementById(ids\[k\]); if (el && el.getBoundingClientRect().top <= 80) current = ids\[k\]; } for (var m = 0; m < links.length; m++) { links\[m\].parentNode.classList.toggle('active', links\[m\].getAttribute('href') === '#' + current); } } window.addEventListener('scroll', updateActive, { passive: true }); updateActive(); })(); --- ## Navigation - Parent: [Platformok](https://wiki.teletypegames.org/hu/platforms.md) - Previous: [Löve](https://wiki.teletypegames.org/hu/platforms/love.md) - Next: [Commodore Plus/4](https://wiki.teletypegames.org/hu/platforms/plus4.md)