desarrollo de juegos de video aprendiendo a programar en c# de manera divertida sesión 5:...
TRANSCRIPT
![Page 1: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/1.jpg)
Desarrollo de juegos de Desarrollo de juegos de videovideoAprendiendo a programar en C# de manera Aprendiendo a programar en C# de manera divertidadivertida
Sesión 5: Transformación y colisión de Sesión 5: Transformación y colisión de spritessprites
[email protected]@logicstudio.net
![Page 2: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/2.jpg)
Objetivos de esta serieObjetivos de esta serie
Dar a los participantes una introducción a Dar a los participantes una introducción a algunos de los conceptos fundamentales del algunos de los conceptos fundamentales del desarrollo de juegosdesarrollo de juegos
Introducir la programación con Visual C# 2005 Introducir la programación con Visual C# 2005 Express Edition, el nuevo IDE (ambiente de Express Edition, el nuevo IDE (ambiente de desarrollo integrado) de Microsoft para desarrollo integrado) de Microsoft para programadores principiantesprogramadores principiantes
![Page 3: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/3.jpg)
Visión de esta sesiónVisión de esta sesión
Sesión 5/8 – Transformaciones, Sesión 5/8 – Transformaciones, colisiones y velocidad en los spritescolisiones y velocidad en los sprites
TransformaciónTransformación
ColisiónColisión
VelocidadVelocidad
![Page 4: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/4.jpg)
TransformacionesTransformaciones
TraslacionesTraslaciones
RotacionesRotaciones
EscalamientoEscalamiento
![Page 5: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/5.jpg)
TraslacionesTraslaciones
Una transformación de traslación se Una transformación de traslación se aplica a un objeto reposicionándoloaplica a un objeto reposicionándolo
En esencia, moviéndolo de una En esencia, moviéndolo de una coordenada a otra a lo largo de una coordenada a otra a lo largo de una línea rectalínea recta
![Page 6: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/6.jpg)
TraslacionesTraslaciones
ttxx y t y tyy se denominan las se denominan las distancias de distancias de traslacióntraslación a lo largo de los ejes x e y a lo largo de los ejes x e y
T(tT(txx,t,tyy) es llamado el ) es llamado el vector de vector de traslacióntraslación
![Page 7: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/7.jpg)
RotacionesRotaciones
Las rotaciones rotan un punto a lo largo Las rotaciones rotan un punto a lo largo de una ruta circularde una ruta circular
Para especificar una transformación de Para especificar una transformación de rotación necesitamos:rotación necesitamos:
Un ánguloUn ángulo
Un punto pivote (referencia para la Un punto pivote (referencia para la rotación)rotación)
Un eje de rotación (En 2D, el eje es Un eje de rotación (En 2D, el eje es perpendicular al plano x-y, o sea el eje z)perpendicular al plano x-y, o sea el eje z)
Especificar un ángulo de rotación positivo Especificar un ángulo de rotación positivo (contra agujas de reloj) o negativo (agujas (contra agujas de reloj) o negativo (agujas de reloj)de reloj)
![Page 8: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/8.jpg)
RotacionesRotaciones
Nótese como un ángulo de rotación Nótese como un ángulo de rotación positivo rota el punto contra agujas de positivo rota el punto contra agujas de reloj y un ángulo de rotación negativo reloj y un ángulo de rotación negativo rota el punto a favor de las agujas de rota el punto a favor de las agujas de relojreloj
![Page 9: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/9.jpg)
EscalamientoEscalamiento
El escalamiento altera el El escalamiento altera el tamañotamaño de los de los objetosobjetosEn 2D, se requiere dos En 2D, se requiere dos factores de factores de escalamientoescalamiento, s, sxx y s y syy
Estos factores escalan al objeto en las Estos factores escalan al objeto en las direcciones x e ydirecciones x e yEl escalamiento se hace multiplicando las El escalamiento se hace multiplicando las coordenadas x-y de cada vértice del objeto coordenadas x-y de cada vértice del objeto por sus factores de escalamientopor sus factores de escalamientoPor ejemplo, si tenemos el vértice en (x,y), lo Por ejemplo, si tenemos el vértice en (x,y), lo escalaríamos de esta manera:escalaríamos de esta manera:
x’ = sx’ = sx x ●● x xy’ = sy’ = sy y ●● yy
Si sSi sx = x = ssyy tenemos un escalamiento uniforme tenemos un escalamiento uniforme
![Page 10: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/10.jpg)
Colisión rectangularColisión rectangular
Cada cuadro es Cada cuadro es una imagen una imagen rectangularrectangular
El rectángulo El rectángulo define los límites define los límites del spritedel sprite
Calculando las Calculando las posiciones de dos posiciones de dos sprites sprites (rectángulos), se (rectángulos), se puede determinar puede determinar si hay una colisiónsi hay una colisión
![Page 11: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/11.jpg)
Detección de una colisión o Detección de una colisión o intersecciónintersección
El límite de la primera caja limitante está El límite de la primera caja limitante está determinado por L=1, B=1, R=3, T=3determinado por L=1, B=1, R=3, T=3
El límite de la segunda caja limitante está El límite de la segunda caja limitante está determinado por L’=2, B’=2, R’=4, T’=4determinado por L’=2, B’=2, R’=4, T’=4Hallar lo siguiente:Hallar lo siguiente:
Max(L, L’) = Max(1,2) = Max(L, L’) = Max(1,2) = 22
Max(B, B’) = Max(1,2) Max(B, B’) = Max(1,2) = 2= 2
Min(R, R’) = Min(3,4) = Min(R, R’) = Min(3,4) = 33
Min(T, T’) = Min(3,4) = Min(T, T’) = Min(3,4) = 33
![Page 12: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/12.jpg)
Detección de una colisión o Detección de una colisión o intersecciónintersección
Las dos cajas limitantes se intersecan si:Las dos cajas limitantes se intersecan si:Max(Max(L, L’) - Min(R, R’), Max(B, B’) - Min(T, T’)) Max(Max(L, L’) - Min(R, R’), Max(B, B’) - Min(T, T’)) <= 0<= 0
Max(2-3, 2-3) <= 0Max(2-3, 2-3) <= 0
Max(-1, -1) <= 0Max(-1, -1) <= 0
-1 <= 0, luego hay intersección-1 <= 0, luego hay intersecciónLas dos cajas limitantes Las dos cajas limitantes se intersecan y forman un se intersecan y forman un nuevo rectángulo: L=2, nuevo rectángulo: L=2, B=2, R=3, T=3B=2, R=3, T=3
![Page 13: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/13.jpg)
Detección de una colisión o Detección de una colisión o intersecciónintersección
El El límitelímite de la primera caja limitante está de la primera caja limitante está determinada por: L=1,2, B=1, R=2,8, T=2,6determinada por: L=1,2, B=1, R=2,8, T=2,6
El límite de la segunda caja limitante está El límite de la segunda caja limitante está determinada por: L=3,6, B=3, R=5,3, T=4,5determinada por: L=3,6, B=3, R=5,3, T=4,5Encontrar lo siguiente:Encontrar lo siguiente:
Max(L, L’) = Max(1,2, 3,6) Max(L, L’) = Max(1,2, 3,6) = 3,6= 3,6
Max(B, B’) = Max(1, 3) = 3Max(B, B’) = Max(1, 3) = 3
Min(R, R’) = Min(2,8, 5,3) = Min(R, R’) = Min(2,8, 5,3) = 2,82,8
Min(T, T’) = Min(2,6, 4,5) = Min(T, T’) = Min(2,6, 4,5) = 2,62,6
![Page 14: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/14.jpg)
Detección de una colisión o Detección de una colisión o intersecciónintersección
Las dos cajas limitantes se intersecan si:Las dos cajas limitantes se intersecan si:Max(Max(L, L’) - Min(R, R’), Max(B, B’) - Min(T, T’)) Max(Max(L, L’) - Min(R, R’), Max(B, B’) - Min(T, T’)) <= 0<= 0
Max(3,6 – 2,8, 3 – 2,6) <= 0Max(3,6 – 2,8, 3 – 2,6) <= 0
Max(0,8, 0,4) <= 0,8Max(0,8, 0,4) <= 0,8
0,8 > 0, luego no hay intersección0,8 > 0, luego no hay intersecciónLas dos cajas limitantes Las dos cajas limitantes no forman un nuevo no forman un nuevo rectángulo puesto que el rectángulo puesto que el resultado es positivoresultado es positivo
![Page 15: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/15.jpg)
Sistemas de coordenadas Sistemas de coordenadas diferentesdiferentes
Un sistema de coordenadas de pantalla Un sistema de coordenadas de pantalla tiene la parte superior izquierda en (0, tiene la parte superior izquierda en (0, 0):0):
![Page 16: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/16.jpg)
Sistemas de coordenadas Sistemas de coordenadas diferentesdiferentes
La misma ecuación de la sección anterior se La misma ecuación de la sección anterior se aplica con las siguientes observaciones:aplica con las siguientes observaciones:
Nada cambia con respecto a la izquierda y derechaNada cambia con respecto a la izquierda y derecha
Puesto que el techo es menor que el fondo:Puesto que el techo es menor que el fondo:Max(B, B’) debe convertirse en Min(B, B’)Max(B, B’) debe convertirse en Min(B, B’)
Min(T, T’) debe convertirse en Max(T, T’)Min(T, T’) debe convertirse en Max(T, T’)
Así que la ecuación final es:Así que la ecuación final es:Max(Max(L, L’) – Min(R, R’), Min(B, B’) – Max(T, T’)) <= 0Max(Max(L, L’) – Min(R, R’), Min(B, B’) – Max(T, T’)) <= 0
![Page 17: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/17.jpg)
Sistemas de coordenadas Sistemas de coordenadas diferentesdiferentes
![Page 18: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/18.jpg)
VelocidadVelocidad
El vector velocidad V(x, y) describe la El vector velocidad V(x, y) describe la velocidad y la dirección de un objeto en velocidad y la dirección de un objeto en movimientomovimientoVelocidadVelocidad
La velocidad es la magnitud de V(x, y)La velocidad es la magnitud de V(x, y)Ejemplo:Ejemplo:
DirecciónDirecciónLos vectores unitarios son vectores que tienen Los vectores unitarios son vectores que tienen longitud uno y se usan para indicar la direcciónlongitud uno y se usan para indicar la direcciónEjemplo: uv(x/L, y/L) dónde L es la distancia desde Ejemplo: uv(x/L, y/L) dónde L es la distancia desde el origenel origen
![Page 19: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/19.jpg)
VelocidadVelocidadDirección de un sprite usando coordenadas Dirección de un sprite usando coordenadas vectorialesvectoriales
Obtener la longitud L del vector (x, y)Obtener la longitud L del vector (x, y)
El vector unitario es:El vector unitario es:X = x/LX = x/L
Y = y/LY = y/L
Usando el sistema de coordenadas descrito Usando el sistema de coordenadas descrito anteriormenteanteriormente
X = x/LX = x/L
Y = -y/LY = -y/L
![Page 20: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/20.jpg)
Resumen de la sesiónResumen de la sesión
Transformación, colisión y velocidad de Transformación, colisión y velocidad de los spriteslos sprites
TransformaciónTransformación
ColisiónColisión
VelocidadVelocidad
![Page 21: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/21.jpg)
¿Deseas aprender más?¿Deseas aprender más?
DigiPen Institute of Technology ofrece una DigiPen Institute of Technology ofrece una variedad de vías para explorar una carrera en variedad de vías para explorar una carrera en el desarrollo de juegos de video:el desarrollo de juegos de video:
La serie original de webcasts sobre desarrollo de La serie original de webcasts sobre desarrollo de juegos - Realizada en mayo del 2005. Se puede ver juegos - Realizada en mayo del 2005. Se puede ver en en http://www.microsoft.com/events/series/msdnvideohttp://www.microsoft.com/events/series/msdnvideodev.mspxdev.mspx El código de esta sesión está en El código de esta sesión está en http://www.digipen.edu/webcast/http://www.digipen.edu/webcast/ Talleres de verano – Series de clases introductorias Talleres de verano – Series de clases introductorias en programación de juegos, producción de en programación de juegos, producción de animaciones 3D y robótica. Más información en animaciones 3D y robótica. Más información en http://workshops.digipen.eduhttp://workshops.digipen.edu ProjectFUN Distance Learning – DigiPen tiene ProjectFUN Distance Learning – DigiPen tiene cursos en línea impartidos por sus instructores. cursos en línea impartidos por sus instructores. Más información en http://projectfun.digipen.eduMás información en http://projectfun.digipen.edu
![Page 22: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/22.jpg)
Preguntas y respuestasPreguntas y respuestas
Proponer preguntas usando el botón “Ask a Proponer preguntas usando el botón “Ask a Question”Question”No te olvides de llenar la encuestaNo te olvides de llenar la encuestaPara webcasts futuros y pasados (en inglés) Para webcasts futuros y pasados (en inglés) http://www.microsoft.com/webcastshttp://www.microsoft.com/webcastsPara webcasts futuros y pasados (en Para webcasts futuros y pasados (en castellano) castellano) http://www.microsoft.com/spanish/msdn/latahttp://www.microsoft.com/spanish/msdn/latam/videom/video Esta serie de webcasts está grabada en Esta serie de webcasts está grabada en http://www.microsoft.com/http://www.microsoft.com/spanish/msdn/latam/video/academic.aspspanish/msdn/latam/video/academic.asp Este webcast fue presentado usando Este webcast fue presentado usando Microsoft Office LiveMeeting. Se puede Microsoft Office LiveMeeting. Se puede obtener una prueba de 14 días gratuita en obtener una prueba de 14 días gratuita en http://www.microsoft.com/presentlivehttp://www.microsoft.com/presentlive
![Page 23: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/23.jpg)
¿Dónde se puede obtener ¿Dónde se puede obtener MSDN?MSDN?
Llenar la encuesta al final del webcast y Llenar la encuesta al final del webcast y pedir a un representante de Microsoft pedir a un representante de Microsoft que le contacteque le contacte
Convertirse en un suscriptor de los Convertirse en un suscriptor de los CDs/DVDs de MSDN en CDs/DVDs de MSDN en http://msdn.microsoft.com/subscriptionshttp://msdn.microsoft.com/subscriptions
![Page 24: Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 5: Transformación y colisión de sprites edgar.sanchez@logicstudio.net](https://reader033.vdocuments.co/reader033/viewer/2022061302/54e555294a795950188b6048/html5/thumbnails/24.jpg)
Control del jugador Control del jugador de los spritesde los sprites
Nos vemos la próxima semana Nos vemos la próxima semana para…para…