THOMAS ANIMADA: De acuerdo.
Hola a todos.
Estoy Thomas Lively.
Este seminario va a ser escribir juegos 2D en C utilizando SDL.
Así que sé que eres todo preguntando, sí, realmente
quieren jugar y hacer juegos, pero lo que es este negocio SDL?
Así SDL es una biblioteca C.
Se destaca por la sencilla DirectMedia Layer.
Y es una plataforma cruzada, biblioteca de desarrollo de juegos.
Funciona en Windows, Mac, Linux, incluso iOS y Android.
Se ocupa de cosas como el acceso a los sistemas de audio
para el ordenador, el teclado, y ratón, joystick, si están unidos.
El móvil, incluso puede hacer lo entrada táctil y todo eso.
Y, por supuesto, que se encarga de los gráficos, dibujo cosas a la pantalla.
>> Así que es muy ampliamente utilizado, a pesar de que puede que no haya oído hablar de él antes.
Está construido en, por ejemplo, Motor de fuente de Valve,
que alimenta juegos como Portal y Team Fortress 2.
Está también en un gran número de juegos indie que salen,
así que estoy emocionado de ver lo que todo estará haciendo con él.
>> Los objetivos del seminario son para conseguir que se dispuso a ser en desarrollo con SDL.
Vamos a aprender para crear una ventana de juego.
Vamos a crear sprites, que son las imágenes de su juego
que puede moverse.
Vamos a aprender ay animar los sprites,
así moverlos, hacer ellos cambian con el tiempo.
Y vamos a aprender para capturar teclado y el ratón
de entrada de la computadora.
Lo que no vamos a estar hablando hoy es gráficos en 3D,
porque eso es muy complicado tema que no tenemos tiempo para.
No vamos a aprender a reproducir el audio en nuestros juegos.
Y no vamos a estar construyendo para nada, pero Linux.
>> Ahora las salvedades hay que, con suerte, al final del seminario,
se sentirá cómodo con la documentación de SDL,
por lo que será capaz de ir averiguar la forma de jugar de audio por ti mismo.
También la construcción para Mac o PC debería funcionar exactamente la misma que la construcción para Linux,
pero la configuración va a ser un poco diferente.
Por lo que debe ser capaz de entender cómo hacer estas cosas
para el final del seminario de hoy.
>> Así que para la puesta en marcha, vamos utilizar una máquina virtual.
Queremos utilizar el IDE CS50, porque sólo vamos a estar escribiendo en C.
Pero ya que el IDE no es un navegador, que no puede crear ventanas o pantalla nuevos
gráficos en él.
Así que tenemos una máquina virtual.
Así que usted puede seguir las instrucciones aquí en manual.CS50.net/appliance/15
para instalar el aparato oficial CS50, que no es más que una virtual de Linux
máquina.
>> Y a continuación, una vez que tienes que todo ello se up--
podría tomar un poco de tiempo, porque una gran download-- vas
para funcionar en la actualización de apt-get VM sudo.
Y eso es realmente está pasando para actualizar todo el software
paquetes en su máquina virtual.
>> Después de eso, usted va a ejecutar sudo apt-get install, libsdl2-2.0-0,
libsdl2-dbg, libsdl2-dev, y adicionalmente libsdl2-image-2,0-0,
libsdl2-image-dbg, y libsdl2-image-dev.
Entonces, ¿qué hace eso?
Eso simplemente instala la depuración información, documentación, cabeceras,
y los binarios para dos bibliotecas.
Regular de edad, SDL 2.0, y otra biblioteca
llamada Imagen SDL, que vamos a utilizar
para cargar archivos de imagen en nuestro juego.
>> Así que una vez que tenga que también que, justo cuando se le pregunta,
sólo tiene que teclear sí, presiona Enter para instalar los paquetes,
y entonces usted debe ser bueno para ir.
Así que para obtener el código de distribución, can-- ¡Dios mío, esto no se actualiza.
A menos que usted tenga un account-- GitHub si usted tiene una cuenta de GitHub,
usted puede hacer esto Git comando clon a la repo
y que va a descargar el Git repo con todo el código en el mismo,
de modo que usted tiene el código.
>> Si usted no tiene un GitHub cuenta, lo que debe hacer es tipo
wgithttps: //github.com/tlively/sdl seminar-- y aquí es diferente--
/archive/master.zip.
Así que de nuevo, eso es exactamente el mismo URL, si no va a ser
tlively / SDL_seminar / master.zip y está utilizando wgit descargar eso.
Y entonces usted puede simplemente descomprimir ese archivo
y entonces tendrás todo el código fuente.
Así que lo siento por eso.
Y a continuación, el código también tendrá lugar en la página web del seminario CS50 en un par
día.
>> Correcto.
Entonces, ¿cómo empecemos escribir nuestro propio juego?
Bueno, lo primero vamos a querer hacer
es mirar la documentación de SDL.
Así que aquí está la máquina virtual.
Y aquí está la página web.
He navegado vivir libsdl.org.
Lo que voy a hacer aquí es ir más a la barra lateral, en la documentación,
y haga clic en el wiki.
Esto me trae a la wiki que tiene la mayor parte de la documentación de SDL.
Más en la barra lateral aquí, estamos va a hacer clic API por categoría,
porque va a dar nosotros una bonita vista categórico
de toda la API para SDL.
>> Así, por ejemplo, tenemos la inicialización básica
y cerrado, toda la clase de cosas administrativas para el uso de SDL,
y luego tenemos la sección de mostrar cosas a la pantalla.
Eso es vídeo.
Los eventos de entrada, que es conseguir entrada desde el teclado,
conseguir la entrada del ratón, y el joystick, si lo tiene, incluso.
Hay retroalimentación de fuerza para las cosas como dispositivos de juego, que
no vamos a hablar.
Y aquí está el audio.
Y luego hay un montón de otras materia que SDL puede hacer por usted.
>> Pero hoy vamos a enfocar en la inicialización aquí,
la visualización de imágenes en el vídeo sección, y gastos de los eventos de entrada.
Así que estos son los principales secciones de la documentación
que usted debe preocuparse.
Sólo por diversión, si vamos más aquí y haga clic en el API por su nombre,
podemos ver una lista de todos los cosa en la biblioteca SDL.
Así que todas estas funciones, enumeraciones, estructuras, una increíble cantidad de cosas,
orden alfabético.
Y claramente, hasta sabes que estás haciendo,
esto no va a ser demasiado útil, es por ello que hacemos API por categoría.
>> Así que vamos a empezar.
Esperemos que ya tienes descargado el código de distribución.
Y así, lo que puede hacer es, a la derecha aquí en el aparato CS50,
basta con abrir un terminal.
Aquí vamos.
Así que ya he descargado el código de distribución mediante el .zip
método.
Y he abrió la cremallera.
Así que aquí está en el maestro de seminario SDL.
Así que voy a entrar en ese directorio.
Y lo que vemos aquí es que tenemos siete archivos C.
Y esto va a el código vamos a estar buscando en la actualidad.
Tenemos un makefile.
Y tenemos un directorio de recursos, que simplemente tiene una imagen
que usted va a ver muy pronto.
>> Así que vamos a abrir estos archivos usando el editor de G-Edit.
Así que quiero abrir todos los archivos que comenzar con hola y terminar con .c.
Aquí vamos.
Así que eso es una pequeña ventana, así que estamos va a tratar de hacer que más grande.
No, se fue.
>> Correcto.
Así que aquí está la primera archivo que vamos a ver.
Se llama hello1_sdl.c.
Y todo esto hace es inicializar el SDL biblioteca para que podamos empezar a usarlo.
¿Cómo lo sabes por venir con este código a ti mismo?
Bueno, si miramos más en la documentación
y entramos en la inicialización y apagar la sección,
que va a decirnos todo acerca de cómo inicializar SDL.
Así que definitivamente leer esto en otro momento.
Se va a decir a todos ustedes acerca de lo que está pasando aquí.
Pero el quid de la cuestión principal es que tenemos que llamar a esta función SDL en él
y pasarlo qué tipo de cosas queremos que la biblioteca para inicializar.
Así que en nuestro caso, sólo vamos para inicializar el video por ahora,
para que podamos empezar a mostrar las imágenes.
>> Por aquí, se puede ver si hacemos clic en una SDL en él, nos
puede obtener aún más información, incluyendo el valor de retorno.
Así que vemos aquí que returnes cero en caso de éxito.
Así que en nuestro código, vamos a ver si no vuelve a cero,
y si no devuelve cero, por lo que no se ha realizado correctamente,
a continuación, vamos a simplemente de impresión un error usando esta otra función,
Error get SDL, que devuelve una cadena que describe el error que se ha producido.
Vamos a imprimir esa error y luego sólo somos
va a salir del programa con un código de error.
>> Luego otra cosa que necesitamos que hacer es, antes de programa se cierra,
si inicializado correctamente SDL, sólo tenemos que llamarlo SDL dejar de fumar.
Y eso va a manejar la limpieza todos los recursos internos de SDL para nosotros.
Así la documentación allí-- de nuevo, aquí estamos en la inicialización
y apagar la sección de la documentación.
Usted sólo puede hacer clic en la función aquí, SDL dejar de fumar,
y usted puede leer todo acerca de eso también.
Y muchas de estas funciones páginas de documentación
tener ejemplo de código, por lo que este es muy buen recurso.
Definitivamente pasar algún tiempo leer partes de esta wiki
si vas a hacer esto para un proyecto.
>> Correcto.
Así que eso es todo nuestro programa.
Lo que podemos hacer ahora es-- estoy va a abrir el archivo MAKE aquí,
así que me voy a tomar un ver cómo funciona.
Y es una muy simple makefile, similar a lo que has visto antes.
Una de las principales diferencias es que, aquí, esto
se va a insertar el resultado de la carrera este comando, que ya ha
instalado si ha instalado SDL.
Y este es un comando eso va a generar
algunas banderas adicionales para el compilador.
>> Además de eso, estamos dándole todos los comandos habituales, así como
estos dos comandos.
Así que los mangos -lsdl2-imagen la vinculación de la biblioteca de imágenes SDL.
Y el -lm en realidad se encarga de vinculación en la biblioteca matemática estándar C.
Así que no vamos a necesitar los de todos nuestros archivos de C,
pero nosotros sólo ponemos en lo que podemos utilizar el mismo archivo MAKE para todo,
sin modificaciones.
>> Aquí en las fuentes, este es el lugar donde quiere
poner los archivos que ibas compilar para su proyecto.
Pero ya que cada uno de mis C archivos de aquí tiene una función principal,
que va a confundirse si todos ponemos en.
Así que voy a decir simplemente, por ahora, hello1_sdl.c,
que es el que acabamos de ver.
Así que si vuelvo más aquí, que puedo hacer hacer.
Y lo que hizo es sólo compilado que primer archivo.
Y entonces podemos escribir ./game, porque que es el ejecutable que produjo.
Y todo lo que hizo fue de impresión inicialización éxito.
Así que hicimos algo bien.
Pero eso fue un poco aburrido, porque no vemos una ventana,
nada se movía.
>> Tan grande, llegamos SDL inicializado.
Ahora, vamos a pasar a algo un poco más interesante.
Así que aquí tenemos hello2_window.c, y esto va a ser un poco más
programa en C compleja que inicializa SDL al igual que antes,
excepto que ahora también vamos para inicializar el temporizador SDL.
Y esto nos va a permitir acceder al temporizador interno
y funciones de uso en relación con el tiempo.
>> Y luego vamos a ver aquí abajo.
Lo que hacemos es que tenemos este puntero a una ventana struct SDL, que
va a ser creado por la presente convocatoria a la función, SDL crear ventana.
Ahora, esto toma mucho de los argumentos, así que vamos a ir a buscar a la documentación.
Así que de nuevo, voy a API por categoría, estoy
bajar al video aquí, y la primera sección, que muestra la gestión de ventanas.
Así que esta sección tiene un montón de cosas en ella,
pero si se mira a través estas funciones, se le
ver que, probablemente, la que quieren que se llama SDL crear ventana,
que pasa a ser justo en la cima.
>> Y por lo que este es el documentación para esta función.
La ventana va a tener un título, una posición xey en la pantalla,
que va a tener una anchura, altura, y luego se va a tomar algunas banderas.
Ahora, en realidad no importa cualquiera de estas banderas en este momento,
pero si quería hacer algo como hacer una ventana de pantalla completa,
usted puede echar un vistazo a eso.
Por ahora, sólo vamos para utilizar estos valores especiales,
Ventana de SDL, más centrada para x e y con el fin
sólo crear la ventana en el centro de nuestra pantalla.
>> Así que eso es lo que está haciendo.
Y si la ventana pasa a ser nula, lo que significa que hay un error,
luego otra vez sólo vamos a imprimir el error utilizando error get SDL.
Y luego, ya hemos inicializado SDL, ahora tenemos que cerrarla.
Así que llamamos SDL renunció antes entrega de uno de principal.
>> Así que tenemos esta ventana abierta con suerte.
Y lo que vamos que hacer es que vamos
llamar SDL para 5.000 milisegundos, que es el mismo que cinco segundos.
Y cuando hayamos terminado con eso, que va a destruir la ventana,
limpiar la biblioteca SDL, y salir del programa.
Así que vamos a seguir adelante y darle que un tiro.
>> Así que ahora en lugar de cambiar el makefile cada vez,
Yo simplemente no puedo hacer, y a continuación, en la línea de comandos,
dicen las fuentes es igual y después el archivo que estamos compilando.
Así que es hello2_window.c.
Fantástico.
No hay erros.
Ahora bien, si corremos nuestra ejecutable, vemos esta ventana.
Ahora hay unos pocos problemas con la ventana.
Podemos moverlo, pero tiene esta basura de fondo dentro de la misma.
Así que no hemos dibujado nada, y por lo que es
sólo llena de basura, que es bastante más de lo que esperamos.
>> Por otra parte, no podemos cerrar la ventana.
Estoy presionando este X en la esquina y no pasa nada.
Así que veremos cómo arreglar que en un poco.
Así que vamos a arreglar la parte donde el ventana está llena de basura en primer lugar.
Así que si vamos a hello3_image.c, lo podemos ver es que hemos añadido unos cuantos
más cosas aquí.
Hemos añadido esta nueva cabecera presentar para obtener las funciones de temporizador.
Supongo que lo hicimos en el pasado uno, también, y yo no menciono.
Pero ahora porque somos trabajar con imágenes,
necesitamos incluir la SDL archivo de cabecera de imagen también.
Por lo que es lo mismo que antes, la inicialización de SDL aquí,
mismo acuerdo con la creación de ventanas.
Hemos visto que antes de ahora.
>> Ahora tenemos que crear algo que se llama un procesador, que tipo de va de la mano
con la ventana.
Pero es una especie de abstracto objeto que es
a cargo de hacer todo esto operaciones de dibujo a la ventana.
Y lo que realmente corresponde a un programa cargado
en el hardware de gráficos en su ordenador o el teléfono o lo que sea.
Así que las banderas que queremos pasar it-- y se puede ver en la documentación
para obtener más detalle aquí-- van SDL que se rinda acelerado, que
significa que va a ser utilizando el hardware de gráficos
y no sólo emulado en software.
>> Y vamos a utilizar SDL RENDERER PRESENTVSYNC.
VSYNC es una cosa que simplemente hace sus gráficos se ven mejor y evita
esta pantalla cosa llamada terror, donde la mitad
de una trama y un medio de la siguiente marco se ven inmersos en el mismo tiempo
y se ve horrible.
Pero, de nuevo, usted puede ir a leer de eso por su cuenta.
>> Así que tenemos algunas banderas aquí.
Y por lo que sólo vamos a llamar esta función SDL crear render.
Vamos a darle la ventana asociar con ese procesador.
Un aspecto negativo significa que no nos importa lo que controlador de gráficos que vamos a utilizar.
Así que en caso de más o menos siempre ser uno negativo,
a menos que sepa acerca de los controladores de gráficos.
Y entonces sólo vamos pasarlo nuestras banderas.
Así que si eso devuelve null, entonces estamos va a imprimir el error, como de costumbre,
pero entonces también vamos para destruir la ventana
para limpiar esos recursos antes llamando SDL dejar de fumar y volver.
>> Ahora, lo interesante aquí es donde nos cargamos nuestra imagen
utilizar esta función IMG_load.
Esta es la única función que vamos utilizar de la biblioteca de imágenes SDL.
Es el único que necesitamos.
Es una función que toma la cadena ese es el camino de cualquier recurso de imagen.
Y puede ser un .png, un GIF, mapa de bits, ninguna de estas cosas.
Y es por eso que esta función es tan agradable.
Se puede manejar casi cualquier formato.
Carga en la memoria y lo almacena como lo llama una superficie SDL.
>> Ahora una superficie SDL es meramente una estructura que representa los datos de imagen en la memoria.
Así que usted puede leer más sobre que en la documentación de dos.
Y si este error, entonces estamos vamos a hacer todo el asunto, donde
imprimimos el error, cerramos nuestra recursos y, a continuación, salir del programa.
Ahora lo interesante es, antes podemos sacar esta imagen a la ventana,
tenemos que hacer realmente una textura.
Ahora una textura corresponde a los datos de imagen cargados
en la memoria del hardware del gráfico.
>> Así que una superficie es en main la memoria, la memoria normal
que hemos estado usando todo el semestre, y una textura es en este VRAM separada
memoria que los controles de la tarjeta gráfica.
Así que llamamos a esta función SDL_CreateTextureFromSurface.
Le damos nuestro procesador y nuestra superficie.
Y entonces estamos realmente hecho con la superficie,
así que sólo vamos a liberarlo.
Nosotros no lo necesitamos más.
Y entonces lo que si esta llamada con error y volvió nula,
entonces nosotros vamos a hacer todo informe de errores cosa otra vez.
>> Correcto.
Aquí, nos metemos en algún funciones de renderizado reales.
Así que llamar SDL_RenderClear y pasándolo
el procesador asociado con la ventana simplemente hace que la ventana ve negro.
Por lo tanto, elimina esa basura que vio en nuestra ventana antes y hace que sea negro.
Y luego vamos llamar SDL_RenderCopy,
darle nuestro procesador, nuestra textura.
Y vamos a hablar de lo que estos campos están en un poco.
Pero eso va a tomar los datos de textura
y copiarlo en nuestra ventana para dibujar la imagen.
Así que después de lo que hemos hecho esta copia los datos en nuestra ventana,
que tenemos que hacer esta función adicional llamada SDL_RenderPresent.
>> Y esto es interesante porque esto se pone
en un tema llamado doble buffer.
Así que el búfer doble es una técnica que hace que sus gráficos se ven mucho mejor.
Una vez más, impide que el desgarro de pantalla Yo estaba hablando de antes, donde
tiene dos buffers.
Hay una memoria intermedia de vuelta en memoria y un tampón frontal.
El tampón frente es literalmente lo que está en la pantalla en el momento.
Así que hacemos todas estas variaciones se basan, como SDL hacer copia o SDL_RenderClear
a la memoria intermedia de vuelta.
Así que se modifican las cosas en el búfer de reserva.
Aquí podríamos estar dibujando este cuadrado verde en el búfer de espalda.
>> Así que cuando terminemos haciendo nuestros render operaciones, que
podría tomar un tiempo muy largo tiempo, ¿qué vamos a hacer
es cambiar los amortiguadores.
Así que, literalmente, sólo toma el búfer frontal y el búfer de reserva
y los interruptores, por lo que, instantáneamente,
en una sola operación, en lugar de tal vez cientos o miles,
todo nuestro recién prestados con objetos sobre la pantalla.
Y esto impide que las cosas como el refrescante pantalla
medio cuando sólo hemos dibujado de nuestros objetos para el marco.
Así que por eso tenemos que llamar SDL_RenderPresent, así
como SDL_RenderCopy.
>> Una vez más, sólo vamos que esperar cinco segundos.
Entonces vamos a limpiar nuestros recursos.
Tenemos unos cuantos más en esta ocasión.
Y entonces sólo vamos para salir del programa.
Así que vamos a hacer eso.
Voy a escribir marca, y luego las fuentes es igual a hello-- esto es ahora 3image.c.
Muy bien, que compila sin errores.
Y se puede ver aquí tengo ahora sacado mi imagen, Hola, CS50!
a nuestra ventana, que desaparece después de cinco segundos.
>> Ahora, esto todavía tiene problemas, ¿verdad?
Esto no es una buena aplicación, porque cuando trato de cerrar la ventana,
no pasa nada.
Eso x todavía no responde.
Así que echemos un vistazo a la siguiente archivo, hello4animation.
Así que este es el archivo eso va a introducir
movimiento y movimiento a nuestra imagen.
Así que vamos a hacer lo lo mismo que antes,
iniciar SDL, cree el ventana, crear el procesador,
cargar la imagen en memoria, crear la textura.
Hemos visto todo esto antes.
Ahora, esto es nuevo.
Vamos a tener una estructura llamada un rect SDL, que es sólo un rectángulo.
Si vamos por aquí, podemos hacer una búsqueda de SDL rect,
y se puede ver que es un estructura muy simple.
Cuenta con una x, a y para la posición, y
tiene una anchura y una altura de el tamaño del rectángulo.
>> Entonces, ¿qué vamos a hacer es que estamos va a definir esta SDL rect dest,
para el destino.
Y este es el lugar en la pantalla donde
vamos a estar llegando nuestra imagen, a la derecha Así
si vamos a ser moviendo la imagen alrededor,
entonces el destino donde vamos a dibujar la imagen
deberán moverse.
Así que vamos a llamar a este SDL_QueryTexture función.
Y noto que estoy pasando la dirección de dest.w, que es el ancho,
y dest.h, que es la altura.
Y así SDL_QueryTexture va almacenar en esos campos de la anchura
y la altura de nuestra textura.
>> Y entonces lo que voy que hacer es que voy
para establecer dest.x ventana para ser dest.w menos anchura, que es
la anchura de la sprite, dividido por 2.
Y esto va a configurarlo para que la imagen está perfectamente centrada
en nuestra ventana, ¿de acuerdo?
Así que ahora tengo una posición y.
Y esto va a ser una variable que es
cambiar, porque vamos a ser mover la imagen en la dirección y.
Y ahora tenemos algo llamado un bucle de animación.
>> Entonces, ¿cómo funciona la animación?
Bueno, ojo humano puede detectar 12 distinta imágenes en cada segundo, ¿de acuerdo?
Así que si usted flash 12 tarjetas de imagen de mí en un segundo, vi a cada una de esas imágenes
como su propia imagen individuo distinto.
Ahora, si usted flash más imágenes a mí en un segundo,
entonces mi ojo empezaría a desdibujar juntos
y me percibirlo como movimiento, en lugar de una imagen distinta.
Así, por ejemplo, las películas y la televisión, parpadean imágenes en usted 24 veces
un segundo.
Así que eso es 24 fotogramas por segundo.
Las pantallas de ordenador, por otro lado, a menudo son a 60 cuadros por segundo.
Esa es su velocidad de refresco.
Esa es la frecuencia con que se actualizan la imagen en la pantalla.
Así que nuestro objetivo va a ser 60 fotogramas por segundo para nuestros juegos.
>> Así que vamos a ver que en el código.
Así que para cada cuadro, estamos primero va a borrar la ventana.
Este es el patrón general.
Siempre se desactiva la ventana de cada cuadro, y luego
hacer todo de su dibujo operaciones, y luego, al final,
Qué RenderPresent para mostrar todo en el marco.
Y luego vas a tener que esperar al final
que esperar hasta la próxima marco debe comenzar.
>> Así que si yo estaba haciendo una gran cantidad de computación compleja aquí
que tuvo más de 16 milisegundos, sería imposible para mí
para conseguir que la velocidad de fotogramas de 60 que Yo quería, porque cada cuadro es
tomando demasiado tiempo para calcular.
Además, realmente estamos haciendo tipo de una cantidad insignificante de trabajo
aquí, porque sólo hay una cosa que estamos dibujando.
Así que sólo espero 1/60 de segundo, que es la longitud
de una trama en entre fotogramas.
Así que estoy especie de pretender hacer todo mi trabajo requiere tiempo cero.
Pero en un juego real, habría que restar
la cantidad de tiempo que se tardó en hacerlo todo este trabajo de su tiempo de descanso.
>> Así que de todos modos, ¿qué soy yo realmente hacer en este circuito?
Me aclaro la ventana.
Puse el dest.y, que es un int a mi posición real y echado en un int.
Ahora, quiero flotar resolución para mi y posición en mi juego,
pero entonces para realmente dibujar en la pantalla,
que necesita enteros, porque es en unidades de píxeles, por lo que eso es lo que el elenco es para.
Voy a dibujar la imagen.
Así que este es el rectángulo de origen.
Y este es el rectángulo de destino.
Así que pasé nulo para rectángulo de origen
para decir quiero llamar toda mi textura.
Pero si había un montón de texturas en su juego
y todos están en un gran mapa de textura que se cargó en SDL como una sola
textura, pudieras utilizar un rectángulo de origen
para recoger una de las texturas más pequeñas, uno de los sprites más pequeñas,
fuera de ese gran mapa de textura.
>> Así que de nuevo, estoy pasando mi render, mi textura, y ahora el destino.
Esto va a ser donde en el ventana que va a ser dibujado.
Y luego, porque me estoy animando algo, necesito movimiento,
Voy a ser la actualización del posición de sprites en cada fotograma.
Así que tengo esta llamada de desplazamiento constante acelerar en unidades de píxeles por segundo.
Ahora, cada vez que hacemos un movimiento, el marco es solamente 1/60 de segundo.
Así que voy a dividir que por 60.
Y luego, vamos a ver, yo soy restando que a partir de la posición y.
¿Por qué estoy restando?
Vamos a llegar a eso en un segundo.
Así que puedo limpiar mis recursos y el programa ha terminado.
>> Así que vamos a hacer eso.
Así que vamos a ir a maquillaje MLRS = hello4 animation.c, ¿de acuerdo?
Juego.
Hay que ir.
Así que tengo que desplazarse hasta la ventana, que es bastante ordenada.
Pero espera, que estaba restando desde la posición y cada vez.
¿Que esta pasando ahí?
Bueno, resulta que en SDL, y de hecho, en la mayoría de los gráficos por ordenador,
el origen del sistema de coordenadas es la parte superior izquierda de la ventana.
>> Así que la dirección x positiva va a través de la ventana a la derecha.
Y la dirección y positiva en realidad disminuye.
Así que de nuevo, en el origen la parte superior izquierda de la ventana,
dirección positiva es hacia abajo, yx positivo es hacia la derecha.
Así que cuando le resto de la posición y, eso es
va a hacer que se vaya en lo negativo y dirección, que es la ventana.
Así que eso es lo que está pasando allí.
Guay.
>> Echemos un vistazo a la siguiente foto.
Aquí está la parte de la mostrar donde finalmente
conseguir que la X en la esquina de la ventana que se supone para cerrar la ventana
trabajar.
Entonces, ¿qué está pasando?
Inicializamos SDL, crear la ventana, crear el procesador, cargar la imagen,
crear la textura como hemos visto antes.
Tenemos el mismo rectángulo de destino como antes, misma llamada para consultar textura.
Pero esta vez, estamos entonces va a dividir el ancho
y la altura de nuestro destino por 4.
Esto sólo tiene el efecto de escalar nuestra imagen hacia abajo cuando
mostramos en la ventana por cuatro.
Así que eso es bastante ordenada.
Sólo podemos escalar así como así.
Vamos a empezar el sprite en el centro de la pantalla.
Y ahora tenemos x y velocidad y, y que están tanto va a empezar de cero.
>> Este es el archivo incorrecto.
Lo siento.
Así que eso es cierto.
Eso es todo aún en este archivo.
Tenemos el dividir por 4 y todo.
Así que aquí tenemos nuestra xey posición para el centro de la ventana.
Y le damos una velocidad inicial de esta velocidad constante, lo cual
Creo que es de 300 píxeles por segundo.
Ahora, tenemos este int podríamos igual de bien ser un booleano llamado cerca solicitada.
Y en vez de hacer una bucle infinito en un temporizador aquí,
vamos a ser como la animación siempre y cuando cierre no se solicita.
>> Entonces, ¿cómo procesamos eventos?
Bueno, SDL pone en cola los eventos de una cola literal detrás de las escenas.
Y entonces cada trama, podemos quitar de la cola de eventos
desde esa cola utilizando este SDL_PullEvent llamada.
Y de nuevo, sin duda ve a leer sobre esto en la documentación.
Hay mucho más detalle y un montón más funciones que se pueden utilizar con este.
Nos pasamos la dirección de esta cosa, SDL_Event
que tenemos aquí en la pila.
>> Ahora, ¿qué es un SDL_Event?
Debido a SDL, si nos fijamos en los documentation-- vamos
ver, API por categoría, de entrada eventos, manejo de eventos,
podemos mirar el número de diferentes eventos aquí
y podemos ver que hay todo un montón de ellos.
Entonces, ¿qué es esta cosa SDL_Event?
SDL_Event es una unión.
Wow, ¿qué es un sindicato?
Tienes que probablemente nunca oído hablar de eso antes.
Y eso está bien.
>> Un sindicato es una especie de una estructura, a excepción de una estructura
tiene un espacio para todos sus campos y la memoria,
mientras que un sindicato sólo tiene espacio suficiente para adaptarse a la mayor
uno de sus campos, lo que significa que sólo puede almacenar uno de sus campos
a la vez, qué tipo de tiene sentido para eventos, ¿verdad?
Podemos tener un teclado evento o un evento de ventana,
pero un solo evento no puede ser a la vez un evento de teclado y un evento de ventana,
así que sería tonto tener espacio para tanto de los que están dentro de nuestra unión evento.
Así que si usted quería crear su propio sindicato,
se ve exactamente el mismo como la creación de una estructura,
excepto que se utiliza la palabra clave union en lugar de la palabra clave struct.
Y recuerda, por la totalidad de la cosas dentro de su sindicato,
la variable real que es la unión sólo puede tener uno de esos valores
a la vez.
>> Entonces, ¿cómo podemos saber qué tipo de evento nos metimos fuera de esta cola?
Bueno, podemos probar Event.type.
Y si eso es igual a SDL_Quit, sabemos
es el caso de que se generó cuando
golpear esa X en la esquina de la ventana.
Y podemos establecer estrecha solicitada es igual a 1.
El resto es sólo un poco de animación que has visto antes.
Así que vamos a seguir adelante y hacer esto y ver lo bien que funciona.
Así que voy a escribir marca y entonces MLRS = hello5_events.c.
Allá vamos.
Juegos.
>> Ahora, podemos ver que era de hecho reducido por cuatro.
Y ahora está rebotando.
Tengo un poco de detección de colisiones pasando con los lados de la ventana
que podemos echar un vistazo a.
¿Y qué pasa cuando voy a cerrarla?
Cierra.
Fantástico.
Recibimos ese evento.
Y lo manejamos.
>> Así que vamos a mirar hacia atrás en el código.
Entonces, ¿cómo lo consigo rebotando así?
Recuerde me puse ambos xy y inicialmente a las velocidades.
Y la velocidad es positiva constante, por lo que es
va a lograr que se está comenzando ir hacia abajo ya la derecha.
>> Ahora, cada trama, además de la manipulación cualquier evento que pueda haber ocurrido,
Voy a detectar si mi sprites está tratando de salir de la ventana.
Por lo que podemos hacer eso con sólo comprobar x_pos con 0, pos_y 0, a continuación,
también x_pos y pos_y con anchura de la ventana y altura de la ventana.
Nótese que he resté el ancho del sprite.
Y esto se debe a que si no lo hacía restar la anchura del sprite,
sólo sería comprobar que el origen del sprite
no ir fuera de la ventana.
Pero queremos que la totalidad ancho del sprite
para estar siempre dentro de la ventana y toda la altura del sprite
para estar siempre dentro de la ventana.
Así que eso es lo que la resta es para.
Una gran cantidad de geometría aquí puede ser de utilidad para sacarlo
en papel con la coordenada sistema para ver lo que está pasando.
>> Así que si me chocan, yo sólo simplemente restablecer la posición
de manera que no se va fuera de la pantalla.
Y yo voy a, si rebota en una de las paredes laterales,
Voy a negar la x velocidad de modo que
comienza rebotando en la otra dirección.
Y de manera similar, si golpea la parte superior o inferior,
Voy a establecer la velocidad y igual a la velocidad y negativa,
de manera que se va a recuperar.
Así que eso es lo que tenemos eso aquí.
>> Y las posiciones de actualización al igual que hemos visto antes,
dividir por 60, porque somos solamente el manejo de 1/60 de un segundo.
Y entonces la representación, exactamente el mismo que antes.
Y eso es todo que iba en este archivo.
Así que eso es lo que hacemos eventos.
Lo principal para llevar aquí Es esta función SDL_PullEvent.
Y usted debería leer el documentación más sobre SDL_Event
el sindicato, ya que este tipo de datos es muy, muy importante, porque la usamos
para todo tipo de eventos.
>> Por ejemplo, la utilizamos para el teclado eventos, que es lo que este archivo es para.
¿Entonces que tenemos?
Tenemos el mismo que antes, inicializar SDL, crear una ventana,
crear un render, cargar la imagen en la memoria, crear la textura.
Una vez más, vamos a tener este dest rectángulo,
vamos a escalar la imagen por cuatro, que sea un poco más pequeño.
Ahora, vamos a iniciar el sprite en el centro de la pantalla.
Pero esta vez, vamos a establecer el x y velocidades iniciales Y a cero,
debido a que el teclado es va a controlar esos.
Y, además, vamos a realizar un seguimiento de estas variables
arriba, abajo, izquierda y derecha.
Y eso va a seguir seguimiento de si nos hemos
presiona los botones del teclado que corresponden a arriba, abajo, izquierda,
y la derecha.
>> Ahora, esto es una especie de lujo porque podemos usar W, A, S,
D aquí, o las teclas de flecha reales.
Vamos a ver que en tan sólo un segundo.
Así que vamos a procesar el evento al igual que antes.
Tiramos el evento.
Pero ahora vamos a cambiar el tipo de evento.
Si es SDL_Quit, estamos va a establecer cerca
solicitado a uno, al igual que antes.
Que se encarga de las x en la esquina de la ventana,
de manera que nuestra ventana en realidad se cierra.
>> De lo contrario, si conseguimos una clave SDL abajo acontecimiento, lo que significa que pulsa una tecla,
entonces lo que vamos a hacer es que estamos va a cambiar en esta cosa aquí,
que designa todas lo event.key significa tratar a nuestra unión evento,
ir a buscar la llave estructura de eventos en el mismo.
Así que resulta que esta unión es una estructura evento clave.
Y luego ir a la clave La estructura del evento su campo
llamada keysym y luego scancode.
Y de nuevo, sin duda leer la documentación sobre esto.
Entradas de palabras clave muy interesante.
Usted puede obtener los códigos de exploración o códigos clave.
Y es un poco sutil, pero la documentación es bastante bueno.
>> Así que si vemos el código de exploración para nuestra prensa clave es W o arriba,
vamos a configurar igual a 1.
Y entonces salimos de ese interruptor.
Si se trata de una o de izquierda, que ajuste la izquierda a 1, et etc., etc., por abajo ya la derecha.
Ahora, en este interruptor externo, si vemos una llave hasta acontecimiento,
eso significa que hemos lanzado una clave y ya no estamos presionando.
Así que voy a decir por igual a 0, izquierda es igual a 0, abajo es igual a 0, a la derecha
es igual a 0, etcétera.
>> Y note que tenemos en cada una de ellas dos casos ponen uno al lado del otro
sin código separado para el primer caso, que
significa que si se trata de un S o un abajo a la derecha aquí,
que va a ejecutar este código.
Así que eso es bastante práctico.
Impide que tengamos que hacer más condiciones y ifs y cosas
como eso.
>> Así que vamos a determinar la velocidad.
Fijamos la velocidad a 0.
Entonces, si se presiona hasta y no hacia abajo, entonces nosotros
ajustar la velocidad y a la velocidad negativa.
Recuerde negativo, debido a que el dirección y negativo es hacia arriba.
Y la dirección positiva es hacia abajo.
Si se presiona hacia abajo y no hacia arriba, entonces estamos
va a ponerlo en velocidad positiva, lo que significa que va abajo de la pantalla.
Lo mismo con la izquierda y la derecha.
>> Y luego vamos a actualizar las posiciones igual que antes.
Vamos a hacer de colisión detección con límites,
pero nosotros no vamos a restablecer el velocidad, porque la velocidad es sólo
controlado por el teclado.
Pero vamos a restablecer el posiciones para mantenerlo en la ventana.
Y vamos a establecer el posiciones en la estructura
y luego hacer todo el haciendo cosas de antes.
Así que vamos a ver lo que hace.
Así hacen SRCS-- vamos a ver, esto es hello6_keyboard.c.
>> Oh, no.
Así que nos dio algunas advertencias aquí.
Y eso es simplemente decir que no lo hicimos comprobar si cada tipo posible
de evento.
Eso está bien, porque hay 236 de ellos o así.
Así que voy a ignorar esas advertencias.
Todavía está compilado bien.
Así que voy a jugar el juego.
No se mueve.
Pero ahora, cuando me puré en mi teclado, Yo puedo hacer algún movimiento WASD aquí,
Utilizo mis teclas de dirección también.
Y noto, aunque soy presionando la derecha en este momento,
no va por la ventana, porque puedo restablecer en cada fotograma.
Así que eso es bastante ordenada.
Usted puede imaginar moverse con Mario algunas teclas de flecha o algo por el estilo.
Y sí, el X funciona.
>> Archivo Así definitiva vamos a la vista, hellow7_mouse.
Se trata de conseguir la entrada del ratón.
Así que en éste, nos importar el encabezado de matemáticas,
porque vamos a tener un poco de matemáticas aquí.
El mismo viejo, el mismo viejo cosas, destino, misma edad, visto eso antes.
Bueno, esto es interesante.
Así que estamos de vuelta a la única comprobación para el SDL dejar evento.
¿Porqué es eso?
Así que usted puede conseguir la entrada del ratón de eventos.
Como cuando el ratón se movía, se obtiene un evento para eso.
Cuando se pulsa un botón del ratón, usted puede conseguir un evento para eso.
>> Pero hay otra, un poco más sencillo tal vez, API para conseguir la entrada del ratón.
Y eso es simplemente el estado get ratón SDL.
Así que tengo un int para xy y de la posición del cursor.
Paso a SDL_GetMouseState, que establece estos.
Y esta es la posición en el sistema de la ventana de coordenadas.
Así que si la masa está en la parte superior izquierda de la ventana, que sería 0, 0.
>> Ahora, lo que voy a hacer es que voy hacer un poco de matemáticas de vectores.
Apuesto a que pensó que no lo haría ver que en CS50, pero aquí está.
Voy a hacer un poco de vector matemáticas para obtener el vector
a partir de la imagen para el cursor.
Y así, ¿por qué tengo esta resta aquí?
Bueno, si acabo de utilizar dest .-- así Necesito traducir el ratón x
e y por medio la anchura y la altura de la imagen,
porque quiero que el centro de la imagen que se va hacia el ratón,
no el origen de la imagen.
>> Así que eso es sólo para asegurarse de que estoy hablando alrededor del centro de la imagen aquí.
Entonces conseguimos delta x e y, que es la diferencia de la diana
a la posición real de la imagen.
Y entonces podemos obtener la distanciarse aquí, que
va a ser de Pitágoras teorema, raíz cuadrada de x
por x más veces y y.
>> Ahora, para evitar que la inquietud, y puedo mostrar usted lo que esto hace, si no hago esto,
si la distancia entre el cursor y el centro de la imagen es inferior a cinco,
Yo no voy a mover la imagen.
De lo contrario, nos pusimos en la velocidad.
Y hemos creado para que el la velocidad será siempre constante.
Y el resultado neto de todo este matemáticas es que la imagen
va a avanzar hacia el cursor.
>> Ahora, resulta que SDL_GetMouseState,
además de establecer la x y argumentos esta opción,
también devuelve un int que corresponde con el estado de los botones del ratón.
Así que no podemos leer que directamente, pero podemos
utilizar estas macros, una sola operador de bits, no es que da miedo,
sólo un bit a bit y.
Por eso decimos botones, que es el resultado de nuestra SDL_GetMouseState, si eso
y bit a bit y, esta macro aquí, SDL_BUTTON_LEFT.
>> Así que esto va a resolver simplemente al mapa de bits que corresponde
al botón izquierdo del ratón está presionado.
Y así, si el bit a bit y se produce y es
no es cero, lo que significa Se ha pulsado el botón izquierdo,
entonces estamos realmente va a negar tanto la x y la y velocidades,
que acaba de hacer el fuera de control de imagen.
Actualizar posiciones.
Colisiones detecciones, visto todo antes, lo que hace, está bien.
Hagámoslo.
Así que tienes que MLRS = hello7_mouse.c.
Excelente.
No hay errores.
Y juego.
>> Así que aquí tengo mi ratón.
Y la imagen es de hecho persiguiendo mi ratón.
Ahora, en un juego que usted hace, tal vez esto es como una persecución enemiga
su pequeño personaje o lo que sea.
Pero aquí tenemos la imagen persiguiendo al ratón.
Y cuando hago clic en el ratón comienza persiguiendo la imagen
y la imagen es huyendo de ratón.
Así que eso es muy bueno.
Y aviso de nuevo, no es siendo la detección de colisiones aquí.
>> Así que ese es el pequeño definitiva Demo he puesto aquí.
Y vamos a echar un vistazo a una cosa más.
Así que de vuelta aquí, he mencionado esto jitter.
Correcto.
Así que si la distancia es de menos de cinco píxeles, Yo estaba sentado x e y la velocidad a cero.
¿Qué sucede si nos deshacemos de eso?
Así que me voy a hacer esto solo.
Por favor, disculpe este estilo horrendo, pero comentamos el código correcto.
Así que voy a guardar eso y hacer lo mismo comando de delante para hacerlo.
>> Correcto.
Y ahora ¿qué pasa?
Bueno.
Todavía estamos siguiendo el ratón al igual que antes,
pero cuando llegamos al ratón, tenemos esta fluctuación bruto.
¿Que esta pasando ahí?
Pues bien, en nuestro vector matemáticas, recordamos que éramos
teniendo la distancia entre el cursor y el centro de la imagen?
Bueno, como que se acerca 0, comenzamos a conseguir
al igual que este tipo de comportamiento loco donde la imagen es una especie de
como oscilando alrededor del cursor.
Y eso es la creación de esta fluctuación.
Y eso es muy feo.
Y es probable que no lo hace quiere que sus juegos de hacer eso,
a menos que sea algún tipo de efecto especial.
>> Así que es por eso que tenemos sólo por esta arbitraria
cortamos de cinco píxeles, donde decimos si se trata de un plazo de cinco píxeles, estamos bien.
No necesitamos para mover la imagen más.
Así que eso es lo que está pasando allí.
>> Así que eso es prácticamente todo.
Ahora ya sabe cómo crear una ventana, cargar una imagen,
dibujar una imagen a la ventana, obtener entrada de teclado, obtener la entrada del ratón,
hay un montón de otras de entrada que no lo haría
saber como llegar si usted acaba de pasar una unos minutos mirando documentación.
Así que realmente tiene un buen pocas herramientas a su disposición ahora
para escribir un juego en toda regla.
>> Ahora, cada juego necesita un poco de audio, pero la documentación de audio
también es bastante bueno.
Y estoy dispuesto a apostar que si usted entiende todas las cosas
hemos hablado hoy con las imágenes y las superficies,
las ventanas, y todo, entonces averiguar la API de audio no es
va a ser tan malo.
Así que espero ver lo que creas con SDL.