Navigate / search

S1E13: Hogyan írjunk online játékot?

Egy hónappal ezelőtt Balázstól kaptunk egy igen érdekes kérdést: böngészős játékot szeretne írni.

Kedves Balázs! A böngészős játék írása talán a legtöbbet kérdezett, ám legkevesebbet megválaszolt kérdés a szakmai körökben. Műszakilag rengeteg minden kell hozzá, éppen ezért nem kis fába vágod a fejszédet. A kérdésedet annyira jónak éreztük, hogy szeretnénk megajándékozni a Javascript – The Definitive Guide című könyvvel és projektedhez sok sikert kívánunk.

Kezdjük a könnyű részével. A játékvilág ábrázolásához sokan az úgynevezett izometrikus látásmódot választják, ugyanis az ilyen játékelemeket még közepes rajztudással is meglehetősen egyszerű elkészíteni. Ebben az ábrázolásban két dimenziós alkotóelemeket rajzolunk, majd helyezünk egymásra. Ezek a spriteok.

A spriteok elkészítéséhez két képzeletbeli vonalat rajzolunk fel, amik a vízszintessel körülbelül 30 fokos szöget zárnak be. Az spriteok vonalai pedig egymással teljesen párhuzamosak, nem közelítenek egymáshoz, mint egy valódi 3D nézetben.

Amikor a teljes képet rajzoljuk, először rajzoljuk a hátrébb lévő elemeket, majd erre rá az előbb lévőeket. Természetesen egy játékmezőn belül is használhatunk több sprite-ot, amely esetben el kell tárolnunk a spriteok sorrendjét.

Nade, nézzük, hogyan is néz ki ez a gyakorlatban.

Természetesen a játékmotor nem fogja ilyen változatosan leszórni az elemeket, hanem mindig szigorúan hátulról előre haladva dolgozik. Szerencsére ezzel vajmi kevés dolgunk lesz, hiszen kész játékmotorok egész hada várja, hogy bevessük őket. Ezekről egy igen kiváló áttekintést nyújt a html5gameengine.com oldal. Itt nem csak izometrikus játékok készítésére alkalmas motorokat találunk, hanem többek között WebGL-t támogatókat is. Ilyen például a HelloRun alatt futó three.js is.

Ha választottunk frontend game enginet, ideje rátérni a backendre. A technológia kiválasztásánál körültekintően kell eljárni, a játékműködéstől függően nagyon különböző megoldásokra lehet szükségünk.

Az olyan nyelvek mint a PHP jók, ha hagyományos alkalmazásokat kell írnunk, viszont egy játék alatt hamar elvérezhetnek. Első játékként mindenképpen próbáljunk meg olyat készíteni, ami nem alapul két játékos közötti közvetlen interakción. Példaként megnézhetjük a temérdek Travian-klón egyikét, ahol a támadások ütemezve zajlanak le, előre tudható, hogy mikor kell feldolgozni a támadás eseményét.

Kezdetben itt elegendő lesz egyetlen feldolgozó szál, ami percenként fut. Ezt akár a rendszer crontabjából is el tudjuk indítani és feldolgozzuk az aktuális feladatokat. Egyetlen dologra kell csak figyelnünk, hogy a feldolgozó szál zárolja saját magát, ne tudjon véletlenül kettészer elindulni párhuzamosan. A későbbieben, ha szükség lesz rá, bővíthetjük a kapacitást és beüzemelhetünk egy úgynevezett queue rendszert is.

Ha olyan játékot írunk, amihez közel valós időben kell reagálni, akkor a HTTP protokoll helyett érdemes megfontolni a Websocketek használatát. NodeJS-sel és socket.io-val néhány milliszekundumos késleltetéssel tudunk üzeneteket eljuttatni az egyik játékostól a másikhoz. A NodeJS egy további előnnyel is rendelkezik: JavaScriptben írhatunk szerver oldali programokat.

Hogy ne csak elméletről legyen szó, készítettünk egy pici minta játékot a Phaser nevű keretrendszer segítségével. A forráskód mintegy 140 sornyi JavaScriptből áll és a github.com/webtudor/s1e13 oldalon érhető el tanulmányozásra.

Végezetül, de nem utolsó sorban szóljunk az üzleti modellról is. A böngészős játékok elég erőforrás-igényesek tudnak lenni, ezért egy közönséges webtárhely valószínűleg nem sokáig elegendő. Innentől kezdve pedig megugranak a játék üzemeltetésével kapcsolatos költségek is, tehát bevételre van szükség. Ráadásul abban a szerencsétlen helyzetben vagy, hogy a piac szép lassan telítődik és a játékosok már nem hajlandóak belemenni az olyan játékokba, amelyeknél fizetés nélkül óránként vissza kell jönni és etetni a tamagocsit. Éppen ezért érdemes vagy nagyon kicsi és nem erőforrásigényes játékot írni, vagy jól átgondolni, hogy miből kerül finanszírozásra a projekt.

Köszönjük Balázsnak ezt a kiváló kérdést. Ha Neked is van kérdésed és fel szeretnéd tenni, látogass el a webtudor.net/kerdesek weboldalra.