WebGL teszt (diplomamunkám átirata webre)

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.

 

 

Saját tartalomkezelő rendszerem

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:

 

 

Weboldalak, amiket én készítettem

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

 

 

 

Bővebben

Űrhajós CreateJS Game

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.

 

 

 

Zombie Strike Phaser Game

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.

 

HTML5 snake

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

 

2019 © Robert Girhiny