THOMAS ANIMADA: D'acord.
Hola a tothom.
Estic Thomas Lively.
Aquest seminari serà escriure jocs 2D en C utilitzant SDL.
Així que sé que ets tot preguntant, sí, realment
volen jugar i fer jocs, però el que és aquest negoci SDL?
Així SDL és una biblioteca C.
Es destaca per la senzilla DirectMedia Layer.
I és una plataforma creuada, biblioteca de desenvolupament de jocs.
Funciona en Windows, Mac, Linux, fins i tot iOS i Android.
S'ocupa de coses com l'accés als sistemes d'àudio
per a l'ordinador, el teclat, i ratolí, joystick, si estan units.
El mòbil, fins i tot pot fer el entrada tàctil i tot això.
I, per descomptat, que s'encarrega dels gràfics, dibuix coses a la pantalla.
>> Així que és molt àmpliament utilitzat, tot i que pot ser que no hagi sentit parlar d'ell abans.
Està construït en, per exemple, Motor de font de Valve,
que alimenta jocs com Portal i Team Fortress 2.
Està també en un gran nombre de jocs indie que surten,
així que estic emocionat de veure el que tot estarà fent amb ell.
>> Els objectius del seminari són per aconseguir que es va disposar a ser en desenvolupament amb SDL.
Anem a aprendre per crear una finestra de joc.
Crearem sprites, que són les imatges del seu joc
que es pot moure.
Anem a aprendre ai animar els sprites,
així moure'ls, fer ells canvien amb el temps.
I anem a aprendre per capturar teclat i el ratolí
d'entrada de l'ordinador.
El que no estarem parlant avui és gràfics en 3D,
perquè això és molt complicat tema que no tenim temps per a.
No anem a aprendre a reproduir l'àudio en els nostres jocs.
I no estarem construint per a res, però Linux.
>> Ara les excepcions cal, amb sort, al final del seminari,
se sentirà còmode amb la documentació de SDL,
pel que serà capaç d'anar esbrinar la manera de jugar d'àudio per tu mateix.
També la construcció per a Mac o PC hauria de funcionar exactament la mateixa que la construcció per a Linux,
però la configuració va ser una mica diferent.
Pel que ha de ser capaç d'entendre com fer aquestes coses
per al final del seminari d'avui.
>> Així que per a la posada en marxa, anem utilitzar una màquina virtual.
Volem utilitzar l'IDE CS50, perquè només estarem escrivint en C.
Però ja que l'IDE no és un navegador, que no pot crear finestres o pantalla nous
gràfics en ell.
Així que tenim una màquina virtual.
Així que vostè pot seguir les instruccions aquí a manual.CS50.net/appliance/15
per instal·lar l'aparell oficial CS50, que no és més que una virtual de Linux
màquina.
>> I a continuació, una vegada que tens que tot això es up--
podria prendre una mica de temps, perquè una gran download-- vas
per funcionar en l'actualització de apt-get VM suo.
I això és realment està passant per actualitzar tot el programari
paquets al sistema virtual.
>> Després d'això, vostè va a executar sudo apt-get install, libsdl2-2.0-0,
libsdl2-dbg, libsdl2-dev, i addicionalment libsdl2-image-2,0-0,
libsdl2-image-dbg, i libsdl2-image-dev.
Llavors, què fa això?
Això simplement instal·la la depuració informació, documentació, capçaleres,
i els binaris per a dues biblioteques.
Regular d'edat, SDL 2.0, i una altra biblioteca
anomenada Imatge SDL, que utilitzarem
per carregar arxius d'imatge en el nostre joc.
>> Així que una vegada que hagi de també que, just quan se li pregunta,
només ha de teclejar sí, pressiona Enter per instal·lar els paquets,
i llavors vostè ha de ser bo per anar.
Així que per obtenir el codi de distribució, can-- Déu meu, això no s'actualitza.
A menys que vostè tingui un account-- GitHub si vostè té un compte de GitHub,
vostè pot fer això Git comandament clon a la repo
i que va a descarregar el Git repo amb tot el codi en el mateix,
de manera que vostè té el codi.
>> Si vostè no té un GitHub compte, el que ha de fer és tipus
wgithttps: //github.com/tlively/sdl seminar-- i aquí és diferent--
/archive/master.zip.
Així que de nou, això és exactament el mateix URL, si no va a ser
tlively / SDL_seminar / master.zip i utilitzeu wgit descarregar això.
I llavors vostè pot simplement descomprimir aquest arxiu
i llavors tindràs tot el codi font.
Així que ho sento per això.
I a continuació, el codi també tindrà lloc a la pàgina web del seminari CS50 en un parell
dia.
>> Tot bé.
Llavors, com comencem escriure el nostre propi joc?
Bé, el primer anem a voler fer
és mirar la documentació de SDL.
Així que aquí està la màquina virtual.
I aquí hi ha la pàgina web.
He navegat viure libsdl.org.
El que vaig a fer aquí és anar més a la barra lateral, a la documentació,
i feu clic al wiki.
Això em porta a la wiki que té la major part de la documentació de SDL.
Més a la barra lateral aquí, estem va a fer clic API per categoria,
perquè va a donar nosaltres una bonica vista categòric
de tota l'API per a SDL.
>> Així, per exemple, tenim la inicialització bàsica
i tancat, tota la classe de coses administratives per a l'ús de SDL,
i després tenim la secció de mostrar coses a la pantalla.
Això és vídeo.
Els esdeveniments d'entrada, que és aconseguir entrada des del teclat,
aconseguir l'entrada del ratolí, i la palanca de control, si el té, fins i tot.
Hi ha retroalimentació de força per les coses com a dispositius de joc, que
no parlarem.
I aquí hi ha l'àudio.
I després hi ha un munt d'altres matèria que SDL pot fer per vostè.
>> Però avui anem a enfocar en la inicialització aquí,
la visualització d'imatges en el vídeo secció, i despeses dels esdeveniments d'entrada.
Així que aquests són els principals seccions de la documentació
que vostè ha de preocupar.
Només per diversió, si anem més aquí i feu clic en l'API pel seu nom,
podem veure una llista de tots els cosa a la biblioteca SDL.
Així que totes aquestes funcions, enumeracions, estructures, una increïble quantitat de coses,
ordre alfabètic.
I clarament, fins saps que estàs fent,
això no serà massa útil, és per això que fem API per categoria.
>> Així que anem a començar.
Esperem que ja tens descarregat el codi de distribució.
I així, el que pot fer és, a la dreta aquí en l'aparell CS50,
només cal obrir un terminal.
Aquí anem.
Així que ja he descarregat el codi de distribució mitjançant el .zip
mètode.
I he obert la cremallera.
Així que aquí està en el mestre de seminari SDL.
Així que vaig a entrar en aquest directori.
I el que veiem aquí és que tenim 7 arxius C.
I això va a el codi estarem buscant a l'actualitat.
Tenim un makefile.
I tenim un directori de recursos, que simplement té una imatge
que vostè va a veure molt aviat.
>> Així que anem a obrir estos fitxers usant l'editor de G-Edit.
Així que vull obrir tots els arxius que començar amb hola i acabar amb .c.
Aquí anem.
Així que això és una petita finestra, així que estem va a tractar de fer que més gran.
No, se'n va anar.
>> Tot bé.
Així que aquí està la primera arxiu que anem a veure.
Es diu hello1_sdl.c.
I tot això fa és inicialitzar el SDL biblioteca perquè puguem començar a usar-lo.
Com ho saps per venir amb aquest codi a tu mateix?
Bé, si mirem més en la documentació
i entrem en la inicialització i apagar la secció,
que va a dir-nos tot sobre com inicialitzar SDL.
Així que definitivament llegir això en un altre moment.
Es dirà a tots vostès sobre el que està passant aquí.
Però el quid de la qüestió principal és que hem de trucar a aquesta funció SDL en ell
i passar-ho quin tipus de coses volem que la biblioteca per inicialitzar.
Així que en el nostre cas, només anem per inicialitzar el vídeo per ara,
perquè puguem començar a mostrar les imatges.
>> Per aquí, es pot veure si fem clic a una SDL en ell, ens
pot obtenir encara més informació, incloent el valor de retorn.
Així que veiem aquí que returnes zero en cas d'èxit.
Així que en el nostre codi, anem a veure si no torna a zero,
i si no torna zero, pel que no s'ha realitzat correctament,
a continuació, anem a simplement d'impressió un error usant aquesta altra funció,
Error get SDL, que retorna una cadena que descriu l'error que s'ha produït.
Anem a imprimir aquesta error i després només som
sortirà del programa amb un codi d'error.
>> Després una altra cosa que necessitem de fer és, abans de programa es tanca,
si inicialitzat correctament SDL, només hem de cridar SDL deixar de fumar.
I això va a manejar la neteja tots els recursos interns de SDL per a nosaltres.
Així la documentació allà- de nou, aquí estem en la inicialització
i apagar la secció de la documentació.
Vostè només pot fer clic a la funció aquí, SDL deixar de fumar,
i vostè pot llegir tot sobre això també.
I moltes d'aquestes funcions pàgines de documentació
tenir exemple de codi, de manera que aquest és molt bon recurs.
Definitivament passar algun temps llegir parts d'aquesta wiki
si vas a fer això per a un projecte.
>> Tot bé.
Així que això és tot el nostre programa.
El que podem fer ara és-- estic va a obrir l'arxiu MAKE aquí,
així que em vaig a prendre un veure com funciona.
I és una molt simple makefile, similar al que has vist abans.
Una de les principals diferències és que, aquí, això
es va a inserir el resultat de la cursa aquesta comanda, que ja ha
instal·lat si teniu SDL.
I aquest és una ordre això generarà
algunes banderes addicionals per al compilador.
>> A més d'això, estem donant-li tots els comandaments habituals, així com
aquests dos ordres.
Així que els mànecs -lsdl2-imatge la vinculació de la biblioteca d'imatges SDL.
I el -lm en realitat s'encarrega de vinculació a la biblioteca matemàtica estàndard C.
Així que no necessitarem els de tots els nostres arxius de C,
però nosaltres només posem en el que podem utilitzar el mateix arxiu MAKE per a tot,
sense modificacions.
>> Aquí a les fonts, aquest és el lloc on vol
posar els arxius que anaves compilar per al seu projecte.
Però ja que cadascun dels meus C arxius d'aquí té una funció principal,
que va a confondre si tots posem en.
Així que vaig a dir simplement, per ara, hello1_sdl.c,
que és el que acabem de veure.
Així que si torno més aquí, que puc fer fer.
I el que va fer és només compilat que primer arxiu.
I llavors podem escriure ./game, perquè que és l'executable que va produir.
I tot el que va fer va ser d'impressió inicialització èxit.
Així que vam fer una cosa bé.
Però això va ser una mica avorrit, perquè no veiem una finestra,
res es movia.
>> Tan gran, arribem SDL inicialitzat.
Ara, anem a passar a alguna cosa una mica més interessant.
Així que aquí tenim hello2_window.c, i això serà una mica més
programa en C complexa que inicialitza SDL igual que abans,
excepte que ara també anem per inicialitzar el temporitzador SDL.
I això ens va a permetre accedir al temporitzador intern
i funcions d'ús en relació amb el temps.
>> I després anem a veure aquí sota.
El que fem és que tenim aquest punter a una finestra struct SDL, que
serà creat per la present convocatòria a la funció, SDL crear finestra.
Ara, això pren molt dels arguments, així que anirem a buscar la documentació.
Així que de nou, vaig a API per categoria, estic
baixar al vídeo aquí, i la primera secció, que mostra la gestió de finestres.
Així que aquesta secció té un munt de coses en ella,
però si es mira a través aquestes funcions, se li
veure que, probablement, la qual volen que es diu SDL crear finestra,
que passa a ser just al cim.
>> I pel que aquest és el documentació per a aquesta funció.
La finestra tindrà un títol, una posició xiy a la pantalla,
que tindrà una amplada, alçada, i després es va a prendre algunes banderes.
Ara, en realitat no importa qualsevol d'aquestes banderes en aquest moment,
però si volia fer alguna cosa com fer una finestra de pantalla completa,
vostè pot fer una ullada a això.
Per ara, només anem per utilitzar aquests valors especials,
Finestra de SDL, més centrada per x i y per tal
només crear la finestra al centre de la nostra pantalla.
>> Així que això és el que està fent.
I si la finestra passa a ser nul·la, el que significa que hi ha un error,
després una altra vegada només anem a imprimir l'error utilitzant error get SDL.
I després, ja hem inicialitzat SDL, ara hem de tancar-la.
Així que anomenem SDL renunciar abans lliurament d'un principal.
>> Així que tenim aquesta finestra oberta amb sort.
I el que anem de fer és que anem
cridar SDL per a 5.000 mil·lisegons, que és el mateix que cinc segons.
I quan hàgim acabat amb això, que va a destruir la finestra,
netejar la biblioteca SDL, i sortir del programa.
Així que seguirem endavant i donar-li que un tret.
>> Així que ara en lloc de canviar el makefile cada vegada,
Jo simplement no puc fer, i a continuació, en la línia d'ordres,
diuen les fonts és igual i després l'arxiu que estem compilant.
Així que és hello2_window.c.
Fantàstic.
No hi ha erros.
Ara bé, si correm la nostra executable, veiem aquesta finestra.
Ara hi ha uns pocs problemes amb la finestra.
Podem moure-ho, però té aquestes escombraries de fons dins de la mateixa.
Així que no hem dibuixat res, i pel que és
només plena d'escombraries, que és bastant més del que esperem.
>> D'altra banda, no podem tancar la finestra.
Estic pressionant aquest X a la cantonada i no passa res.
Així que veurem com arreglar que en una mica.
Així que anem a resoldre la part on el finestra està plena d'escombraries en primer lloc.
Així que si anem a hello3_image.c, el podem veure és que hem afegit uns quants
més coses aquí.
Hem afegit aquesta nova capçalera presentar per obtenir les funcions de temporitzador.
Suposo que ho vam fer en el passat un, també, i jo no esmento.
Però ara perquè som treballar amb imatges,
necessitem incloure la SDL arxiu de capçalera d'imatge també.
Pel que és el mateix que abans, la inicialització de SDL aquí,
mateix acord amb la creació de finestres.
Hem vist que abans d'ara.
>> Ara hem de crear alguna cosa que es diu un processador, que tipus de va de la mà
amb la finestra.
Però és una espècie de abstracte objecte que és
a càrrec de fer tot això operacions de dibuix a la finestra.
I el que realment correspon a un programa carregat
en el maquinari de gràfics en la seva ordinador o el telèfon o el que sigui.
Així que les banderes que volem passar it-- i es pot veure a la documentació
per obtenir més detall aquí-- van SDL que es rendeixi accelerat, que
vol dir que serà utilitzant el maquinari de gràfics
i no només emulat en programari.
>> I utilitzarem SDL Renderer PRESENTVSYNC.
VSync és una cosa que simplement fa seus gràfics es veuen millor i evita
aquesta pantalla cosa anomenada terror, on la meitat
d'una trama i un mitjà de la següent marc es veuen immersos en el mateix temps
i es veu horrible.
Però, de nou, vostè pot anar a llegir d'això pel seu compte.
>> Així que tenim algunes banderes aquí.
I pel que només anem a trucar aquesta funció SDL crear render.
Anem a donar-li la finestra associar amb aquest processador.
Un aspecte negatiu significa que no ens importa el que controlador de gràfics que utilitzarem.
Així que en cas de més o menys sempre ser un negatiu,
llevat que sàpiga sobre els controladors de gràfics.
I llavors només anem passar-ho les nostres banderes.
Així que si això retorna null, llavors estem va imprimir l'error, com de costum,
però llavors també anem per destruir la finestra
per netejar aquests recursos abans trucant SDL deixar de fumar i tornar.
>> Ara, l'interessant aquí és on ens carreguem la nostra imatge
utilitzar aquesta funció IMG_load.
Aquesta és l'única funció que anem utilitzar de la biblioteca d'imatges SDL.
És l'únic que necessitem.
És una funció que pren la cadena aquest és el camí de qualsevol recurs d'imatge.
I pot ser un .png, un GIF, mapa de bits, cap d'aquestes coses.
I és per això que aquesta funció és tan agradable.
Es pot gestionar gairebé qualsevol format.
Càrrega en la memòria i l'emmagatzema com ho diu una superfície SDL.
>> Ara una superfície SDL és merament una estructura que representa les dades d'imatge en la memòria.
Així que vostè pot llegir més sobre que en la documentació de dos.
I si aquest error, llavors estem farem tot l'assumpte, on
imprimim l'error, tanquem la nostra recursos i, a continuació, sortir del programa.
Ara l'interessant és, abans podem treure aquesta imatge a la finestra,
hem de fer realment una textura.
Ara una textura correspon a les dades d'imatge carregats
en la memòria del maquinari del gràfic.
>> Així que una superfície és en main la memòria, la memòria normal
que hem estat utilitzant tot el semestre, i una textura és en aquest VRAM separada
memòria que els controls de la targeta gràfica.
Així que cridem a aquesta funció SDL_CreateTextureFromSurface.
Li donem el nostre processador i la nostra superfície.
I llavors estem realment fet amb la superfície,
així que només anem a alliberar-lo.
Nosaltres no ho necessitem més.
I llavors el que si aquesta crida amb error i va tornar nul·la,
llavors nosaltres farem tot informe d'errors cosa una altra vegada.
>> Tot bé.
Aquí, ens fiquem en algun funcions de renderitzat reals.
Així que cridar SDL_RenderClear i passant-ho
el processador associat amb la finestra simplement fa que la finestra veu negre.
Per tant, elimina aquestes escombraries que va veure en la nostra finestra abans i fa que sigui negre.
I després anem cridar SDL_RenderCopy,
donar-li el nostre processador, la nostra textura.
I anem a parlar del que aquests camps estan en una mica.
Però això va a prendre les dades de textura
i copiar-lo en la nostra finestra per dibuixar la imatge.
Així que després del que hem fet aquesta còpia les dades a la nostra finestra,
que hem de fer aquesta funció addicional anomenada SDL_RenderPresent.
>> I això és interessant perquè això es posa
en un tema anomenat doble buffer.
Així que la memòria intermèdia doble és una tècnica que fa que els seus gràfics es veuen molt millor.
Un cop més, impedeix que l'estrip de pantalla Jo estava parlant d'abans, on
té dos buffers.
Hi ha una memòria intermèdia de tornada a memòria i un tampó frontal.
El tampó front és literalment el que està a la pantalla en el moment.
Així que fem totes aquestes variacions es basen, com SDL fer còpia o SDL_RenderClear
a la memòria intermèdia de tornada.
Així que es modifiquen les coses en la memòria intermèdia per servei.
Aquí podríem estar dibuixant aquest quadrat verd en la memòria intermèdia d'esquena.
>> Així que quan acabem fent els nostres render operacions, que
podria prendre un temps molt llarg temps, què farem
és canviar els amortidors.
Així que, literalment, només pren el memòria intermèdia frontal i la memòria intermèdia de reserva
i els interruptors, per la qual que, instantàniament,
en una sola operació, en lloc de potser centenars o milers,
tot el nostre recent prestats amb objectes sobre la pantalla.
I això impedeix que les coses com el refrescant pantalla
mitjà quan només hem dibuixat dels nostres objectes per al marc.
Així que per això hem de trucar SDL_RenderPresent, així
com SDL_RenderCopy.
>> Un cop més, només anem d'esperar cinc segons.
Llavors anem a netejar els nostres recursos.
Tenim uns quants més en aquesta ocasió.
I llavors només anem per sortir del programa.
Així que anem a fer això.
Vaig a escriure marca, i després les fonts és igual a hello-- això és ara 3image.c.
Molt bé, que compila sense errors.
I es pot veure aquí tinc ara tret la meva imatge, Hola, CS50!
a la nostra finestra, que desapareix després de cinc segons.
>> Ara, això encara té problemes, oi?
Això no és una bona aplicació, perquè quan tracte de tancar la finestra,
no passa res.
Això x encara no respon.
Així que donem una ullada a la següent arxiu, hello4animation.
Així que aquest és l'arxiu això va a introduir
moviment i moviment a la nostra imatge.
Així que anem a fer el el mateix que abans,
iniciar SDL, creu el finestra, crear el processador,
carregar la imatge en memòria, crear la textura.
Hem vist tot això abans.
Ara, això és nou.
Tindrem una estructura anomenada 1 rect SDL, que és només un rectangle.
Si anem per aquí, podem fer una recerca de SDL rect,
i es pot veure que és un estructura molt simple.
Compta amb una x, a i per la posició, i
té una amplada i una alçada de la mida del rectangle.
>> Llavors, què farem és que estem va definir aquesta SDL rect dest,
per a la destinació.
I aquest és el lloc a la pantalla on
estarem arribant la nostra imatge, a la dreta Així
si serem movent la imatge voltant,
llavors el destí on anem a dibuixar la imatge
s'han de moure.
Així que anem a trucar a aquest SDL_QueryTexture funció.
I noto que estic passant la direcció de dest.w, que és l'ample,
i dest.h, que és l'altura.
I així SDL_QueryTexture va emmagatzemar en aquests camps de l'amplada
i l'altura de la nostra textura.
>> I llavors el que vaig de fer és que vaig
per establir dest.x finestra per a ser dest.w menys amplada, que és
l'amplada de la sprite, dividit per 2.
I això va a configurar- que la imatge està perfectament centrada
a la nostra finestra, ¿d'acord?
Així que ara tinc una posició i.
I això va a ser una variable que és
canviar, perquè serem moure la imatge a la direcció i.
I ara tenim una mica anomenat un bucle d'animació.
>> Llavors, com funciona l'animació?
Bé, ull humà pot detectar 12 diferent imatges en cada segon, ¿d'acord?
Així que si vostè flash 12 targetes d'imatge de mi en un segon, vaig veure a cadascuna d'aquestes imatges
com la seva pròpia imatge individu diferent.
Ara, si vostè flaix més imatges a mi en un segon,
llavors el meu ull començaria a desdibuixar junts
i em percebre com a moviment, en lloc d'una imatge diferent.
Així, per exemple, les pel·lícules i la televisió, parpellegen imatges en vostè 24 vegades
un segon.
Així que això és 24 fotogrames per segon.
Les pantalles d'ordinador, d'altra banda, sovint són a 60 quadres per segon.
Aquesta és la seva velocitat de refresc.
Aquesta és la freqüència amb què s'actualitzen la imatge a la pantalla.
Així que el nostre objectiu serà 60 fotogrames per segon per als nostres jocs.
>> Així que anem a veure que en el codi.
Així que per a cada quadre, estem primer va esborrar la finestra.
Aquest és el patró general.
Sempre es desactiva la finestra de cada quadre, i després
fer tot del seu dibuix operacions, i després, al final,
Què RenderPresent per mostrar tot en el marc.
I després vas a haver d'esperar al final
d'esperar fins a la propera marc ha de començar.
>> Així que si jo estava fent una gran quantitat de computació complexa aquí
que va tenir més de 16 milisegons, seria impossible per a mi
per aconseguir que la velocitat de fotogrames de 60 que Jo volia, perquè cada quadre és
prenent massa temps per calcular.
A més, realment estem fent tipus d'una quantitat insignificant de treball
aquí, perquè només hi ha una cosa que estem dibuixant.
Així que només espero 1/60 de segon, que és la longitud
d'una trama en entre fotogrames.
Així que estic espècie de pretendre fer tot el meu treball requereix temps zero.
Però en un joc real, caldria restar
la quantitat de temps que es va trigar a fer-ho tot aquest treball del seu temps de descans.
>> Així que de totes maneres, ¿què sóc jo realment fer en aquest circuit?
Em aclareixo la finestra.
Vaig posar el dest.y, que és un int a la meva posició real i tirat en un int.
Ara, vull surar resolució per a mi i posició en el meu joc,
però llavors per realment dibuixar a la pantalla,
que necessita sencers, perquè és en unitats de píxels, de manera que això és el que l'elenc és per.
Vaig a dibuixar la imatge.
Així que aquest és el rectangle d'origen.
I aquest és el rectangle de destinació.
Així que vaig passar nul per rectangle d'origen
per dir vull cridar tota la meva textura.
Però si hi havia un munt de textures en el seu joc
i tots estan en un gran mapa de textura que es va carregar en SDL com una sola
textura, poguessis utilitzar un rectangle d'origen
per recollir una de les textures més petites, un dels sprites més petites,
fora d'aquest gran mapa de textura.
>> Així que de nou, estic passant el meu render, el meu textura, i ara el destí.
Això va ser on en el finestra que serà dibuixat.
I després, perquè m'estic animant alguna cosa, necessito moviment,
Vaig a ser l'actualització del posició de sprites en cada fotograma.
Així que tinc aquesta crida de desplaçament constant accelerar en unitats de píxels per segon.
Ara, cada vegada que fem un moviment, el marc és només 1/60 de segon.
Així que vaig a dividir que per 60.
I després, anem a veure, jo sóc restant que a partir de la posició i.
Per què estic restant?
Anem a arribar a això en un segon.
Així que puc netejar els meus recursos i el programa ha acabat.
>> Així que anem a fer això.
Així que anirem a maquillatge MLRS = hello4 animation.c, ¿d'acord?
Joc.
Cal anar.
Així que he de desplaçar-se fins la finestra, que és bastant ordenada.
Però espera, que estava restant des de la posició i cada vegada.
Què està passant allà?
Bé, resulta que a SDL, i de fet, en la majoria dels gràfics per ordinador,
l'origen del sistema de coordenades és la part superior esquerra de la finestra.
>> Així que la direcció x positiva va a través de la finestra a la dreta.
I la direcció i positiva en realitat disminueix.
Així que de nou, en l'origen la part superior esquerra de la finestra,
direcció positiva és cap avall, ix positiu és cap a la dreta.
Així que quan li resta de la posició i, això és
farà que es vagi en el negatiu i direcció, que és la finestra.
Així que això és el que està passant allà.
Fresc.
>> Fem una ullada a la següent foto.
Aquí està la part de la mostrar on finalment
aconseguir que la X a la cantonada de la finestra que se suposa per tancar la finestra
treballar.
Llavors, què està passant?
Inicialitzem SDL, crear la finestra, crear el processador, carregar la imatge,
crear la textura com hem vist abans.
Tenim el mateix rectangle de destinació com abans, mateixa crida per consultar textura.
Però aquesta vegada, estem llavors va dividir l'ample
i l'altura del nostre destí per 4.
Això només té l'efecte de escalar la nostra imatge cap avall quan
mostrem a la finestra per quatre.
Així que això és bastant ordenada.
Només podem escalar així com així.
Anem a començar el sprite al centre de la pantalla.
I ara tenim x i velocitat i, i que estan tant va a començar de zero.
>> Aquest és l'arxiu incorrecte.
Ho sento.
Així que això és cert.
Això és tot encara en aquest arxiu.
Tenim el dividir per 4 i tot.
Així que aquí tenim la nostra xii posició per al centre de la finestra.
I li donem una velocitat inicial d'aquesta velocitat constant, la qual cosa
Crec que és de 300 píxels per segon.
Ara, tenim aquest int podríem igual de bé ser un booleà anomenat prop sol·licitada.
I en comptes de fer una bucle infinit en un temporitzador aquí,
serem com l'animació sempre que tancament no es demana.
>> Llavors, com processem esdeveniments?
Bé, SDL posa en cua els esdeveniments d'un cua literal darrere de les escenes.
I llavors cada trama, podem treure de la cua d'esdeveniments
des d'aquesta cua utilitzant aquest SDL_PullEvent trucada.
I de nou, sens dubte veu a llegir sobre això en la documentació.
Hi ha molt més detall i un munt més funcions que es poden utilitzar amb aquest.
Ens passem la direcció d'aquesta cosa, SDL_Event
que tenim aquí a la pila.
>> Ara, què és un SDL_Event?
A causa de SDL, si ens fixem en els documentation-- anem
veure, API per categoria, d'entrada esdeveniments, maneig d'esdeveniments,
podem mirar el nombre de diferents esdeveniments aquí
i podem veure que hi ha tot un munt d'ells.
Llavors, què és aquesta cosa SDL_Event?
SDL_Event és una unió.
Wow, què és un sindicat?
Has de probablement mai sentit a parlar d'això abans.
I això està bé.
>> Un sindicat és una espècie de una estructura, a excepció d'una estructura
té un espai per a tots seus camps i la memòria,
mentre que un sindicat només té espai suficient per adaptar-se a la major
un dels seus camps, el que significa que només pot emmagatzemar un dels seus camps
alhora, quin tipus de té sentit per a esdeveniments, oi?
Podem tenir un teclat esdeveniment o un esdeveniment de finestra,
però un sol esdeveniment no pot ser alhora un esdeveniment de teclat i un esdeveniment de finestra,
així que seria ximple tenir espai per tant dels que estan dins de la nostra unió esdeveniment.
Així que si vostè volia crear el seu propi sindicat,
es veu exactament el mateix com la creació d'una estructura,
excepte que s'utilitza la paraula clau unió en lloc de la paraula clau struct.
I recorda, per la totalitat de la coses dins del seu sindicat,
la variable real que és la unió només pot tenir un d'aquests valors
en un moment.
>> Llavors, com podem saber quin tipus d'esdeveniment ens vam ficar fora d'aquesta cua?
Bé, podem provar Event.type.
I si això és igual a SDL_Quit, sabem
és el cas que es va generar quan
colpejar aquesta X a la cantonada de la finestra.
I podem establir estreta sol·licitada és igual a 1.
La resta és només una mica d'animació que has vist abans.
Així que seguirem endavant i fer això i veure el bé que funciona.
Així que vaig a escriure marca i llavors MLRS = hello5_events.c.
Allà anem.
Jocs.
>> Ara, podem veure que era de fet reduït per quatre.
I ara està rebotant.
Tinc una mica de detecció de col·lisions passant amb els costats de la finestra
que podem fer una ullada a.
¿I què passa quan vaig a tancar-?
Es tanca.
Fantàstic.
Vam rebre aquest esdeveniment.
I ho fem servir.
>> Així que anem a mirar cap enrere en el codi.
Llavors, Com el puc aconseguir rebotant així?
Recordeu em vaig posar dos xi i inicialment a les velocitats.
I la velocitat és positiva constant, per la qual cosa és
va a aconseguir que s'està començant anar cap avall ia la dreta.
>> Ara, cada trama, a més de la manipulació qualsevol esdeveniment que pugui haver ocorregut,
Vaig a detectar si el meu sprites està tractant de sortir de la finestra.
Pel que podem fer això amb només comprovar x_pos amb 0, pos_y 0, a continuació,
també x_pos i pos_y amb amplada de la finestra i altura de la finestra.
Cal notar que he resti l'ample del sprite.
I això es deu al fet que si no ho feia restar l'amplada del sprite,
només seria comprovar que l'origen del sprite
no anar fora de la finestra.
Però volem que la totalitat ample del sprite
per estar sempre dins de la finestra i tota l'altura del sprite
per estar sempre dins de la finestra.
Així que això és el que la resta és per.
Una gran quantitat de geometria aquí pot ser d'utilitat per treure-
en paper amb la coordenada sistema per veure el que està passant.
>> Així que si em xoquen, jo només simplement restablir la posició
de manera que no es va fora de la pantalla.
I jo vaig a, si rebota en una de les parets laterals,
Vaig a negar la x velocitat de manera que
comença rebotant en l'altra direcció.
I de manera similar, si colpeja la part superior o inferior,
Vaig a establir la velocitat i igual a la velocitat i negativa,
de manera que es recuperarà.
Així que això és el que tenim això aquí.
>> I les posicions d'actualització de la mateixa manera que hem vist abans,
dividir per 60, perquè som només el maneig d'1/60 d'un segon.
I llavors la representació, exactament el mateix que abans.
I això és tot que anava en aquest arxiu.
Així que això és el que fem esdeveniments.
El més important per portar aquí És aquesta funció SDL_PullEvent.
I vostè hauria de llegir el documentació més sobre SDL_Event
el sindicat, ja que aquest tipus de dades és molt, molt important, perquè la fem servir
per a tot tipus d'esdeveniments.
>> Per exemple, la utilitzem per al teclat esdeveniments, que és el que aquest arxiu és per.
Llavors, què tenim?
Tenim el mateix que abans, inicialitzar SDL, crear una finestra,
crear un render, carregar la imatge en la memòria, crear la textura.
Un cop més, anem a tenir aquest dest rectangle,
anem a escalar la imatge per quatre, que sigui una mica més petit.
Ara, anem a iniciar el sprite al centre de la pantalla.
Però aquesta vegada, anem a establir el x i velocitats inicials I a zero,
pel fet que el teclat és va a controlar aquests.
I, a més, anem a realitzar un seguiment d'aquestes variables
amunt, avall, esquerra i dreta.
I això seguirà seguiment de si ens hem
pressiona els botons del teclat que corresponen a dalt, a baix, esquerra,
i la dreta.
>> Ara, això és una espècie de luxe perquè podem usar W, A, S,
D aquí, o les tecles de fletxa reals.
Anem a veure que en tan sols un segon.
Així que anem a processar l'esdeveniment de la mateixa manera que abans.
Tirem l'esdeveniment.
Però ara anem a canviar el tipus d'esdeveniment.
Si és SDL_Quit, estem va a establir prop
sol·licitat a un, igual que abans.
Que s'encarrega de les x en la cantonada de la finestra,
de manera que la nostra finestra en realitat es tanca.
>> Altrament, si aconseguim una clau SDL baix esdeveniment, el que significa que prem una tecla,
llavors el que farem és que estem canviarà en aquesta cosa aquí,
designant totes ho event.key significa tractar a la nostra unió esdeveniment,
anar a buscar la clau estructura d'esdeveniments en el mateix.
Així que resulta que aquesta unió és una estructura esdeveniment clau.
I després anar a la clau L'estructura de l'esdeveniment el seu camp
anomenada keysym i després scancode.
I de nou, sens dubte llegir la documentació sobre això.
Entrades de paraules clau molt interessant.
Vostè pot obtenir els codis d'exploració o codis clau.
I és una mica subtil, però la documentació és bastant bo.
>> Així que si veiem el codi d'exploració per la nostra premsa clau és W o amunt,
anem a configurar de la mateixa a 1.
I llavors vam sortir d'aquest interruptor.
Si es tracta d'una o d'esquerra, que ajusti l'esquerra a 1, et etc., etc., per sota ia la dreta.
Ara, en aquest interruptor extern, si veiem una clau fins esdeveniment,
això vol dir que hem llançat una clau i ja no estem pressionant.
Així que vaig a dir per igual a 0, esquerra és igual a 0, a baix és igual a 0, a la dreta
és igual a 0, etcètera.
>> I noti que tenim en cadascuna d'elles 2 casos posen un al costat de l'altre
sense codi separat per al primer cas, que
vol dir que si es tracta de 1 S o baix a la dreta aquí,
que va a executar aquest codi.
Així que això és bastant pràctic.
Impedeix que haguem de fer més condicions i IFS i coses
així.
>> Així que anem a determinar la velocitat.
Fixem la velocitat a 0.
Llavors, si es pressiona fins i no cap avall, llavors nosaltres
ajustar la velocitat i la velocitat negativa.
Recordeu negatiu, a causa que el direcció i negatiu és cap amunt.
I la direcció positiva és cap avall.
Si es pressiona cap avall i no cap amunt, llavors estem
va a posar-ho en velocitat positiva, el que significa que va avall de la pantalla.
El mateix amb l'esquerra i la dreta.
>> I després anem a actualitzar les posicions igual que abans.
Anem a fer de col·lisió detecció amb límits,
però nosaltres no anem a restablir l' velocitat, perquè la velocitat és només
controlat pel teclat.
Però anem a restablir l' posicions per mantenir-lo en la finestra.
I anem a establir el posicions en l'estructura
i després fer tot el fent coses d'abans.
Així que anem a veure el que fa.
Així fan SRCS-- veurem, això és hello6_keyboard.c.
>> Oh, no.
Així que ens va donar alguns advertiments aquí.
I això és simplement dir que no ho vam fer comprovar si cada tipus possible
d'esdeveniment.
Això està bé, perquè hi ha 236 d'ells o així.
Així que vaig a ignorar aquestes advertències.
Encara està compilat bé.
Així que vaig a jugar el joc.
No es mou.
Però ara, quan em puré en el meu teclat, Jo puc fer algun moviment WASD aquí,
Utilitzo les meves tecles de direcció també.
I noto, encara que sóc pressionant la dreta en aquest moment,
no va per la finestra, perquè puc restablir en cada fotograma.
Així que això és bastant ordenada.
Vostè pot imaginar moure amb Mario algunes tecles de fletxa o alguna cosa per l'estil.
I sí, el X funciona.
>> Arxiu Així definitiva anem a la vista, hellow7_mouse.
Es tracta d'aconseguir l'entrada del ratolí.
Així que en aquest, ens importar la capçalera de matemàtiques,
perquè tindrem una mica de matemàtiques aquí.
El mateix vell, el mateix vell coses, destinació, mateixa edat, vist això abans.
Bé, això és interessant.
Així que estem de tornada a l'única comprovació per al SDL deixar esdeveniment.
Perquè és això?
Així que vostè pot aconseguir l'entrada del ratolí d'esdeveniments.
Com quan el ratolí es movia, s'obté un esdeveniment per això.
Quan es prem un botó del ratolí, vostè pot aconseguir un esdeveniment per això.
>> Però hi ha una altra, una mica més senzill potser, API per aconseguir l'entrada del ratolí.
I això és simplement l'estat get ratolí SDL.
Així que tinc un int per xi i de la posició del cursor.
Pas a SDL_GetMouseState, que estableix aquests.
I aquesta és la posició en el sistema de la finestra de coordenades.
Així que si la massa està a la part superior esquerra de la finestra, que seria 0, 0.
>> Ara, el que faré és que vaig fer una mica de matemàtiques de vectors.
Aposto a que va pensar que no ho faria veure que en CS50, però aquí està.
Vaig a fer una mica de vector matemàtiques per obtenir el vector
a partir de la imatge per al cursor.
I així, per què he aquesta resta aquí?
Bé, si acabo d'utilitzar dest .-- així Necessito traduir el ratolí x
e i per mitjà l'amplada i l'alçada de la imatge,
perquè vull que el centre de la imatge que es va cap al ratolí,
no l'origen de la imatge.
>> Així que això és només per assegurar-se que estic parlant voltant del centre de la imatge aquí.
Llavors vam aconseguir delta x i y, que és la diferència de la diana
a la posició real de la imatge.
I llavors podem obtenir la distanciar-aquí, que
serà de Pitàgores teorema, arrel quadrada de x
per x més vegades i i.
>> Ara, per evitar que la inquietud, i puc mostrar vostè el que això fa, si no faig això,
si la distància entre el cursor i el centre de la imatge és inferior a cinc,
Jo no vaig a moure la imatge.
En cas contrari, ens vam posar a la velocitat.
I hem creat perquè el la velocitat serà sempre constant.
I el resultat net de tot aquest matemàtiques és que la imatge
va avançar cap al cursor.
>> Ara, resulta que SDL_GetMouseState,
més d'establir la x i arguments aquesta opció,
també retorna un int que correspon amb l'estat dels botons del ratolí.
Així que no podem llegir que directament, però podem
utilitzar aquestes macros, una sola operador de bits, no és que fa por,
només un bit a bit i.
Per això diem botons, que és el resultat de la nostra SDL_GetMouseState, si això
i bit a bit i, aquesta macro aquí, SDL_BUTTON_LEFT.
>> Així que això va a resoldre simplement al mapa de bits que correspon
al botó esquerre del ratolí està pressionat.
I així, si el bit a bit i es produeix i és
no és zero, el que significa S'ha premut el botó esquerre,
llavors estem realment va a negar tant la x i la y velocitats,
que acaba de fer el fora de control d'imatge.
Actualitzar posicions.
Col·lisions deteccions, vist tot abans, el que fa, està bé.
Anem a fer-ho.
Així que has de MLRS = hello7_mouse.c.
Gran.
No hi ha errors.
I joc.
>> Així que aquí tinc el meu ratolí.
I la imatge és de fet perseguint el meu ratolí.
Ara, en un joc que vostè fa, potser això és com una persecució enemiga
el seu petit personatge o el que sigui.
Però aquí tenim la imatge perseguint al ratolí.
I quan faig clic al ratolí comença perseguint la imatge
i la imatge és fugint de ratolí.
Així que això és molt bo.
I avís de nou, no és sent la detecció de col·lisions aquí.
>> Així que aquest és el petit definitiva Demo he posat aquí.
I anem a fer una ullada a una cosa més.
Així que de tornada aquí, he esmentat això jitter.
Tot bé.
Així que si la distància és de menys de cinc píxels, Jo estava assegut x i y la velocitat a zero.
Què passa si ens desfem d'això?
Així que em vaig a fer això sol.
Si us plau, disculpi aquest estil horrible, però vam comentar el codi correcte.
Així que vaig a guardar això i fer el mateix comando de davant per fer-ho.
>> Tot bé.
I ara què passa?
Bé.
Encara estem seguint el ratolí de la mateixa manera que abans,
però quan vam arribar al ratolí, tenim aquesta fluctuació brut.
Què està passant allà?
Doncs bé, en el nostre vector matemàtiques, recordem que érem
tenint la distància entre el cursor i el centre de la imatge?
Bé, com que s'acosta 0, comencem a aconseguir
igual que aquest tipus de comportament boig on la imatge és una espècie de
com oscil·lant al voltant del cursor.
I això és la creació d'aquesta fluctuació.
I això és molt lleig.
I és probable que no ho fa vol que els seus jocs de fer això,
llevat que sigui algun tipus d'efecte especial.
>> Així que és per això que tenim només per aquesta arbitrària
tallem de cinc píxels, on diem si es tracta d'un termini de cinc píxels, estem bé.
No necessitem per moure la imatge més.
Així que això és el que està passant allà.
>> Així que això és pràcticament tot.
Ara ja sap com crear una finestra, carregar una imatge,
dibuixar una imatge a la finestra, obtenir entrada de teclat, obtenir l'entrada del ratolí,
hi ha un munt d'altres d'entrada que no ho faria
saber com arribar si vostè acaba de passar una uns minuts mirant documentació.
Així que realment té un bon poques eines a la seva disposició ara
per escriure un joc en tota regla.
>> Ara, cada joc necessita una mica d'àudio, però la documentació d'àudio
també és bastant bo.
I estic disposat a apostar que si vostè entén totes les coses
hem parlat avui amb les imatges i les superfícies,
les finestres, i tot, llavors esbrinar l'API d'àudio no és
serà tan dolent.
Així que espero veure el que creguis amb SDL.