1
00:00:00,000 --> 00:00:05,069

2
00:00:05,069 --> 00:00:06,110
THOMAS LIVLIG: Okay.

3
00:00:06,110 --> 00:00:07,450
Hej alle sammen.

4
00:00:07,450 --> 00:00:08,690
Jeg er Thomas Lively.

5
00:00:08,690 --> 00:00:15,160
Dette seminar vil være
skrive 2D spil i C ved hjælp af SDL.

6
00:00:15,160 --> 00:00:17,970
Så jeg ved, du er alt
spørger, yeah, jeg virkelig

7
00:00:17,970 --> 00:00:22,050
ønsker at spille spil og lave spil,
men hvad er det SDL virksomhed?

8
00:00:22,050 --> 00:00:25,320
Så SDL er en C-biblioteket.

9
00:00:25,320 --> 00:00:28,270
Det står for Simple
DirectMedia Layer.

10
00:00:28,270 --> 00:00:31,340
Og det er en cross-platform,
spiludvikling bibliotek.

11
00:00:31,340 --> 00:00:37,160
Det virker på Windows, Mac
Linux, selv iOS og Android.

12
00:00:37,160 --> 00:00:40,380
Den håndterer ting som
adgang til lydsystemer

13
00:00:40,380 --> 00:00:44,900
for computeren, tastaturet og
mus, joysticks, hvis de er tilknyttet.

14
00:00:44,900 --> 00:00:48,300
På mobil, kan det endda gøre det
røre input og alt dette.

15
00:00:48,300 --> 00:00:53,030
Og selvfølgelig, det håndterer grafik,
tegning ting til skærmen.

16
00:00:53,030 --> 00:00:56,470
>> Så det er meget udbredt, selv om
du måske ikke har hørt om det før.

17
00:00:56,470 --> 00:01:00,860
Det er indbygget i, for eksempel,
Valves kilde motor,

18
00:01:00,860 --> 00:01:04,970
hvilke beføjelser spil som
Portal og Team Fortress 2.

19
00:01:04,970 --> 00:01:08,680
Det er også i et meget stort antal
af indie-spil, der kommer ud,

20
00:01:08,680 --> 00:01:13,545
så jeg er spændt på at se, hvad du
alle vil være at gøre med det.

21
00:01:13,545 --> 00:01:20,000
>> Seminaret mål er at få dig
satte sig for at udvikle med SDL.

22
00:01:20,000 --> 00:01:22,700
Vi kommer til at lære, hvordan
at skabe et spil vindue.

23
00:01:22,700 --> 00:01:26,130
Vi kommer til at skabe sprites,
som er de billeder i dit spil

24
00:01:26,130 --> 00:01:27,744
der kan bevæge sig rundt.

25
00:01:27,744 --> 00:01:29,910
Vi kommer til at lære, hvordan
til og animere de sprites,

26
00:01:29,910 --> 00:01:32,910
så flytte dem rundt, gør
dem ændre sig over tid.

27
00:01:32,910 --> 00:01:35,580
Og vi kommer til at lære, hvordan
at indfange tastatur og mus

28
00:01:35,580 --> 00:01:38,240
input fra computeren.

29
00:01:38,240 --> 00:01:41,550
Hvad vi vil ikke tale
om i dag er 3D-grafik,

30
00:01:41,550 --> 00:01:45,520
fordi det er en meget kompliceret
emne, som vi ikke har tid til.

31
00:01:45,520 --> 00:01:49,010
Vi vil ikke lære at
afspille lyd på vores spil.

32
00:01:49,010 --> 00:01:53,300
Og vi vil ikke bygge
for noget men Linux.

33
00:01:53,300 --> 00:01:58,330
>> Nu forbehold er, at
Forhåbentlig ved udgangen seminaret,

34
00:01:58,330 --> 00:02:01,660
vil du være fortrolig med
SDL dokumentation,

35
00:02:01,660 --> 00:02:05,370
så du vil være i stand til at gå finde ud
hvordan man afspille lyd for dig selv.

36
00:02:05,370 --> 00:02:12,150
Også bygning til Mac eller pc bør arbejde
nøjagtig det samme som at bygge til Linux,

37
00:02:12,150 --> 00:02:14,700
men opsætningen kommer til at
være lidt anderledes.

38
00:02:14,700 --> 00:02:17,700
Så du bør være i stand til at regne
ud af, hvordan at gøre disse ting

39
00:02:17,700 --> 00:02:20,900
ved udgangen af ​​dagens seminar.

40
00:02:20,900 --> 00:02:26,980
>> Så for sat op, vil vi
at anvende en virtuel maskine.

41
00:02:26,980 --> 00:02:31,010
Vi ville bruge CS50 IDE, fordi
vi bare kommer til at skrive i C.

42
00:02:31,010 --> 00:02:35,120
Men da IDE ikke er en browser, vi
kan ikke oprette nye vinduer eller display

43
00:02:35,120 --> 00:02:36,410
grafik i det.

44
00:02:36,410 --> 00:02:38,450
Så vi har brug for en virtuel maskine.

45
00:02:38,450 --> 00:02:47,790
Så du kan følge instruktionerne
her på manual.CS50.net/appliance/15

46
00:02:47,790 --> 00:02:53,290
at installere de officielle CS50 apparatet,
som blot er en Linux virtuel

47
00:02:53,290 --> 00:02:55,110
maskine.

48
00:02:55,110 --> 00:02:58,090
>> Og så når du har
at alle sæt up-- det

49
00:02:58,090 --> 00:03:02,090
kan tage et lille stykke tid, fordi
en meget stor download-- du vil

50
00:03:02,090 --> 00:03:07,060
at køre i VM sudo apt-get update.

51
00:03:07,060 --> 00:03:09,410
Og det der virkelig foregår
at opdatere al den software

52
00:03:09,410 --> 00:03:12,670
pakker på din virtuelle maskine.

53
00:03:12,670 --> 00:03:20,130
>> Efter dette, er du nødt til at køre
sudo apt-get install, libsdl2-2.0-0,

54
00:03:20,130 --> 00:03:27,960
libsdl2-dbg, libsdl2-dev, og
derudover libsdl2-image-2,0-0,

55
00:03:27,960 --> 00:03:32,560
libsdl2-image-dbg,
og libsdl2-image-dev.

56
00:03:32,560 --> 00:03:33,640
Så hvad betyder det så?

57
00:03:33,640 --> 00:03:38,440
Der blot installerer debug
information, dokumentation, overskrifter,

58
00:03:38,440 --> 00:03:41,260
og binære filer til to biblioteker.

59
00:03:41,260 --> 00:03:45,090
Regelmæssig gamle, SDL 2.0,
og et andet bibliotek

60
00:03:45,090 --> 00:03:50,110
kaldet SDL Billede, som
vi kommer til at bruge

61
00:03:50,110 --> 00:03:54,560
at indlæse billedfiler ind i vores spil.

62
00:03:54,560 --> 00:03:57,860
>> Så når du har der også
at, netop når den beder,

63
00:03:57,860 --> 00:04:01,100
du bare skrive ja, tryk Enter
at installere disse pakker,

64
00:04:01,100 --> 00:04:04,430
og så skal du være god til at gå.

65
00:04:04,430 --> 00:04:14,800
Så for at få distributionen kode, du
can-- oh dear, er denne ikke opdateret.

66
00:04:14,800 --> 00:04:18,480
Medmindre du har en GitHub account--
hvis du har en GitHub-konto,

67
00:04:18,480 --> 00:04:24,450
du kan gøre dette Git
klon kommando til repo

68
00:04:24,450 --> 00:04:30,490
og det vil downloade Git
repo med al koden i det,

69
00:04:30,490 --> 00:04:31,700
så du har koden.

70
00:04:31,700 --> 00:04:36,470
>> Hvis du ikke har en GitHub
konto, hvad du skal gøre er at skrive

71
00:04:36,470 --> 00:04:48,867
wgithttps: //github.com/tlively/sdl
seminar-- og her er det different--

72
00:04:48,867 --> 00:04:49,700
/archive/master.zip.

73
00:04:49,700 --> 00:04:55,610

74
00:04:55,610 --> 00:04:59,220
Så igen, det er nøjagtig den samme
URL, bortset fra at det vil være

75
00:04:59,220 --> 00:05:09,010
tlively / SDL_seminar / master.zip og
du bruger wgit at hente det.

76
00:05:09,010 --> 00:05:12,940
Og så kan du blot
unzip at arkivet

77
00:05:12,940 --> 00:05:14,900
og så vil du have
alle kildekoden.

78
00:05:14,900 --> 00:05:17,580
Så ked af det.

79
00:05:17,580 --> 00:05:23,880
Og så koden vil også blive vært på
det CS50 seminaret webside i et par

80
00:05:23,880 --> 00:05:25,230
dage.

81
00:05:25,230 --> 00:05:26,590
>> Okay.

82
00:05:26,590 --> 00:05:29,932
Så hvordan kommer vi i gang
skrive vores eget spil?

83
00:05:29,932 --> 00:05:31,890
Nå, den første ting
vi vil ønsker at gøre

84
00:05:31,890 --> 00:05:34,740
er at se på den SDL dokumentation.

85
00:05:34,740 --> 00:05:37,020
Så her er VM.

86
00:05:37,020 --> 00:05:38,720
Og her er websiden.

87
00:05:38,720 --> 00:05:40,340
Jeg har navigeret til at leve libsdl.org.

88
00:05:40,340 --> 00:05:43,110

89
00:05:43,110 --> 00:05:48,140
Hvad jeg har tænkt mig at gøre her er at gå over
til indholdsoversigten under dokumentation,

90
00:05:48,140 --> 00:05:51,040
og klik på wikien.

91
00:05:51,040 --> 00:05:56,870
Dette vil bringe mig til wiki, der
har de fleste af dokumentationen for SDL.

92
00:05:56,870 --> 00:06:01,360
Over på sidebjælken her, vi er
kommer til at klikke på API efter kategori,

93
00:06:01,360 --> 00:06:04,300
fordi der vil give
os en dejlig kategorisk visning

94
00:06:04,300 --> 00:06:07,770
af hele API for SDL.

95
00:06:07,770 --> 00:06:12,390
>> Så for eksempel, har vi
den grundlæggende initialisering

96
00:06:12,390 --> 00:06:18,380
og lukke ned, alle slags
administrativ ting for at bruge SDL,

97
00:06:18,380 --> 00:06:21,630
og så har vi den sektion for
vise tingene til skærmen.

98
00:06:21,630 --> 00:06:23,000
Det er video.

99
00:06:23,000 --> 00:06:25,790
Input begivenheder, det er at få
input fra tastaturet,

100
00:06:25,790 --> 00:06:29,710
få input fra mus og
joysticket, hvis du har det endnu.

101
00:06:29,710 --> 00:06:32,901
Der er force-feedback for ting
lignende spil controllere, som

102
00:06:32,901 --> 00:06:34,150
Vi kommer ikke til at tale om.

103
00:06:34,150 --> 00:06:35,630
Og her er lyd.

104
00:06:35,630 --> 00:06:38,940
Og så er der en masse andre
ting, som SDL kan gøre for dig.

105
00:06:38,940 --> 00:06:43,830
>> Men i dag vil vi fokusere
på initialisering her,

106
00:06:43,830 --> 00:06:48,332
vise billeder i videoen
sektionen, og håndtering input begivenheder.

107
00:06:48,332 --> 00:06:50,290
Så dette er det vigtigste
sektioner af dokumentation

108
00:06:50,290 --> 00:06:53,050
at du skal bekymre dig om.

109
00:06:53,050 --> 00:06:57,170
Bare for sjov, hvis vi gå over
her og klik på API ved navn,

110
00:06:57,170 --> 00:07:04,350
Vi kan se en liste over alle
enkelt ting i SDL biblioteket.

111
00:07:04,350 --> 00:07:11,330
Så alle disse funktioner, tællinger,
strukturer, en vanvittig mængde ting,

112
00:07:11,330 --> 00:07:12,820
alfabetisk orden.

113
00:07:12,820 --> 00:07:14,580
Og klart, indtil
du ved, du laver,

114
00:07:14,580 --> 00:07:19,100
dette kommer ikke til at være alt for hjælpsom,
hvilket er grunden til vi gør API efter kategori.

115
00:07:19,100 --> 00:07:20,810
>> Så lad os komme i gang.

116
00:07:20,810 --> 00:07:25,680
Forhåbentlig har du allerede
downloadet fordelingen kode.

117
00:07:25,680 --> 00:07:30,070
Og så hvad du kan gøre, er, højre
her i CS50 apparatet,

118
00:07:30,070 --> 00:07:31,150
blot åbne en terminal.

119
00:07:31,150 --> 00:07:33,750

120
00:07:33,750 --> 00:07:34,440
Nu sker det.

121
00:07:34,440 --> 00:07:40,740
Så jeg har allerede downloadet den
fordeling kode ved hjælp af .zip

122
00:07:40,740 --> 00:07:41,690
metode.

123
00:07:41,690 --> 00:07:43,140
Og jeg har pakket det.

124
00:07:43,140 --> 00:07:46,120
Så her er det i SDL seminar mester.

125
00:07:46,120 --> 00:07:49,750
Så jeg har tænkt mig at gå ind i denne mappe.

126
00:07:49,750 --> 00:07:55,310
Og det, vi ser her er
at vi har syv C-filer.

127
00:07:55,310 --> 00:07:58,070
Og det kommer til at koden
vi kommer til at se på i dag.

128
00:07:58,070 --> 00:08:00,040
Vi har en makefile.

129
00:08:00,040 --> 00:08:06,950
Og vi har en mappe ressourcer,
som blot har et billede

130
00:08:06,950 --> 00:08:09,070
at du vil være at se hurtigt nok.

131
00:08:09,070 --> 00:08:16,060
>> Så lad os åbne disse filer
ved hjælp af G-Edit editor.

132
00:08:16,060 --> 00:08:22,000
Så jeg ønsker at åbne alle de filer,
begynde med hello og slutte med .c.

133
00:08:22,000 --> 00:08:23,380
Nu sker det.

134
00:08:23,380 --> 00:08:28,180
Så det er et lille vindue, så vi er
vil forsøge at gøre det større.

135
00:08:28,180 --> 00:08:28,900
Nej, det gik væk.

136
00:08:28,900 --> 00:08:32,836

137
00:08:32,836 --> 00:08:34,570
>> Okay.

138
00:08:34,570 --> 00:08:37,959
Så her er den allerførste
fil vi vil se på.

139
00:08:37,959 --> 00:08:39,000
Det hedder hello1_sdl.c.

140
00:08:39,000 --> 00:08:41,890

141
00:08:41,890 --> 00:08:47,980
Og alt dette gør, er at initialisere SDL
bibliotek, så vi kan begynde at bruge det.

142
00:08:47,980 --> 00:08:51,550
Hvordan ville du vide at komme
op med denne kode dig selv?

143
00:08:51,550 --> 00:08:53,850
Tja, hvis vi kigge over
på dokumentation

144
00:08:53,850 --> 00:08:58,040
og vi går ind initialiseringen
og lukke ned afsnittet

145
00:08:58,040 --> 00:09:02,230
det vil fortælle os alle
om, hvordan man initialisere SDL.

146
00:09:02,230 --> 00:09:06,630
Så absolut læse denne en anden gang.

147
00:09:06,630 --> 00:09:09,230
Det kommer til at fortælle dig alt
om, hvad der foregår her.

148
00:09:09,230 --> 00:09:14,360
Men den vigtigste kerne er, at
vi nødt til at kalde denne funktion SDL I Det

149
00:09:14,360 --> 00:09:18,910
og videregive den, hvad slags ting
vi ønsker, at biblioteket for at initialisere.

150
00:09:18,910 --> 00:09:23,620
Så i vores tilfælde, vi bare
at initialisere video for nu,

151
00:09:23,620 --> 00:09:26,690
så vi kan begynde at vise billeder.

152
00:09:26,690 --> 00:09:32,370
>> Herovre kan man se, om
Vi klikker på en SDL i det, vi

153
00:09:32,370 --> 00:09:36,160
kan få endnu mere information,
herunder returværdien.

154
00:09:36,160 --> 00:09:39,050
Så vi ser her, at det
AFKAST nul på succes.

155
00:09:39,050 --> 00:09:43,320
Så i vores kode, vil vi
se, om det ikke vender tilbage til nul,

156
00:09:43,320 --> 00:09:47,020
og hvis det ikke vender tilbage
nul, så det var ikke en succes,

157
00:09:47,020 --> 00:09:50,650
så vi vil blot udskrive
en fejl ved hjælp af denne anden funktion,

158
00:09:50,650 --> 00:09:56,260
SDL får fejl, der returnerer en streng
beskriver den fejl, der opstod.

159
00:09:56,260 --> 00:09:58,510
Vi kommer til at udskrive, at
fejl og så er vi bare

160
00:09:58,510 --> 00:10:02,270
kommer til at afslutte programmet
med en fejlkode.

161
00:10:02,270 --> 00:10:06,470
>> Så en anden ting, vi har brug for
at gøre er, før programmet afsluttes,

162
00:10:06,470 --> 00:10:10,830
hvis vi med succes initialiseret SDL,
vi bare nødt til at kalde det SDL holde op.

163
00:10:10,830 --> 00:10:15,750
Og det kommer til at håndtere oprydning
alle SDL interne ressourcer til os.

164
00:10:15,750 --> 00:10:21,240
Så dokumentationen there-- igen,
her er vi i initialiseringen

165
00:10:21,240 --> 00:10:23,640
og lukke ned sektion
af dokumentationen.

166
00:10:23,640 --> 00:10:26,680
Du kan blot klikke på
funktion her, SDL holde op,

167
00:10:26,680 --> 00:10:28,700
og du kan læse alt om, at så godt.

168
00:10:28,700 --> 00:10:31,400
Og en masse af disse funktioner
dokumentation sider

169
00:10:31,400 --> 00:10:35,630
har fx kode, så det
er meget god ressource.

170
00:10:35,630 --> 00:10:39,610
Helt sikkert bruge lidt tid
læse dele af denne wiki

171
00:10:39,610 --> 00:10:42,520
hvis du vil gøre
dette til et projekt.

172
00:10:42,520 --> 00:10:43,760
>> Okay.

173
00:10:43,760 --> 00:10:46,590
Så det er hele vores program.

174
00:10:46,590 --> 00:10:53,935
Hvad vi kan gøre nu is-- jeg
kommer til at åbne makefile her,

175
00:10:53,935 --> 00:10:56,150
så jeg har tænkt mig at tage en
se på, hvordan det fungerer.

176
00:10:56,150 --> 00:10:59,500
Og det er en meget enkel makefile,
ligner det, du har set før.

177
00:10:59,500 --> 00:11:04,010
En af de væsentligste forskelle
er, at her, det

178
00:11:04,010 --> 00:11:07,870
kommer til at indsætte resultatet af driften
denne kommando, som du har allerede

179
00:11:07,870 --> 00:11:10,850
installeret, hvis du har installeret SDL.

180
00:11:10,850 --> 00:11:13,230
Og det er en kommando
der kommer til at generere

181
00:11:13,230 --> 00:11:16,710
nogle ekstra flag for compileren.

182
00:11:16,710 --> 00:11:22,050
>> Ud over det, vi giver det
alle de sædvanlige kommandoer, samt

183
00:11:22,050 --> 00:11:23,430
disse to kommandoer.

184
00:11:23,430 --> 00:11:30,270
Så de -lsdl2-image håndtag
forbinder i SDL billedbibliotek.

185
00:11:30,270 --> 00:11:36,200
Og -lm faktisk håndterer linkning
i standard C matematik bibliotek.

186
00:11:36,200 --> 00:11:40,630
Så vi ikke vil få brug for
dem for alle vores C filer,

187
00:11:40,630 --> 00:11:43,900
men vi bare sætte dem i, så vi kan
bruge den samme Makefile til alt

188
00:11:43,900 --> 00:11:44,816
uden ændringer.

189
00:11:44,816 --> 00:11:46,970

190
00:11:46,970 --> 00:11:50,080
>> Herovre i kilder,
det er her, du ville

191
00:11:50,080 --> 00:11:53,680
sætte de filer, du var på vej
at kompilere til dit projekt.

192
00:11:53,680 --> 00:11:57,570
Men da hver eneste af mine C
filer her har en hovedfunktion,

193
00:11:57,570 --> 00:12:00,000
det kommer til at få forvirret
hvis vi sætter dem alle i.

194
00:12:00,000 --> 00:12:06,930
Så jeg har tænkt mig at bare sige,
for nu, hello1_sdl.c,

195
00:12:06,930 --> 00:12:11,150
som er den, vi bare kiggede på.

196
00:12:11,150 --> 00:12:18,740
Så hvis jeg går tilbage over
her, jeg kan gør.

197
00:12:18,740 --> 00:12:22,160
Og hvad det gjorde, er det bare
kompileret den første fil.

198
00:12:22,160 --> 00:12:28,780
Og så kan vi skrive ./game, fordi
det er den eksekverbare det produceret.

199
00:12:28,780 --> 00:12:31,660
Og alt det gjorde var print
initialisering succes.

200
00:12:31,660 --> 00:12:33,300
Så vi gjorde noget rigtigt.

201
00:12:33,300 --> 00:12:36,200
Men det var slags kedelige,
fordi vi ikke se et vindue,

202
00:12:36,200 --> 00:12:37,900
intet bevæger sig rundt.

203
00:12:37,900 --> 00:12:41,030
>> Så stor, fik vi SDL initialiseret.

204
00:12:41,030 --> 00:12:43,520
Lad os nu gå videre til noget
lidt mere interessant.

205
00:12:43,520 --> 00:12:54,700
Så her har vi hello2_window.c, og
dette vil være en lidt mere

206
00:12:54,700 --> 00:13:00,010
komplekse C program,
initialiserer SDL ligesom før,

207
00:13:00,010 --> 00:13:04,250
undtagen nu er vi også vil
at initialisere SDL timeren.

208
00:13:04,250 --> 00:13:07,720
Og det kommer til at lade os
adgang til interne timer

209
00:13:07,720 --> 00:13:10,550
og bruge funktioner vedrørende tid.

210
00:13:10,550 --> 00:13:11,920
>> Og så lad os se hernede.

211
00:13:11,920 --> 00:13:16,840
Det, vi gør, er at vi har denne pointer
til en SDL vindue struct, som

212
00:13:16,840 --> 00:13:21,160
vil blive skabt af denne indkaldelse
til funktionen, SDL skaber vindue.

213
00:13:21,160 --> 00:13:25,380
Nu, dette tager en masse argumenter,
så lad os gå se på dokumentationen.

214
00:13:25,380 --> 00:13:27,930
Så igen, vil jeg
API efter kategori, er jeg

215
00:13:27,930 --> 00:13:33,820
gå ned til video her, og den første
sektion, viser vinduet ledelse.

216
00:13:33,820 --> 00:13:36,470
Så denne sektion har
et ton af ting i det,

217
00:13:36,470 --> 00:13:39,970
men hvis man ser gennem
disse funktioner, vil du

218
00:13:39,970 --> 00:13:43,620
se, at nok den, vi
ønsker kaldes SDL skabe vinduet,

219
00:13:43,620 --> 00:13:46,600
hvilket sker for at være højre øverst.

220
00:13:46,600 --> 00:13:49,080
>> Og så dette er den
dokumentation for denne funktion.

221
00:13:49,080 --> 00:13:53,710
Vinduet kommer til at have en titel,
en x og y position på skærmen,

222
00:13:53,710 --> 00:13:56,960
det kommer til at have en bredde, højde,
og så det kommer til at tage nogle flag.

223
00:13:56,960 --> 00:14:01,220
Nu behøver vi faktisk ikke bekymrer sig om
nogen af ​​disse flag lige nu,

224
00:14:01,220 --> 00:14:04,560
men hvis du ønskede at gøre noget
ligesom foretage en fuld skærm vindue,

225
00:14:04,560 --> 00:14:07,920
kunne du tage et kig på det.

226
00:14:07,920 --> 00:14:13,190
For nu er vi bare
at anvende disse særlige værdier,

227
00:14:13,190 --> 00:14:18,775
SDL vindue plus centreret
for x og y for

228
00:14:18,775 --> 00:14:21,800
bare at lave vinduet
i midten af ​​vores skærmen.

229
00:14:21,800 --> 00:14:24,370
>> Så det er, hvad det laver.

230
00:14:24,370 --> 00:14:27,960
Og hvis vinduet sker for at være
null, hvilket betyder, der er en fejl,

231
00:14:27,960 --> 00:14:32,570
derefter gang vi bare gå til
udskrive fejl ved hjælp af SDL får fejl.

232
00:14:32,570 --> 00:14:36,570
Og så fordi vi initialiseret
SDL, vi nu nødt til at lukke den.

233
00:14:36,570 --> 00:14:40,900
Så vi kalder SDL Afslut før
returnere en til main.

234
00:14:40,900 --> 00:14:42,905
>> Så vi har dette vindue åbnes forhåbentlig.

235
00:14:42,905 --> 00:14:44,613
Og hvad vi vil
at gøre, er vi vil

236
00:14:44,613 --> 00:14:50,340
at kalde SDL for 5.000 millisekunder,
hvilket er det samme som fem sekunder.

237
00:14:50,340 --> 00:14:55,640
Og når vi er færdig med det,
det kommer til at ødelægge vinduet,

238
00:14:55,640 --> 00:14:59,470
rydde op i SDL-biblioteket,
og afslutte programmet.

239
00:14:59,470 --> 00:15:05,240
Så lad os gå videre og give det et skud.

240
00:15:05,240 --> 00:15:08,660
>> Så nu i stedet for at ændre
Makefile hver gang,

241
00:15:08,660 --> 00:15:12,180
Jeg kan simpelthen gøre, og
derefter på kommandolinjen,

242
00:15:12,180 --> 00:15:16,090
siger kilder lig og derefter
den fil, vi kompilere.

243
00:15:16,090 --> 00:15:17,090
Så det er hello2_window.c.

244
00:15:17,090 --> 00:15:21,390

245
00:15:21,390 --> 00:15:21,890
Fantastisk.

246
00:15:21,890 --> 00:15:22,970
Ingen erros.

247
00:15:22,970 --> 00:15:26,085
Nu, hvis vi driver vores eksekverbare,
vi ser dette vindue.

248
00:15:26,085 --> 00:15:27,960
Nu er der et par
problemer med vinduet.

249
00:15:27,960 --> 00:15:32,820
Vi kan flytte den rundt, men det har
denne baggrund junk inde i den.

250
00:15:32,820 --> 00:15:34,660
Så har vi ikke trukket
noget, og så det er

251
00:15:34,660 --> 00:15:38,210
bare fuld af skrald, som
er temmelig meget, hvad vi forventer.

252
00:15:38,210 --> 00:15:41,010
>> Desuden kan vi ikke lukke vinduet.

253
00:15:41,010 --> 00:15:44,780
Jeg trykker denne X i
hjørne og intet sker.

254
00:15:44,780 --> 00:15:47,840
Så vi vil se, hvordan du løser
at der i en smule.

255
00:15:47,840 --> 00:15:51,750
Så lad os løse den del, hvor
Vinduet er fuld af skrald først.

256
00:15:51,750 --> 00:16:00,850
Så hvis vi går over til hello3_image.c, hvad
vi kan se, er, at vi har tilføjet et par

257
00:16:00,850 --> 00:16:03,360
flere ting her.

258
00:16:03,360 --> 00:16:08,740
Vi har tilføjet denne nye overskrift
fil for at få de timerfunktioner.

259
00:16:08,740 --> 00:16:11,490
Jeg gætter vi gjorde det i den sidste
én, også, og jeg ikke nævne det.

260
00:16:11,490 --> 00:16:13,550
Men nu, fordi vi er
arbejder med billeder,

261
00:16:13,550 --> 00:16:18,720
vi er nødt til også at omfatte SDL
billede header fil så godt.

262
00:16:18,720 --> 00:16:22,087
Så det er det samme som
før, initialiserer SDL her,

263
00:16:22,087 --> 00:16:23,420
samme deal med at skabe vinduer.

264
00:16:23,420 --> 00:16:25,380
Vi har set det før nu.

265
00:16:25,380 --> 00:16:29,870
>> Nu er vi nødt til at skabe noget, der hedder
en renderer, hvilken slags går langs

266
00:16:29,870 --> 00:16:30,800
med vinduet.

267
00:16:30,800 --> 00:16:33,860
Men det er en slags
abstrakt objekt, der er

268
00:16:33,860 --> 00:16:37,370
ansvaret for at gøre alle disse
tegning operationer til vinduet.

269
00:16:37,370 --> 00:16:41,580
Og det faktisk svarer
til et program indlæst

270
00:16:41,580 --> 00:16:47,880
ind i grafik hardware i din
computer eller din telefon eller hvad.

271
00:16:47,880 --> 00:16:51,005
Så flagene, vi ønsker at videregive det--
og du kan se på dokumentationen

272
00:16:51,005 --> 00:16:56,160
for at få flere detaljer her-- går
skal SDL render accelereret, hvilket

273
00:16:56,160 --> 00:16:58,550
betyder, at det vil være
ved hjælp grafikhardwaren

274
00:16:58,550 --> 00:17:01,490
og ikke blot emuleret i software.

275
00:17:01,490 --> 00:17:07,390
>> Og vi kommer til at bruge
SDL Renderer PRESENTVSYNC.

276
00:17:07,390 --> 00:17:12,280
VSYNC er en ting, der blot gør
din grafik se bedre ud og forhindrer

277
00:17:12,280 --> 00:17:14,970
denne ting kaldet skærm
terror, hvor halvdelen

278
00:17:14,970 --> 00:17:17,720
af en ramme og halvdelen af ​​den næste
rammen bliver trukket på samme tid

279
00:17:17,720 --> 00:17:20,056
og det ser forfærdeligt.

280
00:17:20,056 --> 00:17:23,130
Men igen, kan du gå læse
om det på egen hånd.

281
00:17:23,130 --> 00:17:24,319
>> Så vi har nogle flag her.

282
00:17:24,319 --> 00:17:27,810
Og så vi bare vil kalde
denne funktion SDL skabe renderer.

283
00:17:27,810 --> 00:17:31,340
Vi vil give det vinduet
at associere med denne renderer.

284
00:17:31,340 --> 00:17:34,520
Negativ betyder, at vi er ligeglad med hvad
grafikdriver vi kommer til at bruge.

285
00:17:34,520 --> 00:17:36,603
Så det burde temmelig meget
altid være negativ,

286
00:17:36,603 --> 00:17:39,010
medmindre du kender om grafikdrivere.

287
00:17:39,010 --> 00:17:41,650
Og så er vi bare
at passere det vores flag.

288
00:17:41,650 --> 00:17:47,240
Så hvis der returnerer null, så er vi
kommer til at udskrive fejlen som sædvanlig,

289
00:17:47,240 --> 00:17:49,550
men så er vi også vil
at ødelægge vinduet

290
00:17:49,550 --> 00:17:54,970
at rydde op disse ressourcer, før
kalder SDL holde op og vender tilbage.

291
00:17:54,970 --> 00:17:58,110
>> Nu er den interessante del her
er, hvor vi indlæse vores image

292
00:17:58,110 --> 00:18:00,870
ved hjælp af denne funktion IMG_load.

293
00:18:00,870 --> 00:18:04,050
Dette er den eneste funktion, vi skal
bruge, på SDL billedbibliotek.

294
00:18:04,050 --> 00:18:05,480
Det er det eneste, vi har brug for.

295
00:18:05,480 --> 00:18:12,950
Det er en funktion, der tager strengen
der er stien til et billede ressource.

296
00:18:12,950 --> 00:18:18,024
Og det kan være en .png- en GIF,
bitmap, nogen af ​​disse ting.

297
00:18:18,024 --> 00:18:19,690
Og det er derfor, denne funktion er så rart.

298
00:18:19,690 --> 00:18:22,560
Den kan håndtere stort set alle formater.

299
00:18:22,560 --> 00:18:27,240
Belastninger den i hukommelsen og gemmer det
som en ting kaldes en SDL overflade.

300
00:18:27,240 --> 00:18:34,660
>> Nu er en SDL overflade er blot en struct
der repræsenterer billeddata i hukommelsen.

301
00:18:34,660 --> 00:18:38,054
Så du kan læse mere om
at i dokumentationen to.

302
00:18:38,054 --> 00:18:40,720
Og hvis denne fejl, så er vi
kommer til at gøre det hele, hvor

303
00:18:40,720 --> 00:18:44,480
vi udskriver fejlen, lukke vores
ressourcer, og afslut derefter programmet.

304
00:18:44,480 --> 00:18:48,970
Nu det interessante er, før
Vi kan trække billedet til vinduet,

305
00:18:48,970 --> 00:18:51,390
vi er nødt til rent faktisk at gøre det til en tekstur.

306
00:18:51,390 --> 00:18:54,460
Nu en tekstur svarer
at billeddata indlæst

307
00:18:54,460 --> 00:18:57,820
ind i grafikken hardware hukommelse.

308
00:18:57,820 --> 00:19:00,720
>> Så en overflade er i main
hukommelse, regelmæssig hukommelse

309
00:19:00,720 --> 00:19:05,550
at vi har brugt al semester,
og en tekstur er i denne separate VRAM

310
00:19:05,550 --> 00:19:09,410
hukommelse, at de grafikkort kontrol.

311
00:19:09,410 --> 00:19:13,170
Så vi kalder denne funktion
SDL_CreateTextureFromSurface.

312
00:19:13,170 --> 00:19:17,104
Vi giver det vores renderer og vores overflade.

313
00:19:17,104 --> 00:19:19,020
Og så er vi faktisk
gjort med overfladen,

314
00:19:19,020 --> 00:19:20,311
så vi bare kommer til at frigøre det.

315
00:19:20,311 --> 00:19:22,210
Vi har ikke brug for det længere.

316
00:19:22,210 --> 00:19:26,650
Og derefter så hvis denne indkaldelse
errored og returneret null,

317
00:19:26,650 --> 00:19:29,630
så vil vi gøre det hele
fejlrapportering ting igen.

318
00:19:29,630 --> 00:19:30,920
>> Okay.

319
00:19:30,920 --> 00:19:34,810
Her vil vi komme ind i nogle
faktiske rendering funktioner.

320
00:19:34,810 --> 00:19:37,730
Så kalder SDL_RenderClear
og sende den

321
00:19:37,730 --> 00:19:42,550
den renderer forbundet med vores vindue
simpelthen gør vinduet gå sort.

322
00:19:42,550 --> 00:19:47,650
Så det fjerner, at junk, som vi så i
vores vindue før og gør det sort.

323
00:19:47,650 --> 00:19:50,750
Og så vil vi
at kalde SDL_RenderCopy,

324
00:19:50,750 --> 00:19:53,010
give den vores renderer, vores tekstur.

325
00:19:53,010 --> 00:19:55,800
Og vi vil tale om, hvad
disse felter er i en smule.

326
00:19:55,800 --> 00:19:57,830
Men det kommer til at
tage teksturdataene

327
00:19:57,830 --> 00:20:03,100
og kopiere det ind på vores
vinduet for at tegne billedet.

328
00:20:03,100 --> 00:20:07,020
Så efter vi har gjort denne kopi
data over på vores vindue,

329
00:20:07,020 --> 00:20:11,180
vi nødt til at gøre denne ekstra funktion
kaldet SDL_RenderPresent.

330
00:20:11,180 --> 00:20:15,360
>> Og det er interessant
fordi det får

331
00:20:15,360 --> 00:20:18,770
ind i et emne kaldet dobbeltbuffering.

332
00:20:18,770 --> 00:20:24,380
Så dobbeltbuffering er en teknik,
gør din grafik se meget bedre.

333
00:20:24,380 --> 00:20:28,240
Igen, det forhindrer, at skærmen tåreflåd
Jeg talte om tidligere, hvor

334
00:20:28,240 --> 00:20:29,590
du har to buffere.

335
00:20:29,590 --> 00:20:32,260
Der er en back-buffer i
hukommelse og en front buffer.

336
00:20:32,260 --> 00:20:36,410
Den forreste puffer er bogstaveligt talt
hvad der er på din skærm i øjeblikket.

337
00:20:36,410 --> 00:20:42,070
Så vi gør alt dette trækker variationer,
ligesom SDL gør kopi eller SDL_RenderClear

338
00:20:42,070 --> 00:20:43,080
på bagsiden buffer.

339
00:20:43,080 --> 00:20:44,800
Så de ændrer tingene
i ryggen buffer.

340
00:20:44,800 --> 00:20:48,970
Her kan vi trække det
grøn firkant på bagsiden bufferen.

341
00:20:48,970 --> 00:20:52,300
>> Så når vi er færdig laver
vores gør operationer, som

342
00:20:52,300 --> 00:20:55,700
kan tage rigtig lang
gang, hvad vi vil gøre

343
00:20:55,700 --> 00:20:57,860
er skifte buffere.

344
00:20:57,860 --> 00:21:00,720
Så det bogstaveligt talt kun tager
forreste puffer og bagsiden puffer

345
00:21:00,720 --> 00:21:02,990
og skifter dem, så
at, går,

346
00:21:02,990 --> 00:21:06,630
i én operation i stedet for
måske hundreder eller tusinder,

347
00:21:06,630 --> 00:21:10,910
alle vores nyligt gjort
objekter på skærmen.

348
00:21:10,910 --> 00:21:13,160
Og det forhindrer tingene
ligesom skærmen forfriskende

349
00:21:13,160 --> 00:21:16,710
når vi kun har tegnet en halv
af vores objekter til rammen.

350
00:21:16,710 --> 00:21:21,280
Så det er derfor, vi er nødt til at kalde
SDL_RenderPresent, samt

351
00:21:21,280 --> 00:21:23,320
som SDL_RenderCopy.

352
00:21:23,320 --> 00:21:25,749
>> Igen, vi bare
at vente i fem sekunder.

353
00:21:25,749 --> 00:21:27,540
Så vi kommer til at
rydde op vores ressourcer.

354
00:21:27,540 --> 00:21:29,540
Vi har en hel del mere denne gang.

355
00:21:29,540 --> 00:21:31,750
Og så er vi bare
at afslutte programmet.

356
00:21:31,750 --> 00:21:35,350
Så lad os gøre det.

357
00:21:35,350 --> 00:21:41,880
Jeg har tænkt mig at skrive make, og derefter kilder
lig hello-- dette er nu 3image.c.

358
00:21:41,880 --> 00:21:49,632

359
00:21:49,632 --> 00:21:52,240
Okay, det kompileret nogen fejl.

360
00:21:52,240 --> 00:21:57,210
Og du kan se her har jeg nu
trukket ud mit billede, Hej, CS50!

361
00:21:57,210 --> 00:22:00,560
til vores vindue, som
forsvinder efter fem sekunder.

362
00:22:00,560 --> 00:22:02,090
>> Nu, dette stadig har problemer, ikke?

363
00:22:02,090 --> 00:22:05,750
Dette er ikke en god ansøgning,
fordi når jeg forsøger at lukke vinduet,

364
00:22:05,750 --> 00:22:06,500
der sker ikke noget.

365
00:22:06,500 --> 00:22:09,540
At x er stadig ikke reagerer.

366
00:22:09,540 --> 00:22:17,420
Så lad os tage et kig på den
næste fil, hello4animation.

367
00:22:17,420 --> 00:22:21,850
Så dette er den fil
der kommer til at indføre

368
00:22:21,850 --> 00:22:25,124
bevægende og bevægelse til vores image.

369
00:22:25,124 --> 00:22:27,040
Så vi kommer til at gøre det
samme som før,

370
00:22:27,040 --> 00:22:30,190
initiere SDL, oprette
vindue, oprette renderer,

371
00:22:30,190 --> 00:22:33,030
indlæse billedet i
hukommelse, skal du oprette tekstur.

372
00:22:33,030 --> 00:22:35,090
Vi har set alt dette før.

373
00:22:35,090 --> 00:22:36,770
Nu, dette er nyt.

374
00:22:36,770 --> 00:22:42,305
Vi kommer til at have en struktur, der kaldes
en SDL rekte, som er blot en rektangel.

375
00:22:42,305 --> 00:22:49,950
Hvis vi går over her, vi kan
gøre en søgning efter SDL rekt,

376
00:22:49,950 --> 00:22:54,040
og du kan se det er en
meget enkel struktur.

377
00:22:54,040 --> 00:22:56,760
Det har en x, y for en
stilling, og det

378
00:22:56,760 --> 00:23:02,080
har en bredde og en højde for
størrelsen af ​​rektanglet.

379
00:23:02,080 --> 00:23:07,785
>> Så det, vi kommer til at gøre, er at vi er
kommer til at definere denne SDL rekte dest,

380
00:23:07,785 --> 00:23:09,480
til destinationen.

381
00:23:09,480 --> 00:23:14,130
Og dette er stedet
på skærmen, hvor

382
00:23:14,130 --> 00:23:16,005
Vi kommer til at tegne
vores image, lige så

383
00:23:16,005 --> 00:23:17,880
hvis vi vil være
flytte billedet rundt,

384
00:23:17,880 --> 00:23:20,300
derefter den destination, hvor
vi kommer til at tegne billedet

385
00:23:20,300 --> 00:23:22,620
skal flytte rundt.

386
00:23:22,620 --> 00:23:24,910
Så vi kommer til at kalde denne
funktion SDL_QueryTexture.

387
00:23:24,910 --> 00:23:27,550

388
00:23:27,550 --> 00:23:33,500
Og læg mærke til jeg passerer adressen
af dest.w, som er bredden,

389
00:23:33,500 --> 00:23:36,950
og dest.h, som er højden.

390
00:23:36,950 --> 00:23:40,425
Og så SDL_QueryTexture går
til at gemme på disse områder bredden

391
00:23:40,425 --> 00:23:41,675
og højden af ​​vores tekstur.

392
00:23:41,675 --> 00:23:44,680

393
00:23:44,680 --> 00:23:47,030
>> Og hvad så jeg har tænkt mig
at gøre, er jeg har tænkt mig

394
00:23:47,030 --> 00:23:55,580
at indstille dest.x at være vinduet
bredde minus dest.w, hvilket er

395
00:23:55,580 --> 00:23:59,000
bredden af ​​sprite, divideret med 2.

396
00:23:59,000 --> 00:24:03,860
Og det kommer til at sætte den op, så
at billedet er perfekt centreret

397
00:24:03,860 --> 00:24:06,780
i vores vindue, okay?

398
00:24:06,780 --> 00:24:08,652
Så nu har jeg en Y-positionen.

399
00:24:08,652 --> 00:24:10,360
Og det kommer til at
være en variabel, der er

400
00:24:10,360 --> 00:24:16,390
forandring, fordi vi kommer til at være
flytte billedet i Y-retningen.

401
00:24:16,390 --> 00:24:19,050
Og nu har vi noget
kaldes en animation loop.

402
00:24:19,050 --> 00:24:21,180
>> Så hvordan animationen virker?

403
00:24:21,180 --> 00:24:27,630
Nå, kan menneskelige øje detektere 12 særskilte
billeder i hvert sekund, okay?

404
00:24:27,630 --> 00:24:33,060
Så hvis du flash 12 billede kort på mig
i en anden, så jeg hver af disse billeder

405
00:24:33,060 --> 00:24:35,950
som sin egen særskilte enkelt billede.

406
00:24:35,950 --> 00:24:39,690
Nu, hvis du flash mere
billeder med mig i et sekund,

407
00:24:39,690 --> 00:24:42,140
så mit øje ville begynde
at sløre dem sammen

408
00:24:42,140 --> 00:24:46,920
og jeg vil opfatte det som bevægelse,
i stedet for en særskilt billede.

409
00:24:46,920 --> 00:24:51,930
Så for eksempel, film og fjernsyn,
de flash billeder på dig 24 gange

410
00:24:51,930 --> 00:24:52,570
et sekund.

411
00:24:52,570 --> 00:24:55,110
Så det er 24 billeder i sekundet.

412
00:24:55,110 --> 00:25:00,136
Computerskærme, på den anden side,
ofte er på 60 billeder i sekundet.

413
00:25:00,136 --> 00:25:01,260
Det er deres refresh hastighed.

414
00:25:01,260 --> 00:25:04,650
Det er, hvor ofte de opdatere
billedet på skærmen.

415
00:25:04,650 --> 00:25:08,960
Så vores mål vil være 60
frames per sekund for vores spil.

416
00:25:08,960 --> 00:25:11,770

417
00:25:11,770 --> 00:25:13,710
>> Så lad os se, at i koden.

418
00:25:13,710 --> 00:25:19,064
Så for hver ramme, er vi først
kommer til at fjerne vinduet.

419
00:25:19,064 --> 00:25:20,230
Det er det generelle mønster.

420
00:25:20,230 --> 00:25:22,450
Du har altid rydde
vindue hver ramme, og derefter

421
00:25:22,450 --> 00:25:25,210
gøre alle din tegning
operationer, og derefter ved udgangen,

422
00:25:25,210 --> 00:25:29,610
do RenderPresent at vise
alt i rammen.

423
00:25:29,610 --> 00:25:33,910
Og så er du kommer til at
har en ventetid i slutningen

424
00:25:33,910 --> 00:25:36,340
at vente til næste
rammen skal begynde.

425
00:25:36,340 --> 00:25:38,650
>> Så hvis jeg gjorde en masse
kompleks beregning her

426
00:25:38,650 --> 00:25:43,100
der tog mere end 16 millisekunder,
det ville være umuligt for mig

427
00:25:43,100 --> 00:25:46,890
at få denne billedhastighed på 60, ​​der
Jeg ønskede, fordi hver ramme er

428
00:25:46,890 --> 00:25:48,750
tager for lang tid at beregne.

429
00:25:48,750 --> 00:25:52,340
Desuden er vi virkelig gøre
sortering af en ubetydelig mængde arbejde

430
00:25:52,340 --> 00:25:54,820
her, fordi der er kun
én ting, vi tegning.

431
00:25:54,820 --> 00:25:59,390
Så jeg bare vente 1/60 af et
sekund, hvilket er længden

432
00:25:59,390 --> 00:26:01,520
af en ramme i mellem rammer.

433
00:26:01,520 --> 00:26:05,610
Så jeg slags foregiver at gøre
alt mit arbejde tager tid nul.

434
00:26:05,610 --> 00:26:09,050
Men i et rigtigt spil,
du er nødt til at trække

435
00:26:09,050 --> 00:26:13,760
den tid, det tog at gøre
alt dette arbejde fra din hviletid.

436
00:26:13,760 --> 00:26:16,970
>> Så alligevel, hvad skal jeg
faktisk gør i denne løkke?

437
00:26:16,970 --> 00:26:19,070
Jeg rydder vinduet.

438
00:26:19,070 --> 00:26:27,470
Jeg indstille dest.y, hvilket er en int til
min faktiske y position kastet i en int.

439
00:26:27,470 --> 00:26:32,070
Nu, jeg vil flyde opløsning
for min y position i mit spil,

440
00:26:32,070 --> 00:26:34,150
men så at faktisk
tegne det på skærmen,

441
00:26:34,150 --> 00:26:39,070
den har brug for ints, fordi det er i enheder af
pixel, så det er hvad skuespillerne er for.

442
00:26:39,070 --> 00:26:41,745
Jeg har tænkt mig at tegne billedet.

443
00:26:41,745 --> 00:26:45,180
Så det er kilden rektangel.

444
00:26:45,180 --> 00:26:47,060
Og dette er destinationen rektangel.

445
00:26:47,060 --> 00:26:50,310
Så jeg gik null for
kilden rektangel

446
00:26:50,310 --> 00:26:53,426
at sige, at jeg ønsker at tegne hele mit tekstur.

447
00:26:53,426 --> 00:26:55,300
Men hvis du havde en masse
teksturer i dit spil

448
00:26:55,300 --> 00:26:59,120
og de er alle i én stor tekstur kort
der blev indlæst i SDL som ét

449
00:26:59,120 --> 00:27:02,850
tekstur, kunne du
bruge en kilde rektangel

450
00:27:02,850 --> 00:27:06,750
at vælge en af ​​de mindre teksturer,
en af ​​de mindre sprites,

451
00:27:06,750 --> 00:27:09,450
ud af den store tekstur kort.

452
00:27:09,450 --> 00:27:14,740
>> Så igen, jeg passerer min gengive, min
tekstur, og nu destinationen.

453
00:27:14,740 --> 00:27:18,320
Dette vil være, hvor i
vindue det kommer til at blive trukket.

454
00:27:18,320 --> 00:27:21,390
Og så, fordi jeg animere
noget, jeg har brug for bevægelse,

455
00:27:21,390 --> 00:27:25,150
Jeg har tænkt mig at være en opdatering af
sprite position på hver ramme.

456
00:27:25,150 --> 00:27:30,190
Så jeg har denne konstant kaldet rulle
hastighed i enheder af pixler per sekund.

457
00:27:30,190 --> 00:27:34,320
Nu hver gang vi gør en bevægelse,
rammen er kun 1/60 af et sekund.

458
00:27:34,320 --> 00:27:36,740
Så jeg har tænkt mig at dele det med 60.

459
00:27:36,740 --> 00:27:42,350
Og så, lad os se, jeg er
subtrahere det fra Y-positionen.

460
00:27:42,350 --> 00:27:44,470
Hvorfor skal jeg trække?

461
00:27:44,470 --> 00:27:46,169
Vi vil komme til at i et sekund.

462
00:27:46,169 --> 00:27:48,460
Så jeg rydde op i mine ressourcer
og programmet er slut.

463
00:27:48,460 --> 00:27:49,830
>> Så lad os gøre det.

464
00:27:49,830 --> 00:27:52,450

465
00:27:52,450 --> 00:28:03,570
Så lad os gå ind i make SRCS = hello4
animation.c, okay?

466
00:28:03,570 --> 00:28:05,720
Spil.

467
00:28:05,720 --> 00:28:06,770
Værsgo.

468
00:28:06,770 --> 00:28:12,690
Så jeg har det rulle op
vindue, som er temmelig pæn.

469
00:28:12,690 --> 00:28:17,110
Men hold fast, jeg var at trække
fra Y-positionen hver gang.

470
00:28:17,110 --> 00:28:18,910
Hvad sker der der?

471
00:28:18,910 --> 00:28:24,010
Tja, det viser sig, at i SDL, og
faktisk i de fleste computergrafik,

472
00:28:24,010 --> 00:28:28,890
oprindelsen for koordinatsystemet
er den øverste venstre hjørne af vinduet.

473
00:28:28,890 --> 00:28:34,960
>> Så den positive x-retning går
tværs dit vindue til højre.

474
00:28:34,960 --> 00:28:38,110
Og den positive y-retning
faktisk går ned.

475
00:28:38,110 --> 00:28:40,470
Så igen, oprindelsen er i
øverst til venstre på dit vindue,

476
00:28:40,470 --> 00:28:46,190
positiv y-retning er nede,
og positiv x er til højre.

477
00:28:46,190 --> 00:28:48,770
Så når jeg trække fra
y position, det er

478
00:28:48,770 --> 00:28:52,640
kommer til at gøre det gå på den negative
y-retningen, som er op vinduet.

479
00:28:52,640 --> 00:28:55,500
Så det er, hvad der foregår der.

480
00:28:55,500 --> 00:28:56,510
Afkøle.

481
00:28:56,510 --> 00:28:59,240
>> Lad os se på den næste fil.

482
00:28:59,240 --> 00:29:05,700
Her er den del af
viser, hvor vi endelig

483
00:29:05,700 --> 00:29:08,920
få at X i hjørnet af vinduet
der er meningen at lukke vinduet

484
00:29:08,920 --> 00:29:10,660
at arbejde.

485
00:29:10,660 --> 00:29:12,800
Så hvad sker der?

486
00:29:12,800 --> 00:29:17,520
Vi initialisere SDL, oprette vinduet,
skabe den renderer, indlæse billedet,

487
00:29:17,520 --> 00:29:19,770
skabe tekstur
ligesom vi har set før.

488
00:29:19,770 --> 00:29:26,850
Vi har den samme destination rektangel
som før, at samme opkald forespørge tekstur.

489
00:29:26,850 --> 00:29:29,780
Men denne gang, vi er så
kommer til at opdele bredden

490
00:29:29,780 --> 00:29:33,110
og højden af ​​vores destination med 4.

491
00:29:33,110 --> 00:29:36,430
Dette har kun den virkning,
skalering vores image ned, når

492
00:29:36,430 --> 00:29:39,884
vi viser den i vinduet med fire.

493
00:29:39,884 --> 00:29:40,800
Så det er temmelig pæn.

494
00:29:40,800 --> 00:29:42,770
Vi kan bare skalere bare sådan.

495
00:29:42,770 --> 00:29:45,970
Vi kommer til at starte sprite
i midten af ​​skærmen.

496
00:29:45,970 --> 00:29:49,410
Og nu har vi x og y hastighed og
de er begge kommer til at starte ved nul.

497
00:29:49,410 --> 00:29:53,740

498
00:29:53,740 --> 00:29:55,880
>> Dette er den forkerte fil.

499
00:29:55,880 --> 00:29:56,380
Undskyld.

500
00:29:56,380 --> 00:29:57,960
Så det er alle sande.

501
00:29:57,960 --> 00:30:00,170
Det er alt stadig i denne fil.

502
00:30:00,170 --> 00:30:03,210
Vi har den kløft med 4 og alting.

503
00:30:03,210 --> 00:30:07,830
Så her har vi vores x og y position
til midten af ​​vinduet.

504
00:30:07,830 --> 00:30:12,480
Og vi giver det en starthastighed
af denne konstant hastighed, som

505
00:30:12,480 --> 00:30:15,180
Jeg tror er 300 pixels per sekund.

506
00:30:15,180 --> 00:30:19,850
Nu har vi denne int kunne lige så godt
være en boolesk kaldes tæt anmodet om.

507
00:30:19,850 --> 00:30:23,970
Og i stedet for at gøre en
uendelig løkke på en timer her,

508
00:30:23,970 --> 00:30:29,180
Vi kommer til at animere som
længe så tæt er ikke anmodet om.

509
00:30:29,180 --> 00:30:30,960
>> Så hvordan kan vi behandler begivenheder?

510
00:30:30,960 --> 00:30:35,600
Nå, SDL køer op hændelser i en
bogstavelig kø bag kulisserne.

511
00:30:35,600 --> 00:30:38,860
Og så hver ramme,
vi kan dequeue begivenheder

512
00:30:38,860 --> 00:30:43,900
fra køen hjælp
denne indkaldelse SDL_PullEvent.

513
00:30:43,900 --> 00:30:46,730
Og igen, helt sikkert gå læse
om dette i dokumentationen.

514
00:30:46,730 --> 00:30:50,450
Der er meget mere detaljeret og en masse
flere funktioner, du kan bruge med dette.

515
00:30:50,450 --> 00:30:54,750
Vi passerer det adressen
af denne ting, SDL_Event

516
00:30:54,750 --> 00:30:56,990
at vi har her på stakken.

517
00:30:56,990 --> 00:30:58,840
>> Nu, hvad er en SDL_event?

518
00:30:58,840 --> 00:31:02,356
Fordi SDL, hvis vi ser på
de documentation-- lad os

519
00:31:02,356 --> 00:31:07,580
se, API efter kategori, input
begivenheder, håndtering begivenhed,

520
00:31:07,580 --> 00:31:15,150
Vi kan se på antallet
af forskellige begivenheder her

521
00:31:15,150 --> 00:31:18,600
og vi kan se, at der er
en hel ton af dem.

522
00:31:18,600 --> 00:31:22,150
Så hvad er denne SDL_Event ting?

523
00:31:22,150 --> 00:31:28,190

524
00:31:28,190 --> 00:31:31,107
SDL_Event er en union.

525
00:31:31,107 --> 00:31:31,940
Wow, hvad er en fagforening?

526
00:31:31,940 --> 00:31:33,910
Du har sikkert aldrig
hørt om det før.

527
00:31:33,910 --> 00:31:35,610
Og det er OK.

528
00:31:35,610 --> 00:31:39,420
>> En forening er lidt ligesom
en struct, undtagen en struct

529
00:31:39,420 --> 00:31:41,960
har en plads til alle
sine marker og hukommelse,

530
00:31:41,960 --> 00:31:45,060
mens en fagforening kun har
nok plads til at passe den største

531
00:31:45,060 --> 00:31:49,660
en af ​​sine felter, hvilket betyder, at det
kan kun gemme en af ​​sine marker

532
00:31:49,660 --> 00:31:52,830
på et tidspunkt, hvilken slags
giver mening for arrangementer, ikke?

533
00:31:52,830 --> 00:31:55,810
Vi kan have et tastatur
begivenhed eller et vindue omstændigheder

534
00:31:55,810 --> 00:31:59,750
men en enkelt begivenhed kan ikke både være en
tastatur begivenhed og et vindue begivenhed,

535
00:31:59,750 --> 00:32:05,450
så det ville være dumt at have plads til
både af dem inde i vores begivenhed union.

536
00:32:05,450 --> 00:32:07,770
Så hvis du ønsker at
oprette din egen fagforening,

537
00:32:07,770 --> 00:32:10,020
det ser nøjagtig det samme
som skaber en struct,

538
00:32:10,020 --> 00:32:14,140
bortset fra at vi bruger fagforeningen søgeord
i stedet for struct nøgleordet.

539
00:32:14,140 --> 00:32:17,490
Og husk, for alle de
ting inde din fagforening,

540
00:32:17,490 --> 00:32:22,020
den faktiske variabel, der er fagforeningen
kan kun have én af disse værdier

541
00:32:22,020 --> 00:32:24,780
på et tidspunkt.

542
00:32:24,780 --> 00:32:29,940
>> Så hvordan kan vi fortælle, hvilken slags begivenhed
vi bare dukkede ud af denne kø?

543
00:32:29,940 --> 00:32:33,370
Nå, kan vi teste for event.type.

544
00:32:33,370 --> 00:32:35,792
Og hvis det er lig
til SDL_Quit, vi kender

545
00:32:35,792 --> 00:32:37,500
Det er det tilfælde,
blev genereret, når vi

546
00:32:37,500 --> 00:32:39,510
skud afsted X i hjørnet af vinduet.

547
00:32:39,510 --> 00:32:44,270
Og vi kan sætte tæt anmodet lig med 1.

548
00:32:44,270 --> 00:32:47,230
Resten er blot nogle animation
at du har set før.

549
00:32:47,230 --> 00:32:52,802
Så lad os gå videre og gøre
dette og se, hvor godt det virker.

550
00:32:52,802 --> 00:32:55,135
Så jeg har tænkt mig at skrive mærke og
derefter SRCS = hello5_events.c.

551
00:32:55,135 --> 00:33:03,760

552
00:33:03,760 --> 00:33:04,770
Der vi går.

553
00:33:04,770 --> 00:33:05,780
Spil.

554
00:33:05,780 --> 00:33:08,920
>> Nu kan vi se, det var
faktisk skaleret ned med fire.

555
00:33:08,920 --> 00:33:10,360
Og nu er det hoppen omkring.

556
00:33:10,360 --> 00:33:14,630
Jeg har nogle kollisionsdetektion
foregår med siderne af vinduet

557
00:33:14,630 --> 00:33:16,840
at vi kan tage et kig på.

558
00:33:16,840 --> 00:33:21,190
Og hvad sker der, når jeg går til at lukke det?

559
00:33:21,190 --> 00:33:22,120
Det lukker.

560
00:33:22,120 --> 00:33:22,740
Fantastisk.

561
00:33:22,740 --> 00:33:24,290
Vi har modtaget denne begivenhed.

562
00:33:24,290 --> 00:33:26,630
Og vi håndterede det.

563
00:33:26,630 --> 00:33:30,730
>> Så lad os se tilbage på koden.

564
00:33:30,730 --> 00:33:33,020
Så hvordan fik jeg det
hoppe rundt sådan?

565
00:33:33,020 --> 00:33:37,200
Husk jeg indstille både x og
y indledningsvis til de hastigheder.

566
00:33:37,200 --> 00:33:39,260
Og hastighed er en positiv
konstant, så det er

567
00:33:39,260 --> 00:33:42,680
kommer til at få det startet ud
gå ned og til højre.

568
00:33:42,680 --> 00:33:45,680

569
00:33:45,680 --> 00:33:50,310
>> Nu, hvor hver ramme, foruden håndtering
eventuelle begivenheder, der kan være sket,

570
00:33:50,310 --> 00:33:57,520
Jeg har tænkt mig at afsløre, om min sprite
forsøger at gå ud af vinduet.

571
00:33:57,520 --> 00:34:03,610
Så vi kan gøre det ved bare kontrol
x_pos med 0, y_pos 0, og derefter

572
00:34:03,610 --> 00:34:07,370
også x_pos og y_pos med
vindue bredde og vindue højde.

573
00:34:07,370 --> 00:34:11,010
Bemærk, at jeg har trukket
bredden af ​​Sprite.

574
00:34:11,010 --> 00:34:14,090
Og det er fordi, hvis jeg ikke gjorde
trække bredden af ​​Sprite,

575
00:34:14,090 --> 00:34:17,760
det ville kun kontrollere, at
oprindelsen af ​​sprite

576
00:34:17,760 --> 00:34:19,690
ikke gå uden for vinduet.

577
00:34:19,690 --> 00:34:21,480
Men vi ønsker, at hele
bredde af sprite

578
00:34:21,480 --> 00:34:24,030
altid at være inde i vinduet og
hele højden af ​​sprite

579
00:34:24,030 --> 00:34:25,321
altid at være inde i vinduet.

580
00:34:25,321 --> 00:34:27,429
Så det er hvad subtraktion er for.

581
00:34:27,429 --> 00:34:30,080
En masse geometri her kan
være nyttigt at trække det ud

582
00:34:30,080 --> 00:34:33,929
på papir med koordinatsystemet
systemet for at se, hvad der foregår.

583
00:34:33,929 --> 00:34:38,090
>> Så hvis jeg kolliderer, jeg bare
blot nulstille stilling

584
00:34:38,090 --> 00:34:41,400
så det ikke vil
ud af skærmen.

585
00:34:41,400 --> 00:34:47,179
Og jeg har tænkt mig at, hvis det afvisninger
på en af ​​sidevæggene,

586
00:34:47,179 --> 00:34:51,469
Jeg har tænkt mig at negere
x hastighed, så at det

587
00:34:51,469 --> 00:34:53,210
begynder hoppende i den anden retning.

588
00:34:53,210 --> 00:34:56,210
Og på samme måde, hvis den rammer
toppen eller bunden,

589
00:34:56,210 --> 00:34:59,820
Jeg har tænkt mig at sætte y hastighed
lig med den negative y hastighed,

590
00:34:59,820 --> 00:35:01,690
så det vil hoppe tilbage.

591
00:35:01,690 --> 00:35:03,860
Så det er bare, hvordan vi fik den her.

592
00:35:03,860 --> 00:35:07,560
>> Og ajourføring positioner
ligesom vi har set før,

593
00:35:07,560 --> 00:35:12,510
dividere med 60, fordi vi er
kun håndterer 1/60 af et sekund.

594
00:35:12,510 --> 00:35:15,750
Og derefter rendering,
nøjagtigt det samme som før.

595
00:35:15,750 --> 00:35:19,810
Og så det er alt
der foregik denne fil.

596
00:35:19,810 --> 00:35:22,490
Så det er, hvordan vi gør begivenheder.

597
00:35:22,490 --> 00:35:29,260
Den vigtigste ting at tage væk her
Denne SDL_PullEvent funktion.

598
00:35:29,260 --> 00:35:33,020
Og bør du helt sikkert læse
dokumentation mere om SDL_Event

599
00:35:33,020 --> 00:35:38,630
fagforeningen, fordi denne datatype er
meget, meget vigtigt, fordi vi bruger det

600
00:35:38,630 --> 00:35:40,690
for alle former for arrangementer.

601
00:35:40,690 --> 00:35:46,539
>> For eksempel, vi bruger det til tastatur
begivenheder, som er det, denne fil er for.

602
00:35:46,539 --> 00:35:47,330
Så hvad har vi?

603
00:35:47,330 --> 00:35:50,180
Vi har det samme som før,
initialisere SDL, oprette et vindue,

604
00:35:50,180 --> 00:35:55,260
skabe en renderer, indlæse billedet
i hukommelsen, skaber tekstur.

605
00:35:55,260 --> 00:36:00,530
Igen, vil vi
har denne dest rektangel,

606
00:36:00,530 --> 00:36:04,890
vi kommer til at skalere billedet
med fire, gøre det lidt mindre.

607
00:36:04,890 --> 00:36:08,000
Nu skal vi til at starte
sprite i midten af ​​skærmen.

608
00:36:08,000 --> 00:36:12,090
Men denne gang, vi kommer til at indstille
indledende x- og y-hastigheder til nul,

609
00:36:12,090 --> 00:36:15,140
fordi tastaturet er
kommer til at kontrollere dem.

610
00:36:15,140 --> 00:36:18,900
Og desuden vil vi
holde styr på disse variabler

611
00:36:18,900 --> 00:36:20,450
op, ned, til venstre og højre.

612
00:36:20,450 --> 00:36:23,090
Og det kommer til at holde
styr på, om vi har

613
00:36:23,090 --> 00:36:27,370
trykkede tastaturet knapper,
svarer til op, ned, til venstre,

614
00:36:27,370 --> 00:36:28,460
og højre.

615
00:36:28,460 --> 00:36:32,440
>> Nu, dette er slags fancy
fordi vi kan bruge W, A, S,

616
00:36:32,440 --> 00:36:35,480
D her, eller den faktiske piletasterne.

617
00:36:35,480 --> 00:36:38,590
Vi vil se, at på bare et sekund.

618
00:36:38,590 --> 00:36:41,140
Så vi kommer til at behandle
tilfælde ligesom før.

619
00:36:41,140 --> 00:36:42,530
Vi trækker begivenheden.

620
00:36:42,530 --> 00:36:45,840
Men nu vil vi
tænde for begivenheden type.

621
00:36:45,840 --> 00:36:47,710
Hvis det er SDL_Quit, er vi
vil sætte tæt

622
00:36:47,710 --> 00:36:49,990
anmodet om at én, ligesom før.

623
00:36:49,990 --> 00:36:52,315
Det håndterer xi
hjørnet af vinduet,

624
00:36:52,315 --> 00:36:55,050
så vores vindue faktisk lukker.

625
00:36:55,050 --> 00:37:00,110
>> Ellers, hvis vi får en SDL-tasten nede
begivenhed, som betyder, at vi trykker på en tast,

626
00:37:00,110 --> 00:37:04,470
så hvad vi skal gøre, er at vi er
kommer til at tænde denne ting her,

627
00:37:04,470 --> 00:37:11,370
som means-- så event.key
betyder behandler vores begivenhed union,

628
00:37:11,370 --> 00:37:15,490
gå og få nøglen
eventstruktur det.

629
00:37:15,490 --> 00:37:18,810
Så det viser sig, at denne
Union er en central begivenhed struktur.

630
00:37:18,810 --> 00:37:22,820
Og derefter gå til nøglen
begivenhed struktur sit felt

631
00:37:22,820 --> 00:37:26,140
kaldet keysym og derefter scancode.

632
00:37:26,140 --> 00:37:29,480
Og igen, definitivt læst
dokumentationen om dette.

633
00:37:29,480 --> 00:37:31,220
Søgeord indgange ganske interessant.

634
00:37:31,220 --> 00:37:34,020
Du kan få scanne koder eller vigtige koder.

635
00:37:34,020 --> 00:37:38,590
Og det er lidt subtil, men
dokumentationen er ganske god.

636
00:37:38,590 --> 00:37:43,380
>> Så hvis vi ser scanningen kode til
vores tastetryk bliver W eller op,

637
00:37:43,380 --> 00:37:45,450
vi kommer til at oprette lig med 1.

638
00:37:45,450 --> 00:37:47,240
Og så er vi bryde ud af denne kontakt.

639
00:37:47,240 --> 00:37:52,980
Hvis det er A eller venstre, sæt vi tilbage til 1, et
cetera, et cetera, til ned og højre.

640
00:37:52,980 --> 00:37:57,080
Nu i denne ydre kontakt,
hvis vi ser en nøgle-up-begivenhed,

641
00:37:57,080 --> 00:38:00,730
det betyder, at vi har udgivet en nøgle
og vi ikke længere trykke på den.

642
00:38:00,730 --> 00:38:05,380
Så jeg har tænkt mig at sige op er lig med 0,
venstre er lig med 0, ned lig med 0, højre

643
00:38:05,380 --> 00:38:08,260
er lig med 0, et cetera.

644
00:38:08,260 --> 00:38:12,070
>> Og bemærk vi har i hver af disse
to tilfælde sat lige ved siden af ​​hinanden

645
00:38:12,070 --> 00:38:14,490
uden særskilt kode
for det første tilfælde, hvilket

646
00:38:14,490 --> 00:38:18,180
betyder, at uanset om det er
en S eller en ned lige her,

647
00:38:18,180 --> 00:38:20,520
det kommer til at udføre denne kode.

648
00:38:20,520 --> 00:38:22,090
Så det er temmelig praktisk.

649
00:38:22,090 --> 00:38:24,830
Det forhindrer os at skulle gøre mere
betingelser og hvis'er og ting

650
00:38:24,830 --> 00:38:26,980
sådan.

651
00:38:26,980 --> 00:38:29,420
>> Så vi kommer til at
bestemme hastigheden.

652
00:38:29,420 --> 00:38:31,020
Vi sætter hastigheden til 0.

653
00:38:31,020 --> 00:38:33,910
Så hvis der ikke trykkes op
og ikke ned, så vi

654
00:38:33,910 --> 00:38:37,450
indstille y hastighed til negativ hastighed.

655
00:38:37,450 --> 00:38:42,930
Husk negative, fordi
negativ y-retning er op.

656
00:38:42,930 --> 00:38:45,540
Og den positive y-retning er nede.

657
00:38:45,540 --> 00:38:47,510
Hvis der trykkes ned
og ikke op, så vi er

658
00:38:47,510 --> 00:38:53,860
kommer til at indstille den til positiv hastighed,
hvilket betyder at gå ned på skærmen.

659
00:38:53,860 --> 00:38:55,460
Samme ting med venstre og højre.

660
00:38:55,460 --> 00:38:58,200
>> Og så vil vi opdatere
positionerne lige som før.

661
00:38:58,200 --> 00:39:00,740
Vi vil gøre kollision
detektion med bounds,

662
00:39:00,740 --> 00:39:04,290
men vi kommer ikke til at nulstille
hastighed, fordi hastigheden er lige

663
00:39:04,290 --> 00:39:06,780
kontrolleres af tastaturet.

664
00:39:06,780 --> 00:39:11,230
Men vi kommer til at nulstille
positioner for at holde den i vinduet.

665
00:39:11,230 --> 00:39:14,400
Og vi kommer til at indstille
positioner i struct

666
00:39:14,400 --> 00:39:17,400
og derefter gøre alt
rendering ting fra før.

667
00:39:17,400 --> 00:39:20,750
Så lad os se, hvad den gør.

668
00:39:20,750 --> 00:39:25,460
Så gør SRCS-- lad os se,
dette er hello6_keyboard.c.

669
00:39:25,460 --> 00:39:38,140

670
00:39:38,140 --> 00:39:38,820
>> Åh nej.

671
00:39:38,820 --> 00:39:40,150
Så vi fik nogle advarsler her.

672
00:39:40,150 --> 00:39:43,840
Og der er simpelthen sige, at vi ikke gjorde
kontrollere for hver eneste mulige form

673
00:39:43,840 --> 00:39:45,610
begivenhed.

674
00:39:45,610 --> 00:39:49,470
Det er OK, fordi
der er 236 af dem eller deromkring.

675
00:39:49,470 --> 00:39:51,760
Så jeg har tænkt mig at ignorere disse advarsler.

676
00:39:51,760 --> 00:39:53,530
Det er stadig kompileret fint.

677
00:39:53,530 --> 00:39:56,100
Så jeg har tænkt mig at spille spillet.

678
00:39:56,100 --> 00:39:57,590
Det er ikke bevæger sig.

679
00:39:57,590 --> 00:40:04,150
Men nu, når jeg mash på mit tastatur,
Jeg kan gøre nogle WASD bevægelse her,

680
00:40:04,150 --> 00:40:06,870
Jeg bruger mine piletasterne så godt.

681
00:40:06,870 --> 00:40:10,070
Og læg mærke til, selvom jeg er
trykke lige lige nu,

682
00:40:10,070 --> 00:40:13,804
det kommer ikke til ud af vinduet,
fordi jeg nulstille den på hver ramme.

683
00:40:13,804 --> 00:40:14,720
Så det er temmelig pæn.

684
00:40:14,720 --> 00:40:19,420
Du kan forestille dig at flytte rundt Mario med
nogle piletasterne eller noget lignende.

685
00:40:19,420 --> 00:40:22,880
Og ja, har X virker.

686
00:40:22,880 --> 00:40:26,900
>> Så endelig fil vi vil
at se på, hellow7_mouse.

687
00:40:26,900 --> 00:40:29,600
Det handler om at få mus input.

688
00:40:29,600 --> 00:40:34,790
Så i denne ene, vi
importere matematik header,

689
00:40:34,790 --> 00:40:38,100
fordi vi vil have
en lille smule af matematik her.

690
00:40:38,100 --> 00:40:45,260
Samme gamle, samme gamle ting, destination,
samme gamle, set før.

691
00:40:45,260 --> 00:40:46,910
Nå, det er interessant.

692
00:40:46,910 --> 00:40:51,730
Så vi er tilbage til kun at kontrollere
for SDL Afslut begivenhed.

693
00:40:51,730 --> 00:40:52,460
Hvorfor det?

694
00:40:52,460 --> 00:40:55,110
Så du kan få musen input fra begivenheder.

695
00:40:55,110 --> 00:40:57,670
Ligesom når musen flyttes,
du får en begivenhed for det.

696
00:40:57,670 --> 00:41:00,520
Når der trykkes på en museknap,
du kan få en begivenhed for det.

697
00:41:00,520 --> 00:41:05,760
>> Men der er en anden, lidt enklere
måske API til at få mus input.

698
00:41:05,760 --> 00:41:09,500
Og det er simpelthen SDL get mus tilstand.

699
00:41:09,500 --> 00:41:14,370
Så jeg har en int for x og
y for markørens position.

700
00:41:14,370 --> 00:41:18,910
Jeg videregive det til SDL_GetMouseState,
der sætter disse.

701
00:41:18,910 --> 00:41:22,200
Og det er position i
koordinatsystem af vinduet.

702
00:41:22,200 --> 00:41:25,520
Så hvis masse er i øverste venstre
af vinduet, ville 0, 0.

703
00:41:25,520 --> 00:41:28,040

704
00:41:28,040 --> 00:41:33,380
>> Nu, hvad jeg har tænkt mig at gøre, er jeg har tænkt mig
at gøre en lille smule af vektor matematik.

705
00:41:33,380 --> 00:41:36,910
Jeg vil vædde på, du troede, du ikke ville
se, at i CS50, men her er det.

706
00:41:36,910 --> 00:41:40,720
Jeg har tænkt mig at gøre nogle vektor
matematik for at få vektoren

707
00:41:40,720 --> 00:41:43,840
fra billedet til markøren.

708
00:41:43,840 --> 00:41:53,280
Og så hvorfor har jeg
denne subtraktion her?

709
00:41:53,280 --> 00:42:01,350
Tja, hvis jeg bare brugt dest .-- så
Jeg har brug for at oversætte musen x

710
00:42:01,350 --> 00:42:05,166
og y af den halve bredde og
højden af ​​billedet,

711
00:42:05,166 --> 00:42:08,040
fordi jeg ønsker i midten af
billede, der skal gå mod mus,

712
00:42:08,040 --> 00:42:10,160
ikke oprindelsen af ​​billedet.

713
00:42:10,160 --> 00:42:15,650
>> Så det er bare at sørge for jeg taler
omkring midten af ​​billedet her.

714
00:42:15,650 --> 00:42:19,510
Så får vi delta x og y, som
er forskellen fra målet

715
00:42:19,510 --> 00:42:23,430
til den faktiske position af billedet.

716
00:42:23,430 --> 00:42:25,690
Og så kan vi få den
afstand her, hvilket

717
00:42:25,690 --> 00:42:29,140
bliver pythagoræiske
sætning, kvadratroden af ​​x

718
00:42:29,140 --> 00:42:32,720
gange x plus y gange y.

719
00:42:32,720 --> 00:42:38,400
>> Nu for at forhindre jitter, og jeg kan vise
dig, hvad det betyder, hvis jeg ikke gør dette,

720
00:42:38,400 --> 00:42:45,830
hvis afstanden mellem markøren og
billedet centrum er mindre end fem,

721
00:42:45,830 --> 00:42:48,730
Jeg er bare ikke til at flytte billedet.

722
00:42:48,730 --> 00:42:52,900
Ellers sætter vi hastigheden.

723
00:42:52,900 --> 00:42:55,960
Og vi har sat den, så den
hastighed vil altid være konstant.

724
00:42:55,960 --> 00:42:58,770
Og nettoresultatet af alle
denne matematik er, at billedet

725
00:42:58,770 --> 00:43:01,660
kommer til at bevæge sig i retning markøren.

726
00:43:01,660 --> 00:43:08,470
>> Nu viser det sig, at
SDL_GetMouseState,

727
00:43:08,470 --> 00:43:14,490
Ud over at sætte
x- og y-argumenter her,

728
00:43:14,490 --> 00:43:21,340
det også returnerer en int, der svarer
til staten af ​​museknapperne.

729
00:43:21,340 --> 00:43:24,600
Så vi kan ikke læse, at
direkte, men vi kan

730
00:43:24,600 --> 00:43:29,090
bruge disse makroer, en enkelt
bitvis operatør, ikke at skræmmende,

731
00:43:29,090 --> 00:43:30,650
blot en bitvise og.

732
00:43:30,650 --> 00:43:38,320
Så vi siger knapper, der er resultatet
vores SDL_GetMouseState, hvis dette

733
00:43:38,320 --> 00:43:43,990
og bitvise og denne makro
her, SDL_BUTTON_LEFT.

734
00:43:43,990 --> 00:43:47,680
>> Så dette vil blot løse
til bitmap, der svarer

735
00:43:47,680 --> 00:43:51,090
til venstre museknap bliver presset.

736
00:43:51,090 --> 00:43:55,470
Og så hvis den bitvise
og forekommer og det er

737
00:43:55,470 --> 00:43:59,340
ikke er nul, hvilket betyder
venstre knap blev trykket,

738
00:43:59,340 --> 00:44:04,320
så vi rent faktisk kommer til at negere
både x- og y hastigheder,

739
00:44:04,320 --> 00:44:06,700
hvilket vil bare gøre billedet runaway.

740
00:44:06,700 --> 00:44:07,980
Opdater positioner.

741
00:44:07,980 --> 00:44:10,920
Kollisioner opdagelser, set det
hele før, rendering, okay.

742
00:44:10,920 --> 00:44:11,510
Lad os gøre det.

743
00:44:11,510 --> 00:44:14,200

744
00:44:14,200 --> 00:44:16,050
Så du fik gøre SRCS = hello7_mouse.c.

745
00:44:16,050 --> 00:44:21,720

746
00:44:21,720 --> 00:44:22,220
Alle tiders.

747
00:44:22,220 --> 00:44:23,490
Ingen fejl.

748
00:44:23,490 --> 00:44:24,900
Og spil.

749
00:44:24,900 --> 00:44:26,440
>> Så her har jeg min mus.

750
00:44:26,440 --> 00:44:29,000
Og billedet er faktisk
jagter min mus.

751
00:44:29,000 --> 00:44:33,140
Nu, i et spil, du laver, måske
det er som en fjende jagter

752
00:44:33,140 --> 00:44:35,240
din lille karakter eller hvad.

753
00:44:35,240 --> 00:44:37,440
Men her har vi den
billede jagter musen.

754
00:44:37,440 --> 00:44:41,000
Og når jeg klikker, musen
begynder jagter billedet

755
00:44:41,000 --> 00:44:42,860
og billedet er
løbe væk fra musen.

756
00:44:42,860 --> 00:44:43,810
Så det er ret cool.

757
00:44:43,810 --> 00:44:47,770
Og varsel igen, der er
stadig kollisionsdetekterings her.

758
00:44:47,770 --> 00:44:53,930
>> Så det er den endelige lille
demo jeg har oprettet her.

759
00:44:53,930 --> 00:44:58,870
Og lad os tage et kig på en ting mere.

760
00:44:58,870 --> 00:45:02,970
Så tilbage her, jeg nævnte dette jitter.

761
00:45:02,970 --> 00:45:05,000
Okay.

762
00:45:05,000 --> 00:45:12,890
Så hvis afstanden er mindre end fem pixels,
Jeg var ved x og y hastighed til nul.

763
00:45:12,890 --> 00:45:15,960
Hvad sker der, hvis vi slippe af med det?

764
00:45:15,960 --> 00:45:19,070
Så jeg har tænkt mig at bare gøre dette.

765
00:45:19,070 --> 00:45:23,820

766
00:45:23,820 --> 00:45:30,150
Undskyld denne forfærdelige stil,
men vi kommenteret den korrekte kode.

767
00:45:30,150 --> 00:45:38,080
Så jeg har tænkt mig at redde denne og gøre det
samme kommando fra før for at gøre det.

768
00:45:38,080 --> 00:45:38,785
>> Okay.

769
00:45:38,785 --> 00:45:39,660
Og nu, hvad der sker?

770
00:45:39,660 --> 00:45:43,260

771
00:45:43,260 --> 00:45:43,760
God.

772
00:45:43,760 --> 00:45:45,801
Vi er stadig efter
mus ligesom før,

773
00:45:45,801 --> 00:45:49,310
men når vi kommer til musen,
vi har fået denne grove jitter.

774
00:45:49,310 --> 00:45:50,320
Hvad sker der der?

775
00:45:50,320 --> 00:45:52,600
Tja, i vores vektor
matematik, husker vi var

776
00:45:52,600 --> 00:45:57,540
idet afstanden mellem
cursor og centrum af billedet?

777
00:45:57,540 --> 00:46:00,710
Nå, som der nærmer
0, begynder vi at få

778
00:46:00,710 --> 00:46:06,280
som denne slags vanvittige opførsel
hvor billedet er slags

779
00:46:06,280 --> 00:46:08,910
Ligesom oscillerende omkring markøren.

780
00:46:08,910 --> 00:46:12,000
Og der er skabe denne jitter.

781
00:46:12,000 --> 00:46:13,020
Og det er virkelig grimt.

782
00:46:13,020 --> 00:46:15,103
Og har du sandsynligvis ikke
vil have dine spil at gøre det,

783
00:46:15,103 --> 00:46:17,350
medmindre det er en slags speciel effekt.

784
00:46:17,350 --> 00:46:21,960
>> Så det er derfor, vi har
netop dette vilkårlige

785
00:46:21,960 --> 00:46:27,150
afskåret af fem pixels, hvor vi siger
hvis det er inden for fem pixels, vi er gode.

786
00:46:27,150 --> 00:46:29,560
Vi behøver ikke at flytte billedet længere.

787
00:46:29,560 --> 00:46:32,260
Så det er, hvad der foregår der.

788
00:46:32,260 --> 00:46:37,390

789
00:46:37,390 --> 00:46:40,870
>> Så det er temmelig meget det.

790
00:46:40,870 --> 00:46:44,390
Nu ved du, hvordan du opretter
et vindue, indlæse et billede,

791
00:46:44,390 --> 00:46:49,330
tegne et billede til vinduet, får
tastaturinput, får mus input,

792
00:46:49,330 --> 00:46:52,190
der er en masse andre
input, som du ikke ville

793
00:46:52,190 --> 00:46:56,070
vide, hvordan du få, hvis du bare bruge en
nogle minutter ser på dokumentation.

794
00:46:56,070 --> 00:46:59,670
Så du rent faktisk har en ganske
få værktøjer til din rådighed nu

795
00:46:59,670 --> 00:47:01,650
at skrive et fuldgyldigt spil.

796
00:47:01,650 --> 00:47:05,030
>> Nu hvert spil har brug for nogle lyd,
men lyden dokumentation

797
00:47:05,030 --> 00:47:06,460
er også temmelig godt.

798
00:47:06,460 --> 00:47:09,200
Og jeg er villig til at vædde på, at hvis
du forstår alle de ting,

799
00:47:09,200 --> 00:47:14,560
vi talte om i dag med
billederne, og overflader,

800
00:47:14,560 --> 00:47:18,370
vinduerne, og alt, så
finde ud audio API er ikke

801
00:47:18,370 --> 00:47:21,170
kommer til at være så slemt.

802
00:47:21,170 --> 00:47:27,420
Så jeg ser frem til at se
hvad du opretter med SDL.

803
00:47:27,420 --> 00:47:31,595