THOMAS Lively: Dobre. Ahojte všetci. Ja som Thomas Lively. Tento seminár je bude písanie 2D hier v jazyku C pomocou SDL. Takže viem, že ste všetci pýta, jo, naozaj chcete hrať hry a robiť hry, ale to, čo je tento obchodný SDL? Takže SDL je knižnica C. To je skratka pre Simple Directmedia Layer. A to je multiplatformový, Hra vývojová knižnica. Pracuje na Windows, Mac, Linux, aj iOS a Android. To sa zaoberá veci ako prístup k audio systémy pre počítače, klávesnice, a myš, joysticky, keď sú pripojené. Na mobil, môžete to dokonca urobiť dotykové ovládanie a všetko. A samozrejme, to zvláda grafiku, kreslenie veci na obrazovku. Tak to je veľmi široko používaný, hoci nemusí mať predtým nepočul. Je vstavaný do, napríklad, Source Engine ventilu, ktorý napája hry ako Portal a Team Fortress 2. Je to tiež vo veľmi veľkom počte indie hier, ktoré vyjdú, takže som nadšený, že vidieť to, čo všetko bude robiť s ňou. 

Seminár cieľom je, aby vám stanovené, že je rozvíjať spolu s SDL. Chystáme sa učiť, ako pre vytvorenie okna hry. Budeme vytvárať škriatkov, čo sú obrazy vo vašej hre ktoré sa môžu pohybovať okolo. Chystáme sa učiť, ako k a animovať škriatkov, tak pohybovať okolo nich, aby ako sa mení v priebehu času. A budeme sa učiť, ako zachytiť klávesnice a myši Vstup z počítača. To, čo nebudeme hovoriť o dnes je 3D grafika, pretože to je veľmi komplikovaná s výhradou, že nemáme čas. Nebudeme učiť, ako sa prehrávanie zvuku na našich hier. A nebudeme stavať na nič iné ako Linux. 

Teraz tam sú námietky, ktoré, dúfajme, že na konci seminára budete spokojní s dokumentácie SDL, takže budete môcť ísť prísť na to, ako hrať zvuk pre seba. Tiež stavebné pre Mac alebo PC by mal fungovať presne rovnaký ako stavebný pre Linux, ale jeho nastavenie to bude byť trochu inak. Takže by ste mali byť schopní prísť na to, ako tieto veci robiť na konci dnešného seminára. 

Takže pre nastavenie, ideme používať virtuálny stroj. Radi by sme použiť CS50 IDE, pretože sme len bude písať v jazyku C. Ale pretože IDE nie je prehliadač, my Nemôžete vytvárať nové okná alebo zobraziť grafika v ňom. Takže potrebujeme virtuálny stroj. Takže môžete postupovať podľa pokynov tu na manual.CS50.net/appliance/15~~pobj nainštalovať oficiálne CS50 spotrebiče, čo je iba Linux virtuálny stroj. 

A potom, až budete mať že všetko nastavené up-- tom môže chvíľu trvať, pretože veľmi veľký download-- idete bežať na VM sudo apt-get. A to sa naozaj deje aktualizovať všetok softvér balíčky na vašom virtuálnom stroji. 

Za to, že budete spúšťať sudo apt-get install, libsdl2-2.0-0, libsdl2-DBG, libsdl2-dev, a dodatočne libsdl2-image-2,0-0, libsdl2-image-DBG, a libsdl2-image-dev. Tak čo to robí? To len nainštaluje ladenie Informácie, dokumentácia, hlavičky, a binárne súbory pre dve knižnice. Pravidelné starý, SDL 2.0, a ďalšie knižnice volal SDL obrazu, ktorý budeme používať načítať obrazové súbory do našej hry. 

Takže až budete mať, že tiež že práve vtedy, keď sa spýta, stačí zadať áno, stlačíte Enter nainštalovať tieto balíčky, a potom by ste mali byť dobré ísť. Takže ak chceme získať distribučné kód, can-- ach bože, to nie je aktualizovaný. Ak máte GitHub account-- ak máte účet GitHub, môžete urobiť tento Git klon príkaz repo a že stiahne Git repo všetky kód v ňom, takže budete mať kód. 

Ak nemáte GitHub účet, čo by ste mali urobiť, je typ wgithttps: //github.com/tlively/sdl seminar-- a tu je to different-- /archive/master.zip. Takže znova, že je to ten istý URL, okrem toho to bude tlively / SDL_seminar / master.zip a používate wgit na prevzatie, že. A potom môžete len rozbaliť daný archív a potom budete mať celý zdrojový kód. A tak ľúto. A potom kód bude tiež hostil na webových stránkach CS50 semináre v páre dni. 

Dobre. Tak ako začneme písať svoju vlastnú hru? No, prvá vec, budeme chcieť robiť je pozrieť na SDL dokumentáciu. Tak tu je VM. A tu je webová stránka. Ja som navigoval žiť libsdl.org. To, čo budem robiť, je tu ísť cez na bočnom paneli, pod dokumentácie, a kliknite na wiki. To mi prinesie na wiki, že má väčšinu dokumentácie pre SDL. Cez na bočnom paneli tu, my sme bude kliknite API podľa kategórie, preto, že sa chystá dať nám pekný pohľad kategorický celého API pre SDL. 

Tak napríklad, máme základná inicializácia a vypnúť, všetky druh administratívne veci pre používanie SDL, a potom máme sekcii zobrazovanie veci na obrazovku. To videa. Vstupné udalosti, to je ako vstup z klávesnice, dostať vstup z myši, a joystick, pokiaľ ju mať ešte. Tam je sila, spätná väzba pre veci ako herných ovládačov, ktoré nebudeme hovoriť. A tu je zvuk. A potom je tu veľa ďalších veci, ktoré SDL môže urobiť pre vás. 

Ale dnes budeme sústrediť na inicializáciu tu, zobrazenie obrázkov vo videu sekciu, a manipulácia vstupné udalosti. Tak to sú hlavné úseky dokumentácia že by ste mali robiť starosti. Len tak pre zábavu, keď pôjdeme cez tu a kliknite na API podľa mena, môžeme vidieť zoznam každý jediná vec v SDL knižnici. Takže všetky tieto funkcie, popísané v odsekoch, štruktúry, šialený množstvo vecí, abecedné poradie. A jasne, kým viete, čo robíte, to nebude príliš užitočná, čo je dôvod, prečo robíme API podľa kategórie. 

Tak poďme začať. Dúfajme, že ste už stiahli distribučné kód. A tak to, čo môžete urobiť, je, že jo tu v CS50 spotrebiče, jednoducho otvoríte terminál. Ideme na to. Takže som už stiahli Distribúcia kódu pomocou ZIP metóda. A ja som rozopol ho. Tak tu to je v SDL seminári majstra. Takže ja idem do tohto adresára. A to, čo vidíme, je tu že máme sedem C súbory. A to bude kódom budeme sa pozerať na dnešok. Máme Makefile. A máme adresár zdrojov, ktorá má proste obraz že budete vidieť čoskoro. 

Takže poďme otvoriť tieto súbory pomocou G-Edit editora. Tak som chcel otvoriť všetky súbory, ktoré začínajú ahoj a končí s .c. Ideme na to. Tak to je malá okná, tak sme bude sa snažiť, aby to väčšie. Nie, to išlo preč. 

Dobre. Tak tu je to úplne prvý Súbor sa budeme pozerať. Hovorí sa tomu hello1_sdl.c. A to všetko robí, je inicializovať SDL knižnica, takže môžeme začať používať. Ako by ste vedieť prísť up s týmto kódom seba? No, ak sa pozrieme viac ako na dokumentáciu a ideme do inicializácia a vypnúť sekcie, to nás všetkých oznámiť o tom, ako inicializovať SDL. Takže určite si prečítajte tento inokedy. Je ti to povedať všetkým o tom, čo sa tu deje. Ale hlavná podstata veci je, že musíme túto funkciu volať SDL v It a odovzdať ju aké druhy vecí chceme, aby knižnica inicializovať. Takže v našom prípade, budeme len tak inicializovať video pre teraz, takže môžeme začať zobrazovať obraz. 

Tu môžete vidieť, či klikneme na SDL v ňom, sme môžu získať ešte viac informácií, vrátane návratovú hodnotu. Takže tu vidíme, že to returnes nulu na úspech. Takže v našom kódu, budeme uvidíme, či to nevráti nulu, a ak sa nevráti nula, takže to nebolo úspešné, potom budeme jednoducho vytlačiť chyba pomocou tejto ďalšie funkcie, SDL chyba get, ktorý vráti reťazec popisujúci chybu, ktorá nastala. Budeme tlači, že chyba a potom sme len chystá ukončiť program s chybovým kódom. 

Potom ďalšiu vec, ktorú potrebujeme urobiť, je, ako program ukončí, ak budeme úspešne inicializovaný SDL, len je potrebné ju SDL prestať volať. A že to bude zvládnuť čistenie všetky vnútorných zdrojov SDL pre nás. Takže dokumentácie there-- znovu, Tu sme v inicializácii a vypnúť sekcie dokumentácie. Stačí si len kliknúť na tlačidlo tu funkcie, SDL skončiť, a môžete prečítať všetko o tom rovnako. A mnoho z týchto funkcií dokumentácia stránky majú príklad kódu, takže to je veľmi dobrý zdroj. Rozhodne stráviť nejaký čas čítanie častí tejto wiki ak sa chystáte robiť to pre projekt. 

Dobre. Takže to je celý náš program. Čo môžeme robiť teraz je-- Som chystá otvoriť Makefile tu, takže budem trvať pozrite sa, ako to funguje. A je to veľmi jednoduché Makefile, podobné tomu, čo ste videli skôr. Jedným z hlavných rozdielov je to, že tu je toto sa chystá vložiť výsledok behu Tento príkaz, ktorý ste už nainštalované, ak ste nainštalovali SDL. A to je príkaz že to bude generovať niektoré ďalšie príznaky pre kompilátor. 

Okrem toho, že sme dávať to všetky obvyklé príkazy, ako aj Tieto dva príkazy. Takže sa -lsdl2-image rukoväte spájajúca v SDL obrazu knižnice. A -lm skutočne spracováva prepojenie v štandardnej matematickej knižnici C. Takže nebudeme potrebovať tie, pre všetky naše C súborov, ale my sme jednoducho dať je v tom, že môžeme použiť rovnaký Makefile pre všetko bez úprav. 

Tu v zdrojoch, to je miesto, kde by ste umiestniť súbory, ktoré si chcel zostaviť pre váš projekt. Ale pretože každý jeden z mojich C súbory tu má hlavnú funkciu, to bude zmätený Dáme ak ich všetky do. Takže budem len povedať, teraz, hello1_sdl.c, čo je tá, ktorú sme práve pozrel na. Takže keď som sa vrátiť nad tu, môžem robiť, aby. A to, čo urobil, je to len zostavil, že prvý súbor. A potom môžeme písať ./game, pretože je to spustiteľný to produkovalo. A všetko to urobil, bolo pre tlač inicializácia úspešné. A tak sme urobili niečo správne. Ale to bolo trochu nudné, pretože sme nemali vidieť okno, Nič sa pohybovala okolo. 

Tak veľký, máme SDL inicializácii. Teraz, poďme prejsť na niečo trochu zaujímavejšie. Takže tu máme hello2_window.c, a to bude o niečo komplexný C program, ktorý inicializuje SDL, rovnako ako predtým, s výnimkou teraz sme tiež bude inicializovať SDL časovač. A to nás bude nechať prístup do interného časovača a používať funkcie spojené s časom. 

A potom sa poďme pozrieť tu dole. Čo robíme, je, máme túto ukazovateľ k SDL okná struct, ktorý sa bude vytvorená v tejto výzve k funkcii, SDL vytvoriť okno. Teraz, to trvá veľa argumentov, takže poďme pozrieť na dokumentáciu. Takže znovu, budem API podľa kategórie, ja som ísť dole na video tu, a prvé Sekcia, zobrazovanie správu okien. Takže táto časť má tony vecí v ňom, ale keď sa pozriete do tieto funkcie, budete vidieť, že pravdepodobne tá, ktorú sme Chcete sa nazýva SDL vytvoriť okno, ktorý sa stane byť priamo na vrchole. 

A tak to je Dokumentácie pre túto funkciu. Okno to bude mať titul, X a Y pozície na obrazovke, bude to mať šírku, výšku, a potom to bude trvať nejaké vlajky. A teraz, nemáme vlastne starať o niektoré z týchto príznakov práve teraz, ale ak by ste chceli niečo urobiť ako je make okno cez celú obrazovku, môžete sa pozrieť na to. Zatiaľ sme len tak používať tieto špeciálne hodnoty, SDL okno a v stredu pre x a y, aby len vytvoriť okno v strede našej obrazovky. 

Tak to je to, čo to robí. A ak je okno sa stane byť null, čo znamená, že je chyba, potom zase budeme len tak vytlačiť chybu pomocou SDL chyba get. A potom preto, že sme inicializácii SDL, teraz musíme zatvoriť. Takže hovoríme SDL skončiť pred vrátenie jeden pre hlavné. 

Takže máme toto okno otvorené nádejne. A čo budeme urobiť, je ideme volať SDL pre 5000 milisekúnd, ktorý je rovnaký, ako piatich sekúnd. A keď sme skončili s tým, to bude zničiť okná, upratať knižnicu SDL, a ukončite program. Tak poďme do toho pustite a dajte že strele. 

Takže teraz namiesto zmeny Makefile zakaždým, Ja si jednoducho urobiť, a potom na príkazovom riadku, hovoria zdrojov rovnal a potom Súbor sme kompiláciu. Takže je to hello2_window.c. Fantastický. Žiadne erros. Teraz, keď sme sa spustiť našu spustiteľný súbor, vidíme toto okno. Teraz existuje niekoľko problémy s oknom. My ho môžete pohybovať, ale má Toto pozadie junk vnútri nej. Takže sme sa vypracovali nič, a tak je to len plné odpadkov, ktoré je presne to, čo očakávame. 

Ďalej, nemôžeme zavrieť okno. Som stlačení tohto X v roh a nič sa deje. Tak uvidíme, ako to opraviť že v trochu. Takže poďme napraviť časti, kde je Okno je plná odpadkov ako prvý. Takže ak by sme prejsť na hello3_image.c, čo vidíme, je, že sme pridali pár viac vecí tu. Pridali sme túto novú hlavičku súbor získať funkcie časovača. Myslím, že sme urobili v poslednej človek, moc, a ja som sa o ňom zmieniť. Ale teraz, pretože sme práca s obrázkami, musíme zahrnúť SDL image hlavičky súboru rovnako. Takže je to to isté, ako predtým, inicializácia SDL tu, To isté sa zaoberá vytváranie okien. Videli sme, že už skôr. 

Teraz musíme vytvoriť niečo ako renderer, ktorý druh ide spolu s oknom. Ale je to akási abstraktné objekt, to je na starosti robiť všetky tieto kreslenie operácie k oknu. A to skutočne zodpovedá na program načítaný do grafického hardvéru vášho počítač alebo telefón alebo čokoľvek iného. Takže vlajky chceme prejsť to-- a môžete sa pozrieť na dokumentáciu získať viac podrobností here-- sa deje , Ktoré majú byť SDL činí urýchlený, ktorý znamená, že to bude pomocou grafického hardvéru a to nielen emulovaného v softvéri. 

A budeme používať SDL Renderer PRESENTVSYNC. Vsync je vec, ktorá jednoducho robí vaša grafická vyzerajú lepšie a zabraňuje to, čomu sa hovorí obrazovka teror, kde polovica jedného rámu a polovice budúceho frame vykresliť zároveň a vyzerá to hrozne. Ale opäť, môžete ísť čítať o tom na vlastnú päsť. 

Takže máme nejaké vlajky tu. A tak sme len tak zavolať Táto funkcia SDL vytvoriť renderer. Chystáme sa dať okno spájať s týmto renderer. Negatívny jedným zo spôsobov, nás nezaujíma, čo grafický ovládač budeme používať. Tak, že by do značnej miery vždy negatívne, ak neviete, o grafických ovládačov. A potom sme to len tak odovzdať jej svoje vlajky. Takže ak, ktorý vracia null, potom sme do tlače chybu ako obvykle, ale potom sme to tiež bude zničiť okno upratať týchto zdrojov pred volať SDL ukončiť a návratu. 

Teraz, zaujímavá časť tu je miesto, kde sme nahrať náš obraz Pomocou tejto funkcie IMG_load. To je jediná funkcia ideme použiť z SDL obrazu knižnice. Je to jediný, čo potrebujeme. Je to funkcia, ktorá zoberie reťazec že je cesta každého obrazu zdroja. A to môže byť PNG, GIF, bitmapa, žiadne z týchto vecí. A to je dôvod, prečo je táto funkcia tak pekné. To zvládne prakticky akýkoľvek formát. Načíta do pamäte a uloží ho ako vec nazýva SDL povrch. 

Teraz SDL povrch je iba struct ktorý predstavuje obrazové dáta do pamäte. Takže si môžete prečítať viac o že v dokumentácii dve. A ak to chyby, potom sme robiť celú vec tam, kde je tlačíme chybu, zatvárame zdroje, a potom ukončite program. Teraz je zaujímavá vec je, pred môžeme čerpať tento obraz do okna, musíme skutočne urobiť to textúru. Teraz textúry zodpovedá do obrazových dát načítaných do pamäte hardvéru grafického to je. 

Takže povrch je v hlavnom pamäť, pravidelné pamäť že sme boli s využitím všetkých semester, a štruktúra je v tomto samostatnom VRAM pamäti, že kontroly grafickej karty. Preto nazývame túto funkciu SDL_CreateTextureFromSurface. Dávame mu našu renderer a naši povrch. A potom sme vlastne vykonané s povrchom, tak sme len tak ju oslobodiť. Nemáme ju potrebovať ešte. A potom, takže ak to volanie chybných a vrátil null, potom budeme robiť celý vec znovu hlásenie chýb. 

Dobre. Tu sme dostať sa do niektorej Skutočné vykresľovanie funkcií. Takže volanie SDL_RenderClear a priechodom renderer spojené s naším oknom jednoducho robí okno sčernie. Takže to, že odstraňuje nevyžiadanej pošty, ktoré sme videli v naše okno pred a robí to čierne. A potom pôjdeme zavolať SDL_RenderCopy, dať mu našu renderer, naši textúru. A budeme hovoriť o tom, čo tieto polia sú v trochu. Ale to bude prijmú textúr údaje a skopírujte ho na naše Okno nakresliť obrázok. Takže po tom, čo sme urobili túto kópiu údaje na naše okná, musíme to urobiť zvláštne funkciu volal SDL_RenderPresent. 

A to je zaujímavé, pretože sa to dostane do témy s názvom dvojité ukladanie do vyrovnávacej pamäte. Takže dvojité ukladanie do vyrovnávacej pamäte je technika, ktorá je vaša grafika vyzerať oveľa lepšie. Opäť platí, že bráni tejto obrazovke trhaniu Hovoril som o skôr, kde máte dve vyrovnávacej pamäte. Je tu zadný vyrovnávacia pamäť v pamäte a predné vyrovnávacej pamäte. Predný nárazník je doslova to, čo je na obrazovke v tomto okamihu. Takže robíme všetko kresliť variácie, ako SDL činí kópie alebo SDL_RenderClear na zadnej vyrovnávacej pamäti. Tak sa zmeniť veci v zadnej vyrovnávacej pamäti. Tu by mohla byť táto kresba zelený štvorec na zadnej vyrovnávacej pamäti. 

Takže keď budeme hotoví robiť Naši činí operácie, ktoré môže trvať naozaj dlho čas, čo budeme robiť je prepínať vyrovnávacej pamäte. Tak to doslova berie predný nárazník a zadný vyrovnávaciu pamäť a prepínačov je, tak že, okamžite, v jednej operácii, namiesto možno stovky alebo tisíce, všetky naše novo poskytnuté objekty sú na obrazovke. A to zabráni veci ako obrazovka osviežujúci keď sme čerpané len dvainy našich objektov pre rámu. Takže to je dôvod, prečo musíme zavolať SDL_RenderPresent, ako aj as SDL_RenderCopy. 

Opäť sme len tak čakať po dobu piatich sekúnd. Potom sme sa chystáte upratať našich zdrojov. Máme docela málo viac tentoraz. A potom sme to len tak ukončíte program. Takže poďme to urobiť. Budem písať značku, a potom zdroje rovná sa hello-- toto je teraz 3image.c. Dobre, že zostavil žiadne chyby. A vidíte, tu som teraz ťahané sa na môj obraz, Dobrý deň, CS50! k nášmu okno, ktoré zmizne po piatich sekundách. 

Teraz, to stále má problémy, je to tak? To nie je dobrá aplikácie, pretože keď som sa pokuse o zatvorenie okna, nič sa nedeje. To x stále nie je citlivý. Takže poďme sa pozrieť na Ďalší obrázok, hello4animation. Tak toto je ten súbor že sa chystá zaviesť pohyblivé a hnutia naším obrazom. Takže budeme robiť to isté ako predtým, iniciovať SDL, vytvoriť okná, vytvorte renderer, nahrať obrázok do pamäť, vytvorte textúru. Už sme predtým nevidel všetko. Teraz, to je nové. Budeme mať štruktúru s názvom SDL rect, čo je len obdĺžnik. Ak by sme ísť sem, môžeme to hľadanie pre SDL RECT, a môžete vidieť, že je to veľmi jednoduchá konštrukcia. Má X, A y pre poloha, a to má šírku a výšku veľkosť obdĺžnika. 

Takže to, čo budeme robiť, je, že sme bude definovať tento SDL rect dest, na miesto určenia. A to je miesto, na obrazovke, kde budeme sa kreslenie náš imidž, vpravo So ak budeme mať pohyblivý obraz sa okolo, potom miesto určenia, kde budeme nakresliť obrázok Treba pohybovať. Takže budeme nazývať Funkcie SDL_QueryTexture. A všimnite si ja som okolo adresu of dest.w, čo je šírka, a dest.h, čo je výška. A tak SDL_QueryTexture sa deje pre uloženie v týchto oblastiach je šírka a výška našej textúry. 

A potom, čo budem urobiť, je idem pre nastavenie dest.x byť okno šírka mínus dest.w, čo je šírka sprajt, deleno 2. A to bude ho môžete nastaviť tak, že obraz je dokonale na stred v našej okne, v poriadku? Takže teraz mám pozíciu y. A to bude byť premennou, ktorá je mení, pretože budeme mať pohybujúci sa obraz v smere y. A teraz máme niečo volal animácie slučka. 

Ako teda animácie funguje? No, ľudské oko dokáže detekovať 12 odlišný obrazy v každej druhej, v poriadku? Takže ak ste blikať 12 obrazových kariet na mňa V sekunde som videl každý z týchto obrazov ako jeho vlastné odlišnú jednotlivý záber. Teraz, keď blesk viac obrazy na mňa druhý, potom moje oko by sa začať rozmazaniu dohromady a ja by som vnímať ako pohyb, namiesto toho, jeden jediný obraz. Tak, napríklad, filmoch a televízii, blikajú obrazy na teba 24 krát druhý. Tak to je 24 snímok za sekundu. Obrazovky počítača, na druhej strane, často sú pri 60 snímkach za sekundu. To je ich rýchlosť obnovovania. To je, ako často sa občerstviť obraz na obrazovke. Takže naším cieľom bude 60 snímok za sekundu pre naše hry. 

Tak uvidíme, že v kóde. Takže pre každú snímku, sme najprv bude vyčistiť okno. Toto je všeobecný vzor. Vždy zrušte okná každú snímku, a potom robiť všetky výkresu operácie, a potom na konci, sa RenderPresent ukázať všetko v rámčeku. A potom budete majú čakať na konci počkať až do ďalšieho rám by mal začať. 

Takže keď som robil veľa zložitý výpočet tu že trvalo viac ako 16 milisekúnd, to by bolo nemožné pre mňa sa dostať, že počet snímok za sekundu 60, ktoré Chcel som, pretože každý snímka je trvá príliš dlho pre výpočet. Ďalej sme naozaj robia druh zanedbateľného množstva práce tu, pretože tam je len jedna vec, ktorú sme kreslenie. Tak som len čakať 1/60 za druhé, čo je dĺžka z rámu, v medzi rámy. Takže som tak nejako predstierať robiť všetky moje práca vyžaduje nulový čas. Ale v reálnom hre, budete musieť odpočítať množstvo času trvalo robiť to všetko práca z vášho odpočinku. 

Tak ako tak, čo mám vlastne robí v tejto slučky? Aj vyčistiť okno. Položím dest.y, čo je na int moja skutočná y pozície obsadil do int. Teraz chcem plávať rozlíšenie pre moju y pozíciu v mojej hre, ale potom sa v skutočnosti nakresliť na obrazovku, potrebuje celých čísel, pretože je to v jednotkách pixelov, takže to, čo je pre obsadenie. Chystám sa nakresliť obrázok. Tak toto je zdroj obdĺžnik. A to je cieľ obdĺžnik. Tak som prešiel null pre zdroj obdĺžnik povedať, že som chcel nakresliť celý môj textúru. Ale ak ste mali veľa textúry vo vašej hre a oni sú všetci v jednej veľkej textúry mape , Ktorý bol vložený do SDL, ako len jeden textúra, mohol by ste Overte si, či obdĺžnik vybrať jeden z menších textúr, jedným z menších škriatkov, z tej veľkej textúry mapy. 

Takže znovu, ja som okolo mojej render, my textúry, a teraz cieľ. To bude, kde v Okno, že to bude byť vypracované. A potom, pretože som animovanie niečo, potrebujem pohyb, Budem sa potom aktualizujú sprite postavenie na každom snímku. Takže som túto stálu názvom zvitok rýchlosť v jednotkách pixelov za sekundu. Teraz zakaždým, keď urobíme pohyb, rám je len 1/60 sekundy. Takže budem deliť, že 60. A potom, pozrime sa, ja som odpočítaním že od y polohy. Prečo som odpočítaním? Dostaneme sa k tomu v druhom. Tak som vyčistiť mojej zdroje a program je u konca. 

Takže poďme robiť to. Tak poďme do make SRCS = hello4 animation.c, v poriadku? Game. A je to. Tak som si to rolovanie sa zriaďuje okná, čo je celkom pekné. Ale vydrž, bol som odpočítaním od y polohy zakaždým. Čo sa deje tam? No, ukázalo sa, že v SDL, a v skutočnosti, že vo väčšine počítačovej grafiky, pôvod pre súradného systému je v ľavom hornom rohu okna. 

Takže kladný smer x ide cez okná na pravej strane. A pozitívne y smer v skutočnosti ide dole. Takže znovu, na vzniku sa ľavom hornom rohu okna, kladný smer Y je dole, a pozitívne x je na pravej strane. Takže keď som odčítanie poloha y, to je bude, aby to išlo na negatívny y smer, ktorý je až k oknu. Takže to je to, čo sa tam deje. Super. 

Poďme sa pozrieť na ďalší súbor. Tu je súčasťou ukázať, kde sme sa konečne dostať, že X v rohu okna že to má zavrieť okno do práce. Tak čo sa deje? My inicializovať SDL, vytvoriť okno, vytvoriť vykresľovací, nahrať obrázok, vytvoriť textúru rovnako ako sme videli predtým. Máme rovnaký cieľový obdĺžnik ako predtým, rovnaké volanie na dotaz textúru. Ale tentoraz, my sme potom bude rozdeliť šírku a výška nášmu cieľu o 4. To má za následok len škálovanie náš obraz dole, keď sme sa zobrazí v okne štyrmi. Tak to je celkom pekné. Môžeme len mierka, rovnako ako to. Chystáme sa začať sprite v strede obrazovky. A teraz máme x a y a rýchlosť Obaja začnú od nuly. 

To je zlý súbor. Prepáč. Tak to je všetko pravda. To je všetko stále ešte v tomto súbore. Máme vydeliť 4 a všetko. Takže tu máme poloha x a y na stredu okna. A my dať počiatočná rýchlosť z tejto konštantnej rýchlosti, ktorý Verím, že je 300 pixelov za sekundu. Teraz máme to int mohol rovnako dobre byť boolean nazýva blízky požadované. A namiesto toho robí nekonečnej slučky na časový spínač tu, budeme treba oživovať ako Kým záver nie je požadované. 

Tak ako sme sa spracovať udalosti? No, SDL fronty až udalostí v Doslovný front v zákulisí. A potom každý snímok, môžeme dequeue udalosti z tejto fronty pomocou táto výzva SDL_PullEvent. A opäť, určite ísť čítať o tom v dokumentácii. Je tu oveľa viac detailov a omnoho viac funkcií, môžete použiť s týmto. Míňame to adresa tejto veci, SDL_Event že máme tu v zásobníku. 

A teraz, čo je SDL_event? Vzhľadom k tomu, SDL, ak sa pozrieme v sa documentation-- poďme vidieť, API, podľa kategórie, vstupom udalosti, spracovanie udalostí, môžeme sa pozrieť na čísla z rôznych udalostí tu a my môžeme vidieť, že je celá ton z nich. Takže to, čo je tá vec SDL_Event? SDL_Event je spojenie. Wow, to je zväzok? Ste pravdepodobne nikdy predtým nepočul. A to je v poriadku. 

Odbory je niečo ako struct, okrem struct má priestor pre všetky jeho pole a pamäti, zatiaľ čo Únia má iba dostatok priestoru, aby sa zmestili najväčší jeden z jeho pole, čo znamená, že ho môže iba uložiť jednu zo svojich polí v čase, ktorý druh má zmysel pre udalosti, nie? Môžeme mať klávesnicu udalosť alebo udalosť okno, ale jedna udalosť nemôže byť ako klávesnica akcie a udalosti okno, tak to by bolo hlúpe, mať priestor pre obaja tých vnútri našej akcii únie. Takže ak ste chceli vytvoriť svoj vlastný únii, Vyzerá to presne to isté ako vytvorenie struct, okrem toho, že sme sa použiť union kľúčové slovo miesto struct kľúčového slova. A pamätajte, pre všetky veci vo vnútri únie, skutočná premenná, ktorá je spojením môže mať iba jednu z týchto hodnôt v tom čase. 

Tak ako môžeme povedať, aký druh akcie sme jednoducho vyskočila z tejto fronty? No, môžeme testovať Event.type. A v prípade, že je rovné na SDL_Quit, vieme, je to udalosť, ktorá sa bol vytvorený, keď sme zasiahnuť, že X v rohu okna. A môžeme nastaviť v blízkosti požiadal rovný 1. Zvyšok je len niektoré animácie ktoré ste nevideli. Tak poďme do toho a robiť to a uvidíte, ako dobre to funguje. Takže budem písať a make potom SRCS = hello5_events.c. Tam sme ísť. Games. 

Teraz môžeme vidieť, že to naozaj zmenšený štyrmi. A teraz sa to odrazí v okolí. Mám nejaké detekcie kolízie deje sa po stranách okna že môžeme sa pozrieť na. A čo sa stane, keď idem na to uzavrieť? To sa zavrie. Fantastický. Dostali sme tú udalosť. A s ním zaobchádzal my. 

Takže poďme sa pozrieť späť na kód. Tak ako som sa to poskakovanie okolo takto? Spomínam si, ako nastaviť obaja x a y spočiatku k rýchlosti. A rýchlosť je pozitívna konštantný, tak to je bude, aby si to začína ísť dole a doprava. 

Teraz, každý rámec, navyše k manipulácii žiadne udalosti, ktoré mohlo dôjsť, Idem zistiť, či môj sprite sa snaží ísť von z okna. Takže môžeme urobiť, že len kontrolovať x_pos 0, y_pos 0, a potom tiež x_pos a y_pos s šírka okna a výška okno. Všimnite si, som sa odpočíta šírka sprite. A to je preto, že keď som nemal odpočítame šírku sprite, to by kontrolovať iba to, že pôvod sprite nešiel von oknom. Ale chceme celokrajné šírka sprite byť vždy vnútri okna a celá výška škriatka byť vždy vnútri okna. Takže to je to, čo je pre odčítanie. Veľa geometrie tu môžu byť užitočné k tomu to na papieri s súradníc Systém vidieť, čo sa deje. 

Takže keď mi zrazí, len som jednoducho resetovanie polohy tak, že sa nebude z obrazovky. A budem, ak to odrazí na jednej z bočných stien, Budem negovať x rýchlosť tak, že začína odrážať v opačnom smere. A podobne, ak to udrie hornej alebo spodnej, Chystám sa nastaviť rýchlosť y rovná záporné rýchlosti y, tak, aby sa odrazí späť. Takže to je to, ako sme sa dostali, že tu. 

A aktualizácia pozície rovnako ako sme videli predtým, vydeľte 60, pretože sme len manipulačný 1/60 sekundy. A potom rendering, presne rovnaké ako predtým. A tak to je všetko ktorá sa deje na tento súbor. Tak to je to, ako to robíme udalosti. Hlavná vec, aby vzali tu je táto funkcia SDL_PullEvent. A vy by ste mali určite prečítať Dokumentácia viac o SDL_Event odbory, pretože tento typ dát je veľmi, veľmi dôležité, pretože ich používame pre všetky druhy akcií. 

Napríklad sme používať ho pre klávesnicu udalosti, čo je to, čo tento súbor je pre. Tak čo máme? Máme to isté ako predtým, inicializovať SDL, vytvoriť okno, vytvoriť vykresľovací, načítať obrázok do pamäte, vytvoriť textúru. Opäť platí, že budeme majú tento dest obdĺžnik, budeme mierka obrázku štyri, aby bolo o niečo menšie. Teraz, budeme začať sprite v strede obrazovky. Ale tentoraz, budeme nastaviť Počiatočná X a Y rýchlostiach na nulu, preto, že klávesnica je bude kontrolovať tie. A navyše, budeme sa sledovať týchto premenných hore, dole, doľava a doprava. A že to bude držať stopa, či máme stlačení tlačidla klávesnice, ktoré zodpovedajú hore, dole, doľava, a doprava. 

Teraz, to je tak trochu fantázie pretože môžeme použiť W, A, S, Tu D, alebo skutočné šípkami. Uvidíme, že v len sekundu. Takže budeme spracovávať udalosť, rovnako ako predtým. My zatiahnite za udalosť. Ale teraz budeme prepnúť na typu udalosti. Ak je to SDL_Quit, my sme bude tesne priliehajúce požaduje, aby jeden, rovnako ako predtým. To spracováva x v rohu okna, tak, že naše okno v skutočnosti sa zavrie. 

V opačnom prípade, ak dostaneme SDL kľúč dole Akcia, ktorá znamená, že stlačenie tlačidla, potom to, čo budeme robiť, je, že sme prejdeme na túto vec tu, ktorý means-- tak event.key znamená zaobchádzať našu akciu únie, ísť a získať kľúč Štruktúra udalosť v tom. Tak to dopadá, že tento únie je kľúčovou udalosťou štruktúra. A potom ísť na kľúč Štruktúra večera bol jeho pole volal keysym a potom scancode. A opäť, rozhodne čítať dokumentácia o tom. Vstupy Kľúčové slovo celkom zaujímavé. Môžete získať skenovanie kódy alebo klávesové kódy. A je to trochu jemné, ale dokumentácia je celkom dobrá. 

Takže ak vidíme skenovanie kód naše stlačení klávesy, že W alebo hore, budeme nastaviť rovný 1. A potom sme sa vymaniť z tohto spínača. Ak je to, alebo vľavo, sme si stanovili odišiel na 1, et cetera, et cetera, pre nadol a doprava. Teraz, v tomto vonkajšom prepínače, keď vidíme kľúč hore udalosť, to znamená, že sme vydali kľúč a my sme už nie stlačením. Takže som chcel povedať, až sa rovná 0, vľavo = 0, dole = 0, doprava sa rovná 0, a tak ďalej. 

A všimnite si máme v každom z nich dva prípady dal hneď vedľa seba so žiadnym samostatným kódom V prvom prípade, ktorý znamená, že či už je to s S alebo nadol tu, to bude spustenie tohto kódu. Tak to je celkom šikovný. Zabraňuje nám majú čo do činenia viac podmienky a IFS a veci ako to. 

Takže budeme stanoviť rýchlosť. Nastavili sme rýchlosť na 0. Potom, ak je stlačené up a nie dole, potom sme nastavte y rýchlosť na negatívny rýchlosti. Nezabudnite, negatívne, pretože záporný smer y je max. A pozitívne y smer je dole. Ak je stlačené a nie, potom sme bude nastavte ju na pozitívnu rýchlosť, čo znamená, že ísť dole na obrazovku. To isté sa doľava a doprava. 

A potom budeme aktualizovať pozície rovnako ako predtým. Budeme robiť kolízii detekcia s hranicami, ale nebudeme na reset rýchlosť, pretože rýchlosť je len ovládať klávesnicou. Ale budeme reset pozície, aby ju udržali v okne. A ideme do nastavenia pozície v struct a potom robiť všetky rendering veci z predtým. Takže poďme sa pozrieť, čo to robí. Tak, aby SRCS-- poďme sa pozrieť, To je hello6_keyboard.c. 

Ale nie. Tak sme dostali niekoľko varovaní tu. A to je jednoducho hovorí, my nie skontrolujte pre každú možnú druhov udalosti. To je v poriadku, pretože tam je 236 z nich, alebo tak. Takže budem ignorovať tieto upozornenia. Je to stále zostavený v poriadku. Takže budem hrať hru. Nie je to v pohybe. Ale teraz, keď som sa mash na mojej klávesnici, Môžem urobiť nejaké WASD pohyb tu, Ja používam svoje šípok rovnako. A všimnite si, aj keď som lisovanie hneď teraz, to nebude z okna, pretože resetovať som ho na každom snímku. Tak to je celkom pekné. Môžete si predstaviť, pohybujúce sa okolo Mario s Niektoré šípkami alebo niečo také. A áno, X funguje. 

Takže konečný súbor ideme na pohľad, hellow7_mouse. To je, ako dostať vstup myši. Takže v tomto jednom, sme import hlavičky matematiky, pretože budeme mať trochu matematiky sem. Rovnaký starý, samá vec, cieľ, samá, videli, že predtým. No, to je zaujímavé. Takže sme späť iba kontrolu pre SDL prestať udalosť. Prečo tomu tak je? Takže sa môžete dostať myši vstup od udalostí. Ako keď myš bude pohybovať, dostanete udalosť za to. Pri stlačení tlačidla myši, môžete získať udalosť za to. 

Ale je tu ešte ďalší, o niečo jednoduchšie Možno, API pre získanie myši vstup. A to je jednoducho SDL stať get myš. Takže mám int pre x a y na pozíciu kurzora. Odovzdám to SDL_GetMouseState, ktorá stanovuje tieto. A to je pozícia v súradný systém okna. Takže v prípade, že hmota je v ľavom hornom rohu okná, ktoré by 0, 0. 

A teraz, čo budem robiť, je, aby idem urobiť trochu vektora matematiky. Stavím sa, že ste si mysleli, že nie vidieť, že v CS50, ale tu to je. Chystám sa urobiť nejaké vektor math dostať vektor z obrazu na kurzora. A tak prečo mám to odčítanie tu? No, keď som jednoducho použiť dest .-- tak Potrebujem preložiť myši x a y o polovicu šírky a výška obrazu, pretože chcem do stredu obrázok, ísť smerom k myši, nie pôvod obrazu. 

Tak to je len aby sa ubezpečil, hovorím o tu stredu obrazu. Potom sme si delta X a Y, ktoré je rozdiel od cieľa skutočnej polohe obrazu. A potom sa môžeme dostať vzdialenosť, ktorá sem bude Pytagorova veta, druhá odmocnina z x krát X plus časy y y. 

Teraz, aby sa zabránilo chvenie, a ja vám ukázať vy, čo to robí, keď to neurobíte, ak vzdialenosť medzi kurzorom a strede snímky je nižšia ako päť, Ja jednoducho nebude k pohybu obrazu. Inak sme si stanovili rýchlosť. A my ho nastaviť tak, aby rýchlosť bude vždy konštantný. A čistý výsledok zo všetkých to matematika je, že obraz bude pohybovať smerom kurzora. 

Teraz sa ukazuje, že SDL_GetMouseState, Okrem stanovenia x a y argumenty tu, to tiež vráti int, ktorá zodpovedá so stavom tlačidiel myši. Takže sa môžeme dočítať, že nie je priamo, ale môžeme použitie týchto makier, jeden bitový operátor, nie je to desivé, len bitový a. Takže hovoríme tlačidlá, ktoré je výsledkom našej SDL_GetMouseState, v prípade, že a bitový a toto makro tu, SDL_BUTTON_LEFT. 

Takže to bude jednoducho vyriešiť do bitmapy, ktoré zodpovedá na ľavé tlačidlo myši stlačené. A tak v prípade, že bitové a dochádza k nemu, a to od nuly, čo znamená, že Bolo stlačené ľavé tlačidlo, Potom sme vlastne bude negovať ako x a y rýchlosti, ktorá bude len aby obraz utečenca. Aktualizácie pozícií. Kolízie detekcie, videl všetky predtým, rendering, v poriadku. Urobme to. Takže ste dostali urobiť bezpečnostného riadiaceho systému = hello7_mouse.c. Skvelé. Žiadne chyby. A hra. 

Tak tu mám myš. A obraz je skutočne naháňa myš. Teraz, v hre urobíte, možno to je ako nepriateľská naháňania váš malý znak alebo čokoľvek iného. Ale tu máme image naháňa myš. A keď som kliknite na tlačidlo, myš začne naháňať obrázok a obraz je uteká od myši. Tak to je celkom v pohode. A upozornenie znova, je tu detekcia kolízií ešte tu. 

Tak, že je konečný malý demo som postavil tu. A poďme sa pozrieť na ešte jedna vec. Takže späť, som sa zmienil, toto chvenie. Dobre. Takže ak je vzdialenosť menšia než päť bodov, Bol som nastavenie x a y rýchlosti na nulu. Čo sa stane, keď sa zbavíme, že? Takže som sa to jednoducho urobiť. Ospravedlňte prosím tento strašný štýl, ale my sme zakomentovány správny kód. Takže budem šetriť, že a vykonajte rovnaký príkaz od predtým, aby sa to. 

Dobre. A teraz, čo sa stane? Dobre. Sme stále v nadväznosti na myš, rovnako ako predtým, ale keď sa dostaneme k myši, máme tento hrubý chvenie. Čo sa deje tam? No, v našom vektora matematika, pamätajte sme boli pričom vzdialenosť medzi kurzor a stred obrazu? No, ako to blíži 0, začneme dostať ako je tento druh bláznivé správanie kde je obraz druh ako oscilujúca okolo kurzora. A to vytvorenie tohto chvenie. A to je naozaj škaredý. A pravdepodobne nie Chcete, aby vaše hry, robiť to, ak to nie je nejaký špeciálny efekt. 

Takže to je dôvod, prečo máme práve tento svojvoľný odrezal z piatich bodov, kde hovoríme či je to do piatich bodov, sme dobrí. Nepotrebujeme, aby už posunutie obrazu. Takže to je to, čo sa tam deje. 

Tak to je celkom veľa to. Teraz viete, ako vytvoriť okno, načítaní obrázka, nakresliť obrázok do okna, dostať vstup z klávesnice, myši vstup dostať, je tu veľa ďalších vstup, ktorý ste nechceli vedieť, ako sa dostať, ak ste práve stráviť pár minút pohľade na dokumentáciu. Takže ste skutočne celkom Niekoľko nástrojov, k dispozícii teraz písať plnohodnotnú hru. 

Teraz, každá hra potrebuje nejaký zvuk, ale zvuk dokumentácia Je tiež celkom dobrý. A ja som ochotný sa staviť, že v prípade, ste pochopili všetky veci, sme sa rozprávali o dnešku sa obrazy, a povrchy, okná, a všetko, potom zisťuje, audio API nie je bude tak zlé. Tak som sa tešiť čo vytvoríte pomocou SDL.