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

Corona SDK: Crear un juego de obstáculos para helicópteros

Read Time: 11 mins

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

En este tutorial, te mostraré cómo crear un juego de evasión de obstáculos usando el Corona SDK. Aprenderás más sobre los controles táctiles, la detección de colisiones y la física. El objetivo del juego es evitar tantos obstáculos como puedas para obtener la mayor puntuación. Empecemos.


1. Descripción de la aplicación

App OverviewApp OverviewApp Overview

Usando gráficos ya hechos, crearemos un juego entretenido usando el lenguaje de programación Lua y las APIs de Corona SDK El jugador podrá mover un helicóptero por la pantalla y deberá evitar los obstáculos que encuentre. Puedes modificar los parámetros en el código para personalizar el juego.


2. Dispositivo objetivo

Target DeviceTarget DeviceTarget Device

Lo primero que tenemos que hacer es seleccionar la plataforma en la que queremos ejecutar nuestra aplicación para poder elegir el tamaño de las imágenes que vamos a utilizar.

La plataforma iOS tiene los siguientes requisitos:

  • iPad 1/2/Mini: 1024px x 768px, 132 ppi
  • iPad Retina: 2048px x 1536px, 264 ppi
  • iPhone/iPod Touch: 320px x 480px, 163 ppi
  • iPhone/iPod Retina: 960px x 640px, 326 ppi
  • iPhone 5/iPod Touch: 1136px x 640px, 326 ppi

Dado que Android es una plataforma abierta, existen muchos dispositivos y resoluciones diferentes. Algunas de las características de pantalla más comunes son:

  • Asus Nexus 7 Tablet: 800px x 1280px, 216 ppi
  • Motorola Droid X: 854px x 480px, 228 ppi
  • Samsung Galaxy SIII: 720px x 1280px, 306 ppi

En este tutorial, nos centraremos en la plataforma iOS en términos de gráficos. En particular, desarrollaremos para el iPhone y el iPod Touch. Sin embargo, el código de este tutorial también se puede utilizar en tu objetivo de la plataforma Android.


3. Interface

InterfaceInterfaceInterface

Utilizaremos una interfaz de usuario sencilla que incluye múltiples formas, botones, mapas de bits, etc. Los gráficos que utilizaremos para este tutorial se encuentran en el proyecto incluido en este tutorial.


4. Export Graphics

Export GraphicsExport GraphicsExport Graphics

Dependiendo del dispositivo que hayas seleccionado, puede que tengas que convertir los gráficos a la resolución recomendada (ppi), lo que puedes hacer en tu editor de imágenes favorito. Yo he utilizado la opción Ajustar tamaño... del menú Herramientas de la aplicación Vista previa en OS X. Recuerda dar a las imágenes un nombre descriptivo y guardarlas en la carpeta del proyecto.


5. Configuración de la aplicación

Utilizaremos un archivo de configuración, config.lua, para hacer que la aplicación vaya a pantalla completa en todos los dispositivos. El archivo de configuración muestra el tamaño original de la pantalla y el método utilizado para escalar el contenido en caso de que la aplicación se ejecute en una resolución diferente.


6. main.lua

Vamos a escribir la aplicación real. Abre tu editor de Lua preferido. Cualquier editor de texto plano funcionará, pero se recomienda utilizar un editor de texto que tenga resaltado de sintaxis. Crea un nuevo archivo y guárdalo como main.lua en tu carpeta de proyecto.


7. Estructura del código

Estructuraremos nuestro código como si fuera una clase. Si estás familiarizado con ActionScript o Java, la estructura del proyecto te resultará familiar.


8. Ocultar la barra de estado

Este fragmento de código oculta la barra de estado. La barra de estado es la barra situada en la parte superior de la pantalla del dispositivo que muestra la hora, la señal y otros indicadores.


9. Importar Physics

Utilizaremos la biblioteca de física para manejar las colisiones. Importa la biblioteca utilizando el fragmento de código que se muestra a continuación.


10. Antecedentes

BackgroundBackgroundBackground

Un simple fondo para la interfaz de usuario de la aplicación. El siguiente fragmento de código dibuja el fondo en la pantalla.


11. Vista del título

Title ViewTitle ViewTitle View

Esta es la vista del título. Es la primera pantalla interactiva que aparece en nuestro juego. Estas variables almacenan sus componentes.


12. Vista de los créditos

Credits ViewCredits ViewCredits View

La vista de créditos muestra los créditos y el copyright de la aplicación. Esta variable se utiliza para almacenarla.


13. Mensaje de instrucciones

Instructions

Al principio del juego aparecerá un mensaje con instrucciones y desaparecerá después del primer toque.


14. Helicóptero

Helicopter

Este es el gráfico del helicóptero. El jugador controlará el helicóptero mediante controles táctiles.


15. Bloques

Blocks

Los bloques son los obstáculos que el jugador debe evitar.


16. Alerta

Alert

La alerta se muestra cuando el jugador pierde la pelota y el juego se acaba. Muestra un mensaje y termina el juego.


17. Sonidos

Sounds

Para animar el juego, utilizaremos efectos de sonido. Los sonidos utilizados en el juego se obtuvieron de as3soundfxr. La música de fondo la encontré en playonloop.


18. Variables

El siguiente fragmento de código muestra las variables que utilizaremos. Lee los comentarios para entender para qué se utiliza cada variable.


19. Declarar funciones

Declarar todas las funciones como local al principio.


20. Constructor

A continuación, creamos la función que inicializará la lógica del juego.


21. Añadir vista de título

Comenzamos colocando la vista de título en el escenario y llamamos a una función que añadirá escuchas de toque a los botones.


22. oyentes del botón de inicio

La siguiente función añade los listeners necesarios a los botones del TitleView.


23. Mostrar créditos

La pantalla de créditos se muestra cuando el usuario pulsa el botón sobre. Se añade un receptor de toques a la vista de créditos para descartarla cuando el usuario la pulse.


24. Ocultar créditos

Cuando el usuario toca la vista de los créditos, se anima a salir del escenario y a eliminarlos.


25. Mostrar la vista del juego

Cuando se pulsa el botón de jugar, la vista del título se anima fuera de la pantalla y se revela el juego. Hay una serie de partes móviles, así que vamos a ver con más detalle cada una de ellas.


26. Mensaje de instrucciones

El siguiente fragmento de código añade el mensaje de instrucciones.


27. Marcador TextField

El siguiente fragmento de código crea un campo de texto que muestra la puntuación actual del jugador en la parte superior derecha del escenario.


28. Helicóptero

A continuación, es el momento de añadir el gráfico del helicóptero al escenario, como se muestra a continuación.


29. Paredes

En el siguiente fragmento de código, utilizamos la API de gráficos de Corona para crear varias líneas que añadiremos a la simulación de física un poco más adelante en este tutorial. Se utilizarán para detectar colisiones con el helicóptero.


30. Física

A continuación, tenemos que añadir la física necesaria a cada objeto.


31. Inicio del juego

Creamos un grupo para los bloques, invocamos la función gameListeners e iniciamos la música de fondo.


32. Oyentes del juego

El siguiente fragmento de código puede parecer complejo, pero simplemente añade unas cuantas listeners para iniciar la lógica del juego.


33. Crear un bloque

Como su nombre indica, la función createBlock crea un bloque y lo dibuja en la pantalla. El objeto resultante se añade al motor de física para comprobar si hay colisiones.


34. Función de desplazamiento

En la función movePlayer, actualizamos la variable up. Mientras su valor sea igual a true, la función de update mueve el helicóptero hacia arriba.


35. Aumentar la velocidad

Para hacer el juego más interesante, un temporizador aumenta la velocidad cada cinco segundos. Se muestra un icono para avisar al jugador del cambio de velocidad.


36. Mover el helicóptero

La función update comprueba el valor de up y mueve el helicóptero hacia arriba si es igual a true.


37. Mover bloques

A continuación, es el momento de mover los bloques. Utilizamos la variable speed para determinar cuántos píxeles deben moverse los bloques en cada fotograma.


38. Actualización de la puntuación

El algoritmo para actualizar la puntuación es sencillo. La puntuación se incrementa en uno cada fotograma mientras el helicóptero no se haya estrellado. Es sencillo. ¿No es así?


39. Colisiones

La función onCollision verifica si el helicóptero ha colisionado con un bloque. Si se detecta una colisión, reproducimos un efecto de sonido, una explosión, eliminamos los gráficos y mostramos una alerta al jugador.


40. Alerta

La función alert crea una vista de alerta y la muestra al usuario. A continuación, el juego termina.


41. Invocar la función Main

Para iniciar el juego, es necesario invocar la función Main. Con el resto del código en su lugar, lo hacemos aquí.


42. Pantalla de carga

Loading Screen

En la plataforma iOS, el archivo llamado Default.png se muestra mientras se lanza la aplicación. Añade esta imagen a la carpeta de fuentes de tu proyecto, será añadida automáticamente por el compilador de Corona.


43. Icono

Icon

Utilizando los gráficos que has creado antes, ahora puedes crear un bonito icono. Las dimensiones del icono para un iPhone sin retina son 57px x 57px, mientras que la versión con retina debe ser de 114px x 114px. El material gráfico para iTunes debe ser de 1024px x 1024px. Te sugiero que crees primero la ilustración de iTunes y luego crees las imágenes de menor tamaño reduciendo la ilustración de iTunes a las dimensiones correctas. No es necesario hacer que el icono de la aplicación sea brillante o añadir esquinas redondeadas, ya que el sistema operativo se encarga de ello por ti.


44. Pruebas en el simulador

TestingTestingTesting

Es hora de probar nuestra aplicación en el simulador. Abre el Simulador Corona, busca la carpeta de tu proyecto y haz clic en Abrir. Si todo funciona como se espera, estás listo para el paso final.


45. Construir un proyecto

BuildBuildBuild

En el Corona Simulator, ve a File > Build y selecciona el dispositivo de destino. Rellena los campos requeridos y haz clic en Build. Espera unos segundos y tu aplicación estará lista para ser probada en un dispositivo y/o para ser enviada para su distribución.


Conclusión

En este tutorial, hemos aprendido sobre las escuchas táctiles, la detección de colisiones, la física, así como algunas otras habilidades que pueden ser útiles en un amplio número de juegos. Experimenta con el resultado final e intenta modificar el juego para crear tu propia versión del mismo. Espero que te haya gustado este tutorial y te haya resultado útil. Gracias por leerlo.

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.