THOMAS LIVELY: Très bien. Salut tout le monde. Je suis Thomas Lively. Ce séminaire va être écrire des jeux 2D en C en utilisant SDL. Donc, je sais que vous êtes tous demander, oui, je vraiment vouloir jouer à des jeux et faire des jeux, Mais quelle est cette entreprise SDL? Donc SDL est une bibliothèque C. Il se tient pour la simple Couche DirectMedia. Et il est une plate-forme de croix, jeu bibliothèque de développement. Il fonctionne sur Windows, Mac, Linux, même iOS et Android. Il gère des choses comme l'accès à des systèmes audio pour l'ordinateur, le clavier, et souris, manettes de jeu, si ils sont attachés. Sur le mobile, il peut même faire le la saisie tactile et tout ça. Et bien sûr, il gère graphiques, dessin de choses à l'écran. Donc, il est très largement utilisé, même si vous ne pouvez pas avoir entendu parler avant. Il est construit dans, par exemple, Le moteur Source de Valve, qui jeux de pouvoirs tels que Portal et Team Fortress 2. Il est également dans un très grand nombre des jeux indie qui sortent, je suis impatient de voir ce que vous tout sera prise avec elle. 

Les objectifs du séminaire sont pour vous énoncée à être développer avec SDL. Nous allons apprendre pour créer une fenêtre de jeu. Nous allons créer des sprites, Quelles sont les images dans votre jeu qui peut se déplacer. Nous allons apprendre à et animer les sprites, afin de les déplacer, assurez- les changer au fil du temps. Et nous allons apprendre pour capturer clavier et la souris entrée de l'ordinateur. Ce que nous ne parlerons pas aujourd'hui est des graphismes 3D, parce que ce très compliquée sous réserve que nous ne disposons pas du temps pour. Nous ne serons pas apprendre à lire des fichiers audio sur nos jeux. Et nous ne serons pas construisons pour rien, mais Linux. 

Maintenant, les mises en garde, il ya que, je l'espère, d'ici la fin du séminaire, vous serez à l'aise avec la documentation SDL, de sorte que vous serez en mesure d'aller comprendre la façon de jouer audio par vous-même. Bâtiment a également pour Mac ou PC devrait fonctionner exactement la même que la construction pour Linux, mais la configuration va être un peu différent. Donc, vous devriez être capable de comprendre comment faire ces choses à la fin du séminaire d'aujourd'hui. 

Donc, pour le mettre en place, nous allons à utiliser une machine virtuelle. Nous aimerions utiliser l'IDE CS50, parce nous allons juste être écrit en C. Mais depuis l'IDE est pas un navigateur, nous ne peut pas créer de nouvelles fenêtres ou affichage graphiques en elle. Nous avons donc besoin d'une machine virtuelle. Ainsi, vous pouvez suivre les instructions ici au manual.CS50.net/appliance/15 Installer l'appareil officiel de CS50, qui est simplement une virtuelle Linux machine. 

Et puis une fois que vous avez que tous ensemble il up-- pourrait prendre un peu de temps, parce un très grand download-- vous allez à courir dans la VM sudo apt-get update. Et qui va vraiment de mettre à jour tous les logiciels paquetages sur votre machine virtuelle. 

Après cela, vous allez courir sudo apt-get install, libsdl2-2.0-0, libsdl2-dbg, libsdl2-dev, et libsdl2 outre-image-2.0-0, libsdl2-image-dbg, et libsdl2-image-dev. Alors qu'est-ce que faire? Qui installe simplement le débogage information, de documentation, en-têtes, et les binaires pour deux bibliothèques. Régulier vieux, SDL 2.0, et une autre bibliothèque appelé image SDL, qui nous allons être en utilisant pour charger des fichiers image dans notre jeu. 

Donc, une fois que vous avez aussi que, juste au moment où il demande, vous tapez simplement oui, appuyez sur Entrée d'installer ces paquets, et alors vous devriez être bon d'aller. Donc, pour obtenir le code de distribution, vous can-- Oh, ce ne sont pas mis à jour. Sauf si vous avez un account-- GitHub si vous avez un compte GitHub, vous pouvez le faire Git commande clone du repo et qui va télécharger le Git repo avec tout le code en lui, de sorte que vous aurez le code. 

Si vous ne disposez pas d'un GitHub compte, ce que vous devez faire est de type wgithttps: //github.com/tlively/sdl seminar-- et ici il est different-- /archive/master.zip. Encore une fois, voilà exactement la même URL, sauf que ça va être tlively / SDL_seminar / master.zip et vous wgit utiliser pour télécharger ce. Et puis vous pouvez simplement décompresser cette archive et puis vous aurez tout le code source. Donc désolé à ce sujet. Et puis le code sera également hébergé chez La page Web du séminaire de CS50 dans un couple jours. 

D'accord. Alors, comment pouvons-nous commencer l'écriture de notre propre jeu? Eh bien, la première chose nous allons avoir à faire est de regarder la documentation SDL. Alors, voici la VM. Et voici la page Web. Je l'ai navigué à vivre libsdl.org. Ce que je vais faire ici est de passer en revue à la barre latérale, en vertu de la documentation, et cliquez sur le wiki. Cela va me mettre sur le wiki que a le plus de la documentation pour SDL. Plus sur la barre latérale ici, nous sommes allez cliquer API par catégorie, parce que va donner nous une belle vue catégorique de l'ensemble de l'API pour les SDL. 

Ainsi, par exemple, nous avons l'initialisation de base et arrêter, tout le genre de trucs administrative pour l'utilisation de SDL, puis nous avons la section afficher les choses à l'écran. Voilà vidéo. Les événements d'entrée, qui est d'obtenir entrée à partir du clavier, obtenir les commentaires de la souris, et le joystick, si vous avez encore. Il ya un retour de force des choses comme contrôleurs de jeu, qui on ne va pas en parler. Et voici audio. Et puis il ya un tas d'autres choses que SDL peut faire pour vous. 

Mais aujourd'hui, nous allons nous concentrer sur l'initialisation ici, l'affichage d'images dans la vidéo section, et la gestion des événements d'entrée. Ce sont donc la principale sections de la documentation que vous devriez soucier. Juste pour le plaisir, si nous passons en revue ici et cliquer sur API par nom, nous pouvons voir une liste de tous les seule chose dans la bibliothèque SDL. Donc, toutes ces fonctions, les énumérations, structures, une quantité folle de choses, ordre alphabétique. Et il est clair, jusqu'à ce que vous savez que vous faites, cela ne va pas être trop serviable, qui est pourquoi nous faisons API par catégorie. 

Donc, nous allons commencer. Nous espérons que vous avez déjà téléchargé le code de distribution. Et si ce que vous pouvez faire est, à droite ici dans l'appareil de CS50, il suffit d'ouvrir un terminal. Et c'est parti. Donc, je l'ai déjà téléchargé le Code de distribution en utilisant le fichier .zip méthode. Et je l'ai décompressé. Donc, ici, il est le maître de séminaire SDL. Donc, je vais aller dans ce répertoire. Et ce que nous voyons ici est que nous avons sept fichiers C. Et cela va au code nous allons être à la recherche aujourd'hui. Nous avons un makefile. Et nous avons un répertoire des ressources, qui a simplement une image que vous allez voir assez tôt. 

Donc, nous allons ouvrir ces fichiers utilisant le G-Edit éditeur. Je tiens donc à ouvrir tous les fichiers bonjour commencer et se terminer par .c. Et c'est parti. Voilà donc une fenêtre minuscule, donc nous sommes vais essayer de faire que plus grand. Non, il est parti. 

D'accord. Alors, voici la toute première fichier que nous allons regarder. Il a appelé hello1_sdl.c. Et tout cela ne fait initialiser le SDL bibliothèque afin que nous puissions commencer à l'utiliser. Comment sauriez-vous à venir avec ce code vous-même? Eh bien, si nous regardons plus la documentation et nous entrons dans l'initialisation et arrêter section, il va tout nous dire sur la façon d'initialiser SDL. Donc absolument lire une autre fois. Il va vous dire tout à propos de ce qui se passe ici. Mais le noeud principal de l'affaire est que nous avons besoin d'appeler cette fonction SDL In It et transmettre ce genre de choses nous voulons la bibliothèque pour initialiser. Donc, dans notre cas, nous allons tout simplement pour initialiser la vidéo pour le moment, afin que nous puissions commencer à afficher des images. 

Ici, vous pouvez voir si nous cliquons sur un SDL en elle, nous peut obtenir encore plus d'informations, y compris la valeur de retour. Ainsi, nous voyons ici que ce returnes zéro en cas de succès. Donc, dans notre code, nous allons voir si elle ne retourne pas zéro, et si elle ne retourne pas zéro, de sorte qu'il n'a pas réussi, alors nous allons tout simplement l'impression une erreur en utilisant cette autre fonction, SDL erreur get, qui retourne une chaîne décrivant l'erreur survenue. Nous allons imprimer que erreur, puis nous sommes juste va quitter le programme avec un code d'erreur. 

Puis une autre chose que nous devons à faire est, avant les sorties du programme, si nous avons initialisé avec succès SDL, nous avons juste besoin de l'appeler SDL quitter. Et cela va gérer nettoyage toutes les ressources internes de SDL pour nous. Ainsi, la documentation there-- de nouveau, nous sommes ici dans l'initialisation et arrêter section de la documentation. Vous pouvez simplement cliquer sur le fonction ici, SDL a quitté, et vous pouvez lire tout cela aussi. Et beaucoup de ces fonctions pages de documentation avoir le code d'exemple, si cette est très bonne ressource. Certainement passer quelque temps la lecture des parties de ce wiki si vous allez faire ce pour un projet. 

D'accord. Voilà donc l'ensemble de notre programme. Ce que nous pouvons faire maintenant, je suis est-- va ouvrir le makefile ici, donc je vais prendre un voir comment cela fonctionne. Et il est un makefile très simple, semblable à ce que vous avez vu avant. Une des principales différences est que, ici, cette va insérer le résultat de la course cette commande, que vous avez déjà installé si vous avez installé SDL. Et cela est une commande qui va générer quelques drapeaux supplémentaires pour le compilateur. 

En plus de cela, nous allons lui donner toutes les commandes habituelles, ainsi que ces deux commandes. Ainsi, les poignées -lsdl2-images reliant dans la bibliothèque d'image SDL. Et le -lm gère en fait la liaison dans la bibliothèque standard de maths C. Donc, nous ne sommes pas allons avoir besoin ceux pour l'ensemble de nos fichiers C, mais nous ne les mettons en sorte que nous pouvons utiliser le même makefile pour tout sans modifications. 

Par ici dans les sources, ceci est où vous aimeriez mettre les fichiers que vous alliez pour compiler pour votre projet. Mais puisque chacun de mon C fichiers ici a une fonction principale, ça va devenir confus si nous les mettre tous dans. Donc, je vais juste dire, pour l'instant, hello1_sdl.c, qui est celui que nous venons de voir. Donc, si je reviens sur ici, je peux ne faire. Et ce qu'il a fait est juste compilé premier fichier. Et puis, nous pouvons taper ./game, parce il est l'exécutable qu'il produit. Et tout ce qu'il a fait était d'impression initialisation réussie. Donc nous avons fait quelque chose de bien. Mais qui était un peu ennuyeux, parce que nous ne voyons pas une fenêtre, rien ne bougeait autour. 

Si grande, nous avons initialisé SDL. Maintenant, passons à quelque chose un peu plus intéressant. Nous avons donc ici hello2_window.c, et cela va être un peu plus complexe programme C qui initialise SDL comme avant, sauf que maintenant nous allons aussi à initialiser SDL minuterie. Et cela va pour nous laisser accéder à la minuterie interne et utiliser des fonctions relatives au temps. 

Et puis regardons ici. Ce que nous faisons est que nous avons ce pointeur une structure de fenêtre SDL, qui va être créé par le présent appel à la fonction, SDL créer fenêtre. Maintenant, cela prend beaucoup d'arguments, nous allons donc aller chercher la documentation. Encore une fois, je vais API par catégorie, je suis descendre à la vidéo ici, et le premier section, figurent la gestion des fenêtres. Donc, cette section a une tonne de trucs dedans, mais si vous regardez à travers ces fonctions, vous aurez voir que probablement celui que nous voulez est appelé SDL créer la fenêtre, qui se trouve être tout en haut. 

Et si tel est le la documentation pour cette fonction. La fenêtre va avoir un titre, une position x et y sur l'écran, il va avoir une largeur, une hauteur, et puis il va prendre quelques drapeaux. Maintenant, nous ne nous soucions pas de fait l'un de ces drapeaux en ce moment, mais si vous voulez faire quelque chose comme faire une fenêtre plein écran, vous pourriez prendre un coup d'oeil. Pour l'instant, nous allons juste d'utiliser ces valeurs particulières, Fenêtre SDL, plus centrée pour x et y dans l'ordre de créer simplement la fenêtre dans le centre de notre écran. 

Voilà donc ce que cela fait. Et si la fenêtre se trouve être null, ce qui signifie qu'il ya une erreur, puis de nouveau, nous allons juste imprimer l'erreur en utilisant erreur get SDL. Et ensuite parce que nous avons initialisé SDL, nous avons besoin maintenant pour la refermer. Nous appelons donc SDL quitter avant retour un pour principale. 

Nous avons donc cette fenêtre ouverte, espérons. Et ce que nous allons à faire est que nous allons appeler SDL pour 5000 millisecondes, qui est la même que cinq secondes. Et quand nous aurons fini avec cela, il va détruire la fenêtre, nettoyer la bibliothèque SDL, et quitter le programme. Allons donc de l'avant et donner un coup de feu. 

Alors maintenant, au lieu de changer le makefile à chaque fois, Je ne peux tout simplement ne faire, et puis sur la ligne de commande, disent sources Equals puis le fichier nous compilation. Donc, il est hello2_window.c. Fantastique. Aucun erros. Maintenant, si nous gérons notre exécutable, nous voyons cette fenêtre. Maintenant, il ya un peu les problèmes de la fenêtre. Nous pouvons le déplacer, mais il a Dans ce contexte indésirable à l'intérieur. Donc, nous avons pas tiré quoi que ce soit, et il est donc tout plein d'ordures, qui est à peu près ce que nous attendons. 

En outre, nous ne pouvons pas fermer la fenêtre. Je appuyant sur cette X dans le coin et rien ne se passe. Nous allons donc voir comment résoudre que dans un peu. Donc, nous allons fixer la partie où le fenêtre est pleine d'ordures en premier. Donc, si nous allons vers hello3_image.c, ce nous pouvons voir est que nous avons ajouté quelques-uns plus de choses ici. Nous avons ajouté cette nouvelle tête déposer pour obtenir les fonctions de minuterie. Je suppose que nous avons fait dans la dernière l'un, aussi, et je ne le mentionne pas. Mais maintenant, parce que nous sommes travailler avec des images, nous avons besoin d'inclure la SDL l'image fichier d'entête ainsi. Il est donc la même chose que avant, l'initialisation SDL ici, même accord avec la création de fenêtres. Nous avons vu que, avant maintenant. 

Maintenant, nous devons créer quelque chose appelé un moteur de rendu, qui va sorte de long avec la fenêtre. Mais il est une sorte de objet abstrait qui est en charge de faire tous ces opérations de dessin à la fenêtre. Et elle correspond effectivement à un programme chargé dans le matériel graphique dans votre ordinateur ou votre téléphone ou autre. Ainsi, les drapeaux que nous voulons transmettre it-- et vous pouvez regarder la documentation pour obtenir plus de détails ici-- vont à SDL render accéléré, qui signifie qu'il va être en utilisant le matériel graphique et pas seulement des émules dans le logiciel. 

Et nous allons utiliser SDL rendu PRESENTVSYNC. VSYNC est une chose qui rend tout simplement vos graphiques regardent mieux et empêche cet écran de chose appelée la terreur, où la moitié d'une trame et l'autre moitié de la prochaine cadre se attirée dans le même temps et il est affreux. Mais encore une fois, vous pouvez aller lire à ce sujet sur votre propre. 

Nous avons donc des drapeaux ici. Et donc nous allons simplement appeler cette fonction SDL créer rendu. Nous allons donner la fenêtre à associer à ce moteur de rendu. Un point négatif signifie que nous ne nous soucions pas ce pilote graphique nous allons utiliser. Ce qui devrait à peu près toujours négatif, à moins que vous savez sur les pilotes graphiques. Et puis nous allons juste faire passer nos drapeaux. Donc, si cela renvoie null, alors nous sommes va imprimer l'erreur, comme d'habitude, mais nous allons aussi pour détruire la fenêtre pour nettoyer ces ressources avant SDL appelant quitter et retourner. 

Maintenant, la partie intéressante ici est l'endroit où nous chargeons notre image en utilisant cette fonction IMG_load. Ceci est la seule fonction que nous allons à utiliser dans la bibliothèque d'images SDL. Il est le seul dont nous avons besoin. Il est une fonction qui prend la chaîne qui est le chemin d'une ressource d'image. Et il peut être un .png, GIF, bitmap, aucune de ces choses. Et voilà pourquoi cette fonction est tellement agréable. Il peut gérer à peu près tous les formats. Le charge en mémoire et le stocke comme une chose appelée une surface SDL. 

Maintenant une surface SDL est simplement une struct qui représente les données d'image dans la mémoire. Ainsi, vous pouvez en savoir plus sur que dans la documentation deux. Et si cette erreur, alors nous sommes va faire toute chose où nous imprimons l'erreur, fermons notre ressources, puis quittez le programme. Maintenant la chose intéressante est, avant nous pouvons tirer cette image à la fenêtre, nous devons réellement faire une texture. Maintenant, une texture correspond pour des données d'image chargées dans la mémoire de matériel de l'graphique. 

Donc, une surface est en principale la mémoire, la mémoire régulière que nous avons utilisé tout le semestre, et une texture est séparé dans cette VRAM mémoire que les contrôles de la carte graphique. Donc, nous appelons cette fonction SDL_CreateTextureFromSurface. Nous donnons notre moteur de rendu et de notre surface. Et puis, nous sommes en fait fait avec la surface, donc nous allons juste pour le libérer. Nous ne faisons plus besoin. Et puis, si cet appel erroné et retourné null, alors nous allons faire tout le rapports à nouveau chose erreur. 

D'accord. Ici, nous entrons dans une certaine fonctions de rendu réels. Donc, appeler SDL_RenderClear et la faire passer le moteur de rendu associée à notre fenêtre est tout simplement la fenêtre aller noir. Donc, il supprime cette ordure que nous avons vu dans notre fenêtre fait avant et en noir. Et puis nous allons appeler SDL_RenderCopy, faire de notre moteur de rendu, notre texture. Et nous allons parler de ce ces champs sont dans un peu. Mais cela va prendre les données de texture et le copier sur notre fenêtre pour dessiner l'image. Ainsi, après que nous avons fait cette copie les données sur notre fenêtre, nous avons à faire cette fonction supplémentaire appelé SDL_RenderPresent. 

Et ce qui est intéressant parce que cela devient dans un sujet appelé le double buffering. Donc le double buffering est une technique qui rend vos graphiques ressemblent beaucoup mieux. Encore une fois, il empêche que l'écran déchirure Je parlais tout à l'heure, où vous avez deux tampons. Il ya un tampon de retour en mémoire et une mémoire tampon avant. Le tampon avant est littéralement ce qui est sur votre écran en ce moment. Alors que nous faisons tous ces puisent variations, comme SDL rendre copie ou SDL_RenderClear à la mémoire tampon de retour. Donc, ils modifient les choses dans le tampon de retour. Ici, nous pourrions être ce dessin carré vert au tampon de retour. 

Alors quand nous aurons fini de faire nos opérations de rendu, qui pourrait prendre un temps très long temps, ce que nous allons faire est basculer les tampons. Donc, littéralement il faut juste le front buffer et le tampon de retour et les commutateurs, de sorte que, instantanément, en une seule opération, au lieu de peut-être des centaines ou des milliers, l'ensemble de notre nouvellement rendu objets sont à l'écran. Et ce qui empêche les choses comme le rafraîchissement d'écran moitié lorsque nous avons seulement attirés de nos objets pour la trame. Voilà pourquoi nous avons besoin de faire appel SDL_RenderPresent, ainsi comme SDL_RenderCopy. 

Encore une fois, nous allons juste attendre cinq secondes. Ensuite, nous allons nettoyer nos ressources. Nous avons un certain nombre de plus cette fois. Et puis nous allons juste pour quitter le programme. Donc, nous allons le faire. Je vais taper make, puis sources hello-- égal cela est maintenant 3image.c. Tout droit, qui a compilé sans erreurs. Et vous pouvez le voir ici, je l'ai maintenant étiré mon image, Bonjour, CS50! à notre fenêtre, ce qui disparaît après cinq secondes. 

Maintenant, ce qui a encore des problèmes, non? Ce ne sont pas une bonne application, parce que quand je tente de fermer la fenêtre, rien ne se passe. Que X est toujours pas sensibles. Donc, nous allons jeter un oeil à la fichier suivant, hello4animation. Alors ceci est l'image cela va à introduire déplacement et de mouvement à notre image. Donc, nous allons faire la même chose qu'avant, SDL initier, créer la fenêtre, créer le moteur de rendu, charger l'image dans mémoire, créer la texture. Nous avons vu tout cela avant. Maintenant, ce qui est nouveau. Nous allons avoir une structure appelée un rect SDL, qui est juste un rectangle. Si nous passons en revue ici, nous pouvons faire une recherche pour SDL rect, et vous pouvez voir qu'il est un structure très simple. Il a x, a y pour la position, et il a une largeur et une hauteur pour la taille du rectangle. 

Donc, ce que nous allons faire est que nous sommes va définir cette SDL rect dest, de destination. Et cela est l'endroit sur l'écran où nous allons être de dessin notre image, à droite donc si nous allons être déplacer l'image autour, puis la destination où nous allons dessiner l'image doivent être déplacer. Donc, nous allons appeler cette SDL_QueryTexture fonction. Et je remarque en passant l'adresse de dest.w, qui est la largeur, et dest.h, qui est la hauteur. Et ainsi va SDL_QueryTexture pour stocker dans les domaines de la largeur et la hauteur de notre texture. 

Et puis ce que je vais à faire est que je vais de mettre dest.x être fenêtre largeur dest.w moins, ce qui est la largeur de l'image-objet, divisé par deux. Et cela va mettre en place afin que l'image est parfaitement centré dans notre fenêtre, tout va bien? Alors maintenant, je dois une position de y. Et cela va être une variable qui est changer, parce que nous allons être déplacement de l'image dans la direction y. Et maintenant nous avons quelque chose appelé une boucle d'animation. 

Alors, comment fonctionne l'animation? Eh bien, l'œil humain peut détecter 12 distincte images à chaque seconde, d'accord? Donc, si vous flashez 12 cartes d'image de moi dans une seconde, je vis chacune de ces images comme sa propre image individu distinct. Maintenant, si vous flashez plus images à moi en une seconde, puis mon oeil allait commencer leur ensemble flou et je voudrais le percevoir comme mouvement, au lieu d'une image distincte. Ainsi, par exemple, les films et la télévision, ils clignotent images à vous 24 fois une seconde. Voilà donc 24 images par seconde. Les écrans d'ordinateur, d'autre part, sont souvent à 60 images par seconde. Voilà leur vitesse de rafraîchissement. Voilà comment souvent, ils rafraîchissent l'image sur l'écran. Donc, notre objectif va être 60 images par seconde pour nos jeux. 

Voyons donc ce que dans le code. Donc, pour chaque trame, nous sommes les premiers va effacer la fenêtre. Ceci est la tendance générale. Vous désactivez toujours le fenêtre chaque trame, puis faire tout votre dessin opérations, puis à la fin, ne RenderPresent pour montrer tout dans le cadre. Et puis vous allez avoir une attente à la fin attendre jusqu'à la prochaine cadre doit commencer. 

Donc, si je faisais beaucoup de calcul complexe ici qui a pris plus de 16 millisecondes, il serait impossible pour moi pour obtenir ce taux de 60 de trame Je voulais, parce que chaque cadre est prend trop de temps à calculer. En outre, nous faisons réellement sorte d'une quantité négligeable de travail ici, car il ya seulement une chose que nous allons dessiner. Je viens donc attendre 1/60 de d'autre part, qui est la longueur d'un cadre entre les cadres. Donc, je suis en quelque sorte de faire semblant faire tout mon travail prend du temps zéro. Mais dans un jeu réel, vous auriez à soustraire la quantité de temps qu'il a fallu pour le faire tout ce travail à partir de votre temps de repos. 

Donc de toute façon, que suis-je en train de faire dans cette boucle? Je effacer la fenêtre. Je mis le dest.y, qui est un int ma position y réelle jeté dans un int. Maintenant, je veux flotter résolution pour ma position y dans mon jeu, mais en réalité à dessiner sur l'écran, il a besoin ints, parce qu'il est en unités de pixels, de sorte que est ce que le casting est pour. Je vais dessiner l'image. Voici donc le rectangle source. Et cela est le rectangle de destination. Donc je suis passé nulle pour le rectangle source de dire que je veux attirer toute ma texture. Mais si vous avez eu beaucoup de textures dans votre jeu et ils sont tous dans une grande carte de texture qui a été chargé dans SDL comme une seule texture, vous pourriez utiliser un rectangle source de choisir l'une des textures plus petites, un des plus petits sprites, sur ce gros plan de la texture. 

Encore une fois, je suis de passage ma rendu, mon texture, et maintenant la destination. Cela va être là où dans le fenêtre, il va être dessiné. Et puis, parce que je suis l'animation quelque chose, je dois le mouvement, Je vais être mise à jour du position de sprite sur chaque trame. Je dois donc appelé ce défilement constant accélérer en unités de pixels par seconde. Maintenant, chaque fois que nous faisons un mouvement, le cadre est seulement 1/60 de seconde. Donc, je vais diviser par 60. Et puis, voyons, je suis soustraction de la position qui y. Pourquoi suis-je soustraire? Nous y reviendrons dans une seconde. Alors je nettoie mes ressources et le programme est fini. 

Faisons donc cela. Passons donc en faire SRCS = hello4 animation.c, d'accord? Jeu. Et voilà. Donc je l'ai défiler jusqu'à la fenêtre, ce qui est assez soignée. Mais attendez, je suis soustrayant à partir de la position y à chaque fois. Que se passe-t-il ici? Eh bien, il se trouve que dans SDL, et en fait, dans la plupart des images de synthèse, l'origine du système de coordonnées est en haut à gauche de la fenêtre. 

Ainsi, la direction va x positif à travers votre fenêtre à droite. Et la direction y positif va en fait en baisse. Donc encore une fois, dans de l'origine en haut à gauche de votre fenêtre, direction y positif est en baisse, et x est positif vers la droite. Alors, quand je soustrais de la position de y, qui est va faire aller sur le négatif y direction, qui est la fenêtre. Voilà donc ce qui se passe là-bas. Cool. 

Regardons le fichier suivant. Voici la partie de la montrer où nous avons finalement obtenir que X dans le coin de la fenêtre qui est censé fermer la fenêtre travailler. Alors qu'est ce qu'il se passe? On initialise SDL, créer la fenêtre, créer le moteur de rendu, charger l'image, créer la texture comme nous l'avons vu auparavant. Nous avons le même rectangle de destination comme avant, même appel à interroger texture. Mais cette fois, nous sommes alors va diviser la largeur et la hauteur de notre destination par quatre. Cela a seulement l'effet de mise à l'échelle de notre image vers le bas lorsque nous affichons dans la fenêtre par quatre. Voilà donc assez soignée. Nous pouvons simplement l'échelle juste comme ça. Nous allons commencer le sprite dans le centre de l'écran. Et maintenant nous avons x et la vitesse du Y et ils sont tous deux va commencer à zéro. 

Ceci est le mauvais fichier. Je suis désolé. Alors que tout est vrai. Voilà tout encore dans ce fichier. Nous avons le diviser par 4 et tout. Nous avons donc ici notre position de X et Y pour le centre de la fenêtre. Et nous lui donnons une vitesse initiale de cette vitesse constante, ce qui Je crois, est de 300 pixels par seconde. Maintenant, nous avons cette int pourrions tout aussi bien être un booléen appelé étroite demandé. Et au lieu de faire un boucle infinie sur une minuterie ici, nous allons être en animant Tant que près est pas demandée. 

Alors, comment ne traitons nous événements? Eh bien, SDL fait la queue des événements dans un file d'attente littérale dans les coulisses. Et puis chaque trame, nous pouvons dequeue événements à partir de cette file d'attente en utilisant cet appel SDL_PullEvent. Et encore une fois, certainement aller lire à ce sujet dans la documentation. Il ya beaucoup plus de détails et beaucoup plus de fonctions que vous pouvez utiliser avec ce. Nous transmettons l'adresse de cette chose, SDL_Event que nous avons ici sur la pile. 

Maintenant, ce qui est un SDL_event? Parce que SDL, si nous regardons dans les documentation-- nous allons voir, par catégorie API, entrée événements, la gestion d'événements, nous pouvons regarder le nombre de différents événements ici et nous pouvons voir qu'il ya une tonne d'entre eux. Alors, quelle est cette chose SDL_Event? SDL_Event est un syndicat. Wow, ce qui est un syndicat? Vous avez probablement jamais entendu parler de cela avant. Et cela est OK. 

Un syndicat est une sorte de une structure, sauf une structure dispose d'un espace pour tous ses champs et de la mémoire, alors qu'un syndicat a seulement assez d'espace pour adapter le plus grand un de ses champs, ce qui signifie qu'il ne peut stocker un de ses champs à la fois, de sorte que fait sens pour les événements, non? Nous pouvons avoir un clavier événement ou un événement de fenêtre, mais un seul événement ne peut pas être à la fois un Clavier événement et un événement de fenêtre, de sorte qu'il serait stupide d'avoir un espace pour deux personnes à l'intérieur de notre syndicat de l'événement. Donc, si vous vouliez créer votre propre syndicat, il ressemble exactement la même que la création d'une structure, sauf que nous utilisons le mot-clé de l'union à la place du mot-clé struct. Et rappelez-vous, pour l'ensemble de la choses à l'intérieur de votre syndicat, la variable réelle qui est l'union ne peut avoir une de ces valeurs à la fois. 

Alors, comment pouvons-nous dire quel type d'événement nous sommes passés hors de cette file d'attente? Eh bien, nous pouvons tester event.type. Et si cela est égal à SDL_Quit, nous savons elle est l'événement qui a été généré, lorsque nous frappé que X dans le coin de la fenêtre. Et nous pouvons mettre en étroite demandé est égal à 1. Le reste est juste une animation que vous avez vu avant. Donc, nous allons aller de l'avant et de faire cela et voir comment il fonctionne. Donc, je vais taper marque et puis SRCS = hello5_events.c. Nous y voilà. Jeux. 

Maintenant, nous pouvons voir qu'il était en effet réduite par quatre. Et maintenant il est rebondissant autour. Je ai quelques détection de collision passe avec les côtés de la fenêtre que nous pouvons jeter un oeil à. Et ce qui se passe quand je vais à fermer? Il ferme. Fantastique. Nous avons reçu cet événement. Et nous avons traité il. 

Examinons donc de retour au code. Alors, comment ai-je l'obtenir rebondissant autour comme ça? Rappelez-vous que je mets les deux x et y initialement à des vitesses. Et la vitesse est un facteur positif constante, de sorte que ce allez l'obtenir débutant descendre et vers la droite. 

Maintenant, chaque trame, en plus de manipulation tous les événements qui ont pu se produire, Je vais pour détecter si mon sprite est d'essayer de sortir de la fenêtre. Donc, nous pouvons le faire en train de vérifier x_pos avec 0, y_pos 0, puis aussi x_pos et y_pos avec largeur de la fenêtre et de la hauteur de la fenêtre. Remarquez que je l'ai soustrait la largeur du sprite. Et cela parce que si je ne l'ai pas soustraire la largeur du sprite, ce serait seulement vérifier que l'origine de l'image-objet ne pas aller à l'extérieur de la fenêtre. Mais nous voulons que l'ensemble largeur du sprite pour être toujours à l'intérieur de la fenêtre et toute la hauteur de l'image-objet pour être toujours à l'intérieur de la fenêtre. Voilà ce que la soustraction est pour. Beaucoup de géométrie peut ici être utile de le tirer sur le papier avec les coordonnées système pour voir ce qui se passe. 

Donc, si je ne Collide, je viens simplement réinitialiser la position de sorte qu'il ne va pas hors de l'écran. Et je vais, si elle rebondit sur une des parois latérales, Je vais à nier la x vitesse de sorte qu'il commence à rebondir dans l'autre sens. Et de même, si elle frappe le haut ou le bas, Je vais régler la vitesse d'y égale à la vitesse y négatif, de sorte qu'il va rebondir. Voilà donc comment nous sommes arrivés ici. 

Et les positions de mise à jour tout comme nous avons vu auparavant, diviser par 60, parce que nous sommes la manipulation seulement 1/60 de seconde. Et puis rendu, exactement le même que précédemment. Et pour que tout est ce qui se passait dans ce dossier. Voilà donc comment nous faisons les événements. La principale chose à emporter ici est cette fonction de SDL_PullEvent. Et vous devez absolument lire le documentation plus sur SDL_Event l'union, parce que ce type de données est très, très important, parce que nous utilisons pour toutes sortes d'événements. 

Par exemple, nous l'utilisons pour clavier événements, qui est ce que ce fichier est pour. Alors qu'avons-nous? Nous avons la même chose qu'avant, initialiser SDL, créer une fenêtre, créer un moteur de rendu, charger l'image en mémoire, créer la texture. Encore une fois, nous allons cette dest rectangle, nous allons à l'échelle de l'image par quatre, en faire un peu plus petit. Maintenant, nous allons commencer la sprite dans le centre de l'écran. Mais cette fois, nous allons définir le initiales x et y vitesses à zéro, parce que le clavier est va contrôler ceux-ci. Et d'ailleurs, nous allons garder une trace de ces variables haut, bas, gauche et droite. Et cela va continuer piste de savoir si nous avons appuyé sur les touches du clavier qui correspondre à haut, en bas, à gauche, et à droite. 

Maintenant, ce genre de fantaisie est parce que nous pouvons utiliser W, A, S, Les touches fléchées réels D ici, ou. Nous verrons que, dans une seconde. Donc, nous allons traiter l'événement comme avant. Nous tirons de l'événement. Mais maintenant, nous allons changer le type d'événement. Si elle est SDL_Quit, nous sommes va mettre près demandé à l'un, comme avant. Qui gère les x dans le coin de la fenêtre, de sorte que notre fenêtre se ferme effectivement. 

Sinon, si nous obtenons une clé SDL bas événement, ce qui signifie que nous avons appuyé sur une touche, alors ce que nous allons faire est que nous sommes va passer sur cette chose ici, qui désigne: si event.key signifie traiter notre syndicat de l'événement, aller chercher la clé la structure de l'événement en elle. Donc, il se trouve que ce l'union est une structure d'événements de touche. Et puis accédez à la clé la structure de son événement sur le terrain appelé keysym puis scancode. Et de nouveau, absolument lire la documentation à ce sujet. Entrées de mots-clés très intéressant. Vous pouvez obtenir des codes d'analyse ou de codes clés. Et il est un peu subtil, mais la documentation est assez bonne. 

Donc, si nous voyons le code de balayage pour notre appuyez sur la touche W ou jusqu'à être, nous allons mettre en place égale à 1. Et puis nous sortir de ce commutateur. Si il ya une ou à gauche, nous gauche ensemble à 1, et cetera, et cetera, pour bas et à droite. Maintenant, dans ce commutateur externe, si nous voyons une clé jusqu'à l'événement, cela signifie que nous avons publié une clé et nous ne sommes plus pressant. Donc, je vais dire des égaux à 0, gauche est égale à 0, soit une baisse égale à 0, à droite est égal à 0, et cetera. 

Et remarquez que nous avons dans chacun de ces deux cas mis juste à côté de l'autre sans code distinct pour le premier cas, qui signifie que si elle est un S ou d'un bas à droite ici, il va exécuter ce code. Voilà donc assez pratique. Il nous empêche d'avoir à faire plus conditions et les FI et les choses comme ça. 

Nous allons donc déterminer la vitesse. Nous avons mis la vitesse à 0. Ensuite, si on appuie sur place et non vers le bas, alors nous régler la vitesse y à vitesse négative. Rappelez-négative, parce que la direction y négative est en place. Et la direction y positive est bas. Si le bas est pressée et pas, alors nous sommes va mettre à vitesse positive, ce qui signifie descendre l'écran. Même chose avec gauche et droite. 

Et puis nous allons mettre à jour les positions juste comme avant. Nous allons faire une collision détection avec des limites, mais on ne va pas à réinitialiser le vitesse, parce que la vitesse est juste commandé par le clavier. Mais nous allons réinitialiser le positions de le tenir dans la fenêtre. Et nous allons définir le positions dans la struct et ensuite faire tout le rendu des trucs d'avant. Voyons donc ce qu'il fait. Donc, assurez-SRCS-- voyons, cela est hello6_keyboard.c. 

Oh non. Donc, nous avons eu quelques avertissements ici. Et qui est tout simplement dire que nous ne l'avons pas vérifier pour chaque type simple possible de l'événement. Voilà OK, parce il ya 236 d'entre eux ou plus. Donc, je vais ignorer ces avertissements. Il est encore bien compilé. Donc, je vais jouer le jeu. Il ne bouge pas. Mais maintenant, quand je Mash sur mon clavier, Je peux faire un peu de mouvement WASD ici, Je me sers de mes touches fléchées ainsi. Et remarque, même si je suis appuyant à droite en ce moment, ça ne va pas sortir de la fenêtre, parce que je le réinitialiser sur chaque image. Voilà donc assez soignée. Vous pouvez imaginer se déplacer avec Mario quelques touches fléchées ou quelque chose comme ça. Et oui, le X ne fonctionne. 

Donc fichier final, nous allons à regarder, hellow7_mouse. Il est question d'obtenir l'entrée de la souris. Donc, dans celui-ci, nous importer l'en-tête de mathématiques, parce que nous allons avoir un peu de mathématiques ici. Même vieux, même vieux trucs, destination, même vieux, vu qu'avant. Eh bien, ce qui est intéressant. Donc, nous sommes de retour à qu'un contrôle pour la SDL quitter événement. Pourquoi donc? Ainsi, vous pouvez obtenir l'entrée de la souris d'événements. Comme lorsque le déplacement de la souris, vous obtenez un événement pour cela. Quand un bouton de la souris est enfoncé, vous pouvez obtenir un événement pour cela. 

Mais il ya un autre, un peu plus simple peut-être, API pour obtenir l'entrée de la souris. Et cela est tout simplement l'état de la souris get SDL. Je dois donc un int pour x et y pour la position du curseur. Je passe à SDL_GetMouseState, qui définit ces. Et cela est la position dans le système de coordonnées de la fenêtre. Donc, si la masse est en haut à gauche de la fenêtre, qui serait 0, 0. 

Maintenant, ce que je vais faire est que je vais à faire un peu de calcul vectoriel. Je parie que vous pensiez pas voir que dans CS50, mais ici il est. Je vais faire un vecteur mathématiques pour obtenir le vecteur à partir de l'image du curseur. Et alors pourquoi dois-je cette soustraction ici? Eh bien, si je viens d'utiliser dest .-- si Je dois traduire la souris x et y la largeur de moitié et la hauteur de l'image, parce que je veux le centre de la image à va vers la souris, pas l'origine de l'image. 

Voilà donc juste vous assurer que je parle sur le centre de l'image ici. Ensuite, nous obtenons delta x et y, qui est la différence de la cible à la position réelle de l'image. Et puis nous pouvons obtenir le distancier ici, qui va être de Pythagore théorème, racine carrée de x ainsi que x fois y fois y. 

Maintenant, pour empêcher la gigue, et je peux montrer vous ce que cela fait si je ne le fais pas, si la distance entre le curseur et le centre de l'image est inférieure à cinq, Je suis juste ne va pas déplacer l'image. Sinon, nous avons mis la vitesse. Et nous avons mis pour que le la vitesse sera toujours constante. Et le résultat net de l'ensemble ce calcul est que l'image va se déplacer vers le curseur. 

Or, il se trouve que SDL_GetMouseState, en plus de définir le arguments x et y ici, il renvoie aussi un int correspondant à l'état des boutons de la souris. Donc, nous ne pouvons pas lire directement, mais nous ne pouvons utiliser ces macros, un seul l'opérateur au niveau du bit, pas si effrayant, juste un bit à bit et. Donc, nous disons boutons, qui est le résultat de notre SDL_GetMouseState, si ce et au niveau du bit et, cette macro ici, SDL_BUTTON_LEFT. 

Donc cela va résoudre tout simplement au bitmap correspondant au bouton gauche de la souris enfoncé. Et donc si le bit à bit et se produit et il est non nul, ce qui signifie bouton de gauche a été enfoncée, alors nous allons en fait à nier à la fois le x et le y vitesses, qui fera juste l'image d'emballement. Postes de mise à jour. Collisions détections, vu tout cela avant, rendant, tout droit. Faisons. Donc, vous avez faire SRCS = hello7_mouse.c. Formidable. Aucune erreur. Et jeu. 

Donc ici, je dois ma souris. Et l'image est en effet courir ma souris. Maintenant, dans un jeu que vous faites, peut-être cela est comme une chasse de l'ennemi votre petit personnage ou autre. Mais ici, nous avons le l'image chassant la souris. Et quand je clique, la souris commence à courir l'image et cette image est courir loin de la souris. Voilà donc assez cool. Et remarquez encore, il est encore la détection de collision ici. 

Voilà donc la petite finale démo je l'ai mis en place ici. Et nous allons jeter un oeil à une chose de plus. Donc, de retour ici, je l'ai mentionné cette gigue. D'accord. Donc, si la distance est inférieure à cinq pixels, Je mettais en x et y vitesse à zéro. Qu'advient-il si nous nous débarrassons de cela? Donc je vais juste le faire. S'il vous plaît excuser ce style horrible, mais nous avons commenté le code correct. Donc, je vais sauver ce et faire le même commande de devant pour le faire. 

D'accord. Et maintenant ce qui se passe? Bien. Nous sommes toujours en suivant la souris comme avant, mais quand nous arrivons à la souris, nous avons cette gigue brut. Que se passe-t-il ici? Eh bien, dans notre vecteur mathématiques, souvenons nous étions en prenant la distance entre le curseur et le centre de l'image? Eh bien, comme que les approches 0, nous commençons à obtenir comme ce genre de comportement fou où l'image est une sorte de comme oscillant autour du curseur. Et cela la création de cette gigue. Et cela est vraiment moche. Et vous faites probablement pas veulent vos jeux faisant cela, sauf si elle est une sorte d'effet spécial. 

Voilà pourquoi nous avons juste cette arbitraire coupure de cinq pixels, où nous disons si elle est dans les cinq pixels, nous sommes bons. Nous ne devons pas pour déplacer l'image plus. Voilà donc ce qui se passe là-bas. 

Voilà donc à peu près tout. Vous savez maintenant comment créer une fenêtre, charger une image, dessiner une image à la fenêtre, se entrée Clavier, obtenir entrée de la souris, il ya un tas d'autres entrée que vous ne seriez pas savoir comment obtenir si vous venez de passer un quelques minutes à regarder la documentation. Donc, vous avez fait assez quelques outils à votre disposition avec l'entreprise d'écrire un jeu à part entière. 

Maintenant, chaque jeu a besoin de l'audio, mais la documentation audio est également très bon. Et je suis prêt à parier que si vous comprenez toutes les choses nous avons parlé aujourd'hui avec des images et des surfaces, les fenêtres, et tout, alors déterminer l'API audio est pas va être si mal que ça. Donc, je suis impatient de voir ce que vous créez avec SDL.