JS a gyakorlatban II.
avagy hogyan alkossunk saját játékokat
Kezdés:
Ez a tanfolyam már véget ért,
figyeld az új időpontokat!
Hossz:
40 óra
Az egyes alkalmak
Ár:
69 000 Ft+áfa
ingyenes!
Részvételi mód:
Visszanézhető videók
A kurzus alatt megtanulunk rajzolni és játékokat készíteni JS segítségével. Megtanulhatod egy bonyolultabb webalkalmazás elkészítését. Magabiztossá válhatsz a JavaScript kódok írásában és értelmezésében. Rutint szerezhetsz a hibakeresésben, kódszervezésben, újrahasznosításban. Csinálhatsz pár király játékot, amiből megtanulhatod a játékok működését és fizikáját. Mindent tudni fogsz a Canvas és SVG lelki világáról, az animációkészítésről. Saját játékokat találhatsz ki és valósíthatsz meg.
Előfeltételek
Alapvető HTML, CSS, JavaScript ismeret.
Nézd online!
Ezt a tanfolyamot kényelmesen, otthonról is követheted, a képzésrol készült felvételeket bármikor visszanézheted. Kérdés esetén beépített chat segítségével léphetsz kapcsolatba az oktatóval vagy más hallgatókkal. Ha ez a tanfolyam már véget ért, az elkészült videóanyagot Elofizetéssel megvásárolhatod!
Kinek ajánljuk?
Ha szeretnél végre egy igazán pöpec JavaScript alkalmazást készíteni az eddigi JavaScript alapjaidból. Ha érdekelnek a játékok, és tele vagy jó ötletekkel. Ha úgy érzed a Front End fejlesztés leginkább a szíved csücske. Ha ellenállhatatlan vonzalmat érzel a multimédia iránt, és már az óvodában is Play Station volt a jeled, akkor ez a tanfolyam pont neked való.
Témakörök
1. HTML5 multimédia, Canvas alapok

HTML5 multimédia API áttekintése. A HTML5 képességeinek tesztelése. Can I Use és Modernizr. Vektorgrafika kontra pixelgrafika. SVG és Canvas összehasonlítása. Canvas alapok. Rajzvászon koordináták. Egyszerű alakzatok: téglalapok, sokszögek, körívek, kvadratikus és Bezier görbe. Négyzetháló. Kitöltések. Vonalvastagság és kapcsolódás. Rajzolás állapotának mentése és betöltése. Exportálás fájlba. Egyszerű rajzoló program készítése.

2. Canvas folytatás, Fabric.js

Lineáris és radiális gradiens. Útvonalak. Szöveg megjelenítése, árnyékolása. Színátmenetek és minták. Képek használata. Pixelmanipuláció. Áttetszőség, kompozit képzés. Transzformációk: eltolás, forgatás, méretezés, kivágás. Fabric.js library megismerése. Öltöztető program készítése.

3. Faltörő játék készítése

Mozgatás a vásznon. Analóg óra készítése. Játékok fizikája. Lineáris mozgás, gyorsulás, gravitáció, súrlódás. Ütközések detektálása, visszapattanás, lendület-megmaradás. Esettanulmány: Faltörő játék készítése. Újratervezés, kódszervezés, objektum alapú megközelítés.

4. Saját videó lejátszó készítése

Natív multimédia: miért, mit és hogyan? Videó tárolók. Video kodekek. Audió kodekek. Formátumok átalakítása. Feliratozás. Médiaesemények. Saját videó lejátszó készítése. Canvas és videó kombinálása. Audió- és videószerkesztő, feliratkészítő programok. 

5. SVG alapok

SVG fájlok felépítése. Alapvető alakzatok rajzolása: vonal, téglalap, kör, ellipszis, sokszög, törött vonal. Vonalstílusok: szín, vastagság, átlátszóság, vonalvégződések, szaggatott vonal. Alakzatok kitöltése: szín, átlátszóság, alakzatok és körvonalaik viszonya. Koordináta-rendszerek: mértékegységek, egymásba ágyazás, méretezés, méretarányok, saját koordináta-rendszer. Csoportosítás, elnevezés, definíciók, szimbólumok. Transzformációk: eltolás, forgatás, skálázás, tengelyek megdöntése.

6. SVG folytatás

Görbék: szakaszok, ellipszisívek, Bézier-görbék. Szöveg: tulajdonságok, függőleges és görbe menti szöveg. Színátmenetek és mintázatok. SVG stíluslapok használata. Animációk elhelyezése. Egyszerű tulajdonságok animációi. Színek animálása, transzformációk animálása. Görbe menti mozgás. Ismétlődő animációk összehangolása, nem egyenletes változások. Képek elhelyezése. Vágás és maszkolás. Szűrők: előkészületek, árnyék készítése, képek felhasználása. Linkek SVG-ben: elhelyezés, SVG dokumentum beágyazása HTML-be.

7. SMIL, InkScape

SVG animáció: SMIL, Szkriptek: események, szkriptek elhelyezése, tulajdonság módosítása, szöveg lecserélése. Szkriptek és animációk. Analóg óra készítése. InkScape ingyenes vektoros rajzoló program. SVG lelőhelyek a világhálón (mediawiki). 

8. SVG a gyakorlatban

SVG a gyakorlatban: Zongora készítése. Interaktív oktató program készítése. Polyfill-ek. Függvénykönyvtárak: jVectorMap, RafaelJS library és más SVG-vel készült mintaalkalmazások.

9. Áttekintés. Hogyan tovább?

Továbbfejlesztési lehetőségek. HTML5 játékok a világhálón. Nyílt forráskódú jQuery alapú drag and drop memória játék elemzése. Elkészült saját játékok bemutatása, megvitatása. Utak és lehetőségek a webalkalmazások világában. Hogyan tovább? Hálózatos játékok, egyéb HTML5 technológiák dióhéjban; kommunikáció: websocketek, workerek, offline webalkalmazások, tárolók: localStorage, sessionStorage, indexedDB, webSQL, stb.

10. Játék készítése

Milyen játékot készítenél? Hogyan valósítanád meg? Brainstrorming. Játék ötletek elméleti megvalósítása: Akasztófa, Aknakereső, Tetris, Billiárd, stb. Egy kiválasztott játék teljes megvalósítása. Áttekintő az eddigi munkáinkból. Kérdések és válaszok.

Technikai információk
Részletes technikai információkat csak a képzés hallgatói nézhetik meg bejelentkezés után!
JS a gyakorlatban II. tanfolyami videók
Böngésző szimatolás, caniuse.com, SVG és Canvas, Alakzatok
124 perc
2015. november 23.
Képek kezelése, mintázat, szöveg készítése. Rajzoló program
73 perc
2015. november 23.
Rajzoló program bejezése, Analóg óra készítése 1. rész
124 perc
2015. november 25.
Óra befejezése, Fabric.js library, Öltöztető program készítése
67 perc
2015. november 25.
Canvas animációk és ütközések kezelése
90 perc
2015. november 30.
Labdák ütközéskezelése, lendületmegmaradás. Faltörő játék
94 perc
2015. november 30.
Faltörő játék újraépítése, új funkciók készítése
85 perc
2015. december 02.
Videó elem beillesztése, saját videó lejátszó lehetőségei
90 perc
2015. december 02.
SVG felépítése, alapvető alakzatok, stílusjellemzők
71 perc
2015. december 08.
Mértékegységek, csoportosítások, transzformációk
98 perc
2015. december 08.
Szövegek kezelése, animációk típusai, analóg óra készítése
104 perc
2015. december 09.
Szkriptek használata SVG-ben, Óra befejezése, Zongora készítése
74 perc
2015. december 09.
Tetris készítése I. rész
119 perc
2015. december 14.
Tetris készítése II. rész
59 perc
2015. december 14.
Inkscape rajzolóprogram bemutatása
34 perc
2015. december 16.
SVG lelőhelyek, jVectorMap, RafaelJS, MDN mintaalkalmazások
93 perc
2015. december 16.
Tetris készítése III. rész
42 perc
2015. december 16.
Construct 2 keretrendszer megismerése
65 perc
2015. december 23.
Space shooter játék készítése
116 perc
2015. december 23.
jQuery DnD kvíz játék, HTML5 technológiák, Játék megvalósítások
91 perc
2016. január 04.
Első rész
2016. január 04.