7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Mobile Development

Crea un juego de rompecabezas para Android con la API Dolby Audio

Read Time: 29 mins
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by CYC (you can also view the original English article)

En este tutorial, te mostraré cómo usar la API de Dolby Audio para mejorar el sonido en tus aplicaciones de Android. Para mostrarte cómo usar la API de Dolby Audio, crearemos un juego de rompecabezas simple pero divertido.

Introducción

En el concurrido mercado de dispositivos móviles de hoy en día, es importante que tus aplicaciones sean lo más atractivas posible. Mejorar la experiencia auditiva de una aplicación puede ser tan atractivo para el usuario como tener una interfaz de usuario deslumbrante.

El sonido creado por una aplicación es una forma de interacción entre el usuario y la aplicación que con demasiada frecuencia se pasa por alto. Sin embargo, esto significa que ofrecer una gran experiencia auditiva puede ayudar a que tu aplicación se destaque entre la multitud.

Dolby Digital Plus es un códec de audio avanzado que se puede usar en aplicaciones móviles utilizando -la fácil de usar- API de Dolby Audio. Dolby ha hecho que su API esté disponible para varias plataformas, incluyendo Android y Kindle Fire. En este tutorial, veremos la implementación de la API en Android.

La API Dolby Audio para Android es compatible con una amplia gama de dispositivos Android. Esto significa que tus aplicaciones y juegos Android pueden disfrutar de audio inmersivo de alta fidelidad con solo unos pocos minutos de trabajo integrando Dolby's Audio API. Exploremos qué se necesita para integrar la API creando un juego de acertijos.

1. Resumen

En la primera parte de este tutorial, te mostraré cómo crear un divertido juego de rompecabezas. Como el objetivo de este tutorial es integrar Dolby Audio API, no entraré en demasiados detalles y espero que ya estés familiarizado con los aspectos básicos del desarrollo en Android. En la segunda parte de este artículo, haremos un acercamiento a la integración de la API de Dolby Audio en una aplicación de Android.

Vamos a hacer un juego de rompecabezas tradicional para Android. El objetivo del juego es deslizar una pieza de rompecabezas en la ranura vacía del tablero de rompecabezas para mover las piezas del rompecabezas. El jugador debe repetir este proceso hasta que cada pieza del rompecabezas esté en el orden correcto. Como puedes ver en la captura de pantalla a continuación, he agregado un número a cada pieza del rompecabezas. Esto facilitará el seguimiento de las piezas del rompecabezas y el orden en que se encuentran.

Para que el juego sea más atractivo, te mostraré cómo usar imágenes personalizadas y cómo tomar una foto para crear tus propios rompecabezas únicos. También agregaremos un botón aleatorio para reorganizar las piezas del rompecabezas para comenzar un nuevo juego.

2. Empezando

Paso 1

No importa qué IDE uses, pero para este tutorial usaré JetBrains IntelliJ Idea. Abre tu IDE de elección y crea un nuevo proyecto para tu aplicación Android. Asegúrate de crear una clase principal Activity y un diseño XML.

Paso 2

Primero configuremos el archivo de manifiesto de la aplicación. En el nodo de application del archivo de manifiesto, establece hardwareAccelerated en true. Esto aumentará el rendimiento de representación de tu aplicación incluso para juegos 2D como el que estamos a punto de crear.

En el siguiente paso, especificamos los tamaños de pantalla que admitirá nuestra aplicación. Para los juegos, por lo general me concentro en dispositivos con pantallas más grandes, pero esta elección depende completamente de ti.

En el nodo activity del archivo de manifiesto, agrega un nodo llamado configChanges y establece su valor orientation como se muestra a continuación. Puedes encontrar más información sobre esta configuración en el sitio web del desarrollador.

Antes de continuar, agrega dos nodos uses-permission para habilitar la vibración y el acceso de escritura para nuestro juego. Inserta el siguiente fragmento antes del nodo application en el archivo de manifiesto.

Paso 3

Agreguemos también los recursos que usaremos más adelante en este tutorial. Comienza agregando la imagen que deseas usar para el rompecabezas. Agrégalo a la carpeta drawable de tu proyecto. Elegí agregar la imagen a la carpeta drawable-hdpi de mi proyecto.

Por último, pero no menos importante, agrega los archivos de sonido que quieras usar en tu juego. En la carpeta res de tu proyecto, crea un nuevo directorio llamado raw y agrega los archivos de sonido a esta carpeta. Para el propósito de este tutorial, he agregado dos archivos de audio. El primer sonido se reproduce cuando el jugador mueve una pieza del rompecabezas, mientras que el segundo se reproduce cuando el juego está terminado, es decir, cuando el jugador completa el rompecabezas. Ambos sonidos están disponibles en SoundBible. El primer sonido está licenciado bajo la licencia Creative Commons Attribution 3.0 y fue grabado por Mike Koenig.

3. Creando el cerebro del juego

Como mencioné anteriormente, no explicaré el proceso de creación del juego en detalle ya que el objetivo de este tutorial es integrar la API Dolby Audio. En los siguientes pasos, te guiaré por los pasos que debes seguir para crear el juego de rompecabezas.

Comenzamos creando una nueva clase, SlidePuzzle, que será el cerebro del juego. Cada movimiento realizado en el rompecabezas es procesado y rastreado por una instancia de esta clase usando matemática simple.

Es una parte importante del juego, ya que determinará qué fichas se pueden mover y en qué dirección. La clase también nos notificará cuando se complete el rompecabezas.

Comenzaremos por declarar una serie de variables que necesitaremos un poco más adelante. Eche un vistazo al siguiente fragmento de código en el que declaro variables para las cuatro direcciones posibles en las que se pueden mover las piezas del rompecabezas, dos matrices de números enteros para las direcciones horizontal y vertical, y una matriz para las fichas del rompecabezas. También declaramos y creamos una instancia de la clase Random, que usaremos más adelante en este tutorial.

El siguiente paso es crear un método init para la clase SlidePuzzle. El método init acepta dos argumentos que determinan el width (ancho) y el height (la altura) del objeto SlidePuzzle. Usando las variables de instancia de ancho y alto, instanciamos la matriz de tiles y establecemos handleLocation como se muestra a continuación.

La clase SlidePuzzle también necesita un método setter y getter para la propiedad tiles. Sus implementaciones no son tan complicadas como se puedes ver a continuación.

Además de los accesorios para la propiedad tiles (fichas), también he creado algunos métodos de conveniencia que serán útiles más adelante en este tutorial. Los métodos getColumnAt y getRowAt, por ejemplo, devuelven la columna y la fila de una ubicación particular en el rompecabezas.

El método distance, otro método de ayuda que usaremos en unos momentos, calcula la distancia entre las fichas usando matemáticas simples y la matriz tiles.

El siguiente método es getPossibleMoves, que usaremos para determinar las posibles posiciones a las que se pueden mover las piezas del rompecabezas. En la siguiente captura de pantalla, hay cuatro piezas de rompecabezas que se pueden mover a la ranura vacía del tablero de rompecabezas. Las piezas que el jugador puede mover son 5, 2, 8 y 4. ¿No te dije que los números te serían útiles?


La implementación de getPossibleMoves puede parecer desalentadora al principio, pero no es más que matemática básica.

En el método pickRandomMove, usamos el objeto Random que creamos anteriormente. Como su nombre indica, el método pickRandomMove mueve una pieza aleatoria del rompecabezas. El objeto Random se usa para generar un entero aleatorio, que es devuelto por el método pickRandomMove. El método también acepta un argumento, un número entero, que es la ubicación que ignoramos, es decir, la ranura vacía del tablero de rompecabezas.

El método invertMove, que se usa un poco más adelante en el método shuffle, invierte el entero utilizado para una dirección elegida.

El método moveTile acepta dos enteros, que se usan para calcular los movimientos necesarios usando matemática básica. El método devuelve true o false.

El método shuffle se usa para mezclar las piezas del rompecabezas cuando comienzas un nuevo juego. Tómate un momento para inspeccionar tu implementación, ya que es una parte importante del juego. En orden aleatorio, determinamos el límite en función de la altura y el ancho del rompecabezas. Como puedes ver, usamos el método de distancia para determinar el número de fichas que se deben mover.

Hay dos métodos más de ayuda que debemos implementar, getDirection y getHandleLocation. El método getDirection devuelve la dirección en la que se mueve la pieza del rompecabezas en la ubicación y getHandleLocation devuelve la ranura vacía del tablero de rompecabezas.

4. Creando el tablero del rompecabezas

Crea una nueva clase y llámala SlidePuzzleView. Esta clase es la vista del tablero de rompecabezas, extiende la clase View y ocupará toda la pantalla del dispositivo. La clase es responsable de dibujar las piezas del rompecabezas y de tocar los eventos táctiles.

Además de un objeto Context, el constructor de SlidePuzzleView también acepta una instancia de la clase SlidePuzzle como puedes ver a continuación.

Anulamos el método onSizeChanged de la clase y en este método establecemos PuzzleWidth y PuzzleHeight en 0.

El método refreshDimensions se invoca cuando las dimensiones de la vista cambian y el rompecabezas necesita ser reconstruido. Este método se invoca en el método onDraw de la clase.

En el método onDraw de la clase SlidePuzzleView, se realiza el dibujo real del rompecabezas, que incluye dibujar las líneas del tablero de rompecabezas, pero también establecemos las dimensiones de las piezas del rompecabezas para asegurarnos de que encajen perfectamente en la pantalla del dispositivo. La instancia SlidePuzzle de la vista nos ayuda a diseñar la vista como puedes ver en la implementación de onDraw a continuación.

Para manejar eventos táctiles, necesitamos anular el método onTouchEvent de la clase. Para mantener el TouchTest conciso y legible, también he declarado algunos métodos de ayuda, finishDrag, doMove, startDrag y updateDrag. Estos métodos ayudan a implementar el comportamiento de arrastre.

También he declarado métodos getter para targetWidth y targetHeight y accesorios para bitmap.

5. Creando la Clase Activity

Con la implementación de las clases SlidePuzzle y SlidePuzzleView finalizadas, es hora de enfocarte en la clase de actividad principal que tu IDE creó para ti. La clase principal Activity en este ejemplo se llama SlidePuzzleMain, pero la tuya puede tener un nombre diferente. La clase SlidePuzzleMain reunirá todo lo que hemos creado hasta ahora.

En el método onCreate de la actividad, instanciamos el objeto bitmapOptions, estableciendo su atributo inScaled en false. También creamos una instancia de la clase SlidePuzzle y una instancia de la clase SlidePuzzleView, pasando la actividad como el contexto de la vista. Luego configuramos la vista de la actividad invocando setContentView y pasando el objeto view.

En loadBitmap, cargamos la imagen que agregaste al proyecto al comienzo de este tutorial y que usaremos para el rompecabezas. El método acepta la ubicación de la imagen como su único argumento, que utiliza para recuperar la imagen.

En loadBitmap, también invocamos setBitmap. La implementación de setBitmap se muestra a continuación.

Para que el juego de rompecabezas sea más atractivo para el jugador, agregaremos una opción para personalizar el juego al permitir que el jugador seleccione una imagen para el rompecabezas de la galería de fotos del usuario o tome una con la cámara del dispositivo. También crearemos una opción de menú para cada método.

Para que todo esto funcione, implementamos dos métodos nuevos, selectImage y takePicture, en los que creamos la intención de recuperar la imagen que necesitamos. El método onActivityResult maneja el resultado de la selección del usuario. Echa un vistazo al fragmento de código a continuación para comprender la imagen completa.

Todo lo que nos queda por hacer es crear una opción de menú para cada método. La implementación a continuación ilustra cómo puedes crear un menú con opciones, que se muestra al usuario cuando tocas el botón de opciones del dispositivo.

El menú de opciones debe ser similar al que se muestra a continuación.

Al tocar Seleccionar imagen o Tomar foto, deberías poder seleccionar una imagen de la galería de fotos de tu dispositivo o tomar una con la cámara y usarla en el juego de rompecabezas.

Puedes haber notado que también he agregado una tercera opción de menú para mezclar las piezas del tablero de rompecabezas. Esta opción de menú invoca el método shuffle que implementamos en la clase SlidePuzzle un poco antes en este tutorial.

Antes de implementar la API de Dolby Audio, creemos los dos métodos que activarán la reproducción de los archivos de audio que agregamos anteriormente. Puedes dejar las implementaciones de estos métodos en blanco por ahora. El método onFinish se invoca cuando el juego finaliza mientras se invoca playSound siempre que se mueve una pieza del rompecabezas.

Todo lo que nos queda por hacer es invocar loadBitmap desde el método onCreate de la actividad y pasarle la ubicación de la imagen que queremos usar para el rompecabezas.

Echa un vistazo a la siguiente imagen para ver un ejemplo de cómo debería verse tu juego, dependiendo de la imagen que hayas utilizado para el rompecabezas.

6. Implementación de la API Dolby Audio

Paso 1

Como mencioné al principio de este tutorial, la integración de Dolby Audio API es fácil y solo toma unos minutos. Veamos cómo podemos aprovechar la API de Dolby Audio en nuestro juego.

Comienza por descargar la API de Dolby Audio desde el sitio web para desarrolladores de Dolby. Para hacerlo, crea una cuenta gratuita de desarrollador o inicia sesión si ya tienes una. Una vez que hayas descargado la API, agrega la biblioteca a tu proyecto.

Paso 2

Antes de integrar la API de Dolby Audio, es una buena idea agregar controles de volumen a tu aplicación. Esto es fácil de hacer y solo toma una sola línea de código. Agrega el siguiente fragmento de código al método onCreate de tu actividad

Paso 3

El siguiente paso es declarar dos variables en tu clase Activity, una instancia de la clase MediaPlayer y una instancia de la clase DolbyAudioProcessing. No olvides agregar las importaciones requeridas en la parte superior.

Paso 4

Ahora haremos que la clase Activity adopte las interfaces OnDolbyAudioProcessingEventListener y MediaPlayer.OnCompletionListener.

Para adoptar estas interfaces, debemos implementar algunos métodos como se muestra en el siguiente fragmento de código.

Activamos el objeto DolbyAudioProcessing cuando se invoca onDolbyAudioProcessingClientConnected y lo deshabilitamos nuevamente cuando se invoca onDolbyAudioProcessingClientDisconnected.

Como puedes ver en el fragmento de código anterior, lanzamos el objeto MediaPlayer cuando finaliza la reproducción del archivo de audio.

Para reproducir un sonido cuando el jugador mueve una pieza del rompecabezas, debemos implementar el método playSound. Antes de centrarnos en PlaySound, primero creamos una instancia de SlidePuzzleMain en la clase SlidePuzzleView y en el método playSlide de la vista, llamamos a playSound en la instancia de SlidePuzzleMain.

En el método playSound, creamos una instancia de la clase MediaPlayer y hacemos uso de la API de Dolby Audio para iniciar el procesamiento del audio. Si la API de Dolby Audio no es compatible con el dispositivo del usuario, el método getDolbyAudioProcessing devolverá un valor null.

Como puedes ver a continuación, la implementación del método onFinish es muy similar a la de playSound. La principal diferencia es que mostramos un mensaje al usuario si Dolby Audio API no está disponible. Como puedes recordar, el método onFinish se ejecuta cuando el juego está terminado y el jugador ha completado el rompecabezas.

También llamamos al método shuffle al final de onFinish para comenzar un nuevo juego cuando el jugador ha terminado el rompecabezas.

Paso 5

Es importante que liberemos los objetos DolbyAudioProcessing y MediaPlayer cuando ya no los necesiten. La liberación de estos objetos garantiza que no comprometamos la duración de la batería del dispositivo y afecte negativamente el rendimiento del dispositivo.

Comenzamos declarando tres métodos. El primer método, releaseDolbyAudioProcessing, libera el objeto DolbyAudioProcessing y establece mDolbyAudioProcessing en null. El segundo método, restartSession, reinicia la sesión administrada por el objeto DolbyAudioProcessing y en el tercer método, suspendSession, la sesión de audio se suspende y la configuración actual se guarda para su uso posterior.

Como puedes ver en el fragmento de código anterior, también he creado algunos métodos para manejar cualquier excepción que pueda lanzarse en releaseDolbyAudioProcessing, restartSession y suspendSession.

Los tres métodos que acabamos de crear deben invocarse en varios momentos clave del ciclo de vida de la aplicación. Esto lo logramos anulando los métodos onStop, onStart, onDestroy, onResume y onPause en nuestra clase SlidePuzzleMain.

En onStop, le decimos al objeto MediaPlayer que pause y en onStart el objeto MediaPlayer continúa la reproducción si no es null. El método onDestroy se invoca cuando la aplicación está cerrada. En este método, lanzamos el objeto MediaPlayer, configuramos mPlayer como null e invocamos releaseDolbyAudioProcessing, el cual implementamos anteriormente.

Finalmente, en onPause y onResume suspendemos y reiniciamos la sesión de audio invocando suspendSession y restartSession, respectivamente.

Si has seguido los pasos descritos en este tutorial, entonces tu juego debería ser completamente funcional con la API Dolby Audio integrada. Construye el proyecto para jugar con el resultado final.

7. Resumen

Estoy seguro de que aceptas que la integración de Dolby Audio API es fácil y no toma más de cinco minutos. Resumamos brevemente los pasos que hemos dado para integrar la API.

  1. Importar la biblioteca de la API Dolby Audio
  2. Crear una instancia de la clase DolbyAudioProcessing
  3. Implementar la interfaz OnDolbyAudioProcessingEventListener.
  4. Habilitar la instancia de DolbyAudioProcessing en onDolbyAudioProcessingClientConnected
  5. Deshabilitar la instancia de DolbyAudioProcessing en onDolbyAudioProcessingClientDisconnected
  6. Después de iniciar el reproductor multimedia, iniciar la instancia de DolbyAudioProcessing utilizando el perfil GAME
  7. Comprobar si el objeto DolbyAudioProcessing es null para verificar si el dispositivo admite la API de Dolby Audio
  8. Para conservar la duración de la batería y optimizar el rendimiento, suspender y liberar la instancia de DolbyAudioProcessing cuando la aplicación se destruye o se mueve al fondo

Conclusión

Aunque el juego que creamos es bastante simple, es importante recordar el enfoque de este tutorial, la API de Dolby Audio. El mercado de dispositivos móviles es un lugar abarrotado y destacar de otros juegos no es fácil. Agregar un sonido superior a tu juego no pasará desapercibido para tus usuarios y hará que tu juego se note. Dirígete al sitio web para desarrolladores de Dolby para probarlo.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.