programando-un-juego-de-space-invaders-para-android

Codificar un juego tipo Space Invaders para Android

Bienvenidos al proyecto de codificación de Space Invaders para Android. En este proyecto vamos a revisar todo lo que necesitas saber para tener un clon completamente funcional de Space Invaders corriendo en tu celular o tableta Android. La ola de Invaders es realmente desafiante pero alcanzable y sería sencillo para ustedes ampliar este proyecto para añadir características extras como olas con dificultad creciente, puntuaciones más altas o tal vez agregar un platillo volador, como en el juego clásico original.

Acerca de este proyecto

Tiempo para terminar 1 hora

Nuevos Conceptos:

  1. Ritmo de animación interna para hacer que los Invaders aleteen los brazos.
  2. Usar una clase externa para la visualización del juego.
  3. Enemigos que piensan, se mueven y apuntan.

Tutoriales de preparación recomendados

  • Todos los tutoriales de Java Nivel 1.

Experiencia previa pretendida

  • Saber donde quieres empezar
  • Configurar Android Studio
  • Creando tu primer juego Android
  • Desplegando tu primer juego Android
  • Demo de Variables del juego
  • Demo de Revisión para condiciones y ramificaciones
  • Demo de Bucles
  • Demo de Dibujando gráficos
  • Demo de Reproduciendo efectos de sonido
  • Construyendo un motor de juego simple
  • Codificando un juego tipo Breakout para Android

Para empezar

El juego terminado permitirá al jugador moverse a la izquierda y a la derecha al mantener el lado correspondiente de la pantalla cerca de la parte más baja. Como el jugador también necesita disparar a los Invaders, vamos a responder también para cuando la pantalla sea tocada ligeramente más arriba que la parte más baja. Los Invaders se deslizarán a través de la pantalla aleteando sus brazos y escupiendo balas.

Si le dan a un jugador, pierde una vida, si le dan a una guarida se desmoronará hasta que, eventualmente, el jugador no tenga más donde esconderse. Cuando los Invaders lleguen a un extremo de la pantalla bajarán un poco y regresarán hacia el otro lado; un poco más rápido. Eventualmente se moverán tan rápido que el jugador estará condenado a perder. Los Invaders tienen que ser eliminados rápida y eficientemente para poder sobrevivir.

Más pronto!

Para empezar, crea un nuevo proyecto en Android Studio, ponle de nombre Space Invaders y a la actividad ponle SpaceInvadersActivity, luego continua leyendo porque vamos a hacer las cosas un poco diferentes en comparación al proyecto de Breakout.

Hacer el juego con Pantalla Completa en vista Panorámica

Queremos usar todos los pixeles que el equipo tiene para ofrecer, así es que vamos a hacer unos cambios a la configuración del archivo AndroidManifest.xml del app.

  1. En el panel del explorador del proyecto en Android Studio has doble click en la carpeta del manifiesto, esto abrirá el archivo AndroidManifest.xml en el editor de códigos.
  2. En el archivo AndroidManifest.xml, localiza la siguiente línea del código, android:name=".SpaceInvadersActivity">
  3. Posiciona el cursor antes del cierre > que aparece arriba. Teclea “Enter” un par de veces para mover el > un par de líneas abajo del resto de la línea de código de arriba.
  4. Justo abajo de SpaceInvadersActivity pero ANTES de la nueva ubicación de > escribe o copia y pega las siguientes dos líneas para hacer que el juego se ejecute en pantalla completa y se mantenga en orientación panorámica.

Ahora vamos a hablar un poco acerca de los recursos que vamos a usar en Space Invaders.

También, considera que todas las descargas extras para este y todos los futuros tutoriales están disponibles en un espacio exclusivo de descargas para mis suscriptores en Patreon.

patreon-side-banner-large

Los Gráficos

En este proyecto, usaremos una combinación de bitmaps de archivos de gráficos externos para los Invaders y para la nave del jugador, y usaremos el método de drawRect de la clase Canvas para representar a los lasers y las guaridas. Algo que vale la pena mencionar ahora es que aún las clases que usan bitmaps tendrán todavía un objeto RectF porque aunque no lo ocupamos para dibujar lo podemos usar para la detección de impactos. Hablaremos más sobre esto después en el proyecto.

Antes de que nos pongamos a codificar, queremos añadir el gráfico de la nave del jugador y dos gráficos diferentes de las dos figuras de animación para nuestros Invaders a nuestros archivos del proyecto para que podamos usarlos en nuestro código. Los gráficos son blancos, por lo tanto están desplegados abajo en un fondo azul. Aquí están.

El gráfico de la nave del jugador de Space Invaders La primera figura de animación para el Invader La segunda figura de animación para el Invader

playership
invader2
invader1

Puedes descargarlos haciendo click con el botón derecho sobre las imagenes y luego seleccionar la opción de “Save image as…”. Solo asegurate de que el nombre de los archivos se mantenga igual. Se llaman playerShip.png, invader1.png and invader2.png. Agrega los gráficos a la carpeta “drawable” que está dentro de las carpetas de “Android Studio”.

El sonido

Tendremos un sonido amenazador de dos tonos para representar los movimientos de los Invaders. Este sonido acelerará en la manera que los Invaders aceleren. He llamado a estos dos sonidos “uh” y “oh” porque si fueramos atacados por los Invaders bien podríamos decir “uh oh”. También necesitamos sonidos para el disparo del láser, el jugador siendo impactado, los invaders siendo impactados y las guaridas siendo destruidas.

Claro, necesitamos añadir los archivos de sonido a nuestro proyecto. Puedes crear los tuyos o descargar los mios haciendo click con el botón derecho sobre los archivos mostrados abajo. Solo asegurate de que el nombre de los archivos se mantenga exactamente igual. También puedes escuchar cada uno de los sonidos usando los controles de reproducción abajo de cada una de las ligas.

uh
shoot
playerexplode
oh
invaderexplode
damageshelter

Cuando tengas tu efecto de sonido preferido, usando el explorador de archivos de tu sistema operativo ve a la carpeta “app\src\main” del proyecto y crea una carpeta llamada “assets”. Agrega los archivos de sonido a esta carpeta.

La estructura de clases

Para este proyecto vamos a variarle un poquito a la estructura del proyecto de Breakout. Pero lejos de añadirle complejidad, vamos a ver cómo es que separando aún más el código en los diferentes archivos vamos a hacer nuestro proyecto de Space Invaders más sencillo de escribir, administrar y ampliar.

Cada objeto del juego será representado por su propia clase. Así es que tendremos uno para la nave del jugador, uno para el Invader, una bala y el ladrillo de la guarida de defensa. Además, también tomaremos a la clase interna la cual representa a la visualización del juego y hacerla una clase en su propio derecho. Se llamará SpaceInvadersView. Esto no cambia nada el como lo codificamos internamente pero si hace todo el proyecto más manejable.

Queremos crear clases para representar a la visualización y los objetos del juego que acabamos de mencionar. Vamos a requerir las siguientes clases. SpaceInvadersView, Invader, PlayerShip, DefenceBrick y Bullet. Al crear implementaciones vacias para todas estas clases podemos entonces declarar objetos de ellos en SpaceInvadersView en este momento.

Esto evita que constantemente estemos revisitando “SpaceInvadersView” para añadir nuevas declaraciones. Todo lo que necesitamos hacer es implementar cada objeto, sucesivamente, inicializarlo, actualizarlo y dibujarlo.

Teniendo esto en cuenta, vamos a crear esas clases vacias. Ahora, con el botón derecho del mouse has click en la carpeta de Java en el explorador del proyecto de Android Studio como se muestra en la siguiente imagen.

Creando una nueva clase de Java llamada "SpaceInvadersView"
Creando una nueva clase de Java llamada “SpaceInvadersView”

Ahora selecciona “New|Java class”, luego selecciona “…\app\source\main\java” y haz click en “OK”. Ahora ingresa SpaceInvadersView como el nombre para nuestra clase nueva y haz click en “OK”. Hemos creado una nueva clase de Java en un archivo separado llamado “SpaceInvadersView.java”. Como se mencionó anteriormente, la clase no es una clase interna ya que la visualización estaba en el proyecto Breakout. Esto nos ayuda a compartimentar nuestro código y a mantenerlo organizado en áreas lógicas en mayor medida de lo que hicimos anteriormente.

Ahora, haz lo mismo y crea nuevas clases para las clases de PlayerShip, Bullet, DefenceBrick, y Invader. Deberíamos de tener ya seis clases en total, incluyendo SpaceInvadersActivity. Solo para aclarar, el código para cada una de las cinco nuevas clases se muestra a continuación (a excepción de la declaración del paquete en la parte de arriba de cada clase). Vamos entonces a ver a cada una de las clases, sucesivamente, empezando por SpaceInvadersActivity.

SpaceInvadersView

PlayerShip

Bullet

DefenceBrick

Invader

 

One comment

  1. Hola! Revise tu proyecto y es bastante bueno! Quiero hacerlo y empezar a practicarlo pero tengo un problema inicial, al momento de crear el proyecto y seleccionar la actividad, ¿Cual es la que escojes? Ejem: “Basic Activity”, “Empty Activity”, “Fullscreen Activity” etc.
    Espero respondas y muchas gracias. !

Comments are closed.