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 ping-pong de equilibrio

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 equilibrio en Corona SDK. Aprenderás más sobre los controles táctiles y la detección de colisiones sin física. El objetivo del juego es evitar que la pelota toque el suelo. Sigue leyendo.


1. Descripción de la aplicación

App Overview

Usando gráficos ya hechos, crearemos un juego entretenido usando Lua y las APIs de Corona SDK. El jugador podrá mover una paleta de ping-pong en la pantalla para golpear una pelota. Puedes modificar los parámetros en el código para personalizar el juego.


2. Dispositivo de destino

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:

  • Tableta Asus Nexus 7: 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 si te diriges a la plataforma Android.


3. Interface

Interface

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. Exportar gráficos

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 otra resolución.


6. main.lua

Vamos a escribir la aplicación real. Abre tu editor de Lua preferido. Cualquier editor de texto plano funcionará, pero es recomendable 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 proyecto

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. Background

Background

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


10. Vista del título

Title View

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


11. Vista de los créditos

Credits View

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


12. Mensaje de instrucciones

Instructions

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


13. Paleta

Paddle

Este es el gráfico de la paleta de ping-pong. Se colocará en el centro de la vista.


14. Bola

Ball

Y este es el gráfico de la pelota de ping-pong utilizada en el juego.


15. Alerta

Alert

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


16. Sonidos

Sounds

Utilizaremos efectos de sonido para animar el juego. Los sonidos utilizados en este juego se pueden encontrar en freesound, una base de datos colaborativa de sonidos con licencia Creative Commons.


17. Variables

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


18. Declarar funciones

Declarar todas las funciones como local al principio.


19. Constructor

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


20. 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.


21. Botón para escuchar el inicio

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


22. Mostrar créditos

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


23. Ocultar créditos

Cuando el usuario toca la vista de los créditos, se anima fuera del escenario y se retira.


24. 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 la vista del juego. Hay una serie de partes móviles, así que vamos a echar un vistazo a cada una de ellas.


25. Mensaje de instrucciones

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


26. Piezas de paleta

A continuación, añadimos las partes de la paleta. Se divide en dos partes para una mejor detección de colisiones.


27. Bola

Añadimos la bola y fijamos su escala.


28. Puntuación

Creamos un campo de texto de puntuación en la parte superior derecha del escenario.


29. Oyentes del juego

La siguiente función añade los listeners necesarios para iniciar la lógica del juego.


30. Función de inicio

La función startGame elimina el mensaje de instrucción y añade un listener a la función principal del juego. En la función, se selecciona una posición y aleatoria de la tabla creada previamente y posteriormente se añade la física al objeto recién creado. Añadimos un listener de colisiones a cada enemigo y también los añadimos a la tabla de enemigos.


31. Golpear objetos de prueba

Para la detección de colisiones sin usar la física, usamos una gran función, que puedes encontrar en el sitio web de Corona Labs Code Exchange.


32. Bola de balanza

La función update, que se muestra a continuación, se ejecuta cada fotograma. En esta función, primero escalamos la bola en base a los valores establecidos por las variables.


33. Elevación del balón

Esta parte aumenta el tamaño de la bola para simular un aumento de su altura.


34. Balón perdido

El mismo método se utiliza para comprobar si el balón ha tocado el suelo, un aspecto esencial del juego.


35. Mover la pelota

En el siguiente fragmento de código, movemos la bola. En función del valor de las variables, se mueve hacia arriba o hacia abajo.


36. Golpe de balón

Se establece una escala a la misma altura de la paleta, lo que significa que la pelota ha tocado la paleta. A continuación, aumentamos la puntuación y reproducimos un sonido para proporcionar información al usuario.


37. Cambiar la dirección del balón

La paleta está dividida en cuatro secciones, arriba a la izquierda, arriba a la derecha, abajo a la izquierda y abajo a la derecha. Cada sección mueve la pelota en una dirección diferente.


38. Mover la paleta

La función movePaddle maneja el movimiento de la paleta mediante controles táctiles.


39. Alerta

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


40. Llamar a la función principal

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


41. 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.


42. 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 el material gráfico de iTunes y luego crees las imágenes de menor tamaño reduciendo el material gráfico 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.


43. 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.


44. Proyecto de construcción

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 los listeners táctiles y la detección de colisiones. 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.