Programación Gráfica

1. Programación Gráfica 7. Programación en Videojuegos 2D I.

2. 7.1 Sprites

3. Sprites • Es un mapa de bits que se dibujan en pantalla. • Debe tener transparencias. • Para crear una animación se crea una secuencia de sprites.

4. Secuencia de sprites Para más sprites: http://www.nes-snes-sprites.com

5. Utilizando 1 imagen • Para mover sólo cambiamos la posición: void SetPosition(float x, float y) { position->x = x; position->y = y; }

6. Utilizando 1 imagen • Para pintar sólo dibujamos la imagen en la posición del sprite. void Draw( Graphics g ) { g->DrawImage(image, posX, posY); }

7. 7.2 Background

8. Utilizando 1 imagen

9. Utilizando 1 imagen

10. Utilizando 1 imagen • Movemos el background hacia la izquierda a una velocidad constante. Move() { posX += velocityX; if( posX <= -pantalla->width) posX += pantalla->width; }

11. Utilizando 1 imagen • Pintamos la imagen hasta que complete toda el ancho de la pantalla. Draw(Graphics graphics) { for(int i=posX; i<pantalla->width: i+=image->width) graphics->drawImage(image, i, 0); }

12. Utilizando un conjunto de imágenes Más imágenes background en http://www.panelmonkey.org

13. Utilizando un conjunto de imágenes

14. Utilizando un conjunto de imágenes • Movemos de derecha a izquierda. Move() { posX += velocityX; if(posX <= -imagen[ imagen_actual] == nImage) { posX += width; image_actual++; if(image_actual == nImage) image_actual = 0; } }

15. Utilizando un conjunto de imágenes • Pintamos todo el conjunto de imágenes que representan en fondo del videojuego. Draw(Graphics graphics) { for(int i=posX, j=imagen_actual; i<pantalla->width; i+=imagen[j]->width) { graphics->drawImage(image[j++], i, 0); if(j == nImage) j = 0; } }

16. 7.3 CollisionDetection

17. Collision Detection • Conjunto de algoritmos matemáticos que nos permiten detectar si 2 objetos están colisionando. • Sin ellas podemos decir que NO puede existir un videojuego. • El algoritmo varía dependiendo de la forma de los objetos. • El algoritmo clásico es collisión box, y hoy en día se utiliza per-pixel-collision.

18. Detección de Colisiones Entre Círculos

19. Detección de Colisiones Entre Círculos Hay colisión No hay colisión Hay colisión Fuente: http://juank.black-byte.com/xna-colisiones-2d/

20. Detección de Colisiones Entre Círculos bool IsCollision(Sprite sp1, Sprite sp2) { float dx = (sp2->x – sp1->x); float dy = (sp2->y – sp1->y); float distance = sqrt( dx*dx + dy*dy); return ( distance <= (sp1->radio + sp2->radio)) }

21. Collision Box

22. Collision Box Fuente: http://juank.black-byte.com/xna-colisiones-2d/

23. Collision Box bool IsCollision(Sprite sp1, Sprite sp2) { if( (min( sp1->width + sp1->x, sp2->width + sp2->x) >= max(sp1->x, sp2->x)) { if( (min( sp1->y, sp2->y) >= max(sp1->y + sp1->height, sp2->height)) return true; } return false }

24. Per-Pixel-Collision • La detección de colisiones se realiza por la superposición de los pixeles entre 2 sprites. • Para más información: http://www.significant-bits.com/the-1-pixel-collision-box

25. Preguntas ¿?