online Gomoku

Pár hete készült el a gomoku nevű (magyarul ötödölő vagy amőba, kinek hogy tetszik) játékom. Ezzel kapcsolatban íródik a mostani poszt. A technikai alapokról osztok meg néhány gondolatot.

Felületről megközelítve CSS3 és SVG(Raphael) technológiákról beszélhetünk, míg szerver oldalról természetesen :) egy PHP szerver biztosítja a kliensek közti kommunikációt (WebSocket). A PHP-ban íródott alkalmazásszerver jelenleg 100 játékosra van kofigurálva, a játékosok belépéskor azonosítókat kapnak. Az azonosító és megadott kóddal "fejlécezett" üzenetekkel kommunikálnak a szerverrel oda-vissza. Amikor egy játékos a felületen lép egyet, akkor a szervernek elküldi a lépést azonosító üzenet kódot és a lépés x, y koordinátáját. Ezt az üzenetet a szerver megkapja, majd elküldi a megfelelő játékosnak, aki az üzenetet küldő fél ellenfele.

A design nem saját, kölcsönöztem, míg a szerver alacsonyabb szint kódjáért a phpwebsocket google code-on hosztolt kód a felelős. A teszt verziót itt érhetitek el. Leginkább Chrome-ban próbálkozzatok vele, Fx4-ben a websocket le van tiltva (Fx5-6-ot ezidáig még nem próbáltam ki, így arról nem tudok nyilatkozni). (Amennyiben nincs a szerveren játékos, de ki szeretnétek próbálni, egyszerűen nyissatok még egy tabot neki.)

Belépéskor

Játék vége, győztesként

A játék a html5games.com-on

Websocket, hobbi projekt

Egészséges szünet után egy tavaly év végi hobbi projekt alfa verzióját szeretném bemutatni nagyon röviden. Ez egy 2D-s felülnézetes böngészőben játszható deathmatch játék. Célja egyelőre lepuffantani a többi játékost. Az irányítás WASD, egérrel pedig a pozíciót tudjuk kijelölni amerre haladni/lőni szeretnénk. Beépítettem egy apró chat modult, van frag lista is, hogy az akutális állást követni tudjuk. Lényegében ennyi lenne röviden.

Technikai oldalról a megjelenés SVG segítségével jött létre, a hálózati kommunikáció pedig WebSocket-es egy PHP szerverre alapozva. Böngészők terén Chrome vonal, azon belül is a 8as verziótól felfelé leginkább. Firefox 4 is szóba jöhet, de Chrome-on kb. 5x-ös sebességgel fut.

A gyönyörű lövés effekt :)

Frag list

A szerver futás közben, egyelőre nagyon beszédes :)

Ui.: Hamarosan közzéteszem a kódokat is.

my html 5 video v1.0

Egy friss reggeli debuggolás után elkészült a HTML 5 video tag-et bemutatni kívánó mini-alkalmazásom. Az alap vezérlések implementálása után bekerült némi SVG filter (továbbiakban szűrő) támogatás és leginkább hibajavítás zajlott.

A dolog lényegében arról szól, hogy a jobb oldali videok közül lehetőségünk van egyet kattintással kiválasztani. A választott video ezután betöltődik a fő video helyére és innen lehetőségünk van a lejátszásra.

Jobb oldalon a választható videokon egy fekete-fehér és blur szűrő van, ezenkívül egy apró CSS3 transzformáció (forgatás).

A nagyméretű videon lehetőség van szűrő hozzáadására, ezeket 1-8-as billentyűkkel hívhatjuk elő, a 0-s gomb lenyomásával pedig megvonjuk a szűrőt a video-tól.

A design hagy némi kívánni valót maga után és nem vagyok a kliens oldal nagy guruja sem, így az esetleges ronda megoldásokért elnézést kérek :). De talán arra megfelelő az oldal, hogy az egyszerűbb video taggal kapcsolatos újdonságok egy részét megmutassa.

A szűrők megvalósítása SVG alatt rendkívül egyszerű. Aki foglalkozott képfeldolgozással az pedig tudja, hogy azért komolyabb kód rejlik az egy soros blur mögött. Szűrők használatával nagyszerű dolgokat lehet véghezvinni, hiszen akár konvolúciós mátrix megalkotására is van lehetőségünk, de ott vannak az eróziós és dilatációs szűrők is, tehát lehet csemegézni.

Fontos megjegyeznem, hogy az (nagy túlzással) alkalmazás csakis az éjszakai rókával hajlandó elköhögni és nem böngészőfüggetlen. Abból is a Minefield/4.0b3pre verzión folyton lehalt, de a legújabb Minefield/4.0b5pre rc már gond nélkül viszi (az okok után nem kutattam).

Kicsit utánajártam a teljes képernyős video módnak. A Firefox 3.6.x-től jobb gombra már elő lehet hívni a funkciót, 3.5.x-re pedig add-on van. De nem ilyen egyszerű a történet, mert ahogy én is tapasztaltam Windows-on a teljes képernyőben lejátszás elég "zizis". Akit bővebben érdekel a teljes képernyős üzemmód, a linkek közt találhat némi érdekeset.

Az alkalmazást itt érhetitek el: link







Linkek:

• Firefox Nightly Builds
• Fullscreen for HTML5 Video element
• Hardware accelerating Firefox
• Safari Fullscreen
• api for fullscreen()
• HTML 5 video konvertálók

Felhasznált források:

• Using audio and video in Firefox
• NsIDOMHTMLMediaElement
• RaphaelJS
• SVG filter spec
• Paul Irish a szűrőkről

my html 5 video v0.5

Fent látható az általam készített HTML5 video lejátszónak az első verziója. A felületet SVG-vel húztam a videora, így az alap vezérlés el van rejtve a felhasználó elől. Még akadnak kisebb hibák és a design sem a legjobb - tegyük hozzá, hogy nem erősségem a design. A teljes képernyős mód most még hiányzik, később amikor már kiforrottabb lesz lehet, hogy visszatérek rá.

Featurelist: (alap vezérlések implementálva)
-------------------------------
- Play / Pause
- Hangerő szabályozó
- Aktuális idő / Teljes hossz megjelenítése
- Video buffer méretének jelzése
- Video aktuális ideje

Az SVG-t a RaphelJS könyvtár segítségével valósítottam meg, mindenkinek csak ajánlani tudom, remek darab. A vezérlők megalkotásában ezen két MozillaDc-s oldal volt segítségemre: Using audio and video in Firefox, nsIDOMHTMLMediaElement

(A video rossz minőségéért elnézést, a blogger redukálja a minőséget. Az elkövetkezendőekben youtube video-k lesznek)

html 5 video: körültekintés

Mint bizonyára sokan tudjátok a HTML5-ös verziójával érkezik a video tag, a sok egyéb remek dolog mellett. Első körben engem ez kezdett el érdekelni. Rengeteg hasznos site-al találkoztam, amelyek az alapoktól a vezérlés implementálásáig leírnak mindent.

Számos kész megoldás létezik már a megvalósításra, amelyekből a legjobbakat viszi terítékre az insicdesigns.

A megoldások tetszetősek, bár néhol kissé lyukasnak tűnnek. Például a vezérlőket úgy láttam mindegyiken ki/be lehet kapcsolgatni (és az egyéb alap funkciók is elérhetőek a video-n jobb gombbal). Tehát kihasználják a lehetőséget és saját vezérlőket tesznek a videóra, de otthagyták az eredetit is, így ha bekapcsolom elég csúnyán néz ki ott, ahol nem fedik el teljesen. Ezzel nem is lenne baj, ha választhatnék, hogy az övékét vagy a default-ot szeretném látni, de ilyenre nem láttam lehetőséget (vagy szimplán ne piszkáljam :)).

A teljes képernyős nézet egyelőre még csak a böngésző ablakára vonatkozik és csak a böngésző teljes képernyőbe tétele után (F11) élvezhetjük a kívánt hatást. Nem annyira újdonság, hogy hónap elejétől a Firefox tesztverziójából (MineField) már életre lehet kelteni a teljes képernyőt, de úgy tudom egyelőre azt is csak Windows rendszeren. (Ki is próbáltam, működik is, de elég bug-os egyelőre. - Minefield/4.0b3pre)

Ismerkedés céljából dolgozom egy saját video megjelenítőn, az elképzelések megvannak, hamarosan lesz kipróbálható verzió is.