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

2
00:00:05,069 --> 00:00:06,110
THOMAS ANIMADA: De acuerdo.

3
00:00:06,110 --> 00:00:07,450
Hola a todos.

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

5
00:00:08,690 --> 00:00:15,160
Este seminario va a ser
escribir juegos 2D en C utilizando SDL.

6
00:00:15,160 --> 00:00:17,970
Así que sé que eres todo
preguntando, sí, realmente

7
00:00:17,970 --> 00:00:22,050
quieren jugar y hacer juegos,
pero lo que es este negocio SDL?

8
00:00:22,050 --> 00:00:25,320
Así SDL es una biblioteca C.

9
00:00:25,320 --> 00:00:28,270
Se destaca por la sencilla
DirectMedia Layer.

10
00:00:28,270 --> 00:00:31,340
Y es una plataforma cruzada,
biblioteca de desarrollo de juegos.

11
00:00:31,340 --> 00:00:37,160
Funciona en Windows, Mac,
Linux, incluso iOS y Android.

12
00:00:37,160 --> 00:00:40,380
Se ocupa de cosas como
el acceso a los sistemas de audio

13
00:00:40,380 --> 00:00:44,900
para el ordenador, el teclado, y
ratón, joystick, si están unidos.

14
00:00:44,900 --> 00:00:48,300
El móvil, incluso puede hacer lo
entrada táctil y todo eso.

15
00:00:48,300 --> 00:00:53,030
Y, por supuesto, que se encarga de los gráficos,
dibujo cosas a la pantalla.

16
00:00:53,030 --> 00:00:56,470
>> Así que es muy ampliamente utilizado, a pesar de que
puede que no haya oído hablar de él antes.

17
00:00:56,470 --> 00:01:00,860
Está construido en, por ejemplo,
Motor de fuente de Valve,

18
00:01:00,860 --> 00:01:04,970
que alimenta juegos como
Portal y Team Fortress 2.

19
00:01:04,970 --> 00:01:08,680
Está también en un gran número
de juegos indie que salen,

20
00:01:08,680 --> 00:01:13,545
así que estoy emocionado de ver lo que
todo estará haciendo con él.

21
00:01:13,545 --> 00:01:20,000
>> Los objetivos del seminario son para conseguir que
se dispuso a ser en desarrollo con SDL.

22
00:01:20,000 --> 00:01:22,700
Vamos a aprender
para crear una ventana de juego.

23
00:01:22,700 --> 00:01:26,130
Vamos a crear sprites,
que son las imágenes de su juego

24
00:01:26,130 --> 00:01:27,744
que puede moverse.

25
00:01:27,744 --> 00:01:29,910
Vamos a aprender
ay animar los sprites,

26
00:01:29,910 --> 00:01:32,910
así moverlos, hacer
ellos cambian con el tiempo.

27
00:01:32,910 --> 00:01:35,580
Y vamos a aprender
para capturar teclado y el ratón

28
00:01:35,580 --> 00:01:38,240
de entrada de la computadora.

29
00:01:38,240 --> 00:01:41,550
Lo que no vamos a estar hablando
hoy es gráficos en 3D,

30
00:01:41,550 --> 00:01:45,520
porque eso es muy complicado
tema que no tenemos tiempo para.

31
00:01:45,520 --> 00:01:49,010
No vamos a aprender a
reproducir el audio en nuestros juegos.

32
00:01:49,010 --> 00:01:53,300
Y no vamos a estar construyendo
para nada, pero Linux.

33
00:01:53,300 --> 00:01:58,330
>> Ahora las salvedades hay que,
con suerte, al final del seminario,

34
00:01:58,330 --> 00:02:01,660
se sentirá cómodo con
la documentación de SDL,

35
00:02:01,660 --> 00:02:05,370
por lo que será capaz de ir averiguar
la forma de jugar de audio por ti mismo.

36
00:02:05,370 --> 00:02:12,150
También la construcción para Mac o PC debería funcionar
exactamente la misma que la construcción para Linux,

37
00:02:12,150 --> 00:02:14,700
pero la configuración va a
ser un poco diferente.

38
00:02:14,700 --> 00:02:17,700
Por lo que debe ser capaz de entender
cómo hacer estas cosas

39
00:02:17,700 --> 00:02:20,900
para el final del seminario de hoy.

40
00:02:20,900 --> 00:02:26,980
>> Así que para la puesta en marcha, vamos
utilizar una máquina virtual.

41
00:02:26,980 --> 00:02:31,010
Queremos utilizar el IDE CS50, porque
sólo vamos a estar escribiendo en C.

42
00:02:31,010 --> 00:02:35,120
Pero ya que el IDE no es un navegador, que
no puede crear ventanas o pantalla nuevos

43
00:02:35,120 --> 00:02:36,410
gráficos en él.

44
00:02:36,410 --> 00:02:38,450
Así que tenemos una máquina virtual.

45
00:02:38,450 --> 00:02:47,790
Así que usted puede seguir las instrucciones
aquí en manual.CS50.net/appliance/15

46
00:02:47,790 --> 00:02:53,290
para instalar el aparato oficial CS50,
que no es más que una virtual de Linux

47
00:02:53,290 --> 00:02:55,110
máquina.

48
00:02:55,110 --> 00:02:58,090
>> Y a continuación, una vez que tienes
que todo ello se up--

49
00:02:58,090 --> 00:03:02,090
podría tomar un poco de tiempo, porque
una gran download-- vas

50
00:03:02,090 --> 00:03:07,060
para funcionar en la actualización de apt-get VM sudo.

51
00:03:07,060 --> 00:03:09,410
Y eso es realmente está pasando
para actualizar todo el software

52
00:03:09,410 --> 00:03:12,670
paquetes en su máquina virtual.

53
00:03:12,670 --> 00:03:20,130
>> Después de eso, usted va a ejecutar
sudo apt-get install, libsdl2-2.0-0,

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

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

56
00:03:32,560 --> 00:03:33,640
Entonces, ¿qué hace eso?

57
00:03:33,640 --> 00:03:38,440
Eso simplemente instala la depuración
información, documentación, cabeceras,

58
00:03:38,440 --> 00:03:41,260
y los binarios para dos bibliotecas.

59
00:03:41,260 --> 00:03:45,090
Regular de edad, SDL 2.0,
y otra biblioteca

60
00:03:45,090 --> 00:03:50,110
llamada Imagen SDL, que
vamos a utilizar

61
00:03:50,110 --> 00:03:54,560
para cargar archivos de imagen en nuestro juego.

62
00:03:54,560 --> 00:03:57,860
>> Así que una vez que tenga que también
que, justo cuando se le pregunta,

63
00:03:57,860 --> 00:04:01,100
sólo tiene que teclear sí, presiona Enter
para instalar los paquetes,

64
00:04:01,100 --> 00:04:04,430
y entonces usted debe ser bueno para ir.

65
00:04:04,430 --> 00:04:14,800
Así que para obtener el código de distribución,
can-- ¡Dios mío, esto no se actualiza.

66
00:04:14,800 --> 00:04:18,480
A menos que usted tenga un account-- GitHub
si usted tiene una cuenta de GitHub,

67
00:04:18,480 --> 00:04:24,450
usted puede hacer esto Git
comando clon a la repo

68
00:04:24,450 --> 00:04:30,490
y que va a descargar el Git
repo con todo el código en el mismo,

69
00:04:30,490 --> 00:04:31,700
de modo que usted tiene el código.

70
00:04:31,700 --> 00:04:36,470
>> Si usted no tiene un GitHub
cuenta, lo que debe hacer es tipo

71
00:04:36,470 --> 00:04:48,867
wgithttps: //github.com/tlively/sdl
seminar-- y aquí es diferente--

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
Así que de nuevo, eso es exactamente el mismo
URL, si no va a ser

75
00:04:59,220 --> 00:05:09,010
tlively / SDL_seminar / master.zip y
está utilizando wgit descargar eso.

76
00:05:09,010 --> 00:05:12,940
Y entonces usted puede simplemente
descomprimir ese archivo

77
00:05:12,940 --> 00:05:14,900
y entonces tendrás
todo el código fuente.

78
00:05:14,900 --> 00:05:17,580
Así que lo siento por eso.

79
00:05:17,580 --> 00:05:23,880
Y a continuación, el código también tendrá lugar en
la página web del seminario CS50 en un par

80
00:05:23,880 --> 00:05:25,230
día.

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

82
00:05:26,590 --> 00:05:29,932
Entonces, ¿cómo empecemos
escribir nuestro propio juego?

83
00:05:29,932 --> 00:05:31,890
Bueno, lo primero
vamos a querer hacer

84
00:05:31,890 --> 00:05:34,740
es mirar la documentación de SDL.

85
00:05:34,740 --> 00:05:37,020
Así que aquí está la máquina virtual.

86
00:05:37,020 --> 00:05:38,720
Y aquí está la página web.

87
00:05:38,720 --> 00:05:40,340
He navegado vivir libsdl.org.

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

89
00:05:43,110 --> 00:05:48,140
Lo que voy a hacer aquí es ir más
a la barra lateral, en la documentación,

90
00:05:48,140 --> 00:05:51,040
y haga clic en el wiki.

91
00:05:51,040 --> 00:05:56,870
Esto me trae a la wiki que
tiene la mayor parte de la documentación de SDL.

92
00:05:56,870 --> 00:06:01,360
Más en la barra lateral aquí, estamos
va a hacer clic API por categoría,

93
00:06:01,360 --> 00:06:04,300
porque va a dar
nosotros una bonita vista categórico

94
00:06:04,300 --> 00:06:07,770
de toda la API para SDL.

95
00:06:07,770 --> 00:06:12,390
>> Así, por ejemplo, tenemos
la inicialización básica

96
00:06:12,390 --> 00:06:18,380
y cerrado, toda la clase de
cosas administrativas para el uso de SDL,

97
00:06:18,380 --> 00:06:21,630
y luego tenemos la sección de
mostrar cosas a la pantalla.

98
00:06:21,630 --> 00:06:23,000
Eso es vídeo.

99
00:06:23,000 --> 00:06:25,790
Los eventos de entrada, que es conseguir
entrada desde el teclado,

100
00:06:25,790 --> 00:06:29,710
conseguir la entrada del ratón, y
el joystick, si lo tiene, incluso.

101
00:06:29,710 --> 00:06:32,901
Hay retroalimentación de fuerza para las cosas
como dispositivos de juego, que

102
00:06:32,901 --> 00:06:34,150
no vamos a hablar.

103
00:06:34,150 --> 00:06:35,630
Y aquí está el audio.

104
00:06:35,630 --> 00:06:38,940
Y luego hay un montón de otras
materia que SDL puede hacer por usted.

105
00:06:38,940 --> 00:06:43,830
>> Pero hoy vamos a enfocar
en la inicialización aquí,

106
00:06:43,830 --> 00:06:48,332
la visualización de imágenes en el vídeo
sección, y gastos de los eventos de entrada.

107
00:06:48,332 --> 00:06:50,290
Así que estos son los principales
secciones de la documentación

108
00:06:50,290 --> 00:06:53,050
que usted debe preocuparse.

109
00:06:53,050 --> 00:06:57,170
Sólo por diversión, si vamos más
aquí y haga clic en el API por su nombre,

110
00:06:57,170 --> 00:07:04,350
podemos ver una lista de todos los
cosa en la biblioteca SDL.

111
00:07:04,350 --> 00:07:11,330
Así que todas estas funciones, enumeraciones,
estructuras, una increíble cantidad de cosas,

112
00:07:11,330 --> 00:07:12,820
orden alfabético.

113
00:07:12,820 --> 00:07:14,580
Y claramente, hasta
sabes que estás haciendo,

114
00:07:14,580 --> 00:07:19,100
esto no va a ser demasiado útil,
es por ello que hacemos API por categoría.

115
00:07:19,100 --> 00:07:20,810
>> Así que vamos a empezar.

116
00:07:20,810 --> 00:07:25,680
Esperemos que ya tienes
descargado el código de distribución.

117
00:07:25,680 --> 00:07:30,070
Y así, lo que puede hacer es, a la derecha
aquí en el aparato CS50,

118
00:07:30,070 --> 00:07:31,150
basta con abrir un terminal.

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

120
00:07:33,750 --> 00:07:34,440
Aquí vamos.

121
00:07:34,440 --> 00:07:40,740
Así que ya he descargado el
código de distribución mediante el .zip

122
00:07:40,740 --> 00:07:41,690
método.

123
00:07:41,690 --> 00:07:43,140
Y he abrió la cremallera.

124
00:07:43,140 --> 00:07:46,120
Así que aquí está en el maestro de seminario SDL.

125
00:07:46,120 --> 00:07:49,750
Así que voy a entrar en ese directorio.

126
00:07:49,750 --> 00:07:55,310
Y lo que vemos aquí es
que tenemos siete archivos C.

127
00:07:55,310 --> 00:07:58,070
Y esto va a el código
vamos a estar buscando en la actualidad.

128
00:07:58,070 --> 00:08:00,040
Tenemos un makefile.

129
00:08:00,040 --> 00:08:06,950
Y tenemos un directorio de recursos,
que simplemente tiene una imagen

130
00:08:06,950 --> 00:08:09,070
que usted va a ver muy pronto.

131
00:08:09,070 --> 00:08:16,060
>> Así que vamos a abrir estos archivos
usando el editor de G-Edit.

132
00:08:16,060 --> 00:08:22,000
Así que quiero abrir todos los archivos que
comenzar con hola y terminar con .c.

133
00:08:22,000 --> 00:08:23,380
Aquí vamos.

134
00:08:23,380 --> 00:08:28,180
Así que eso es una pequeña ventana, así que estamos
va a tratar de hacer que más grande.

135
00:08:28,180 --> 00:08:28,900
No, se fue.

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

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

138
00:08:34,570 --> 00:08:37,959
Así que aquí está la primera
archivo que vamos a ver.

139
00:08:37,959 --> 00:08:39,000
Se llama hello1_sdl.c.

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

141
00:08:41,890 --> 00:08:47,980
Y todo esto hace es inicializar el SDL
biblioteca para que podamos empezar a usarlo.

142
00:08:47,980 --> 00:08:51,550
¿Cómo lo sabes por venir
con este código a ti mismo?

143
00:08:51,550 --> 00:08:53,850
Bueno, si miramos más
en la documentación

144
00:08:53,850 --> 00:08:58,040
y entramos en la inicialización
y apagar la sección,

145
00:08:58,040 --> 00:09:02,230
que va a decirnos todo
acerca de cómo inicializar SDL.

146
00:09:02,230 --> 00:09:06,630
Así que definitivamente leer esto en otro momento.

147
00:09:06,630 --> 00:09:09,230
Se va a decir a todos ustedes
acerca de lo que está pasando aquí.

148
00:09:09,230 --> 00:09:14,360
Pero el quid de la cuestión principal es que
tenemos que llamar a esta función SDL en él

149
00:09:14,360 --> 00:09:18,910
y pasarlo qué tipo de cosas
queremos que la biblioteca para inicializar.

150
00:09:18,910 --> 00:09:23,620
Así que en nuestro caso, sólo vamos
para inicializar el video por ahora,

151
00:09:23,620 --> 00:09:26,690
para que podamos empezar a mostrar las imágenes.

152
00:09:26,690 --> 00:09:32,370
>> Por aquí, se puede ver si
hacemos clic en una SDL en él, nos

153
00:09:32,370 --> 00:09:36,160
puede obtener aún más información,
incluyendo el valor de retorno.

154
00:09:36,160 --> 00:09:39,050
Así que vemos aquí que
returnes cero en caso de éxito.

155
00:09:39,050 --> 00:09:43,320
Así que en nuestro código, vamos a
ver si no vuelve a cero,

156
00:09:43,320 --> 00:09:47,020
y si no devuelve
cero, por lo que no se ha realizado correctamente,

157
00:09:47,020 --> 00:09:50,650
a continuación, vamos a simplemente de impresión
un error usando esta otra función,

158
00:09:50,650 --> 00:09:56,260
Error get SDL, que devuelve una cadena
que describe el error que se ha producido.

159
00:09:56,260 --> 00:09:58,510
Vamos a imprimir esa
error y luego sólo somos

160
00:09:58,510 --> 00:10:02,270
va a salir del programa
con un código de error.

161
00:10:02,270 --> 00:10:06,470
>> Luego otra cosa que necesitamos
que hacer es, antes de programa se cierra,

162
00:10:06,470 --> 00:10:10,830
si inicializado correctamente SDL,
sólo tenemos que llamarlo SDL dejar de fumar.

163
00:10:10,830 --> 00:10:15,750
Y eso va a manejar la limpieza
todos los recursos internos de SDL para nosotros.

164
00:10:15,750 --> 00:10:21,240
Así la documentación allí-- de nuevo,
aquí estamos en la inicialización

165
00:10:21,240 --> 00:10:23,640
y apagar la sección
de la documentación.

166
00:10:23,640 --> 00:10:26,680
Usted sólo puede hacer clic en la
función aquí, SDL dejar de fumar,

167
00:10:26,680 --> 00:10:28,700
y usted puede leer todo acerca de eso también.

168
00:10:28,700 --> 00:10:31,400
Y muchas de estas funciones
páginas de documentación

169
00:10:31,400 --> 00:10:35,630
tener ejemplo de código, por lo que este
es muy buen recurso.

170
00:10:35,630 --> 00:10:39,610
Definitivamente pasar algún tiempo
leer partes de esta wiki

171
00:10:39,610 --> 00:10:42,520
si vas a hacer
esto para un proyecto.

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

173
00:10:43,760 --> 00:10:46,590
Así que eso es todo nuestro programa.

174
00:10:46,590 --> 00:10:53,935
Lo que podemos hacer ahora es-- estoy
va a abrir el archivo MAKE aquí,

175
00:10:53,935 --> 00:10:56,150
así que me voy a tomar un
ver cómo funciona.

176
00:10:56,150 --> 00:10:59,500
Y es una muy simple makefile,
similar a lo que has visto antes.

177
00:10:59,500 --> 00:11:04,010
Una de las principales diferencias
es que, aquí, esto

178
00:11:04,010 --> 00:11:07,870
se va a insertar el resultado de la carrera
este comando, que ya ha

179
00:11:07,870 --> 00:11:10,850
instalado si ha instalado SDL.

180
00:11:10,850 --> 00:11:13,230
Y este es un comando
eso va a generar

181
00:11:13,230 --> 00:11:16,710
algunas banderas adicionales para el compilador.

182
00:11:16,710 --> 00:11:22,050
>> Además de eso, estamos dándole
todos los comandos habituales, así como

183
00:11:22,050 --> 00:11:23,430
estos dos comandos.

184
00:11:23,430 --> 00:11:30,270
Así que los mangos -lsdl2-imagen
la vinculación de la biblioteca de imágenes SDL.

185
00:11:30,270 --> 00:11:36,200
Y el -lm en realidad se encarga de vinculación
en la biblioteca matemática estándar C.

186
00:11:36,200 --> 00:11:40,630
Así que no vamos a necesitar
los de todos nuestros archivos de C,

187
00:11:40,630 --> 00:11:43,900
pero nosotros sólo ponemos en lo que podemos
utilizar el mismo archivo MAKE para todo,

188
00:11:43,900 --> 00:11:44,816
sin modificaciones.

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

190
00:11:46,970 --> 00:11:50,080
>> Aquí en las fuentes,
este es el lugar donde quiere

191
00:11:50,080 --> 00:11:53,680
poner los archivos que ibas
compilar para su proyecto.

192
00:11:53,680 --> 00:11:57,570
Pero ya que cada uno de mis C
archivos de aquí tiene una función principal,

193
00:11:57,570 --> 00:12:00,000
que va a confundirse
si todos ponemos en.

194
00:12:00,000 --> 00:12:06,930
Así que voy a decir simplemente,
por ahora, hello1_sdl.c,

195
00:12:06,930 --> 00:12:11,150
que es el que acabamos de ver.

196
00:12:11,150 --> 00:12:18,740
Así que si vuelvo más
aquí, que puedo hacer hacer.

197
00:12:18,740 --> 00:12:22,160
Y lo que hizo es sólo
compilado que primer archivo.

198
00:12:22,160 --> 00:12:28,780
Y entonces podemos escribir ./game, porque
que es el ejecutable que produjo.

199
00:12:28,780 --> 00:12:31,660
Y todo lo que hizo fue de impresión
inicialización éxito.

200
00:12:31,660 --> 00:12:33,300
Así que hicimos algo bien.

201
00:12:33,300 --> 00:12:36,200
Pero eso fue un poco aburrido,
porque no vemos una ventana,

202
00:12:36,200 --> 00:12:37,900
nada se movía.

203
00:12:37,900 --> 00:12:41,030
>> Tan grande, llegamos SDL inicializado.

204
00:12:41,030 --> 00:12:43,520
Ahora, vamos a pasar a algo
un poco más interesante.

205
00:12:43,520 --> 00:12:54,700
Así que aquí tenemos hello2_window.c, y
esto va a ser un poco más

206
00:12:54,700 --> 00:13:00,010
programa en C compleja que
inicializa SDL al igual que antes,

207
00:13:00,010 --> 00:13:04,250
excepto que ahora también vamos
para inicializar el temporizador SDL.

208
00:13:04,250 --> 00:13:07,720
Y esto nos va a permitir
acceder al temporizador interno

209
00:13:07,720 --> 00:13:10,550
y funciones de uso en relación con el tiempo.

210
00:13:10,550 --> 00:13:11,920
>> Y luego vamos a ver aquí abajo.

211
00:13:11,920 --> 00:13:16,840
Lo que hacemos es que tenemos este puntero
a una ventana struct SDL, que

212
00:13:16,840 --> 00:13:21,160
va a ser creado por la presente convocatoria
a la función, SDL crear ventana.

213
00:13:21,160 --> 00:13:25,380
Ahora, esto toma mucho de los argumentos,
así que vamos a ir a buscar a la documentación.

214
00:13:25,380 --> 00:13:27,930
Así que de nuevo, voy a
API por categoría, estoy

215
00:13:27,930 --> 00:13:33,820
bajar al video aquí, y la primera
sección, que muestra la gestión de ventanas.

216
00:13:33,820 --> 00:13:36,470
Así que esta sección tiene
un montón de cosas en ella,

217
00:13:36,470 --> 00:13:39,970
pero si se mira a través
estas funciones, se le

218
00:13:39,970 --> 00:13:43,620
ver que, probablemente, la que
quieren que se llama SDL crear ventana,

219
00:13:43,620 --> 00:13:46,600
que pasa a ser justo en la cima.

220
00:13:46,600 --> 00:13:49,080
>> Y por lo que este es el
documentación para esta función.

221
00:13:49,080 --> 00:13:53,710
La ventana va a tener un título,
una posición xey en la pantalla,

222
00:13:53,710 --> 00:13:56,960
que va a tener una anchura, altura,
y luego se va a tomar algunas banderas.

223
00:13:56,960 --> 00:14:01,220
Ahora, en realidad no importa
cualquiera de estas banderas en este momento,

224
00:14:01,220 --> 00:14:04,560
pero si quería hacer algo
como hacer una ventana de pantalla completa,

225
00:14:04,560 --> 00:14:07,920
usted puede echar un vistazo a eso.

226
00:14:07,920 --> 00:14:13,190
Por ahora, sólo vamos
para utilizar estos valores especiales,

227
00:14:13,190 --> 00:14:18,775
Ventana de SDL, más centrada
para x e y con el fin

228
00:14:18,775 --> 00:14:21,800
sólo crear la ventana
en el centro de nuestra pantalla.

229
00:14:21,800 --> 00:14:24,370
>> Así que eso es lo que está haciendo.

230
00:14:24,370 --> 00:14:27,960
Y si la ventana pasa a ser
nula, lo que significa que hay un error,

231
00:14:27,960 --> 00:14:32,570
luego otra vez sólo vamos a
imprimir el error utilizando error get SDL.

232
00:14:32,570 --> 00:14:36,570
Y luego, ya hemos inicializado
SDL, ahora tenemos que cerrarla.

233
00:14:36,570 --> 00:14:40,900
Así que llamamos SDL renunció antes
entrega de uno de principal.

234
00:14:40,900 --> 00:14:42,905
>> Así que tenemos esta ventana abierta con suerte.

235
00:14:42,905 --> 00:14:44,613
Y lo que vamos
que hacer es que vamos

236
00:14:44,613 --> 00:14:50,340
llamar SDL para 5.000 milisegundos,
que es el mismo que cinco segundos.

237
00:14:50,340 --> 00:14:55,640
Y cuando hayamos terminado con eso,
que va a destruir la ventana,

238
00:14:55,640 --> 00:14:59,470
limpiar la biblioteca SDL,
y salir del programa.

239
00:14:59,470 --> 00:15:05,240
Así que vamos a seguir adelante y darle que un tiro.

240
00:15:05,240 --> 00:15:08,660
>> Así que ahora en lugar de cambiar
el makefile cada vez,

241
00:15:08,660 --> 00:15:12,180
Yo simplemente no puedo hacer, y
a continuación, en la línea de comandos,

242
00:15:12,180 --> 00:15:16,090
dicen las fuentes es igual y después
el archivo que estamos compilando.

243
00:15:16,090 --> 00:15:17,090
Así que es hello2_window.c.

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

245
00:15:21,390 --> 00:15:21,890
Fantástico.

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

247
00:15:22,970 --> 00:15:26,085
Ahora bien, si corremos nuestra ejecutable,
vemos esta ventana.

248
00:15:26,085 --> 00:15:27,960
Ahora hay unos pocos
problemas con la ventana.

249
00:15:27,960 --> 00:15:32,820
Podemos moverlo, pero tiene
esta basura de fondo dentro de la misma.

250
00:15:32,820 --> 00:15:34,660
Así que no hemos dibujado
nada, y por lo que es

251
00:15:34,660 --> 00:15:38,210
sólo llena de basura, que
es bastante más de lo que esperamos.

252
00:15:38,210 --> 00:15:41,010
>> Por otra parte, no podemos cerrar la ventana.

253
00:15:41,010 --> 00:15:44,780
Estoy presionando este X en la
esquina y no pasa nada.

254
00:15:44,780 --> 00:15:47,840
Así que veremos cómo arreglar
que en un poco.

255
00:15:47,840 --> 00:15:51,750
Así que vamos a arreglar la parte donde el
ventana está llena de basura en primer lugar.

256
00:15:51,750 --> 00:16:00,850
Así que si vamos a hello3_image.c, lo
podemos ver es que hemos añadido unos cuantos

257
00:16:00,850 --> 00:16:03,360
más cosas aquí.

258
00:16:03,360 --> 00:16:08,740
Hemos añadido esta nueva cabecera
presentar para obtener las funciones de temporizador.

259
00:16:08,740 --> 00:16:11,490
Supongo que lo hicimos en el pasado
uno, también, y yo no menciono.

260
00:16:11,490 --> 00:16:13,550
Pero ahora porque somos
trabajar con imágenes,

261
00:16:13,550 --> 00:16:18,720
necesitamos incluir la SDL
archivo de cabecera de imagen también.

262
00:16:18,720 --> 00:16:22,087
Por lo que es lo mismo que
antes, la inicialización de SDL aquí,

263
00:16:22,087 --> 00:16:23,420
mismo acuerdo con la creación de ventanas.

264
00:16:23,420 --> 00:16:25,380
Hemos visto que antes de ahora.

265
00:16:25,380 --> 00:16:29,870
>> Ahora tenemos que crear algo que se llama
un procesador, que tipo de va de la mano

266
00:16:29,870 --> 00:16:30,800
con la ventana.

267
00:16:30,800 --> 00:16:33,860
Pero es una especie de
abstracto objeto que es

268
00:16:33,860 --> 00:16:37,370
a cargo de hacer todo esto
operaciones de dibujo a la ventana.

269
00:16:37,370 --> 00:16:41,580
Y lo que realmente corresponde
a un programa cargado

270
00:16:41,580 --> 00:16:47,880
en el hardware de gráficos en su
ordenador o el teléfono o lo que sea.

271
00:16:47,880 --> 00:16:51,005
Así que las banderas que queremos pasar it--
y se puede ver en la documentación

272
00:16:51,005 --> 00:16:56,160
para obtener más detalle aquí-- van
SDL que se rinda acelerado, que

273
00:16:56,160 --> 00:16:58,550
significa que va a ser
utilizando el hardware de gráficos

274
00:16:58,550 --> 00:17:01,490
y no sólo emulado en software.

275
00:17:01,490 --> 00:17:07,390
>> Y vamos a utilizar
SDL RENDERER PRESENTVSYNC.

276
00:17:07,390 --> 00:17:12,280
VSYNC es una cosa que simplemente hace
sus gráficos se ven mejor y evita

277
00:17:12,280 --> 00:17:14,970
esta pantalla cosa llamada
terror, donde la mitad

278
00:17:14,970 --> 00:17:17,720
de una trama y un medio de la siguiente
marco se ven inmersos en el mismo tiempo

279
00:17:17,720 --> 00:17:20,056
y se ve horrible.

280
00:17:20,056 --> 00:17:23,130
Pero, de nuevo, usted puede ir a leer
de eso por su cuenta.

281
00:17:23,130 --> 00:17:24,319
>> Así que tenemos algunas banderas aquí.

282
00:17:24,319 --> 00:17:27,810
Y por lo que sólo vamos a llamar
esta función SDL crear render.

283
00:17:27,810 --> 00:17:31,340
Vamos a darle la ventana
asociar con ese procesador.

284
00:17:31,340 --> 00:17:34,520
Un aspecto negativo significa que no nos importa lo que
controlador de gráficos que vamos a utilizar.

285
00:17:34,520 --> 00:17:36,603
Así que en caso de más o menos
siempre ser uno negativo,

286
00:17:36,603 --> 00:17:39,010
a menos que sepa acerca de los controladores de gráficos.

287
00:17:39,010 --> 00:17:41,650
Y entonces sólo vamos
pasarlo nuestras banderas.

288
00:17:41,650 --> 00:17:47,240
Así que si eso devuelve null, entonces estamos
va a imprimir el error, como de costumbre,

289
00:17:47,240 --> 00:17:49,550
pero entonces también vamos
para destruir la ventana

290
00:17:49,550 --> 00:17:54,970
para limpiar esos recursos antes
llamando SDL dejar de fumar y volver.

291
00:17:54,970 --> 00:17:58,110
>> Ahora, lo interesante aquí
es donde nos cargamos nuestra imagen

292
00:17:58,110 --> 00:18:00,870
utilizar esta función IMG_load.

293
00:18:00,870 --> 00:18:04,050
Esta es la única función que vamos
utilizar de la biblioteca de imágenes SDL.

294
00:18:04,050 --> 00:18:05,480
Es el único que necesitamos.

295
00:18:05,480 --> 00:18:12,950
Es una función que toma la cadena
ese es el camino de cualquier recurso de imagen.

296
00:18:12,950 --> 00:18:18,024
Y puede ser un .png, un GIF,
mapa de bits, ninguna de estas cosas.

297
00:18:18,024 --> 00:18:19,690
Y es por eso que esta función es tan agradable.

298
00:18:19,690 --> 00:18:22,560
Se puede manejar casi cualquier formato.

299
00:18:22,560 --> 00:18:27,240
Carga en la memoria y lo almacena
como lo llama una superficie SDL.

300
00:18:27,240 --> 00:18:34,660
>> Ahora una superficie SDL es meramente una estructura
que representa los datos de imagen en la memoria.

301
00:18:34,660 --> 00:18:38,054
Así que usted puede leer más sobre
que en la documentación de dos.

302
00:18:38,054 --> 00:18:40,720
Y si este error, entonces estamos
vamos a hacer todo el asunto, donde

303
00:18:40,720 --> 00:18:44,480
imprimimos el error, cerramos nuestra
recursos y, a continuación, salir del programa.

304
00:18:44,480 --> 00:18:48,970
Ahora lo interesante es, antes
podemos sacar esta imagen a la ventana,

305
00:18:48,970 --> 00:18:51,390
tenemos que hacer realmente una textura.

306
00:18:51,390 --> 00:18:54,460
Ahora una textura corresponde
a los datos de imagen cargados

307
00:18:54,460 --> 00:18:57,820
en la memoria del hardware del gráfico.

308
00:18:57,820 --> 00:19:00,720
>> Así que una superficie es en main
la memoria, la memoria normal

309
00:19:00,720 --> 00:19:05,550
que hemos estado usando todo el semestre,
y una textura es en este VRAM separada

310
00:19:05,550 --> 00:19:09,410
memoria que los controles de la tarjeta gráfica.

311
00:19:09,410 --> 00:19:13,170
Así que llamamos a esta función
SDL_CreateTextureFromSurface.

312
00:19:13,170 --> 00:19:17,104
Le damos nuestro procesador y nuestra superficie.

313
00:19:17,104 --> 00:19:19,020
Y entonces estamos realmente
hecho con la superficie,

314
00:19:19,020 --> 00:19:20,311
así que sólo vamos a liberarlo.

315
00:19:20,311 --> 00:19:22,210
Nosotros no lo necesitamos más.

316
00:19:22,210 --> 00:19:26,650
Y entonces lo que si esta llamada
con error y volvió nula,

317
00:19:26,650 --> 00:19:29,630
entonces nosotros vamos a hacer todo
informe de errores cosa otra vez.

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

319
00:19:30,920 --> 00:19:34,810
Aquí, nos metemos en algún
funciones de renderizado reales.

320
00:19:34,810 --> 00:19:37,730
Así que llamar SDL_RenderClear
y pasándolo

321
00:19:37,730 --> 00:19:42,550
el procesador asociado con la ventana
simplemente hace que la ventana ve negro.

322
00:19:42,550 --> 00:19:47,650
Por lo tanto, elimina esa basura que vio en
nuestra ventana antes y hace que sea negro.

323
00:19:47,650 --> 00:19:50,750
Y luego vamos
llamar SDL_RenderCopy,

324
00:19:50,750 --> 00:19:53,010
darle nuestro procesador, nuestra textura.

325
00:19:53,010 --> 00:19:55,800
Y vamos a hablar de lo que
estos campos están en un poco.

326
00:19:55,800 --> 00:19:57,830
Pero eso va a
tomar los datos de textura

327
00:19:57,830 --> 00:20:03,100
y copiarlo en nuestra
ventana para dibujar la imagen.

328
00:20:03,100 --> 00:20:07,020
Así que después de lo que hemos hecho esta copia
los datos en nuestra ventana,

329
00:20:07,020 --> 00:20:11,180
que tenemos que hacer esta función adicional
llamada SDL_RenderPresent.

330
00:20:11,180 --> 00:20:15,360
>> Y esto es interesante
porque esto se pone

331
00:20:15,360 --> 00:20:18,770
en un tema llamado doble buffer.

332
00:20:18,770 --> 00:20:24,380
Así que el búfer doble es una técnica que
hace que sus gráficos se ven mucho mejor.

333
00:20:24,380 --> 00:20:28,240
Una vez más, impide que el desgarro de pantalla
Yo estaba hablando de antes, donde

334
00:20:28,240 --> 00:20:29,590
tiene dos buffers.

335
00:20:29,590 --> 00:20:32,260
Hay una memoria intermedia de vuelta en
memoria y un tampón frontal.

336
00:20:32,260 --> 00:20:36,410
El tampón frente es literalmente
lo que está en la pantalla en el momento.

337
00:20:36,410 --> 00:20:42,070
Así que hacemos todas estas variaciones se basan,
como SDL hacer copia o SDL_RenderClear

338
00:20:42,070 --> 00:20:43,080
a la memoria intermedia de vuelta.

339
00:20:43,080 --> 00:20:44,800
Así que se modifican las cosas
en el búfer de reserva.

340
00:20:44,800 --> 00:20:48,970
Aquí podríamos estar dibujando este
cuadrado verde en el búfer de espalda.

341
00:20:48,970 --> 00:20:52,300
>> Así que cuando terminemos haciendo
nuestros render operaciones, que

342
00:20:52,300 --> 00:20:55,700
podría tomar un tiempo muy largo
tiempo, ¿qué vamos a hacer

343
00:20:55,700 --> 00:20:57,860
es cambiar los amortiguadores.

344
00:20:57,860 --> 00:21:00,720
Así que, literalmente, sólo toma el
búfer frontal y el búfer de reserva

345
00:21:00,720 --> 00:21:02,990
y los interruptores, por lo
que, instantáneamente,

346
00:21:02,990 --> 00:21:06,630
en una sola operación, en lugar de
tal vez cientos o miles,

347
00:21:06,630 --> 00:21:10,910
todo nuestro recién prestados
con objetos sobre la pantalla.

348
00:21:10,910 --> 00:21:13,160
Y esto impide que las cosas
como el refrescante pantalla

349
00:21:13,160 --> 00:21:16,710
medio cuando sólo hemos dibujado
de nuestros objetos para el marco.

350
00:21:16,710 --> 00:21:21,280
Así que por eso tenemos que llamar
SDL_RenderPresent, así

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

352
00:21:23,320 --> 00:21:25,749
>> Una vez más, sólo vamos
que esperar cinco segundos.

353
00:21:25,749 --> 00:21:27,540
Entonces vamos a
limpiar nuestros recursos.

354
00:21:27,540 --> 00:21:29,540
Tenemos unos cuantos más en esta ocasión.

355
00:21:29,540 --> 00:21:31,750
Y entonces sólo vamos
para salir del programa.

356
00:21:31,750 --> 00:21:35,350
Así que vamos a hacer eso.

357
00:21:35,350 --> 00:21:41,880
Voy a escribir marca, y luego las fuentes
es igual a hello-- esto es ahora 3image.c.

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

359
00:21:49,632 --> 00:21:52,240
Muy bien, que compila sin errores.

360
00:21:52,240 --> 00:21:57,210
Y se puede ver aquí tengo ahora
sacado mi imagen, Hola, CS50!

361
00:21:57,210 --> 00:22:00,560
a nuestra ventana, que
desaparece después de cinco segundos.

362
00:22:00,560 --> 00:22:02,090
>> Ahora, esto todavía tiene problemas, ¿verdad?

363
00:22:02,090 --> 00:22:05,750
Esto no es una buena aplicación,
porque cuando trato de cerrar la ventana,

364
00:22:05,750 --> 00:22:06,500
no pasa nada.

365
00:22:06,500 --> 00:22:09,540
Eso x todavía no responde.

366
00:22:09,540 --> 00:22:17,420
Así que echemos un vistazo a la
siguiente archivo, hello4animation.

367
00:22:17,420 --> 00:22:21,850
Así que este es el archivo
eso va a introducir

368
00:22:21,850 --> 00:22:25,124
movimiento y movimiento a nuestra imagen.

369
00:22:25,124 --> 00:22:27,040
Así que vamos a hacer lo
lo mismo que antes,

370
00:22:27,040 --> 00:22:30,190
iniciar SDL, cree el
ventana, crear el procesador,

371
00:22:30,190 --> 00:22:33,030
cargar la imagen en
memoria, crear la textura.

372
00:22:33,030 --> 00:22:35,090
Hemos visto todo esto antes.

373
00:22:35,090 --> 00:22:36,770
Ahora, esto es nuevo.

374
00:22:36,770 --> 00:22:42,305
Vamos a tener una estructura llamada
un rect SDL, que es sólo un rectángulo.

375
00:22:42,305 --> 00:22:49,950
Si vamos por aquí, podemos
hacer una búsqueda de SDL rect,

376
00:22:49,950 --> 00:22:54,040
y se puede ver que es un
estructura muy simple.

377
00:22:54,040 --> 00:22:56,760
Cuenta con una x, a y para
la posición, y

378
00:22:56,760 --> 00:23:02,080
tiene una anchura y una altura de
el tamaño del rectángulo.

379
00:23:02,080 --> 00:23:07,785
>> Entonces, ¿qué vamos a hacer es que estamos
va a definir esta SDL rect dest,

380
00:23:07,785 --> 00:23:09,480
para el destino.

381
00:23:09,480 --> 00:23:14,130
Y este es el lugar
en la pantalla donde

382
00:23:14,130 --> 00:23:16,005
vamos a estar llegando
nuestra imagen, a la derecha Así

383
00:23:16,005 --> 00:23:17,880
si vamos a ser
moviendo la imagen alrededor,

384
00:23:17,880 --> 00:23:20,300
entonces el destino donde
vamos a dibujar la imagen

385
00:23:20,300 --> 00:23:22,620
deberán moverse.

386
00:23:22,620 --> 00:23:24,910
Así que vamos a llamar a este
SDL_QueryTexture función.

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

388
00:23:27,550 --> 00:23:33,500
Y noto que estoy pasando la dirección
de dest.w, que es el ancho,

389
00:23:33,500 --> 00:23:36,950
y dest.h, que es la altura.

390
00:23:36,950 --> 00:23:40,425
Y así SDL_QueryTexture va
almacenar en esos campos de la anchura

391
00:23:40,425 --> 00:23:41,675
y la altura de nuestra textura.

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

393
00:23:44,680 --> 00:23:47,030
>> Y entonces lo que voy
que hacer es que voy

394
00:23:47,030 --> 00:23:55,580
para establecer dest.x ventana para ser
dest.w menos anchura, que es

395
00:23:55,580 --> 00:23:59,000
la anchura de la sprite, dividido por 2.

396
00:23:59,000 --> 00:24:03,860
Y esto va a configurarlo para
que la imagen está perfectamente centrada

397
00:24:03,860 --> 00:24:06,780
en nuestra ventana, ¿de acuerdo?

398
00:24:06,780 --> 00:24:08,652
Así que ahora tengo una posición y.

399
00:24:08,652 --> 00:24:10,360
Y esto va a
ser una variable que es

400
00:24:10,360 --> 00:24:16,390
cambiar, porque vamos a ser
mover la imagen en la dirección y.

401
00:24:16,390 --> 00:24:19,050
Y ahora tenemos algo
llamado un bucle de animación.

402
00:24:19,050 --> 00:24:21,180
>> Entonces, ¿cómo funciona la animación?

403
00:24:21,180 --> 00:24:27,630
Bueno, ojo humano puede detectar 12 distinta
imágenes en cada segundo, ¿de acuerdo?

404
00:24:27,630 --> 00:24:33,060
Así que si usted flash 12 tarjetas de imagen de mí
en un segundo, vi a cada una de esas imágenes

405
00:24:33,060 --> 00:24:35,950
como su propia imagen individuo distinto.

406
00:24:35,950 --> 00:24:39,690
Ahora, si usted flash más
imágenes a mí en un segundo,

407
00:24:39,690 --> 00:24:42,140
entonces mi ojo empezaría
a desdibujar juntos

408
00:24:42,140 --> 00:24:46,920
y me percibirlo como movimiento,
en lugar de una imagen distinta.

409
00:24:46,920 --> 00:24:51,930
Así, por ejemplo, las películas y la televisión,
parpadean imágenes en usted 24 veces

410
00:24:51,930 --> 00:24:52,570
un segundo.

411
00:24:52,570 --> 00:24:55,110
Así que eso es 24 fotogramas por segundo.

412
00:24:55,110 --> 00:25:00,136
Las pantallas de ordenador, por otro lado,
a menudo son a 60 cuadros por segundo.

413
00:25:00,136 --> 00:25:01,260
Esa es su velocidad de refresco.

414
00:25:01,260 --> 00:25:04,650
Esa es la frecuencia con que se actualizan
la imagen en la pantalla.

415
00:25:04,650 --> 00:25:08,960
Así que nuestro objetivo va a ser 60
fotogramas por segundo para nuestros juegos.

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

417
00:25:11,770 --> 00:25:13,710
>> Así que vamos a ver que en el código.

418
00:25:13,710 --> 00:25:19,064
Así que para cada cuadro, estamos primero
va a borrar la ventana.

419
00:25:19,064 --> 00:25:20,230
Este es el patrón general.

420
00:25:20,230 --> 00:25:22,450
Siempre se desactiva la
ventana de cada cuadro, y luego

421
00:25:22,450 --> 00:25:25,210
hacer todo de su dibujo
operaciones, y luego, al final,

422
00:25:25,210 --> 00:25:29,610
Qué RenderPresent para mostrar
todo en el marco.

423
00:25:29,610 --> 00:25:33,910
Y luego vas a
tener que esperar al final

424
00:25:33,910 --> 00:25:36,340
que esperar hasta la próxima
marco debe comenzar.

425
00:25:36,340 --> 00:25:38,650
>> Así que si yo estaba haciendo una gran cantidad de
computación compleja aquí

426
00:25:38,650 --> 00:25:43,100
que tuvo más de 16 milisegundos,
sería imposible para mí

427
00:25:43,100 --> 00:25:46,890
para conseguir que la velocidad de fotogramas de 60 que
Yo quería, porque cada cuadro es

428
00:25:46,890 --> 00:25:48,750
tomando demasiado tiempo para calcular.

429
00:25:48,750 --> 00:25:52,340
Además, realmente estamos haciendo
tipo de una cantidad insignificante de trabajo

430
00:25:52,340 --> 00:25:54,820
aquí, porque sólo hay
una cosa que estamos dibujando.

431
00:25:54,820 --> 00:25:59,390
Así que sólo espero 1/60 de
segundo, que es la longitud

432
00:25:59,390 --> 00:26:01,520
de una trama en entre fotogramas.

433
00:26:01,520 --> 00:26:05,610
Así que estoy especie de pretender hacer
todo mi trabajo requiere tiempo cero.

434
00:26:05,610 --> 00:26:09,050
Pero en un juego real,
habría que restar

435
00:26:09,050 --> 00:26:13,760
la cantidad de tiempo que se tardó en hacerlo
todo este trabajo de su tiempo de descanso.

436
00:26:13,760 --> 00:26:16,970
>> Así que de todos modos, ¿qué soy yo
realmente hacer en este circuito?

437
00:26:16,970 --> 00:26:19,070
Me aclaro la ventana.

438
00:26:19,070 --> 00:26:27,470
Puse el dest.y, que es un int a
mi posición real y echado en un int.

439
00:26:27,470 --> 00:26:32,070
Ahora, quiero flotar resolución
para mi y posición en mi juego,

440
00:26:32,070 --> 00:26:34,150
pero entonces para realmente
dibujar en la pantalla,

441
00:26:34,150 --> 00:26:39,070
que necesita enteros, porque es en unidades de
píxeles, por lo que eso es lo que el elenco es para.

442
00:26:39,070 --> 00:26:41,745
Voy a dibujar la imagen.

443
00:26:41,745 --> 00:26:45,180
Así que este es el rectángulo de origen.

444
00:26:45,180 --> 00:26:47,060
Y este es el rectángulo de destino.

445
00:26:47,060 --> 00:26:50,310
Así que pasé nulo para
rectángulo de origen

446
00:26:50,310 --> 00:26:53,426
para decir quiero llamar toda mi textura.

447
00:26:53,426 --> 00:26:55,300
Pero si había un montón de
texturas en su juego

448
00:26:55,300 --> 00:26:59,120
y todos están en un gran mapa de textura
que se cargó en SDL como una sola

449
00:26:59,120 --> 00:27:02,850
textura, pudieras
utilizar un rectángulo de origen

450
00:27:02,850 --> 00:27:06,750
para recoger una de las texturas más pequeñas,
uno de los sprites más pequeñas,

451
00:27:06,750 --> 00:27:09,450
fuera de ese gran mapa de textura.

452
00:27:09,450 --> 00:27:14,740
>> Así que de nuevo, estoy pasando mi render, mi
textura, y ahora el destino.

453
00:27:14,740 --> 00:27:18,320
Esto va a ser donde en el
ventana que va a ser dibujado.

454
00:27:18,320 --> 00:27:21,390
Y luego, porque me estoy animando
algo, necesito movimiento,

455
00:27:21,390 --> 00:27:25,150
Voy a ser la actualización del
posición de sprites en cada fotograma.

456
00:27:25,150 --> 00:27:30,190
Así que tengo esta llamada de desplazamiento constante
acelerar en unidades de píxeles por segundo.

457
00:27:30,190 --> 00:27:34,320
Ahora, cada vez que hacemos un movimiento,
el marco es solamente 1/60 de segundo.

458
00:27:34,320 --> 00:27:36,740
Así que voy a dividir que por 60.

459
00:27:36,740 --> 00:27:42,350
Y luego, vamos a ver, yo soy
restando que a partir de la posición y.

460
00:27:42,350 --> 00:27:44,470
¿Por qué estoy restando?

461
00:27:44,470 --> 00:27:46,169
Vamos a llegar a eso en un segundo.

462
00:27:46,169 --> 00:27:48,460
Así que puedo limpiar mis recursos
y el programa ha terminado.

463
00:27:48,460 --> 00:27:49,830
>> Así que vamos a hacer eso.

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

465
00:27:52,450 --> 00:28:03,570
Así que vamos a ir a maquillaje MLRS = hello4
animation.c, ¿de acuerdo?

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

467
00:28:05,720 --> 00:28:06,770
Hay que ir.

468
00:28:06,770 --> 00:28:12,690
Así que tengo que desplazarse hasta la
ventana, que es bastante ordenada.

469
00:28:12,690 --> 00:28:17,110
Pero espera, que estaba restando
desde la posición y cada vez.

470
00:28:17,110 --> 00:28:18,910
¿Que esta pasando ahí?

471
00:28:18,910 --> 00:28:24,010
Bueno, resulta que en SDL, y
de hecho, en la mayoría de los gráficos por ordenador,

472
00:28:24,010 --> 00:28:28,890
el origen del sistema de coordenadas
es la parte superior izquierda de la ventana.

473
00:28:28,890 --> 00:28:34,960
>> Así que la dirección x positiva va
a través de la ventana a la derecha.

474
00:28:34,960 --> 00:28:38,110
Y la dirección y positiva
en realidad disminuye.

475
00:28:38,110 --> 00:28:40,470
Así que de nuevo, en el origen
la parte superior izquierda de la ventana,

476
00:28:40,470 --> 00:28:46,190
dirección positiva es hacia abajo,
yx positivo es hacia la derecha.

477
00:28:46,190 --> 00:28:48,770
Así que cuando le resto de
la posición y, eso es

478
00:28:48,770 --> 00:28:52,640
va a hacer que se vaya en lo negativo
y dirección, que es la ventana.

479
00:28:52,640 --> 00:28:55,500
Así que eso es lo que está pasando allí.

480
00:28:55,500 --> 00:28:56,510
Guay.

481
00:28:56,510 --> 00:28:59,240
>> Echemos un vistazo a la siguiente foto.

482
00:28:59,240 --> 00:29:05,700
Aquí está la parte de la
mostrar donde finalmente

483
00:29:05,700 --> 00:29:08,920
conseguir que la X en la esquina de la ventana
que se supone para cerrar la ventana

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

485
00:29:10,660 --> 00:29:12,800
Entonces, ¿qué está pasando?

486
00:29:12,800 --> 00:29:17,520
Inicializamos SDL, crear la ventana,
crear el procesador, cargar la imagen,

487
00:29:17,520 --> 00:29:19,770
crear la textura
como hemos visto antes.

488
00:29:19,770 --> 00:29:26,850
Tenemos el mismo rectángulo de destino
como antes, misma llamada para consultar textura.

489
00:29:26,850 --> 00:29:29,780
Pero esta vez, estamos entonces
va a dividir el ancho

490
00:29:29,780 --> 00:29:33,110
y la altura de nuestro destino por 4.

491
00:29:33,110 --> 00:29:36,430
Esto sólo tiene el efecto de
escalar nuestra imagen hacia abajo cuando

492
00:29:36,430 --> 00:29:39,884
mostramos en la ventana por cuatro.

493
00:29:39,884 --> 00:29:40,800
Así que eso es bastante ordenada.

494
00:29:40,800 --> 00:29:42,770
Sólo podemos escalar así como así.

495
00:29:42,770 --> 00:29:45,970
Vamos a empezar el sprite
en el centro de la pantalla.

496
00:29:45,970 --> 00:29:49,410
Y ahora tenemos x y velocidad y, y
que están tanto va a empezar de cero.

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

498
00:29:53,740 --> 00:29:55,880
>> Este es el archivo incorrecto.

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

500
00:29:56,380 --> 00:29:57,960
Así que eso es cierto.

501
00:29:57,960 --> 00:30:00,170
Eso es todo aún en este archivo.

502
00:30:00,170 --> 00:30:03,210
Tenemos el dividir por 4 y todo.

503
00:30:03,210 --> 00:30:07,830
Así que aquí tenemos nuestra xey posición
para el centro de la ventana.

504
00:30:07,830 --> 00:30:12,480
Y le damos una velocidad inicial
de esta velocidad constante, lo cual

505
00:30:12,480 --> 00:30:15,180
Creo que es de 300 píxeles por segundo.

506
00:30:15,180 --> 00:30:19,850
Ahora, tenemos este int podríamos igual de bien
ser un booleano llamado cerca solicitada.

507
00:30:19,850 --> 00:30:23,970
Y en vez de hacer una
bucle infinito en un temporizador aquí,

508
00:30:23,970 --> 00:30:29,180
vamos a ser como la animación
siempre y cuando cierre no se solicita.

509
00:30:29,180 --> 00:30:30,960
>> Entonces, ¿cómo procesamos eventos?

510
00:30:30,960 --> 00:30:35,600
Bueno, SDL pone en cola los eventos de una
cola literal detrás de las escenas.

511
00:30:35,600 --> 00:30:38,860
Y entonces cada trama,
podemos quitar de la cola de eventos

512
00:30:38,860 --> 00:30:43,900
desde esa cola utilizando
este SDL_PullEvent llamada.

513
00:30:43,900 --> 00:30:46,730
Y de nuevo, sin duda ve a leer
sobre esto en la documentación.

514
00:30:46,730 --> 00:30:50,450
Hay mucho más detalle y un montón
más funciones que se pueden utilizar con este.

515
00:30:50,450 --> 00:30:54,750
Nos pasamos la dirección
de esta cosa, SDL_Event

516
00:30:54,750 --> 00:30:56,990
que tenemos aquí en la pila.

517
00:30:56,990 --> 00:30:58,840
>> Ahora, ¿qué es un SDL_Event?

518
00:30:58,840 --> 00:31:02,356
Debido a SDL, si nos fijamos en
los documentation-- vamos

519
00:31:02,356 --> 00:31:07,580
ver, API por categoría, de entrada
eventos, manejo de eventos,

520
00:31:07,580 --> 00:31:15,150
podemos mirar el número
de diferentes eventos aquí

521
00:31:15,150 --> 00:31:18,600
y podemos ver que hay
todo un montón de ellos.

522
00:31:18,600 --> 00:31:22,150
Entonces, ¿qué es esta cosa SDL_Event?

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

524
00:31:28,190 --> 00:31:31,107
SDL_Event es una unión.

525
00:31:31,107 --> 00:31:31,940
Wow, ¿qué es un sindicato?

526
00:31:31,940 --> 00:31:33,910
Tienes que probablemente nunca
oído hablar de eso antes.

527
00:31:33,910 --> 00:31:35,610
Y eso está bien.

528
00:31:35,610 --> 00:31:39,420
>> Un sindicato es una especie de
una estructura, a excepción de una estructura

529
00:31:39,420 --> 00:31:41,960
tiene un espacio para todos
sus campos y la memoria,

530
00:31:41,960 --> 00:31:45,060
mientras que un sindicato sólo tiene
espacio suficiente para adaptarse a la mayor

531
00:31:45,060 --> 00:31:49,660
uno de sus campos, lo que significa que
sólo puede almacenar uno de sus campos

532
00:31:49,660 --> 00:31:52,830
a la vez, qué tipo de
tiene sentido para eventos, ¿verdad?

533
00:31:52,830 --> 00:31:55,810
Podemos tener un teclado
evento o un evento de ventana,

534
00:31:55,810 --> 00:31:59,750
pero un solo evento no puede ser a la vez un
evento de teclado y un evento de ventana,

535
00:31:59,750 --> 00:32:05,450
así que sería tonto tener espacio para
tanto de los que están dentro de nuestra unión evento.

536
00:32:05,450 --> 00:32:07,770
Así que si usted quería
crear su propio sindicato,

537
00:32:07,770 --> 00:32:10,020
se ve exactamente el mismo
como la creación de una estructura,

538
00:32:10,020 --> 00:32:14,140
excepto que se utiliza la palabra clave union
en lugar de la palabra clave struct.

539
00:32:14,140 --> 00:32:17,490
Y recuerda, por la totalidad de la
cosas dentro de su sindicato,

540
00:32:17,490 --> 00:32:22,020
la variable real que es la unión
sólo puede tener uno de esos valores

541
00:32:22,020 --> 00:32:24,780
a la vez.

542
00:32:24,780 --> 00:32:29,940
>> Entonces, ¿cómo podemos saber qué tipo de evento
nos metimos fuera de esta cola?

543
00:32:29,940 --> 00:32:33,370
Bueno, podemos probar Event.type.

544
00:32:33,370 --> 00:32:35,792
Y si eso es igual
a SDL_Quit, sabemos

545
00:32:35,792 --> 00:32:37,500
es el caso de que
se generó cuando

546
00:32:37,500 --> 00:32:39,510
golpear esa X en la esquina de la ventana.

547
00:32:39,510 --> 00:32:44,270
Y podemos establecer estrecha solicitada es igual a 1.

548
00:32:44,270 --> 00:32:47,230
El resto es sólo un poco de animación
que has visto antes.

549
00:32:47,230 --> 00:32:52,802
Así que vamos a seguir adelante y hacer
esto y ver lo bien que funciona.

550
00:32:52,802 --> 00:32:55,135
Así que voy a escribir marca y
entonces MLRS = hello5_events.c.

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

552
00:33:03,760 --> 00:33:04,770
Allá vamos.

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

554
00:33:05,780 --> 00:33:08,920
>> Ahora, podemos ver que era
de hecho reducido por cuatro.

555
00:33:08,920 --> 00:33:10,360
Y ahora está rebotando.

556
00:33:10,360 --> 00:33:14,630
Tengo un poco de detección de colisiones
pasando con los lados de la ventana

557
00:33:14,630 --> 00:33:16,840
que podemos echar un vistazo a.

558
00:33:16,840 --> 00:33:21,190
¿Y qué pasa cuando voy a cerrarla?

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

560
00:33:22,120 --> 00:33:22,740
Fantástico.

561
00:33:22,740 --> 00:33:24,290
Recibimos ese evento.

562
00:33:24,290 --> 00:33:26,630
Y lo manejamos.

563
00:33:26,630 --> 00:33:30,730
>> Así que vamos a mirar hacia atrás en el código.

564
00:33:30,730 --> 00:33:33,020
Entonces, ¿cómo lo consigo
rebotando así?

565
00:33:33,020 --> 00:33:37,200
Recuerde me puse ambos xy
y inicialmente a las velocidades.

566
00:33:37,200 --> 00:33:39,260
Y la velocidad es positiva
constante, por lo que es

567
00:33:39,260 --> 00:33:42,680
va a lograr que se está comenzando
ir hacia abajo ya la derecha.

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

569
00:33:45,680 --> 00:33:50,310
>> Ahora, cada trama, además de la manipulación
cualquier evento que pueda haber ocurrido,

570
00:33:50,310 --> 00:33:57,520
Voy a detectar si mi sprites
está tratando de salir de la ventana.

571
00:33:57,520 --> 00:34:03,610
Por lo que podemos hacer eso con sólo comprobar
x_pos con 0, pos_y 0, a continuación,

572
00:34:03,610 --> 00:34:07,370
también x_pos y pos_y con
anchura de la ventana y altura de la ventana.

573
00:34:07,370 --> 00:34:11,010
Nótese que he resté
el ancho del sprite.

574
00:34:11,010 --> 00:34:14,090
Y esto se debe a que si no lo hacía
restar la anchura del sprite,

575
00:34:14,090 --> 00:34:17,760
sólo sería comprobar que
el origen del sprite

576
00:34:17,760 --> 00:34:19,690
no ir fuera de la ventana.

577
00:34:19,690 --> 00:34:21,480
Pero queremos que la totalidad
ancho del sprite

578
00:34:21,480 --> 00:34:24,030
para estar siempre dentro de la ventana y
toda la altura del sprite

579
00:34:24,030 --> 00:34:25,321
para estar siempre dentro de la ventana.

580
00:34:25,321 --> 00:34:27,429
Así que eso es lo que la resta es para.

581
00:34:27,429 --> 00:34:30,080
Una gran cantidad de geometría aquí puede
ser de utilidad para sacarlo

582
00:34:30,080 --> 00:34:33,929
en papel con la coordenada
sistema para ver lo que está pasando.

583
00:34:33,929 --> 00:34:38,090
>> Así que si me chocan, yo sólo
simplemente restablecer la posición

584
00:34:38,090 --> 00:34:41,400
de manera que no se va
fuera de la pantalla.

585
00:34:41,400 --> 00:34:47,179
Y yo voy a, si rebota
en una de las paredes laterales,

586
00:34:47,179 --> 00:34:51,469
Voy a negar la
x velocidad de modo que

587
00:34:51,469 --> 00:34:53,210
comienza rebotando en la otra dirección.

588
00:34:53,210 --> 00:34:56,210
Y de manera similar, si golpea
la parte superior o inferior,

589
00:34:56,210 --> 00:34:59,820
Voy a establecer la velocidad y
igual a la velocidad y negativa,

590
00:34:59,820 --> 00:35:01,690
de manera que se va a recuperar.

591
00:35:01,690 --> 00:35:03,860
Así que eso es lo que tenemos eso aquí.

592
00:35:03,860 --> 00:35:07,560
>> Y las posiciones de actualización
al igual que hemos visto antes,

593
00:35:07,560 --> 00:35:12,510
dividir por 60, porque somos
solamente el manejo de 1/60 de un segundo.

594
00:35:12,510 --> 00:35:15,750
Y entonces la representación,
exactamente el mismo que antes.

595
00:35:15,750 --> 00:35:19,810
Y eso es todo
que iba en este archivo.

596
00:35:19,810 --> 00:35:22,490
Así que eso es lo que hacemos eventos.

597
00:35:22,490 --> 00:35:29,260
Lo principal para llevar aquí
Es esta función SDL_PullEvent.

598
00:35:29,260 --> 00:35:33,020
Y usted debería leer el
documentación más sobre SDL_Event

599
00:35:33,020 --> 00:35:38,630
el sindicato, ya que este tipo de datos es
muy, muy importante, porque la usamos

600
00:35:38,630 --> 00:35:40,690
para todo tipo de eventos.

601
00:35:40,690 --> 00:35:46,539
>> Por ejemplo, la utilizamos para el teclado
eventos, que es lo que este archivo es para.

602
00:35:46,539 --> 00:35:47,330
¿Entonces que tenemos?

603
00:35:47,330 --> 00:35:50,180
Tenemos el mismo que antes,
inicializar SDL, crear una ventana,

604
00:35:50,180 --> 00:35:55,260
crear un render, cargar la imagen
en la memoria, crear la textura.

605
00:35:55,260 --> 00:36:00,530
Una vez más, vamos a
tener este dest rectángulo,

606
00:36:00,530 --> 00:36:04,890
vamos a escalar la imagen
por cuatro, que sea un poco más pequeño.

607
00:36:04,890 --> 00:36:08,000
Ahora, vamos a iniciar el
sprite en el centro de la pantalla.

608
00:36:08,000 --> 00:36:12,090
Pero esta vez, vamos a establecer el
x y velocidades iniciales Y a cero,

609
00:36:12,090 --> 00:36:15,140
debido a que el teclado es
va a controlar esos.

610
00:36:15,140 --> 00:36:18,900
Y, además, vamos a
realizar un seguimiento de estas variables

611
00:36:18,900 --> 00:36:20,450
arriba, abajo, izquierda y derecha.

612
00:36:20,450 --> 00:36:23,090
Y eso va a seguir
seguimiento de si nos hemos

613
00:36:23,090 --> 00:36:27,370
presiona los botones del teclado que
corresponden a arriba, abajo, izquierda,

614
00:36:27,370 --> 00:36:28,460
y la derecha.

615
00:36:28,460 --> 00:36:32,440
>> Ahora, esto es una especie de lujo
porque podemos usar W, A, S,

616
00:36:32,440 --> 00:36:35,480
D aquí, o las teclas de flecha reales.

617
00:36:35,480 --> 00:36:38,590
Vamos a ver que en tan sólo un segundo.

618
00:36:38,590 --> 00:36:41,140
Así que vamos a procesar
el evento al igual que antes.

619
00:36:41,140 --> 00:36:42,530
Tiramos el evento.

620
00:36:42,530 --> 00:36:45,840
Pero ahora vamos a
cambiar el tipo de evento.

621
00:36:45,840 --> 00:36:47,710
Si es SDL_Quit, estamos
va a establecer cerca

622
00:36:47,710 --> 00:36:49,990
solicitado a uno, al igual que antes.

623
00:36:49,990 --> 00:36:52,315
Que se encarga de las x en
la esquina de la ventana,

624
00:36:52,315 --> 00:36:55,050
de manera que nuestra ventana en realidad se cierra.

625
00:36:55,050 --> 00:37:00,110
>> De lo contrario, si conseguimos una clave SDL abajo
acontecimiento, lo que significa que pulsa una tecla,

626
00:37:00,110 --> 00:37:04,470
entonces lo que vamos a hacer es que estamos
va a cambiar en esta cosa aquí,

627
00:37:04,470 --> 00:37:11,370
que designa todas lo event.key
significa tratar a nuestra unión evento,

628
00:37:11,370 --> 00:37:15,490
ir a buscar la llave
estructura de eventos en el mismo.

629
00:37:15,490 --> 00:37:18,810
Así que resulta que esta
unión es una estructura evento clave.

630
00:37:18,810 --> 00:37:22,820
Y luego ir a la clave
La estructura del evento su campo

631
00:37:22,820 --> 00:37:26,140
llamada keysym y luego scancode.

632
00:37:26,140 --> 00:37:29,480
Y de nuevo, sin duda leer
la documentación sobre esto.

633
00:37:29,480 --> 00:37:31,220
Entradas de palabras clave muy interesante.

634
00:37:31,220 --> 00:37:34,020
Usted puede obtener los códigos de exploración o códigos clave.

635
00:37:34,020 --> 00:37:38,590
Y es un poco sutil, pero
la documentación es bastante bueno.

636
00:37:38,590 --> 00:37:43,380
>> Así que si vemos el código de exploración para
nuestra prensa clave es W o arriba,

637
00:37:43,380 --> 00:37:45,450
vamos a configurar igual a 1.

638
00:37:45,450 --> 00:37:47,240
Y entonces salimos de ese interruptor.

639
00:37:47,240 --> 00:37:52,980
Si se trata de una o de izquierda, que ajuste la izquierda a 1, et
etc., etc., por abajo ya la derecha.

640
00:37:52,980 --> 00:37:57,080
Ahora, en este interruptor externo,
si vemos una llave hasta acontecimiento,

641
00:37:57,080 --> 00:38:00,730
eso significa que hemos lanzado una clave
y ya no estamos presionando.

642
00:38:00,730 --> 00:38:05,380
Así que voy a decir por igual a 0,
izquierda es igual a 0, abajo es igual a 0, a la derecha

643
00:38:05,380 --> 00:38:08,260
es igual a 0, etcétera.

644
00:38:08,260 --> 00:38:12,070
>> Y note que tenemos en cada una de ellas
dos casos ponen uno al lado del otro

645
00:38:12,070 --> 00:38:14,490
sin código separado
para el primer caso, que

646
00:38:14,490 --> 00:38:18,180
significa que si se trata de
un S o un abajo a la derecha aquí,

647
00:38:18,180 --> 00:38:20,520
que va a ejecutar este código.

648
00:38:20,520 --> 00:38:22,090
Así que eso es bastante práctico.

649
00:38:22,090 --> 00:38:24,830
Impide que tengamos que hacer más
condiciones y ifs y cosas

650
00:38:24,830 --> 00:38:26,980
como eso.

651
00:38:26,980 --> 00:38:29,420
>> Así que vamos a
determinar la velocidad.

652
00:38:29,420 --> 00:38:31,020
Fijamos la velocidad a 0.

653
00:38:31,020 --> 00:38:33,910
Entonces, si se presiona hasta
y no hacia abajo, entonces nosotros

654
00:38:33,910 --> 00:38:37,450
ajustar la velocidad y a la velocidad negativa.

655
00:38:37,450 --> 00:38:42,930
Recuerde negativo, debido a que el
dirección y negativo es hacia arriba.

656
00:38:42,930 --> 00:38:45,540
Y la dirección positiva es hacia abajo.

657
00:38:45,540 --> 00:38:47,510
Si se presiona hacia abajo
y no hacia arriba, entonces estamos

658
00:38:47,510 --> 00:38:53,860
va a ponerlo en velocidad positiva,
lo que significa que va abajo de la pantalla.

659
00:38:53,860 --> 00:38:55,460
Lo mismo con la izquierda y la derecha.

660
00:38:55,460 --> 00:38:58,200
>> Y luego vamos a actualizar
las posiciones igual que antes.

661
00:38:58,200 --> 00:39:00,740
Vamos a hacer de colisión
detección con límites,

662
00:39:00,740 --> 00:39:04,290
pero nosotros no vamos a restablecer el
velocidad, porque la velocidad es sólo

663
00:39:04,290 --> 00:39:06,780
controlado por el teclado.

664
00:39:06,780 --> 00:39:11,230
Pero vamos a restablecer el
posiciones para mantenerlo en la ventana.

665
00:39:11,230 --> 00:39:14,400
Y vamos a establecer el
posiciones en la estructura

666
00:39:14,400 --> 00:39:17,400
y luego hacer todo el
haciendo cosas de antes.

667
00:39:17,400 --> 00:39:20,750
Así que vamos a ver lo que hace.

668
00:39:20,750 --> 00:39:25,460
Así hacen SRCS-- vamos a ver,
esto es hello6_keyboard.c.

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

670
00:39:38,140 --> 00:39:38,820
>> Oh, no.

671
00:39:38,820 --> 00:39:40,150
Así que nos dio algunas advertencias aquí.

672
00:39:40,150 --> 00:39:43,840
Y eso es simplemente decir que no lo hicimos
comprobar si cada tipo posible

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

674
00:39:45,610 --> 00:39:49,470
Eso está bien, porque
hay 236 de ellos o así.

675
00:39:49,470 --> 00:39:51,760
Así que voy a ignorar esas advertencias.

676
00:39:51,760 --> 00:39:53,530
Todavía está compilado bien.

677
00:39:53,530 --> 00:39:56,100
Así que voy a jugar el juego.

678
00:39:56,100 --> 00:39:57,590
No se mueve.

679
00:39:57,590 --> 00:40:04,150
Pero ahora, cuando me puré en mi teclado,
Yo puedo hacer algún movimiento WASD aquí,

680
00:40:04,150 --> 00:40:06,870
Utilizo mis teclas de dirección también.

681
00:40:06,870 --> 00:40:10,070
Y noto, aunque soy
presionando la derecha en este momento,

682
00:40:10,070 --> 00:40:13,804
no va por la ventana,
porque puedo restablecer en cada fotograma.

683
00:40:13,804 --> 00:40:14,720
Así que eso es bastante ordenada.

684
00:40:14,720 --> 00:40:19,420
Usted puede imaginar moverse con Mario
algunas teclas de flecha o algo por el estilo.

685
00:40:19,420 --> 00:40:22,880
Y sí, el X funciona.

686
00:40:22,880 --> 00:40:26,900
>> Archivo Así definitiva vamos
a la vista, hellow7_mouse.

687
00:40:26,900 --> 00:40:29,600
Se trata de conseguir la entrada del ratón.

688
00:40:29,600 --> 00:40:34,790
Así que en éste, nos
importar el encabezado de matemáticas,

689
00:40:34,790 --> 00:40:38,100
porque vamos a tener
un poco de matemáticas aquí.

690
00:40:38,100 --> 00:40:45,260
El mismo viejo, el mismo viejo cosas, destino,
misma edad, visto eso antes.

691
00:40:45,260 --> 00:40:46,910
Bueno, esto es interesante.

692
00:40:46,910 --> 00:40:51,730
Así que estamos de vuelta a la única comprobación
para el SDL dejar evento.

693
00:40:51,730 --> 00:40:52,460
¿Porqué es eso?

694
00:40:52,460 --> 00:40:55,110
Así que usted puede conseguir la entrada del ratón de eventos.

695
00:40:55,110 --> 00:40:57,670
Como cuando el ratón se movía,
se obtiene un evento para eso.

696
00:40:57,670 --> 00:41:00,520
Cuando se pulsa un botón del ratón,
usted puede conseguir un evento para eso.

697
00:41:00,520 --> 00:41:05,760
>> Pero hay otra, un poco más sencillo
tal vez, API para conseguir la entrada del ratón.

698
00:41:05,760 --> 00:41:09,500
Y eso es simplemente el estado get ratón SDL.

699
00:41:09,500 --> 00:41:14,370
Así que tengo un int para xy
y de la posición del cursor.

700
00:41:14,370 --> 00:41:18,910
Paso a SDL_GetMouseState,
que establece estos.

701
00:41:18,910 --> 00:41:22,200
Y esta es la posición en el
sistema de la ventana de coordenadas.

702
00:41:22,200 --> 00:41:25,520
Así que si la masa está en la parte superior izquierda
de la ventana, que sería 0, 0.

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

704
00:41:28,040 --> 00:41:33,380
>> Ahora, lo que voy a hacer es que voy
hacer un poco de matemáticas de vectores.

705
00:41:33,380 --> 00:41:36,910
Apuesto a que pensó que no lo haría
ver que en CS50, pero aquí está.

706
00:41:36,910 --> 00:41:40,720
Voy a hacer un poco de vector
matemáticas para obtener el vector

707
00:41:40,720 --> 00:41:43,840
a partir de la imagen para el cursor.

708
00:41:43,840 --> 00:41:53,280
Y así, ¿por qué tengo
esta resta aquí?

709
00:41:53,280 --> 00:42:01,350
Bueno, si acabo de utilizar dest .-- así
Necesito traducir el ratón x

710
00:42:01,350 --> 00:42:05,166
e y por medio la anchura y
la altura de la imagen,

711
00:42:05,166 --> 00:42:08,040
porque quiero que el centro de la
imagen que se va hacia el ratón,

712
00:42:08,040 --> 00:42:10,160
no el origen de la imagen.

713
00:42:10,160 --> 00:42:15,650
>> Así que eso es sólo para asegurarse de que estoy hablando
alrededor del centro de la imagen aquí.

714
00:42:15,650 --> 00:42:19,510
Entonces conseguimos delta x e y, que
es la diferencia de la diana

715
00:42:19,510 --> 00:42:23,430
a la posición real de la imagen.

716
00:42:23,430 --> 00:42:25,690
Y entonces podemos obtener la
distanciarse aquí, que

717
00:42:25,690 --> 00:42:29,140
va a ser de Pitágoras
teorema, raíz cuadrada de x

718
00:42:29,140 --> 00:42:32,720
por x más veces y y.

719
00:42:32,720 --> 00:42:38,400
>> Ahora, para evitar que la inquietud, y puedo mostrar
usted lo que esto hace, si no hago esto,

720
00:42:38,400 --> 00:42:45,830
si la distancia entre el cursor y
el centro de la imagen es inferior a cinco,

721
00:42:45,830 --> 00:42:48,730
Yo no voy a mover la imagen.

722
00:42:48,730 --> 00:42:52,900
De lo contrario, nos pusimos en la velocidad.

723
00:42:52,900 --> 00:42:55,960
Y hemos creado para que el
la velocidad será siempre constante.

724
00:42:55,960 --> 00:42:58,770
Y el resultado neto de todo
este matemáticas es que la imagen

725
00:42:58,770 --> 00:43:01,660
va a avanzar hacia el cursor.

726
00:43:01,660 --> 00:43:08,470
>> Ahora, resulta que
SDL_GetMouseState,

727
00:43:08,470 --> 00:43:14,490
además de establecer la
x y argumentos esta opción,

728
00:43:14,490 --> 00:43:21,340
también devuelve un int que corresponde
con el estado de los botones del ratón.

729
00:43:21,340 --> 00:43:24,600
Así que no podemos leer que
directamente, pero podemos

730
00:43:24,600 --> 00:43:29,090
utilizar estas macros, una sola
operador de bits, no es que da miedo,

731
00:43:29,090 --> 00:43:30,650
sólo un bit a bit y.

732
00:43:30,650 --> 00:43:38,320
Por eso decimos botones, que es el resultado
de nuestra SDL_GetMouseState, si eso

733
00:43:38,320 --> 00:43:43,990
y bit a bit y, esta macro
aquí, SDL_BUTTON_LEFT.

734
00:43:43,990 --> 00:43:47,680
>> Así que esto va a resolver simplemente
al mapa de bits que corresponde

735
00:43:47,680 --> 00:43:51,090
al botón izquierdo del ratón está presionado.

736
00:43:51,090 --> 00:43:55,470
Y así, si el bit a bit
y se produce y es

737
00:43:55,470 --> 00:43:59,340
no es cero, lo que significa
Se ha pulsado el botón izquierdo,

738
00:43:59,340 --> 00:44:04,320
entonces estamos realmente va a negar
tanto la x y la y velocidades,

739
00:44:04,320 --> 00:44:06,700
que acaba de hacer el fuera de control de imagen.

740
00:44:06,700 --> 00:44:07,980
Actualizar posiciones.

741
00:44:07,980 --> 00:44:10,920
Colisiones detecciones, visto
todo antes, lo que hace, está bien.

742
00:44:10,920 --> 00:44:11,510
Hagámoslo.

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

744
00:44:14,200 --> 00:44:16,050
Así que tienes que MLRS = hello7_mouse.c.

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

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

747
00:44:22,220 --> 00:44:23,490
No hay errores.

748
00:44:23,490 --> 00:44:24,900
Y juego.

749
00:44:24,900 --> 00:44:26,440
>> Así que aquí tengo mi ratón.

750
00:44:26,440 --> 00:44:29,000
Y la imagen es de hecho
persiguiendo mi ratón.

751
00:44:29,000 --> 00:44:33,140
Ahora, en un juego que usted hace, tal vez
esto es como una persecución enemiga

752
00:44:33,140 --> 00:44:35,240
su pequeño personaje o lo que sea.

753
00:44:35,240 --> 00:44:37,440
Pero aquí tenemos la
imagen persiguiendo al ratón.

754
00:44:37,440 --> 00:44:41,000
Y cuando hago clic en el ratón
comienza persiguiendo la imagen

755
00:44:41,000 --> 00:44:42,860
y la imagen es
huyendo de ratón.

756
00:44:42,860 --> 00:44:43,810
Así que eso es muy bueno.

757
00:44:43,810 --> 00:44:47,770
Y aviso de nuevo, no es
siendo la detección de colisiones aquí.

758
00:44:47,770 --> 00:44:53,930
>> Así que ese es el pequeño definitiva
Demo he puesto aquí.

759
00:44:53,930 --> 00:44:58,870
Y vamos a echar un vistazo a una cosa más.

760
00:44:58,870 --> 00:45:02,970
Así que de vuelta aquí, he mencionado esto jitter.

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

762
00:45:05,000 --> 00:45:12,890
Así que si la distancia es de menos de cinco píxeles,
Yo estaba sentado x e y la velocidad a cero.

763
00:45:12,890 --> 00:45:15,960
¿Qué sucede si nos deshacemos de eso?

764
00:45:15,960 --> 00:45:19,070
Así que me voy a hacer esto solo.

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

766
00:45:23,820 --> 00:45:30,150
Por favor, disculpe este estilo horrendo,
pero comentamos el código correcto.

767
00:45:30,150 --> 00:45:38,080
Así que voy a guardar eso y hacer lo
mismo comando de delante para hacerlo.

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

769
00:45:38,785 --> 00:45:39,660
Y ahora ¿qué pasa?

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

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

772
00:45:43,760 --> 00:45:45,801
Todavía estamos siguiendo el
ratón al igual que antes,

773
00:45:45,801 --> 00:45:49,310
pero cuando llegamos al ratón,
tenemos esta fluctuación bruto.

774
00:45:49,310 --> 00:45:50,320
¿Que esta pasando ahí?

775
00:45:50,320 --> 00:45:52,600
Pues bien, en nuestro vector
matemáticas, recordamos que éramos

776
00:45:52,600 --> 00:45:57,540
teniendo la distancia entre el
cursor y el centro de la imagen?

777
00:45:57,540 --> 00:46:00,710
Bueno, como que se acerca
0, comenzamos a conseguir

778
00:46:00,710 --> 00:46:06,280
al igual que este tipo de comportamiento loco
donde la imagen es una especie de

779
00:46:06,280 --> 00:46:08,910
como oscilando alrededor del cursor.

780
00:46:08,910 --> 00:46:12,000
Y eso es la creación de esta fluctuación.

781
00:46:12,000 --> 00:46:13,020
Y eso es muy feo.

782
00:46:13,020 --> 00:46:15,103
Y es probable que no lo hace
quiere que sus juegos de hacer eso,

783
00:46:15,103 --> 00:46:17,350
a menos que sea algún tipo de efecto especial.

784
00:46:17,350 --> 00:46:21,960
>> Así que es por eso que tenemos
sólo por esta arbitraria

785
00:46:21,960 --> 00:46:27,150
cortamos de cinco píxeles, donde decimos
si se trata de un plazo de cinco píxeles, estamos bien.

786
00:46:27,150 --> 00:46:29,560
No necesitamos para mover la imagen más.

787
00:46:29,560 --> 00:46:32,260
Así que eso es lo que está pasando allí.

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

789
00:46:37,390 --> 00:46:40,870
>> Así que eso es prácticamente todo.

790
00:46:40,870 --> 00:46:44,390
Ahora ya sabe cómo crear
una ventana, cargar una imagen,

791
00:46:44,390 --> 00:46:49,330
dibujar una imagen a la ventana, obtener
entrada de teclado, obtener la entrada del ratón,

792
00:46:49,330 --> 00:46:52,190
hay un montón de otras
de entrada que no lo haría

793
00:46:52,190 --> 00:46:56,070
saber como llegar si usted acaba de pasar una
unos minutos mirando documentación.

794
00:46:56,070 --> 00:46:59,670
Así que realmente tiene un buen
pocas herramientas a su disposición ahora

795
00:46:59,670 --> 00:47:01,650
para escribir un juego en toda regla.

796
00:47:01,650 --> 00:47:05,030
>> Ahora, cada juego necesita un poco de audio,
pero la documentación de audio

797
00:47:05,030 --> 00:47:06,460
también es bastante bueno.

798
00:47:06,460 --> 00:47:09,200
Y estoy dispuesto a apostar que si
usted entiende todas las cosas

799
00:47:09,200 --> 00:47:14,560
hemos hablado hoy con
las imágenes y las superficies,

800
00:47:14,560 --> 00:47:18,370
las ventanas, y todo, entonces
averiguar la API de audio no es

801
00:47:18,370 --> 00:47:21,170
va a ser tan malo.

802
00:47:21,170 --> 00:47:27,420
Así que espero ver
lo que creas con SDL.

803
00:47:27,420 --> 00:47:31,595