juegos en 2d - departamento de matemáticaseuler.mat.uson.mx/~havillam/android/slides/12 2d...
TRANSCRIPT
Juegos en 2D
Universidad de Sonora 2
Juegos en 2D� Los caracteres y el campo de juego utilizan dos
dimensiones (x y y).
� Ejemplos:
� Juegos de mesa: Gato, Memoria, Reversi, Bejeweled, etc.
� Juegos de arcade: Pac-Man, Invasores del espacio, Digger, etc.
� No requieren cámara virtual ni proyecciones.
Proceso de diseño� Componentes del juego:
� Objetos: pelotas, fantasmas, Mario, dragones, etc.
� Campo de juego: tablero, espacio sideral, paisaje, etc.
� Reglas:
� Objetivos.
� Objetos autónomos y objetos controlados por el jugador.
� Movimiento.
� Puntaje.
� Condiciones de victoria.
Universidad de Sonora 3
Game loop (ciclo del juego)� Corre en un hilo (thread) aparte del hilo principal.
Universidad de Sonora 4
while (!termine) {revisar input del usuarioejecutar AI si existemover los objetos autónomosresolver colisionesrevisar condiciones de victoria o derrotaactualizar las gráficastocar música
}
Primer juego� Una pelota que está confinada en una caja simulada
por los límites de la pantalla del dispositivo.
� Objetos: pelota, paredes.
� Métodos: mueve, rebota, pinta.
Universidad de Sonora 5
Clase Pelota
Universidad de Sonora 6
Clase Pelota
Universidad de Sonora 7
Clase PelotaView
Universidad de Sonora 8
Clase PelotaView
Universidad de Sonora 9
Clase PelotaThread
Universidad de Sonora 10
Layout
Universidad de Sonora 11
Actividad principal
Universidad de Sonora 12
Extensiones� Pelota con imagen.
� Agregar un fondo de imagen.
� Agregar mas pelotas y permitir que reboten entre si.
Universidad de Sonora 13
Cargar imágenes
Universidad de Sonora 14
� Usar BitmapFactory para cargar la imagen:
� Usar drawBitmap para pintar la imagen:
� Para el caso especial del fondo usar:
Cargar imágenes� En la clase Pelotas:
� Agregar un constructor que permita recibir un bitmap.
� Modificar el método pinta.
Universidad de Sonora 15
Manejar varias pelotas� En PelotasView declarar un arreglo de pelotas:
� Cargar las imágenes en inicia() e inicializar el arreglo.
Universidad de Sonora 16
Manejar varias pelotas� Dibujar todas las pelotas en pinta().
Universidad de Sonora 17
Manejar varias pelotas� Actualizar todas las pelotas en update().
Universidad de Sonora 18
Tiempo� La velocidad de este game loop depende de la
velocidad de la CPU y de la densidad de la pantalla.
Universidad de Sonora 19
Solución� Usar un game loop que dependa del tiempo.
� Mover los objetos de acuerdo al tiempo transcurrido.
Universidad de Sonora 20
Game loop
Universidad de Sonora 21
Game loop� step es una variable global y es el inverso del número
de frames por segundo (fps) deseados.
� Si se quieren 60 frames por segundo:
Universidad de Sonora 22
Método update()
Universidad de Sonora 23
� En la clase PelotaView:
Método mueve()
Universidad de Sonora 24
� En la clase Pelota:
Segundo juego� Ping-pong clásico.
Universidad de Sonora 25
Reglas� Dos jugadores (raquetas):
� Izquierda: controlada por el jugador.
� Derecha: controlada por la computadora.
� La pelota puede rebotar arriba, abajo y en las raquetas.
� Si sale por la parte izquierda, la computadora se anota un punto.
� Si sale por la parte derecha, el jugador se anota un punto.
Universidad de Sonora 26
Características del juego� Capacidad de hacer pausas.
� Color de las raquetas configurable.
� Música y efectos de sonido.
� Máximo 5 puntos.
Universidad de Sonora 27
Objetos� Raqueta.
� Pelota.
� Fondo.
� Marcador.
Universidad de Sonora 28
Menú principal
Universidad de Sonora 29
Botones redondeados� button_rounded_corners.xml en drawable.
Fuente: http://android--code.blogspot.mx/2015/01/android-rounded-corners-button.html
Universidad de Sonora 30
Layout principal
Universidad de Sonora 31
Layout principal
Universidad de Sonora 32
Layout principal
Universidad de Sonora 33
Actividad principal
Universidad de Sonora 34
Actividad principal
Universidad de Sonora 35
Eliminar la barra de acción� En el archivo styles.xml en res/values cambiar el estilo.
Universidad de Sonora 36
Layout GameActivity
Universidad de Sonora 37
GameActivity
Universidad de Sonora 38
GameActivity
Universidad de Sonora 39
GameView: variables
Universidad de Sonora 40
GameView: constructores
Universidad de Sonora 41
GameView: inicia
Universidad de Sonora 42
GameView: inicia
Universidad de Sonora 43
GameView: onTouch
Universidad de Sonora 44
GameView: eventos
Universidad de Sonora 45
GameView: update
Universidad de Sonora 46
GameView: pinta
Universidad de Sonora 47
GameView: pinta
Universidad de Sonora 48
GameView: callbacks
Universidad de Sonora 49
GameThread
Universidad de Sonora 50
GameThread: run
Universidad de Sonora 51
BackgroundMusic
Universidad de Sonora 52
Implementando settings� Crear una actividad que extienda a PreferenceActivity.
� Definir un archivo xml en la carpeta res/xml con los settings.
� En el programa, recuperar los settings.
Universidad de Sonora 53
preferences.xml
Universidad de Sonora 54
Valores de ListPreference� Archivo array.xml en res/values.
Universidad de Sonora 55
SettingsActivity
Universidad de Sonora 56
En inicia() de GameView
Universidad de Sonora 57
Tercer juego: JetBoy� Nave que viaja por el espacio disparando a los
asteroides que le salen al paso.
Universidad de Sonora 58
JetBoy
Universidad de Sonora 59
JetBoy
Universidad de Sonora 60
Reglas� La nave comienza con 5 vidas y en nivel 1.
� Cada vez que un asteroide toca la nave se pierde una vida.
� Cada asteroide destruido otorga 10 puntos.
� Cada 100 puntos se otorga una nueva vida y se pasa al siguiente nivel.
� Conforme se incrementa el nivel, salen más asteroides y éstos viajan más rápido.
Universidad de Sonora 61
Características� Se cuentan con varias imágenes de la nave y de los
asteroides para dar efectos de movimiento.
� Hay dos fondos para dar un efecto de “parallaxscrolling.”
� Capacidad de hacer pausas, música, efectos de sonido, guardar records y configuraciones.
Universidad de Sonora 62
Movimiento con image frames� Nave volando:
� Nave siendo golpeada:
Universidad de Sonora 63
Movimiento con image frames� Asteroide rotando:
� Asteroide explotando:
Universidad de Sonora 64
Parallax scrolling
Universidad de Sonora 65
� Hay más de una imagen de fondo.
� Cada imagen se mueve a velocidad distinta.
Crédito: By OhSqueezy - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=15775352
Fondos
Universidad de Sonora 66
Clases� Clase Ship para representar la nave.
� Clase Asteroid para representar un asteroide.
� Clase Laser para representar un disparo de laser.
� Nota 1: en un instante dado puede haber más de un asteroide y más de un laser en la pantalla y por lo tanto hay que guardarlos en arreglos.
� Nota 2: se necesita definir una estrategia para que los arreglos no crezcan demasiado y agoten la memoria.
Universidad de Sonora 67
Clase Ship� Variables y constructor:
Universidad de Sonora 68
Clase Ship� Método paint():
Universidad de Sonora 69
Clase Asteroid� Variables y constructor:
Universidad de Sonora 70
Clase Asteroid� Método paint():
Universidad de Sonora 71
Clase GameView� Arreglos para guardar asteroides y láseres:
� Variables para manejar el fondo con parallax scrolling:
Universidad de Sonora 72
Método update
Universidad de Sonora 73
Método update
Universidad de Sonora 74
Método update
Universidad de Sonora 75
Método update
Universidad de Sonora 76
Método paint
Universidad de Sonora 77
Método pintaBackground
Universidad de Sonora 78
Método pintaBackground
Universidad de Sonora 79
Alternativas para hacer juegos� OpenGL ES. Integrado con Android.
� libGDX. https://libgdx.badlogicgames.com/
� Unity 3D. https://unity3d.com/
� Unreal Engine. https://www.unrealengine.com/
� Y más: http://appindex.com/blog/the-big-list-of-android-ios-game-development-tools-engines-libraries-and-resources/
Universidad de Sonora 80