Fő tartalom
Tantárgy/kurzus: Programozás > 1. témakör
18. lecke: Válj egyre jobb programozóvá!Programozási projekt tervezése
A programozóvá válás nem csak arról szól, hogy megtanulod a szintaxist és a programozási nyelv fogalmait: hanem arról, hogyan használod ezt a tudást programok készítéséhez. A kurzus során a feladatokban és a projektekben számos programot elkészítettél, de most már érdemes lenne saját ötletekkel előállnod új programokhoz - olyan ötletekkel, amiket érdekesnek tartasz -, és megpróbálnod ezeket az ötleteket tényleges programmá változtatni.
Amikor elkezded, valószínűleg nem fogsz minden tudni, ami a programod megvalósításához kellene, és ez teljesen rendben van így – úgyis elég motivált leszel ahhoz, hogy új dolgokat tanulj, mert szeretnéd, hogy a programod elkészüljön. A programozók folyamatosan új dolgokat tanulnak új projektjeik során, és ez egyik oka annak, amiért annyira szeretik a programozást.
Nézzük végig egy programozási projekt tervezésének lépéseit:
1. Mit szeretnél készíteni?
Amikor elkezdtem programozni, folyton azon kaptam magam, hogy új programok elkészítésén gondolkozom, és felírom őket egy listára. Az alkotás ereje függővé tett, és rengeteg dolgot szerettem volna megvalósítani. Ha Te is ilyen vagy, akkor már valószínűleg van is ötleted, hogy mit szeretnél készíteni, és lehet, hogy van saját listád is.
Ha még nincs ötleted, akkor itt van segítségül néhány kérdés:
- Mi a kedvenc játékod – ügyességi játék, táblás játék, sportjáték? Képes lennél egyszerűsített, digitális verziót készíteni belőlük? Meg tudnád variálni kicsit, például tudnál másik témát vagy más főszereplőket adni nekik?
- Mik a kedvenc tudományos területeid? Ha szereted a művészetet, képes lennél műalkotás-készítő programot csinálni? Ha szereted a történelmet, mit szólnál egy interaktív idővonalhoz? Ha szereted a természettudományokat, csinálhatnál egy tudományos szimulációt!
- Mi a kedvenc filmed vagy TV műsorod? Tudnál-e az egyik jelenetéről vagy szereplőjéről digitális verziót készíteni? Vagy egy rá alapuló játékot?
- Van olyan valóságos kütyü, amit nagyon szeretsz? Tudnál-e erről szimulációt készíteni?
Ha kiválasztottál egy ötletet, írj róla egy összefoglalót! Például ha úgy döntenék, hogy a "Breakout" klónját készítem el, mert ez a kedvenc retro ügyességi játékom, akkor írhatnám ezt:
Breakout: játék, amelyben a képernyő alján lévő ütőt irányítod, és arra használod, hogy egy labdát felfelé és különböző más szögekben elüss, és téglákat törj össze vele. A cél az, hogy minden téglát összetörj, és a labda ne essen le túl sokszor a földre.
Később jobban ki fogod fejteni ezt a leírást, de egyelőre jó alapot ad ahhoz, hogy a tervezési folyamatban tovább haladhass.
2. Milyen technológiát fogsz használni?
Ebben a lépésben azt kell átgondolnod, hogy milyen technológiákat (nyelveket/könyvtárakat/környezeteket) ismersz vagy tudsz könnyen megtanulni, és melyek a legalkalmasabbak a munka elvégzésére. Sokatok számára ez a lista lehet, hogy egy elemből áll: "1. JS+ProcessingJS", és ez megkönnyíti a döntést.
A JS+ProcessingJS környezetünk jól használható animációk, játékok, vizualizációk és szimulációk készítésére. Csak nézd meg a közösségi programokat, ahol rengeteg különböző programot találsz, amelyet itt készítettek.
A környezetünk nem alkalmas más dolgok, mint például multi-player játékok, mobil alkalmazások, adatfeldolgozó alkalmazások készítésére. Ha ismersz más nyelveket/környezeteket (mint a JS+HTML, Python, SCRATCH, Swift, stb.), és valami olyat tervezel, amit nincs sok értelme ProcessingJS-szel elkészíteni, akkor gondold át, hogy ezek közül a technológiák közül melyik illik legjobban a programodhoz. Ha ezen dolgok valamelyikét szeretnéd elkészíteni, de nem ismersz más technológiákat, akkor lehet, hogy érdemes új programötlettel előállnod. Meg tudsz tanulni új technológiát egy új projekthez, de ha most kezdesz épp el programozni, akkor tanácsosabb, ha először az első nyelveddel ismerkedsz meg jobban.
Ha egy olyan játék elkészítése mellett döntenék, mint a Breakout, akkor a JS+ProcessingJS-t választanám, mert már ismerem ezt a technológiát, és ráadásul jól használható az efféle 2D játékokhoz.
3. Milyen funkciói, tulajdonságai lesznek?
Elérkeztünk a tényleges tervezéshez, ahol (szerintem) igazán izgalmassá válik a dolog! Ebben a lépésben az a célod, hogy kitaláld, hogy pontosan mit is csinálsz majd – hogy fog kinézni, milyen funkciói lesznek, milyen funkciói nem lesznek.
Az első dolog, amit tehetsz, az "mock-up"-ok készítése – ezek olyan vázlatok, amik úgy néznek ki, mint amit majd elkészítesz, de olyan részletek nélkül, mint például a színek vagy a pontos méretezés. Mock-upokat készíthetsz papíron vagy online programokkal:
Hogy lásd, hogy is néznek ki a mock-upok, lejjebb elhelyeztem mock-upokat a Breakout klónomról. Minden egyes jelenetet külön felvázoltam, és nyilakat húztam közéjük, hogy megmutassam, hogyan követik egymást a jelenetek. Ezek a nyilak segíteni fognak nekem abban, hogy milyen logika szerint történjenek az állapotátmenetek a programomban.
Most már használhatod ezeket a mock-upokat egy tulajdonságlista elkészítéséhez. Ez azt jelenti, hogy átgondolod a programod összes tulajdonságát, és listát készítesz róluk.
A Breakout klónomhoz ez lehetne a tulajdonságlistám, képernyőnkként csoportosítva:
Játék Képernyő
- Felhasználó által irányított ütő
- Többszínű téglák
- Ferde labdamozgás
- Ütközés-detektálás
- Életpontok kijelzése
- Pontszám kijelzése
- Hangeffektek
Főképernyő
- Játék indítása gomb
- Segítség gomb
Súgó Képernyő
- Szöveg
- Vissza gomb
Győzelmi Képernyő
- Főcím
- Tűzijáték animáció
Vereség Képernyő
- Szöveg
- Újrakezdés gomb
4. Milyen tulajdonságok kellenek mindenképpen?
Ha végtelen időnk lenne az összes eszünkbe jutó program elkészítésére, akkor mindegyik tartalmazná a listánkon szereplő összes tulajdonságot. De ez nem így van, ezért ebben a lépésben el kell döntened, hogy mely funkciók és tulajdonságok a legfontosabbak, és melyeket fogjuk csak akkor elkészíteni, ha van időnk. Ez abban is segít, hogy eldöntsd, milyen sorrendben fogod implementálni a dolgokat, a legfontosabbtól a legkevésbé fontosig.
Hogy könnyebben el tudd dönteni az egyes tulajdonságok fontosságát, tedd fel magadnak ezeket a kérdéseket:
- Ha megosztanám egy barátommal, melyik tulajdonságoknak kellene mindenképpen működnie?
- Melyik tulajdonságok elkészítése izgat leginkább?
- Melyik tulajdonságok a legegyedibbek a programomban?
- Melyik tulajdonságok implementálásából tanulhatok a legtöbbet?
- Vannak olyan tulajdonságok, amik meghaladják a jelenlegi képességeimet?
Ezután menj végig az előző lépésben megírt listán, és rendezd sorba a tulajdonságokat, vagy adj mindegyiknek egy rangot.
A Breakout klónom funkciólistájánál a "P1", "P2", és "P3" jeleket tettem a funkciók mellé, a legnagyobb (P1), a közepes (P2), és a legalacsonyabb (P3) prioritást jelezve velük. Úgy döntöttem, hogy az egyedi játékmechanizmusokat részesítem előnyben az általános játékfunkciókkal szemben, mint például a képernyők, mert ezeket tartom a legizgalmasabbnak ebben a projektben:
(P1) Játék Képernyő
- (P1) Felhasználó által irányított ütő
- (P1) Többszínű téglák
- (P1) Ferde labdamozgás
- (P1) Ütközés-detektálás
- (P2) Életpontok kijelzése
- (P2) Pontszám kijelzése
- (P3) Hangeffektek
(P2) Főképernyő
- (P2) Játék indítása gomb
- (P3) Segítség gomb
Segítség Képernyő
- (P3) Szöveg
- (P3) Vissza gomb
(P2) Győzelmi Képernyő
- (P2) Főcím
- (P3) Tűzijáték animáció
(P2) Vereség Képernyő
- (P2) Szöveg
- (P3) Újrakezdés gomb
Azoknak, akik játékokat készítenek, azt javasolnám, hogy ezekhez a funkciókhoz kisebb prioritást rendeljenek: menük, szintek, 3D grafika. Koncentrálj arra, ami egyedi és élvezetes a programodban, és csak ezután add hozzá ezeket az extrákat.
A prioritásokkal ellátott listádat projekt verziókká alakíthatod, így egyszerűen láthatod, hogy mit kell implementálnod az egyes verziókban, emellett bármikor megállhatsz egy-egy verzió után, és elégedett lehetsz azzal, amit csináltál.
Így néznének ki a verziók a Breakout klónom esetében:
V1
- Felhasználó által irányított ütő
- Többszínű téglák
- Ferde labdamozgás
- Ütközés-detektálás
V2
- Életpontok kijelzése
- Pontszám kijelzése
- Kezdőképernyő, játék indítása gombbal
- Győzelmi képernyő, főcímmel
V3
- Hangeffektek
- Segítség gomb
- Tűzijáték
- Vereség képernyő, Újrakezdés gombbal
5. Hogy fogod implementálni?
Most már van elképzelésed arról, hogy milyen tulajdonságokat fogsz először elkészíteni a programodban – de ha most nekiállsz, egy teljesen üres, kód nélküli programmal fogod kezdeni, ami ijesztő lehet. Melyik változókat írd meg először? Melyik függvényeket?
Ezt meghatározhatod például úgy, hogy a programod "magas szintű architektúráját" veszed alapul – programod felosztása kategóriákra, mint "objektumok", "logika", "felhasználói interakció", "felhasználói adat" és "képernyők" –, és ezek után kezdesz csak el azon gondolkozni, hogy hogyan fogod implementálni őket: objektumorientált objektumtípusokként, függvényekként vagy változókként.
Például itt van a Breakout klónom architektúrája:
Objektumok
Brick(.isHit())Paddle(.move())Ball(.move())
Képernyők
- Kezdés
- Játék
- Vége
Logika
- Labda-tégla ütközés (
függvény, használjunk bounding box módszert) - Ütő és labda szögének állítása (
függvény, szög invertálása)
Felhasználói interakció
- Billentyűzet-ütő mozgás (
keyPressed) - Gombok képernyőváltásokhoz (
mouseClicked)
Felhasználói adat
- Labda leesések (
tömb) - Labda találatok (
tömb)
Miután elgondolkoztál a magas szintű architektúráról, világosabbá kell hogy váljon, hogy mivel kezdheted a kódolást.
Dönthetsz úgy, hogy először az egész programodat pszeudokód formájában írod meg, amiről a tananyag során később még beszélni fogunk. Alapvetően ez a teljes program magyar szöveggel való leírását jelenti egy kommentben, amit aztán lassan átalakítasz valódi kóddá.
6. Milyen legyen az időbeosztásod?
Mennyi időd van a program elkészítésére? Hány hét, és mennyi idő naponta? Melyik héten melyik tulajdonságokat fogod megírni? Ebben a lépésben az a célod, hogy megtervezz egy időbeosztást a projektedhez – ami különösen fontos, ha határidőre dolgozol, de azért is hasznos, mert lassan rájössz, hogy mennyi idő alatt tudsz megírni egy programot.
Íme egy időbeosztás a Breakout klónomhoz, ami azon a terven alapul, hogy 2-4 órát dolgozom hetente:
- Hét 1: Design és pszeudokód
- Hét 2: Kinézet nagy vonalakban
- Hét 3: Labda mozgás/ütközés mechanikája
- Hét 4: Pontozás működése
- Hét 5: Jelenetek (Kezdés/Győzelem/Vereség)
- Hét 6: Szépítgetés, Manuális tesztek (QA), Demo előkészítése
Programozási projektekhez nehéz időbeosztást tervezni. Vannak olyan könnyűnek tűnő dolgok, amik sokkal tovább tartanak, mint amire számítasz (például egy fura hiba debuggolása), más, nehéznek tűnő dolgok pedig kevesebb idő alatt elkészülnek. Jó kiindulási pont, ha feltételezed, hogy tovább fog tartani, mint gondolod, és menet közben módosítasz.
Készen állsz!?
Remélhetőleg világosabbá vált számodra a programozási projektek megtervezésének folyamata, és arra inspirált, hogy belevágj egy új projektbe! Attól függően, hogy mit szeretnél készíteni, lehet, hogy úgy döntesz, hogy először más kurzusokat is elvégzel, például az Advanced JS: Games & Visualizations-t vagy az Advanced JS: Natural Simulations-t, ahonnan még sok ötletet vehetsz játékok és szimulációk készítéséhez.
A fontos, hogy egy idő után kezdj el saját programokat készíteni, mert így tudsz a legtöbbet tanulni, és így lesz legtöbb örömöd a programozásban, mivel az álmaidat váltod valóra!
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.