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 disparos

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 disparos con balas limitadas con el Corona SDK. El objetivo del juego es disparar a una gran cantidad de objetivos con solo cinco balas. Durante este tutorial, trabajarás con los temporizadores, los controles táctiles y la física. Para saber más, ¡sigue leyendo!

1. Descripción de la aplicación

App OverviewApp OverviewApp Overview

Usando los gráficos suministrados codificaremos un juego de disparos usando Lua y las API's de Corona SDK. En el juego el jugador utiliza cinco balas para disparar a sus enemigos. Cada enemigo creará otras cuatro balas que ayudarán a derribar un mayor número de objetivos. Mientras codificas, puedes modificar los parámetros del código para personalizar tu juego.


2. Dispositivo de destino

Target DeviceTarget DeviceTarget Device

Nuestro primer paso es seleccionar la plataforma en la que queremos ejecutar nuestra aplicación. Esto es importante para poder elegir el tamaño de nuestras imágenes.

La plataforma iOS tiene las siguientes características:

  • iPad 1/2/Mini: 1024x768px, 132 ppi
  • iPad Retina: 2048x1536, 264 ppi
  • iPhone/iPod Touch: 320x480px, 163 ppi
  • iPhone/iPod Retina: 960x640px, 326 ppi
  • iPhone 5/iPod Touch: 1136x640, 326 ppi

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

  • Asus Nexus 7 Tablet: 800x1280px, 216 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

En este tutorial nos centraremos en la plataforma iOS con el diseño gráfico, específicamente para desarrollar para la distribución a un iPhone/iPod touch, pero el código presentado aquí se aplica al desarrollo de Android con el Corona SDK también.


3. Interface

InterfaceInterfaceInterface

Utilizaremos una interfaz sencilla con múltiples formas, botones y mapas de bits. Los recursos gráficos de la interfaz necesarios para este tutorial se encuentran en la descarga adjunta.


4. Exportar gráficos

Export GraphicsExport GraphicsExport Graphics

Dependiendo del dispositivo que hayas seleccionado, es posible que tengas que exportar los gráficos en los ppi recomendados. Puedes hacerlo en tu editor de imágenes favorito. Yo he utilizado la función Ajustar tamaño... de la aplicación Vista previa en Mac OS X.

Recuerda dar un nombre descriptivo a las imágenes y guardarlas en la carpeta del proyecto.


5. Configuración de la aplicación

Un archivo externo hace que la aplicación se convierta en pantalla completa en todos los dispositivos (el archivo config.lua). Este archivo muestra el tamaño original de la pantalla y el método utilizado para escalar ese contenido en caso de que la aplicación se ejecute en una resolución de pantalla diferente.


6. Main.lua

¡Ahora vamos a escribir la aplicación! Abre tu editor de Lua preferido (cualquier editor de texto funcionará, pero no tendrás resaltado de sintaxis) y prepárate para escribir tu nueva aplicación. Recuerda guardar el archivo como main.lua en tu carpeta de proyecto.


7. Estructura del código

Estructuraremos nuestro código como si fuera una Clase. Si conoces ActionScript o Java, la estructura te resultará familiar.


8. Ocultar la barra de estado

Este código oculta la barra de estado. La barra de estado es la barra 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 Physics para manejar las colisiones. Usa este código para importarla:


10. Antecedentes

BackgroundBackgroundBackground

La siguiente línea de código crea un fondo simple para la interfaz de la aplicación.


11. Vista del título

Title ViewTitle ViewTitle View

Esta es la Vista de Título; será la primera pantalla interactiva que aparecerá en nuestro juego. Estas variables almacenan sus componentes:


12. Vista de los créditos

Credits ViewCredits ViewCredits View

Esta vista muestra los créditos y el copyright del juego. Esta variable lo almacena:


13. Mensaje de instrucciones

Instructions

Aparecerá un mensaje de instrucciones al comienzo del juego y se apagará después de dos segundos. Puedes cambiar el tiempo más adelante en el código.


14. Turret

Turret

Este es el gráfico de la torreta, se colocará en el centro de nuestro juego.


15. Enemy

Enemy

Los enemigos aparecen desde el borde de la pantalla, el siguiente Group los almacena.


16. Alerta

AlertAlertAlert

Esta es la alerta que se muestra cuando el jugador se queda sin balas. Muestra la puntuación y termina el juego.


17. Sonidos

Sounds

Utilizaremos efectos de sonido para mejorar la sensación del juego. Los sonidos utilizados en este juego fueron creados en as3sfx y la música de fondo es de PlayOnLoop.


18. Variables

Estas son las variables que utilizaremos. Puedes leer los comentarios en el código para saber más sobre ellas.


19. Declarar funciones

Declarar todas las funciones como local al principio.


20. Constructor

A continuación crearemos la función que inicializa la lógica del juego:


21. Añadir vista de título

Ahora colocaremos el TitleView en el escenario y llamaremos a una función que añada los tap listeners a los botones.


22. Oyentes del botón de inicio

Esta 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 toca el botón "Acerca de". Para eliminar la vista de créditos, se añade un oyente al toque.


24. Ocultar créditos

Cuando se toque la pantalla de créditos, se interpolará fuera del escenario y se eliminará.


25. Mostrar la vista del juego

Cuando se pulsa el botón Play, la vista del título se interpola y se elimina, revelando la vista del juego. Hay muchas partes involucradas en esta vista así que las dividiremos en los siguientes pasos.


26. Mensaje de instrucciones

Las siguientes líneas añaden el mensaje de instrucciones.


27. Indicador de balas a la izquierda

Esta sección añade las balas en la parte superior izquierda de la pantalla. Representa los disparos disponibles que le quedan al jugador.


28. Puntuación TextField

Este es el TextField de puntuación creado en la parte superior derecha del escenario:


29. Torreta

Ahora colocaremos la torreta en el escenario.


30. Tabla de enemigos y música de fondo

A continuación, crearemos la tabla de enemigos, llamaremos a una función que añada los oyentes del juego e iniciaremos la música de fondo.


31. Juego de Oyentes

Esta función añade los oyentes necesarios para iniciar la lógica del juego:


32. Crear enemigo

La siguiente función crea los enemigos. Comienza seleccionando una posición Y aleatoria de la tabla creada previamente, y luego añade la física al objeto recién creado. Añadiremos un escuchador de colisiones a cada enemigo y también los añadiremos a la tabla de enemigos.


33. Disparar

Cuando el jugador toca la pantalla se crea una bala y se reproduce un sonido. Tiene propiedades físicas que detectan las colisiones.


34. Actualizar balas a la izquierda

Elimina una bala de la zona "Balas a la izquierda" en la parte superior izquierda del escenario.


35. Mover enemigos

La siguiente función se ejecuta cada fotograma. Aquí la usamos para mover cada enemigo en la tabla de enemigos.


36. Mover disparar balas

Un método similar se utiliza para las balas.


37. Mover balas de explosión

Cuando una bala golpea a un enemigo, se forman cuatro balas adicionales que se mueven de cuatro maneras diferentes. Este código mueve cada bala en la dirección correcta.


38. Colisiones

Esta función se ejecuta cuando la bala colisiona con un enemigo. Reproduce un sonido, llama a la función que añade las cuatro balas adicionales, aumenta la puntuación y elimina los objetos implicados en la colisión.


39. Añadir balas de explosión

Este código crea y coloca las cuatro balas adicionales en la posición correcta para ser movidas por la función de actualización.


40. Alerta

La función de alerta crea una vista de alerta, la anima y termina el juego.


41. Llamar a la función Main

Para comenzar el juego, es necesario llamar a la función Main. Con el código anterior en su lugar, lo haremos aquí:


42. Pantalla de carga

Loading Screen

El archivo Default.png es una imagen que se muestra justo al iniciar la aplicación mientras el iOS carga los datos básicos para mostrar la pantalla principal. Añade esta imagen a la carpeta de origen de tu proyecto, será añadida automáticamente por el compilador de Corona.


43. Icono

Icon

Usando los gráficos que creaste antes, ahora puedes crear un icono de aspecto agradable. El tamaño del icono del iPhone sin retina es de 57x57px, pero la versión con retina es de 114x114px y la tienda iTunes requiere una versión de 512x512px. Sugiero crear primero la versión de 512x512 y luego reducirla para los otros tamaños.

No es necesario que tenga esquinas redondeadas o un brillo transparente, iTunes y el iPhone lo hacen por ti.


44. Pruebas en el simulador

TestingTestingTesting

¡Es el momento de la prueba final! Abre el Corona Simulator, busca la carpeta de tu proyecto y haz clic en "Abrir". Si todo funciona como se espera, ¡estás listo para el último paso!


45. Construir

BuildBuildBuild

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


Conclusión

En este tutorial, hemos aprendido sobre física, temporizadores, escuchas táctiles y otras habilidades que son útiles en una gran variedad de juegos. ¡Experimenta con el resultado final e intenta hacer tu versión personalizada del juego!

Espero que hayas disfrutado de esta serie y la hayas encontrado útil. ¡Gracias por leer!

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.