THOMAS LIVELY: Selvä. Hei kaikki. Olen Thomas Lively. Tämä seminaari tulee olemaan kirjallisesti 2D pelejä C käyttäen SDL. Joten tiedän, että olet kaikki kysyy, joo, olen todella haluavat pelata pelejä ja tehdä pelejä, mutta mikä on tämä SDL liiketoiminnan? Joten SDL on C-kirjasto. Se tarkoittaa Simple DirectMedia kerros. Ja se on cross platform, pelin kehityksen kirjasto. Se toimii Windows, Mac, Linux, jopa iOS ja Android. Se käsittelee asioita, kuten pääsy äänentoistojärjestelmät tietokoneen, näppäimistön, ja hiiri, peliohjaimia, jos ne ovat liitettyinä. Mobiili, se voi jopa tehdä touch tulo ja kaikki tämä. Ja tietenkin, se käsittelee grafiikkaa, piirustus asioita näytön. Joten se on hyvin laajalti käytetty, vaikka et ehkä ole kuullut sitä ennen. Se on rakennettu, esimerkiksi, Valven Source-pelimoottori, joka valtuudet pelejä kuten Portal ja Team Fortress 2. Se on myös hyvin suuri määrä indie-pelejä, jotka tulevat ulos, joten olen innoissani mitä kaikki tulee tehdä sen kanssa. 

Seminaarin tavoitteena on saada sinut vahvistetun kehittyvän kanssa SDL. Aiomme oppia luoda peli-ikkunan. Aiomme luoda sprite, jotka ovat kuvia pelin joka voi liikkua. Aiomme oppia ja animoida sprite, joten siirtää niitä, tehdä ne muuttuvat ajan myötä. Ja aiomme oppia kaapata näppäimistö ja hiiri tulo tietokoneesta. Mitä me emme puhu noin tänään on 3D-grafiikka, koska se on erittäin monimutkainen aihe, että meillä ei ole aikaa. Emme opi toistaa ääntä meidän pelejä. Emmekä saa rakentaa mitään mutta Linux. 

Nyt varoituksista on että, toivottavasti loppuun mennessä seminaarin, voit olla tyytyväinen SDL asiakirjat, joten voit mennä selvittää kuinka pelata ääntä itse. Rakentaa myös Mac- tai PC pitäisi toimia täsmälleen sama kuin rakennuksen Linux, mutta asennus on menossa olla hieman erilainen. Joten sinun pitäisi pystyä selvittää miten tehdä näitä asioita loppuun mennessä päivän seminaarissa. 

Joten perustettu aiomme käyttää virtuaalikoneen. Haluamme käyttää CS50 IDE, koska me vain olemaan kirjallisesti C. Mutta koska IDE ei ole selain, me voi luoda uusia ikkunoita tai näyttö grafiikka se. Joten tarvitsemme virtuaalikoneen. Joten voit seurata ohjeita täällä manual.CS50.net/appliance/15 asentaa virallista CS50 laite, joka on vain Linux virtuaalinen kone. 

Ja sitten kun olet että kaikki asetetut up-- se saattaa kestää hetken, koska erittäin suuri download-- olet menossa ajaa VM sudo apt-get update. Ja että todella tapahtuu päivittää kaikki ohjelmistot paketteja virtuaalikone. 

Sen jälkeen, olet menossa ajaa sudo apt-get install, libsdl2-2.0-0, libsdl2-dbg, libsdl2-dev, ja Lisäksi libsdl2-kuva-2,0-0, libsdl2-image-dbg, ja libsdl2-kuva-dev. Mitä tämä tekee? Että ainoastaan ​​asentaa debug tiedot, asiakirjat, otsikot, ja binaarit kaksi kirjastoja. Säännöllinen vanha, SDL 2.0, ja toinen kirjasto nimeltään SDL Image, joka aiomme käyttää ladata kuvatiedostoja meidän peli. 

Joten kun sinulla on, että myös että, juuri kun se kysyy, te vain kirjoittaa kyllä, paina Enter asentaa ne paketit, ja sinun pitäisi olla hyvä mennä. Joten saada jakeluun koodin, sinua can-- oi rakas, tämä ei ole päivitetty. Ellei sinulla ole GitHub account-- jos sinulla on GitHub tili, voit tehdä tämän Git klooni komento repo ja että lataa Git Repo kaikki koodi se, niin että sinulla on koodi. 

Jos sinulla ei ole GitHub huomioon, mitä pitäisi tehdä, on tyyppi wgithttps: //github.com/tlively/sdl seminar-- ja tässä se on different-- /archive/master.zip. Joten jälleen, että on täsmälleen sama URL, paitsi se tulee olemaan tlively / SDL_seminar / master.zip ja käytät wgit ladata että. Ja sitten voit vain pura että arkisto ja sitten sinulla on kaikki lähdekoodia. Niin pahoillani siitä. Ja sitten koodi myös isännöi klo CS50 seminaarin web-sivun pari päivää. 

Selvä. Miten siis päästä alkuun kirjallisesti oman pelin? No, ensimmäinen asia aiomme halua tehdä on tarkastella SDL asiakirjat. Joten tässä on VM. Ja tässä on web-sivun. Olen suunnistaa elää libsdl.org. Mitä aion tehdä tässä mennä yli sivupalkkiin, kohtaan Documentation, ja klikkaa wikissä. Tämä tuo minut wiki että on suurin osa dokumentaatiosta SDL. Päälleni sivupalkissa täällä, olemme menossa klikkaa API luokittain, koska aikoo antaa meille mukava kategorinen näkymä Koko API SDL. 

Niinpä esimerkiksi, meillä on perus alustuksen ja sammuttaa, kaikki eräänlainen hallinnolliset tavaraa käyttäen SDL, ja sitten meillä on osio näytetään asioita näytön. Se on video. Input tapahtumia, se on saada panosta näppäimistö, saada panosta hiiren, ja ohjainta, jos sinulla on se vielä. Ei force feedback asioita kuten peliohjaimet, joka emme aio puhua. Ja tässä on ääni. Ja sitten on joukko muita tavaraa, että SDL voi tehdä sinulle. 

Mutta tänään aiomme keskittyä on alustus täällä, näytetään kuvat video jakso, ja käsittely Syöttö tapahtumia. Joten nämä ovat tärkeimmät osat dokumentointi että sinun pitäisi murehtia. Just for fun, jos menemme yli täällä ja klikkaa API nimen, voimme nähdä lista jokaisesta yksittäinen asia SDL kirjastossa. Joten kaikki nämä toiminnot, laskentatulosten, rakenteet, hullu määrä tavaraa, Aakkosjärjestys. Ja selvästi, kunnes tiedät olet tekemässä, tämä ei tule olemaan liian hyödyllinen, minkä vuoksi emme API luokittain. 

Joten pääset alkuun. Toivottavasti olet jo ladattu jakelu koodi. Ja niin mitä voit tehdä on, oikea täällä CS50 laite, avaa terminaali. No niin. Joten olen jo ladannut jakelu koodin Zip menetelmä. Ja olen purettu sen. Joten tässä se on SDL seminaarissa mestari. Joten aion mennä tuohon hakemistoon. Ja mitä näemme tässä että meillä on seitsemän C-tiedostoja. Ja tämä tulee koodi aiomme katsot tänään. Meillä makefile. Ja meillä on resursseja hakemistoon, joka yksinkertaisesti on kuva että sinun näkemään pian riitä. 

Joten avata nämä tiedostot käyttämällä G-Muokkaa editori. Joten en halua avata kaikki tiedostot alkaa hei ja päättyvät .c. No niin. Niin, että pieni ikkuna, joten olemme aikoo yrittää tehdä, että isompi. Ei, se meni pois. 

Selvä. Joten tässä on ensimmäinen tiedosto olemme menossa katsomaan. Sitä kutsutaan hello1_sdl.c. Ja kaikki tämä tekee on alustaa SDL kirjasto jotta voimme alkaa käyttää sitä. Mistä tiedät tulla kanssa tämän koodin itse? No, jos katsomme yli klo asiakirjat ja menemme alustuksen ja sammuttaa osiosta, se tulee meille kaikki miten alustaa SDL. Joten ehdottomasti lukea tämän joskus toiste. Se tulee kertoa teille kaikille mitä täällä tapahtuu. Mutta tärkein asian ydin on, että Meidän täytyy soittaa tätä toimintoa SDL In It ja siirtää se millaisia ​​asioita haluamme kirjaston alustaa. Joten meidän tapauksessamme, me vain menossa alustaa videon nyt, jotta voimme alkaa näyttää kuvia. 

Täällä, voit nähdä, jos me klikkaa SDL siinä, me voi saada vielä enemmän tietoa, mukaan lukien paluu arvo. Näemme siis täällä, että se returnes nolla menestykseen. Joten meidän koodi, aiomme nähdä, jos se ei palaa nollaan, ja jos se ei palauta nolla, joten se ei onnistunut, sitten aiomme yksinkertaisesti tulosta virhe tällä muu toiminto, SDL get virhe, joka palauttaa merkkijonon kuvataan virhe, joka tapahtui. Aiomme tulostaa että virhe ja sitten olemme vain menossa poistua ohjelmasta virhekoodi. 

Sitten toinen asia, että me tarvitsemme tehdä on, ennen ohjelma loppuu, jos me onnistuneesti alustettu SDL, meidän täytyy vain kutsua sitä SDL lopettaa. Ja että menee käsitellä puhdistamisesta kaikki SDL: n sisäisten resurssien meille. Joten asiakirjat there-- uudelleen, täällä olemme alustuksen ja sammuttaa osiosta dokumentaation. Voit klikkaa toiminto tässä, SDL lopettaa, ja voit lukea kaikki siitä samoin. Ja monet näistä toiminto dokumentointi sivut on esimerkki koodia, joten tämä on erittäin hyvä voimavara. Ehdottomasti viettää aikaa luet osaa tässä wikissä jos aiot tehdä tätä hanketta. 

Selvä. Niin, että meidän koko ohjelma. Mitä voimme tehdä nyt is-- olen menossa avata makefile täällä, joten aion ottaa katsokaa miten se toimii. Ja se on hyvin yksinkertainen makefile, samanlainen kuin mitä olet nähnyt ennen. Yksi tärkeimmistä eroista on se, täällä, tämä aikoo lisätä tulosta käynnissä tämän komennon, joka olet jo asentaa, jos olet asentanut SDL. Ja tämä on käsky että menee tuottaa ylimääräistä lippuja kääntäjä. 

Lisäksi, että me jolloin se kaikki tavanomaiset komennot, sekä nämä kaksi komentoa. Joten -lsdl2-kuva kahvat linkitys SDL kuvakirjaston. Ja -lm todella käsittelee linkittäminen standardin C matematiikka kirjasto. Joten emme aio tarvitse ne kaikille meidän C-tiedostoja, mutta me vain laittaa ne, jotta voimme käyttää samaa makefile kaikesta ilman muutoksia. 

Yli täällä lähteistä, tämä on silloin olisit laittaa tiedostot olivat menossa koota projektin. Mutta koska jokainen minun C tiedostoja tässä on päätehtävä, se tulee hämmentyä jos panemme ne kaikki. Joten aion vain sanoa, nyt, hello1_sdl.c, joka on yksi me vain katsoi. Joten jos menen takaisin yli täällä, voin tehdä tehdä. Ja mitä se teki onko se vain koottu että ensimmäinen tiedosto. Ja sitten voimme kirjoittaa ./game, koska se on suoritettava se tuotti. Ja kaikki se teki oli tulosta alustus onnistunut. Joten teimme jotain oikein. Mutta se oli aika tylsää, koska emme näe ikkuna, mitään ei liikkuminen. 

Niin suuri, saimme SDL alustettu. Nyt, siirtyä jotain hieman mielenkiintoisemman. Joten tässä meillä on hello2_window.c, ja tämä tulee olemaan hieman monimutkainen C-ohjelma, joka alustaa SDL aivan kuten ennenkin, paitsi nyt olemme myös menossa alustaa SDL ajastin. Ja tämä tulee olkaamme pääsyn sisäinen ajastin ja käyttö liittyvät toiminnot ajoin. 

Ja sitten Katsotaanpa täällä. Mitä me teemme on meillä on tämä osoitin että SDL ikkunaan struct, joka aiotaan luoda tällä puhelu toiminnon, SDL luoda ikkuna. Nyt, tämä vie paljon argumentteja, niin mennään katsomaan asiakirjat. Joten jälleen, aion API luokan, olen menee alas video täällä, ja ensimmäinen jakso, näytetään ikkunoiden hallinta. Joten tämä jakso on tonni tavaraa siinä, mutta jos katsotte kautta Näiden toimintojen, luultavasti nähdä, että luultavasti yksi me haluavat kutsutaan SDL luoda ikkuna, joka sattuu olemaan oikeassa yläreunassa. 

Ja niin tämä on asiakirjat tätä toimintoa. Ikkuna tulee olla otsikko, X- ja Y-ruudulla, se tulee leveys, korkeus, ja sitten se tulee ottaa joitakin lippuja. Nyt, emme oikeastaan ​​välitä tahansa näistä lippuja juuri nyt, mutta jos halusi tehdä jotain kuin tehdä koko näytön ikkuna, voit vilkaista joka. Nyt olemme juuri menossa käyttää näitä erityisiä arvoja, SDL ikkuna plus keskitetty x ja y järjestyksessä vain luoda ikkuna keskellä meidän näytön. 

Niin, että mitä se on tekemässä. Ja jos ikkuna sattuu olemaan null, eli on virhe, sitten taas me juuri menossa tulostaa virhe käyttäen SDL GET virhe. Ja sitten koska me alustettu SDL, meidän on nyt sulje se. Joten me kutsumme SDL lopettaa ennen palaavat yksi tärkeimmistä. 

Joten meillä on tämä ikkuna auki toivottavasti. Ja mitä me aiomme tarvitsee vain aiomme soittaa SDL 5000 millisekuntia, joka on sama kuin viisi sekuntia. Ja kun olemme tehneet, että se tulee tuhota ikkunaan, siivota SDL kirjasto, ja poistua ohjelmasta. Joten mene eteenpäin ja antaa että laukaus. 

Joten nyt muuttamisen sijasta makefile joka kerta, Voin yksinkertaisesti tehdä, ja sitten komentorivillä, sanovat lähteistä equals ja sitten tiedosto olemme kokoamiseen. Joten se on hello2_window.c. Fantastinen. Ei erros. Nyt, jos hoidamme suoritettavan, näemme tämän ikkunan. Nyt on olemassa muutamia ongelmia ikkuna. Voimme siirtää sen ympärillä, mutta se on Tätä taustaa roskaa sisälle. Joten emme ole laadittu mitään, ja niin se on aivan täynnä roskaa, joka on melko paljon, mitä odotamme. 

Lisäksi emme voi sulkea ikkunan. Olen painamalla tätä X kulma ja mitään tapahtuu. Joten näemme, miten korjata että vähän. Joten kiinnitä osa, jossa ikkuna on täynnä roskaa ensin. Joten jos menemme yli hello3_image.c, mitä voimme nähdä on, että olemme lisänneet muutamia enemmän asioita täällä. Olemme lisänneet tämän uuden otsikon tiedosto saada ajastintoiminnot. Oletan teimme että viimeisinä yksi, liian, ja en maininnut sitä. Mutta nyt, koska olemme kanssa kuvia, meidän täytyy sisällyttää SDL kuva otsikkotiedoston samoin. Joten se on sama asia kuin ennen, alustetaan SDL täällä, Sama käsitellä luoda ikkunat. Olemme nähneet, että ennen nyt. 

Nyt meidän täytyy luoda jotain kutsutaan renderer, joka tavallaan kulkee ikkuna. Mutta se on eräänlainen abstrakti esine, joka on vastuussa tehnyt kaikki nämä piirustus toimintaansa ikkunaan. Ja se todella vastaa ja ohjelma ladataan osaksi grafiikka laitteistosta tietokoneen tai puhelimen tai mitä tahansa. Joten liput haluamme kulkea it-- ja voit katsoa asiakirjat saada tarkemmin here-- menossa on SDL renderöinti nopeutettava, joka tarkoittaa se tulee olemaan käyttämällä grafiikkalaitteistoa eikä vain emuloidun ohjelmisto. 

Ja aiomme käyttää SDL Renderer PRESENTVSYNC. VSYNC on asia, joka yksinkertaisesti tekee grafiikka näyttää paremmalta ja estää tämä asia sanottu näyttö kauhua, jossa puolet yhden kehyksen ja puolet seuraavan runko saada piirretty samanaikaisesti ja se näyttää kamalalta. Mutta taas, voit mennä lukemaan siitä itse. 

Joten meillä on joitakin lippuja täällä. Ja niin me juuri menossa soittaa tämä toiminto SDL luoda renderöijä. Me aiomme antaa sille ikkuna yhdistävän tähän renderöijä. Negatiivinen tarkoittaa emme välitä mitä grafiikka kuljettaja aiomme käyttää. Niin että olisi aika paljon aina negatiivinen, ellei tiedät näytönohjaimen ajurit. Ja sitten me vain menossa siirtää se meidän lippuja. Joten jos joka palauttaa null, niin olemme painoon virhe kuten tavallista, mutta sitten olemme myös menossa tuhota ikkunaan siivota näitä varoja ennen kutsuvan SDL lopettaa ja palaa. 

Nyt, mielenkiintoinen osa täällä on jossa kuorma meidän kuva Tällä toiminnolla IMG_load. Tämä on ainoa funktio aiomme käyttää alkaen SDL kuvan kirjastosta. Se on ainoa mitä tarvitsemme. Se on toiminto, joka vie merkkijono että on polku tahansa kuvan resurssi. Ja se voi olla .png, GIF, bittikartta, mitään näistä asioista. Ja siksi tämä toiminto on niin mukavaa. Se pystyy käsittelemään melko paljon tahansa muodossa. Lataa sen muistiin ja tallentaa sen koska asia sanottu SDL pinta. 

Nyt SDL pinta on vain struct joka edustaa kuvadatan muistiin. Joten voit lukea lisää että asiakirjoissa kaksi. Ja jos tämä virheitä, niin olemme aikoo tehdä koko juttu missä me painamme virhe, sulkea resursseja, ja sitten sulje ohjelma. Nyt mielenkiintoinen asia on, ennen voimme tehdä tämän kuvan ikkunan, meidän on todella tehdä sen rakenne. Nyt rakenne vastaa kuvatietokantojen ladattu osaksi graafisen laitteiston muistiin. 

Joten pinta on tärkein muisti, säännöllinen muisti että olemme käyttäneet kaikki lukukauden, ja rakenne on tässä erillisessä VRAM muisti että näytönohjain valvontaa. Joten me kutsumme tätä toimintoa SDL_CreateTextureFromSurface. Annamme sille meidän renderöijä ja meidän pinta. Ja sitten me olemme todella tehdään pinta, joten me vain aio vapauttaa sitä. Emme tarvitse sitä enää. Ja sitten joten jos tämä puhelu errored ja palasi null, sitten aiomme tehdä koko virheraportoinnin asia uudelleen. 

Selvä. Täällä me ajautua Varsinainen mallinnus toimintoja. Niin soittamalla SDL_RenderClear ja kulkee sen renderer liittyy meidän ikkuna yksinkertaisesti tekee ikkunan pimenee. Niin se poistaa roskaa että näimme meidän ikkunasta ennen ja tekee musta. Ja sitten me aiomme soittaa SDL_RenderCopy, antoivat meidän renderer, meidän rakenne. Ja me puhumme mitä nämä kentät ovat hieman. Mutta se on menossa ottaa rakenne tiedot ja kopioi se päälle meidän ikkuna piirtää kuvan. Niin sen jälkeen olemme tehneet tämän kopio tietojen siirtämistä meidän ikkunasta, meidän on tehtävä tämän lisätoiminnon nimeltään SDL_RenderPresent. 

Ja tämä on mielenkiintoinen koska tämä saa osaksi aihe nimeltään kaksinkertainen puskurointi. Joten kaksinkertainen puskurointi on tekniikka, joka tekee grafiikka näyttää paljon paremmalta. Jälleen se estää, että näytön repiminen Puhuin aikaisemmin, jos sinulla on kaksi puskurit. On takaisin puskuriin muisti ja edessä puskurin. Edessä puskuri on kirjaimellisesti mitä ruudulla tällä hetkellä. Joten me kaikki nämä piirtää muunnelmia, kuten SDL tehdä kopio tai SDL_RenderClear takaisin puskuriin. Joten he muuttavat asioita takana puskuriin. Tässä voisimme olla piirros tämä vihreä neliö takaisin puskuriin. 

Joten sitten kun olemme tehneet tekemässä meidän tehdä toimintaa, joka saattaa kestää todella kauan aika, mitä aiomme tehdä on vaihtaa puskureita. Joten se kirjaimellisesti vie vain edessä puskurin ja takaisin puskuri ja kytkee sen, niin että, välittömästi, yhdellä kertaa, eikä ehkä satoja tai tuhansia, kaikki hiljattain sulatettu esineet ovat näytössä. Ja tämä estää asiat kuten näytön virkistävä kun olemme vain vetää puoli meidän esineitä kehyksen. Joten siksi meidän täytyy soittaa SDL_RenderPresent, samoin kuten SDL_RenderCopy. 

Jälleen olemme juuri menossa odottamaan viisi sekuntia. Sitten aiomme siivota resurssimme. Meillä melkoisesti enemmän tällä kertaa. Ja sitten me vain menossa poistua ohjelmasta. Joten tehdä. Aion kirjoittaa merkki, ja sitten lähteet on yhtä suuri kuin hello-- tämä on nyt 3image.c. Hyvä, että koottu virheittä. Ja näet tästä Olen nyt venytettyä kuvaani, Hei, CS50! meidän ikkuna, joka katoaa viiden sekunnin kuluttua. 

Nyt, tämä on edelleen ongelmia, eikö? Tämä ei ole hyvä sovellus, koska kun yritän sulkea ikkunan, mitään ei tapahdu. Että x ei ole vielä reagoi. Joten katsomaan seuraava tiedosto, hello4animation. Joten tämä on tiedosto että menee käyttöön liikkuvat ja liike meidän kuva. Joten aiomme tehdä sama asia kuin ennen, aloittaa SDL, luoda ikkuna, luoda renderer, ladata kuvan muisti, luoda rakenne. Olemme nähneet kaiken tuon ennen. Nyt, tämä on uusi. Aiomme on rakennetta kutsutaan SDL RECT, joka on vain suorakulmio. Jos menemme tänne, voimme ei etsi SDL RECT, ja voit nähdä sen hyvin yksinkertainen rakenne. Se on x, y asema, ja se on leveys ja korkeus koko suorakulmion. 

Joten mitä aiomme tehdä, on olemme aikoo määritellä tämän SDL RECT DEST, KOHDE. Ja tämä on paikka ruudulla missä aiomme olla piirros meidän kuva, oikea niin jos aiomme olla liikkuva kuva ympäri, sitten määränpäähän, jossa aiomme tehdä kuva on liikkuminen. Joten aiomme kutsua tätä toiminto SDL_QueryTexture. Ja huomaa olen ohimennen osoite ja dest.w, joka on leveys, ja dest.h, joka on korkeus. Ja niin SDL_QueryTexture on menossa tallentaa näillä aloilla leveys ja korkeus meidän rakenne. 

Ja sitten mitä aion tehdä, on Aion asettaa dest.x olemaan ikkunaan leveys miinus dest.w, joka on leveys kuvahahmon, jaettuna 2. Ja tämä tulee asettaa sen niin että kuva on täysin keskitetty meidän ikkunassa, okei? Joten nyt minulla on y asema. Ja tämä tulee olla muuttuja, joka on muuttuvat, koska aiomme olla liikkuvan kuvan y-suunnassa. Ja nyt meillä on jotain kutsutaan animaatio silmukka. 

Joten miten animaatio toimii? No, ihmisen silmä voi havaita 12 erillistä kuvia joka toinen, okei? Joten jos vilkkua 12 kuvaa korttia minua toisessa, näin jokainen näistä kuvia omana erillisenä yksittäisen kuvan. Nyt, jos flash lisää kuvia minulle toisessa, sitten minun silmään alkaisi hämärtää ne yhteen ja haluaisin pitää sitä liikettä, yhden sijasta eri kuvan. Niinpä esimerkiksi, elokuvia ja televisio, ne flash kuvia sinua 24 kertaa toinen. Niin, että 24 kuvaa sekunnissa. Tietokoneiden näytöt, toisaalta, usein 60 kuvaa sekunnissa. Se on heidän virkistää nopeus. Niin usein ne päivittää kuva ruudulla. Joten meidän tavoite tulee olemaan 60 kuvaa sekunnissa pelimme. 

Joten katsotaanpa että koodissa. Joten jokaisen kehyksen, olemme ensimmäinen menossa tyhjentää ikkuna. Tämä on yleinen malli. Voit pyyhkiä ikkuna kunkin kehyksen, ja sitten tehdä kaikki piirustus toimintaa, ja sitten lopussa, eivät RenderPresent näyttää kaikki kehyksessä. Ja sitten olet menossa on odottaa lopussa odottaa seuraavaan runko pitäisi alkaa. 

Joten jos olen tehnyt paljon monimutkainen laskenta täällä että kesti yli 16 millisekuntia, olisi mahdotonta minulle saada että kuvanopeudella 60 että Halusin, koska kukin kehys on liian kauan laskea. Lisäksi olemme todella tekee eräänlainen vähäinen määrä työtä täällä, koska siellä on vain yksi asia olemme piirustus. Joten en odota 1/60 Toinen, joka on pituus kehyksen välissä kehysten. Joten olen tavallaan teeskennellen tehdä kaikki työni vie nolla aikaa. Mutta todellinen peli, sinun täytyy vähentää aikaa kesti tehdä kaikki tämä työ teidän lepoaikaa. 

Niin joka tapauksessa, mikä minä olen todella tekee tämän silmukan? Olen tyhjentää ikkuna. Asetin dest.y, joka on int minun todellinen y kanta heitetään int. Nyt haluan float päätöslauselma minun y sijoitukseen peliäni, mutta sitten todella piirtää ruudulle, se tarvitsee ints, koska se on yksikköinä pikseliä, joten se mitä valettu on. Aion piirtää kuvan. Joten tämä on lähde suorakulmio. Ja tämä on määränpää suorakulmio. Joten ohitin null varten lähde suorakulmio sanoa Haluaisin kiinnittää minun koko rakenne. Mutta jos sinulla on ollut paljon kuvioita pelin ja ne ovat kaikki yhden ison pintakuviokartan että ladattiin SDL vain yhtenä tekstuuri, voisit Käytä lähde suorakulmio valita pienimpiä tekstuurit, pienimpiä sprite, pois että iso tekstuurin. 

Joten jälleen, olen ohimennen minun tehdä, minun rakenne, ja nyt kohde. Tämä tulee olemaan missä ikkuna se tulee tehdä. Ja sitten, koska olen animointiin jotain, tarvitsen liike, Aion Päivitämme sprite kantansa kuhunkin kehyksessä. Joten minulla on tämä jatkuva kutsutaan selaa nopeus yksiköissä pikseliä sekunnissa. Nyt joka kerta teemme liikkeen, kehys on vain 1/60 sekuntia. Joten aion jakaa, että 60. Ja sitten, katsotaanpa, olen vähentämällä että y asema. Miksi olen vähentämällä? Me saamme että toinen. Joten sitten siivota omat resurssit ja ohjelma on ohi. 

Joten tehdä että. Joten mennä tehdä alakohtaisille kierrätysyhtiöille = hello4 animation.c, okei? Peli. Ole hyvä. Joten minulla on se vieritys ylös ikkuna, joka on aika siisti. Mutta pitää kiinni, olin vähentämällä alkaen y asentoon joka kerta. Mitä siellä tapahtuu? No, käy ilmi, että SDL, ja Itse asiassa, useimmissa tietokonegrafiikan, alkuperän koordinaatistoon on vasemmassa yläkulmassa ikkunan. 

Joten positiivisen x suuntaan menee poikki ikkuna oikealle. Ja positiivinen y suuntaan todella menee alas. Joten jälleen, alkuperä n vasemmassa yläkulmassa ikkunan, positiivinen y suuntaan on alas, ja positiivinen x on oikealle. Kun siis vähennä Y-asema, joka on aio tehdä sitä mennä negatiivinen y-suunnassa, joka on jopa ikkuna. Niin, että mitä siellä tapahtuu. Viileä. 

Katsotaanpa seuraava tiedosto. Tässä on osa osoittavat, missä vihdoin saada, että X ikkunan kulmassa jonka pitäisi sulkea ikkuna tehdä töitä. Joten mitä tapahtuu? Me alustaa SDL, luoda ikkuna, luoda renderer, lataa kuva, luoda rakenne kuten olemme nähneet aiemmin. Meillä on sama kohde suorakulmio kuten ennen, samaan puheluun kyselyn rakenne. Mutta tällä kertaa, olemme sitten menossa jakaa leveys ja korkeus päämäärämme 4. Tämä on vain vaikutus skaalaus meidän kuva alas, kun me näyttää sen ikkunassa neljällä. Niin se on aika siisti. Voimme vain mittakaavassa vain. Aiomme aloittaa Sprite keskellä näytön. Ja nyt meillä on x ja y nopeus ja he molemmat aio aloittaa nollasta. 

Tämä on väärä tiedosto. Olen pahoillani. Niin, että kaikki on totta. Siinä kaikki vielä tämän tiedoston. Meillä on jakaa 4 ja kaiken. Joten tässä meillä on X- ja Y- varten keskellä ikkunaa. Ja annamme sille alkunopeus Tämän vakionopeudella, joka Uskon on 300 pikseliä sekunnissa. Nyt meillä on tämä int voisi yhtä hyvin olla boolean nimeltään lähellä pyydetty. Ja sen sijaan tehdä loputon silmukka ajastin täällä, aiomme olla animointiin kuin kunhan lähellä ei pyydetä. 

Miten siis käsitellä tapahtumia? No, SDL jonottaa tapahtumia kirjaimellinen jono kulissien takana. Ja sitten kukin kehys, voimme dequeue tapahtumia kyseisestä jono käyttäen tämä puhelu SDL_PullEvent. Ja vielä, ehdottomasti mennä lukemaan tästä asiakirjoissa. Siellä on paljon enemmän yksityiskohtia ja paljon enemmän toimintoja voit käyttää tätä. Ohitamme sen osoite tämä asia, SDL_Event että meillä on täällä pinoon. 

Nyt, mitä on SDL_event? Koska SDL, jos katsomme documentation-- katsotaanpa ks API luokittain, tulo Tapahtumat, tapahtuma käsittely, voimme tarkastella numero erilaisia ​​tapahtumia täällä ja voimme nähdä siellä koko ton niistä. Joten mitä on tämä SDL_Event asia? SDL_Event on liitto. Vau, mitä unioni? Olet luultavasti koskaan kuullut, että ennen. Ja se on OK. 

Unioni on ikään kuin struct, paitsi struct on tilaa kaikille kuuluvilla aloilla ja muisti, kun taas unioni on vain tarpeeksi tilaa sopivaksi suurimpaan yksi sen kenttiä, mikä tarkoittaa, että se voi tallentaa vain yksi sen kentät kerrallaan, millaisia järkevää tapahtumia, eikö? Meillä voi olla näppäimistö tapahtuma tai ikkuna tapahtuma, mutta yksittäinen tapahtuma ei voi olla sekä näppäimistö tapahtuma ja ikkuna tapahtuma, joten se olis typerää on tilaa molemmat näistä sisällä meidän tapahtuma liitto. Joten jos halusi Luo oma liitto, se näyttää samalta kuin luoda struct, paitsi että käytämme unionin avainsanan sijasta struct avainsanan. Ja muistakaa, kaikille asioita sisällä liittonne, todellinen muuttuja, joka on liitto voi olla vain yksi näistä arvoista kerrallaan. 

Joten kuinka voimme kertoa millainen tapahtuma me vain piipahti pois tämän jonossa? No, voimme testata event.type. Ja jos se on yhtä suuri ja SDL_Quit, tiedämme se on tapahtuma, joka syntyi kun osuma, että X ikkunan kulmassa. Ja voimme asettaa lähellä pyydetyn on 1. Loppu on vain joitakin animaatio että olet nähnyt ennen. Joten mene eteenpäin ja tehdä tämä ja miten hyvin se toimii. Joten aion kirjoittaa merkin ja sitten alakohtaisille kierrätysyhtiöille = hello5_events.c. Siellä mennään. Pelejä. 

Nyt voimme nähdä se oli todellakin pienennetty neljä. Ja nyt se on pomppi. Minulla on joitakin törmäystarkastelu meneillään kanssa puolin ikkunan että voimme katsoa. Ja mitä tapahtuu, kun menen sulkea sen? Se sulkeutuu. Fantastinen. Saimme että tapahtuma. Ja me käsitellyt sitä. 

Joten muistella koodia. Joten miten saan sen pomppi kuin että? Muista Asetin sekä x y aluksi nopeuksilla. Ja nopeus on positiivinen vakio, joten se on menossa se alkaa menee alas ja oikealle. 

Nyt jokainen kehys, lisäksi käsittelyyn tapahtumia, jotka on voinut tapahtua, Aion tunnistaa, minun sprite yrittää mennä ulos ikkunasta. Joten voimme tehdä sen vain tarkistaa x_pos 0, y_pos 0, ja sitten myös x_pos ja y_pos kanssa ikkunan leveys ja ikkunan korkeutta. Huomata Olen vähennetään leveys Sprite. Ja tämä johtuu siitä, että jos en vähennä leveys Sprite, se vain tarkistaa, että alkuperä Sprite ei mennyt ikkunan ulkopuolella. Mutta haluamme koko leveys Sprite aina olla sisällä ikkuna ja koko korkeuden Sprite aina olla ikkunan sisällä. Niin, että mitä vähennyslaskua on. Paljon geometria täällä voi olla hyödyllistä vetää sen pois paperille koordinoida järjestelmä nähdä, mitä on tekeillä. 

Joten jos en törmäävät, minä vain yksinkertaisesti palauta asema niin, että se ei tule ulos ruudulta. Ja aion, jos se ponnahtaa yksi sivuseinistä, Aion tyhjäksi x nopeus niin, että se alkaa terhakka toiseen suuntaan. Ja samoin, jos se osuu ylä- tai alareunassa, Aion asettaa y nopeus sama negatiivinen y nopeus, niin että se kimpoaa takaisin. Joten se, miten saimme että täällä. 

Ja päivittäminen kannat aivan kuten olemme nähneet aiemmin, jakaa 60, koska olemme vain käsittely 1/60 toisen. Ja sitten tekee, täsmälleen sama kuin ennen. Ja niin se on kaikki että oli meneillään tämän tiedoston. Niin, että miten teemme tapahtumia. Tärkeintä ottaa pois täällä tämä SDL_PullEvent toiminto. Ja kannattaa ehdottomasti lukea dokumentointi lisää SDL_Event liitto, koska tämä tietotyyppi on hyvin, hyvin tärkeää, koska käytämme sitä kaikenlaisia ​​tapahtumia. 

Voimme esimerkiksi käyttää sitä näppäimistöä tapahtumia, joka on mitä tämä tiedosto on. Joten mitä meillä on? Meillä on sama asia kuin ennen, alustaa SDL, luoda ikkuna, luoda renderer, lataa kuva muistiin, luoda rakenne. Jälleen aiomme on tämä dest suorakulmio, aiomme skaalata kuvaa neljä, tee se hieman pienempi. Nyt aiomme aloittaa Sprite näytön keskellä. Mutta tällä kertaa, aiomme asettaa alustava x ja y nopeudet nollaan, koska näppäimistö on menossa hallita niitä. Ja lisäksi aiomme seurata näiden muuttujien ylös, alas, vasemmalle ja oikealle. Ja että menee pitää kirjaa siitä olemme painetaan näppäimiä että vastaavat ylös, alas, vasemmalle, ja oikea. 

Nyt, tämä on eräänlainen fancy koska voimme käyttää W, A, S, D täällä, tai todellinen nuolinäppäimillä. Näemme, että vain toinen. Joten aiomme käsitellä tapahtuma aivan kuten ennenkin. Osaamme tapahtuma. Mutta nyt aiomme kytke tapahtuman tyyppi. Jos se on SDL_Quit, olemme aikoo perustaa lähellä pyydetään yksi, aivan kuten ennen. Joka käsittelee x ikkunan kulmassa, niin että meidän ikkunasta todella sulkeutuu. 

Muuten, jos saamme SDL painettuna tapahtuma, mikä tarkoittaa, että painetaan näppäintä, niin mitä aiomme tehdä, on olemme aikoo kytkeä tämä asia täällä, joka means-- niin event.key tarkoittaa kohtelemme tapahtuma liitto, mennä ja saada avain tapahtuma rakenne sitä. Joten käy ilmi, että tämä Unioni on keskeinen tapahtuma rakenne. Ja sitten mennä avain Tapahtuman rakenne alansa kutsutaan keysym ja sitten scancode. Ja vielä, ehdottomasti lukea asiakirjat tästä. Avainsana tulot varsin mielenkiintoinen. Saat skannata koodeja tai avainkoodeja. Ja se on hieman hienovarainen, mutta dokumentointi on melko hyvä. 

Joten jos näemme scan koodi tärkeimmistä lehdistö W tai ylös, aiomme perustaa yhtä suuri kuin 1. Ja sitten me eroon että kytkin. Jos se on tai vasemmalle, asetimme vasemmalle 1, et ja niin edelleen, ja niin edelleen, sillä alas ja oikealle. Nyt, tässä ulompi kytkin, jos näemme ylös- tapahtuma, se tarkoittaa, että olemme julkaisseet avain ja olemme enää painamalla sitä. Joten aion sanoa ylös ollessa 0, vasemmalla on 0, alas on 0, oikea on 0, jne. 

Ja huomaa meillä on kaikissa näissä Kahdessa tapauksessa korjata vierekkäin ilman erillistä koodia ensimmäisen asiassa, joka tarkoittaa, että onko se S tai alas täällä, se tulee suorittaa tämän koodin. Niin se on aika kätevä. Se estää meitä tarvitse tehdä enemmän ehdot ja IFS ja asiat niin. 

Joten aiomme nopeuden määrittämiseen. Asetimme nopeus 0. Sitten jos ylös painetaan ja ei alas, niin me asettaa y nopeuden negatiivinen nopeus. Muista negatiivinen, koska negatiivinen y suuntaan on ylös. Ja positiivinen y-suunnassa on alaspäin. Jos alas painetaan eikä ylös, niin olemme aikoo asettaa sen positiivinen nopeus, mikä tarkoittaa menee alas näytön. Sama juttu vasemmalle ja oikealle. 

Ja sitten me aiomme päivittää kannat aivan kuten ennenkin. Aiomme tehdä törmäyksen tunnistus rajoja, mutta emme aio palauttaa nopeus, koska nopeus on vain ohjataan näppäimistön. Mutta aiomme nollata kannat pitää se ikkunassa. Ja aiomme asettaa tehtävissä struct ja sitten tehdä kaikki tekee tavaraa ennen. Joten katso mitä se tekee. Joten tehdä SRCS-- Katsotaanpa, tämä on hello6_keyboard.c. 

Voi ei. Joten saimme varoituksia täällä. Ja joka on yksinkertaisesti sanomalla emme tarkista kaikkia mahdollisia laji tapahtuman. Se on OK, koska siellä on 236 niistä tai niin. Joten aion sivuuttaa nämä varoitukset. Se on edelleen koottu hieno. Joten aion pelata peliä. Se ei liiku. Mutta nyt, kun olen mash minun näppäimistö, Voin tehdä joitakin WASD liikkeen täällä, Käytän nuolinäppäimillä samoin. Ja huomaa, vaikka olen painamalla oikea juuri nyt, se ei tule ulos ikkunasta, koska se palautetaan jokaiselle kehyksessä. Niin se on aika siisti. Voitte kuvitella liikkuvat Mario kanssa jotkut nuolinäppäimillä tai jotain. Ja kyllä, X ei toimi. 

Joten lopullinen tiedosto aiomme katsomaan, hellow7_mouse. Tämä on noin saada hiiri panos. Joten tässä, me tuoda matematiikka otsikon, koska aiomme olla hieman matematiikkaa täällä. Sama vanha, sama vanhaa kamaa, kohde, Sama vanha, nähdä, että ennen. No, tämä on mielenkiintoinen. Joten olemme takaisin vain tarkkailun että SDL lopettaa tapahtuman. Miksi näin? Joten voit saada mouse input tapahtumista. Kuten kun hiiri siirretään, saat tapahtuma, joka. Kun hiiren painiketta painetaan, saat tapahtuma, joka. 

Mutta on toinen, hieman yksinkertaisempi ehkä, API saada mouse input. Ja se on yksinkertaisesti SDL hae hiiri valtio. Joten olen int x ja Y kursorin asemaa. Kuljen sen SDL_GetMouseState, joka asettaa nämä. Ja tämä on asema koordinaatisto ikkunan. Joten jos massa on vasemmassa yläkulmassa ikkunan, että olisi 0, 0. 

Nyt, mitä aion tehdä, on Aion tehdä hieman vektorin matematiikka. Lyön vetoa luulit tahdo nähdä, että CS50, mutta tässä se on. Aion tehdä joitakin vektori matematiikka saada vektori kuvan kohdistimen. Ja niin miksi minulla on tämä vähennys täällä? No, jos vain käytetään dest .-- niin Minun täytyy kääntää hiiren X ja y puoleen leveys ja kuvan korkeus, koska haluan keskellä kuva on menossa kohti hiiri, ei alkuperää kuvan. 

Niin, että vain varmistaa puhun noin keskellä kuvaa täällä. Sitten saamme delta x ja y, jotka on ero tavoite todellisen kuvan sijaintia. Ja sitten voimme saada etäisyys täällä, joka tulee olemaan Pythagoraan lause, neliöjuuri x kertaa X plus y kertaa y. 

Nyt estää värinää, ja voin näyttää mitä tämä tekee, jos en tee tätä, jos etäisyys kohdistin ja kuva keskusta on alle viisi, Olen vain aio siirtää kuvaa. Muutoin asetamme nopeus. Ja me aseta se niin, että nopeus on aina vakio. Ja nettotulos kaikki tämä matematiikka on, että kuva on menossa kohti kohdistin. 

Nyt käy ilmi, että SDL_GetMouseState, lisäksi asetuksen x ja y argumentteja täällä, se myös palauttaa int, joka vastaa tilaan hiiren painikkeet. Joten emme voi lukea, että suoraan, mutta voimme käyttää näitä makroja, yksi bittioperaattori, ei että pelottavaa, vain peiton ja. Niinpä sanomme painikkeita, joka on seurausta meidän SDL_GetMouseState, jos ja peiton ja, tämä makro täällä, SDL_BUTTON_LEFT. 

Joten tämä tulee yksinkertaisesti ratkaista sen bittikartta, joka vastaa vasemmalle hiiren painiketta painetaan. Joten jos bittivastineen ja tapahtuu ja se on ei ole nolla, mikä tarkoittaa sitä, vasen painettiin, sitten olemme todella tulee tyhjäksi Sekä x: n ja y-nopeudet, joka vain tehdä kuvan karannut. Päivitys kantoja. Törmäykset havainnot, nähnyt sen kaikki ennen, renderöinti, kaikki hyvin. Tehdään tästä. Joten sinulla tehdä alakohtaisille kierrätysyhtiöille = hello7_mouse.c. Suuri. Ei virheitä. Ja peli. 

Joten tässä minulla on hiiri. Ja kuva on todella jahtaa hiirtä. Nyt peli teet, ehkä tämä on kuin vihollinen jahtaavat pikku merkki tai mitä tahansa. Mutta täällä meillä kuva jahtaa hiirtä. Ja kun klikkaa, hiiri alkaa jahtaa kuva ja kuva on pakenee hiiri. Niin se on aika siistiä. Ja huomautus uudelleen, siellä on vielä törmäystarkastelu täällä. 

Tämä on siis lopullinen pieni demo olen perustanut täällä. Ja lähdetään katsomaan yksi asia. Joten takaisin tänne, mainitsin tämän värinää. Selvä. Joten jos etäisyys on alle viisi pikseliä, Olin asettamalla x ja y nopeus nollaan. Mitä tapahtuu, jos me eroon siitä? Joten aion vain tehdä tätä. Pyydän anteeksi tämän hirvittävän tyyli, mutta me kommentoi ulos oikean koodin. Joten aion tallentaa että ja tehdä sama komento ennen tehdä. 

Selvä. Ja nyt, mitä tapahtuu? Hyvä. Olemme edelleen seuraavien hiiri aivan kuten ennenkin, mutta kun pääsemme hiiri, meillä tämä brutto värinää. Mitä siellä tapahtuu? No, meidän vektori matematiikka, muistan olimme ottaen välinen etäisyys kursori ja kuvan keskellä? No, kuten joka lähestyy 0, alamme saada kuten tällainen hullu käyttäytymistä jossa kuva on eräänlainen kuten värähtelevän kursorin. Ja että on luoda tämä värinää. Ja se on todella ruma. Ja et todennäköisesti haluat pelejä tee sitä, ellei se jonkinlainen erityinen vaikutus. 

Joten siksi olemme juuri tämä mielivaltainen katkaisi viiden pikseliä, jossa sanomme jos se on viiden pikseliä, olemme hyviä. Meidän ei tarvitse siirtää kuvaa enää. Niin, että mitä siellä tapahtuu. 

Niin se on aika paljon se. Nyt tiedämme, miten luoda ikkuna, lataa kuva, piirtää kuvia ikkunaan, saada näppäimistön, saada mouse input, siellä on joukko muita tulo että et tietää, miten saada, jos vain viettää muutaman minuutin katsot asiakirjat. Joten sinulla todella on melko muutamia työkaluja käytettävissänne nyt kirjoittaa täysimittainen peli. 

Nyt jokainen peli tarvitsee äänen, mutta ääni asiakirjat on myös melko hyvä. Ja olen valmis lyömään vetoa, että jos ymmärrät kaikki asiat puhuimme tänään kuvia, ja pinnat, ikkunat, ja kaikki, sitten miettiminen ääni API ei ole tulee olla, että huono. Joten Odotan näkeväni mitä luot SDL.