robertgirhiny.com - referenciak

A WebGL megjelenésével és azzal, hogy egyre több böngésző kezdte el támogatni ezt a technológiát, lehetőségem nyílt OpenGL tudásomat kipróbálni a webes környezetben. Ezért arra gondoltam, hogy a Diplomamunkámat továbbfejlesztem és átültetem webes környezetbe. Így született meg ez a program, amely a three.js keretrendszert is használja. A three.js keretrendszer megkönnyíti a WebGL beüzemelését és további hasznos részei is vannak, mint például a textúra betöltő vagy a shader betöltő.

Ahelyett, hogy írnék egy regényt arról, hogy miket és milyen technikákat használ a program, inkább nézzük meg a képeket vagy magát a programot, ami a cikk végén egy linken el is indítható.

Képek az alkalmazásról:

Figyelem a textúrákat meg kell várni még letölti a böngésző, ez eltarthat egy ideig. Továbbá érdemes egy modern böngészőt használni pl Google Chrome-ot.

A webes alkalmzást itt lehet elindítani.

Irányítás: Belekattintás után w,a,s,d +egér bal illetve jobb gomb a gyorsabb mozgáshoz.

A weboldalkészítés és a webes technológiák egyre jobban elkezdtek érdekelni, így magától értetődő volt, hogy készítek egy saját CMS rendszert. A rendszer megtervezésénél a legfontosabb szempont az volt, hogy felhasználóbarát legyen, hogy bárki tudja használni. Szerintem ezt sikerült megvalósítanom, mivel a kezelőfelület roppant egyszerű és az úgynevezett Interaktív Segéd (Copyright :) is nagyban megkönnyíti a rendszer használatát.

A rendszer főbb jellemzői:

• Teljesen egyedi fájlkezelő rendszer (feltöltés, letöltés, fájlok és mappák mozgatása, törlése átnevezése, zip fájlok kezelése, kép és dokumentum nézegető)
• Egyszerűen használható szövegszerkesztő a cikkek írásához
• A cikkekbe a multimédia tartalmak könnyű beágyazása előnézeti ablakkal
• A weboldal tartalmának egyszerű kezelése, blokkok áthelyezése
• Beépülő modulok: chat, eseménynaptár, infobox, stb.

A CMS rendszer a Laravel keretrendszer fölé épült. Több információt viszont nem szeretnék róla leírni, állásinterjún szívesen mutatok belőle részleteket.

Képek a rendszerről:

A fájlkezelő akcióban:

A lenti listában a weboldalak design tervezetét és az elkészült weboldalról egy screenshot is lehet látni az oldalra mutató linkkel. A design és a végleges verzió közötti eltérést az utólagos egyeztetések/variálások okozzák. Ha szükséges pixelpontosan is el tudom készíteni a design tervezetet.

Minden weboldal reszponzív, mobilbarát.

Baktalórántházi Reguly Antal Általános Iskola weboldala

 

A rák ellen, az emberért, a holnapért! Társadalmi alapítvány weboldala

 

Móricz Zsigmond Magyar Angol Kéttannyelvű Általános Iskola weboldala

 

A CreateJS szintén egy HTML5/javascript keretrendszer amit egy játék elkészítésének erejéig leteszteltem. A játékot teljes mértékben órán a diákok előtt készítettem. Az oktatásba lehetőség szerint mindig belecsempésztem a legújabb technológiákat trendeket, hogy a diákok naprakész tudást szerezzenek. Amikor ezt a játékot írtuk a HTML5 akkor kezdett kibontakozni.

Játék tulajdonságai:

• 100 pálya
• Egyedi ellenségek
• Az ellenségeknek különböző textúrái és mozgásvilágai vannak
• Többféle fegyver
• A játékterület reszponzív

Képek a játékról:

A játék itt indítható el.

A flashes Zombie Strike játék újragondolva HTML5/JavaScript nyelven phaser keretrendszerrel megvalósítva. Maga a phaser keretrendszer egy zseniálisan egyszerűen használható grafikus 2D engine. Rengeteg tutorial és segítség található hozzá, csak ajánlani tudom. Rengeteg komoly dolgot levesz az ember válláról és így már csak magára a játékfejlesztésre kell koncentrálni.

A játékmenet igazából még nincs leprogramozva. Az egész csak azért készült, hogy teszteljem a phaser keretrendszer lehetőségeit. Továbbá a kód egy részét előadáson írtam, hogy a diákok belelássanak picit a játékfejlesztés szépségeibe.

A játék tulajdonságai:

• tilemap
• ütközésdetektálás
• light scattering
• lángszóró
• sok sok zombi
• teljesképernyős mód

Képek a játékból:

Figyelem! Az alábbi animáció 10Mb! Lehet sokáig fogja tölteni.

A játék itt próbálható ki.

Az első HTML5-ös Canvas játék alkalmazásom. Elkészítésekor nem akartam semmilyen keretrendszert használni, még jquery-t sem. Tisztán javascriptben íródott. Amennyire lehetett javascriptben annyira OOP-ben van felépítve. Maga a játékterület reszponzívan alkalmazkodik a böngésző méretéhez átméretezéskor is.

Játékmódok:

• egy játékos (irányítás: fel, le, balra, jobbra nyilak)
• két játékos (2. játékos irányítása: w, a, s, d)
• gép magában játszik
• két gép egymás ellen játszik
• egy játékos egy gép ellen játszik

Kép a játékról:

A játékot itt lehet kipróbálni.

A forráskód innen tölthető le