7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. Game Design

Construir un llamativo juego de ruptura en Flash

Read Time: 14 mins

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

En este Tutorial Premium, vamos a construir un juego Breakout; "Brick Breaker" desde cero usando Flash y AS3.


Paso 1: Breve resumen

Utilizando las herramientas de dibujo de Flash crearemos una interfaz gráfica de buen aspecto que será impulsada por varias clases de ActionScript 3.

El usuario podrá jugar a través de una serie de niveles, ¡puedes añadir fácilmente tantos niveles como quieras!


Paso 2: Configuración del documento Flash

Abre Flash y crea un documento de 320 píxeles de ancho y 480 de alto. Ajusta la velocidad de fotogramas a 24fps.


Paso 3: Interfaz

Se mostrará una interfaz colorida y de aspecto agradable. Contendrá múltiples formas, botones, mapas de bits y mucho más.

Vamos a saltar directamente a la creación de esta interfaz gráfica de usuario.


Paso 4: Pantalla principal

Esta es la pantalla o vista principal, será el primer gráfico que aparezca en nuestro juego.


Paso 5: Antecedentes

Crea un rectángulo de 320x480 y rellénalo con este degradado radial: #3A9826, #102A07.

Vamos a darle un poco más de detalle añadiendo un filtro de Photoshop, si no tienes Photoshop puedes intentar añadir un bonito efecto usando las herramientas de Flash.

Abre la imagen en Photoshop y ve a Filtros > Textura > Patchwork, utiliza la siguiente configuración:

Terminarás con algo así:

Este fondo estará en el escenario al igual que los indicadores de paleta, pelota y texto. Convierte el fondo en un MovieClip y llámalo bg.


Paso 6: Título

Selecciona la herramienta de texto (T), elige una fuente adecuada y escribe el título de tu juego. Yo he utilizado este formato: Akashi, 55pt, #FFCC33.

Selecciona el campo de texto y utiliza el panel de filtros para añadir una sombra:

Duplica el texto (Cmd + D) y muévelo 3px hacia arriba para darle algo de relieve.

Convierte los gráficos en un MovieClip y nómbralo MenuScreen, recuerda marcar la casilla Export for ActionScript. Puedes eliminar esto del escenario cuando termines, ya que será llamado usando AS3.


Paso 7: Paleta

Usa la herramienta Rectángulo Primitivo (R) para crear un rectángulo redondo de 57x11.5px, cambia el radio de la esquina a 10 y aplica este gradiente: #4E4E4E, #BABABA, #B0B3BA.

Añade algunas líneas de detalle con la herramienta Rectángulo, ¡utiliza tu propio estilo!

También puedes añadir algo de color a tu paleta, aquí está el resultado final de la mía, el color utilizado es: #CC0000.

Convierta los gráficos en un MovieClip y nómbrelo como paleta.


Paso 8: Pelota

Para crear la pelota, selecciona la herramienta Oval (O) y utilízala para crear un círculo de 12x12px, #CCCCCC.

Duplica el círculo (Cmd + D) cambia su tamaño a 10x10px y rellénalo con este degradado radial: #95D4FF, #0099FF.

Por último, corta el segundo círculo por la mitad y utiliza la herramienta de selección (V) para hacer una curva en la parte inferior. Cambia su color a un degradado lineal blanco con alfa 60, 10.

Convierte los gráficos en un MovieClip y llámalo pelota.


Paso 9: Ladrillo

Nuestro ladrillo será muy sencillo.

Usa la herramienta Rectángulo para crear un rectángulo de 38x18px y aplica el siguiente degradado: #CC0000, #8E0000, #FF5656.

Convierte el rectángulo en un MovieClip y aplica el filtro de sombra utilizado en el texto del título para darle un aspecto más agradable.

Convierte de nuevo el gráfico en un MovieClip y nómbralo Brick, recuerda marcar la casilla Exportar para ActionScript.


Paso 10: Pantalla "About" (Acerca de)

La pantalla "About" mostrará los créditos, el año y el copyright del juego.

Será bastante sencillo de crear, pues ya tenemos todos los elementos que se utilizan en él.

Convierte los gráficos en un MovieClip y nómbralo AboutScreen, recuerda marcar la casilla Export for ActionScript.


Paso 11: Pantalla de juego

Esta es la pantalla del juego, estará en el escenario desde el principio y contendrá la pala, la pelota, el fondo y los indicadores de texto. (Añadiremos los ladrillos mediante código).

Los nombres de las instancias son bastante fáciles y se explican por sí mismos: paddle, ball, bg, scoreTF, livesTF y levelTF.


Paso 12: Insertar fuentes

Para poder utilizar la fuente personalizada de forma dinámica tendremos que incrustarla en la aplicación.

Selecciona un campo de texto dinámico y haz clic en el botón Incrustar... del Panel de Propiedades.

Selecciona/añade todos los caracteres necesarios y haz clic en OK.


Paso 13: Pantalla de alerta

Esta pantalla aparecerá cuando se haya decidido la partida; o bien se gana, se pierde o se llega al game over (ganar todos los niveles o perder todas las vidas).

En esta vista se utilizan dos TextFields dinámicos, que mostrarán el estado actual del juego más un breve mensaje. Los TextFields se llaman titleTF y msgTF.

Convierte los gráficos en un MovieClip y marca la casilla Exportar para ActionScript, establece el nombre de la clase como AlertScreen.

Con esto termina la parte gráfica, ¡que empiece el ActionScript!


Paso 14: Tween Nano

Utilizaremos un motor de interpolación diferente al incluido por defecto en flash, esto aumentará el rendimiento y será más fácil de usar.

Puedes descargar Tween Nano desde su página web oficial.


Paso 15: Nueva clase de ActionScript

Crea una nueva (Cmd + N) Clase de ActionScript 3.0 y guárdala como Main.as en tu carpeta de clases.


Paso 16: Estructura de la clase

Crea tu estructura de clases básica para empezar a escribir tu código.


Paso 17: Clases requeridas

Estas son las clases que necesitaremos importar para que nuestra clase funcione, la directiva import hace que las clases y paquetes definidos externamente estén disponibles para tu código.


Paso 18: Variables y constantes

Estas son las variables y constantes que utilizaremos, lee los comentarios en el código para descubrir más sobre ellas.


Paso 19: Niveles

Todos nuestros niveles se almacenarán en arrays multidimensionales.

Se trata de arrays que contienen arrays; puedes escribirlos en una sola línea, pero si los alineas puedes ver realmente la forma que tendrá el nivel.

En estos niveles los 1s representan el espacio del escenario donde se colocará un ladrillo, y los 0s son simplemente espacio vacío. Estos niveles serán leídos posteriormente por una función que colocará los ladrillos en el escenario. ¡Puedes añadir tantos niveles como quieras usando esta clase!


Paso 20: Código del constructor

El constructor es una función que se ejecuta cuando se crea un objeto a partir de una clase; este código es el primero que se ejecuta cuando se crea una instancia de un objeto (o se ejecuta cuando se carga el juego, en el caso de una clase documento).

Llama a las funciones necesarias para iniciar el juego. Comprueba estas funciones en los siguientes pasos.


Paso 21: Pantalla de menús y animación de la vista "About".

Las siguientes líneas manejan los botones de la pantalla de menús y alternan la vista de menús o de "Acerca de" dependiendo del botón presionado.


Paso 22: Función Init

Esta función realiza las operaciones necesarias para iniciar el juego, lee los comentarios en el código para saber más sobre ella.


Paso 23: Mover la paleta

La paleta será controlada por el ratón, seguirá la posición x del ratón.


Paso 24: Colisión del borde de la paleta

Para evitar que la paleta salga del escenario, creamos límites invisibles a los lados de la pantalla.


Paso 25: Construir función de nivel

Los niveles serán construidos por esta función.

Utiliza un parámetro para obtener el nivel a construir, calcula su tamaño y ejecuta un bucle for anidado, con un bucle para la altura y otro para la anchura. A continuación, crea una nueva instancia de Brick que se coloca según su anchura, altura y el número correspondiente a i y j.

Por último, el bricks se añade al vector de bloques para acceder a él fuera de esta función.


Paso 26: Escuchar el juego

Esta función añade o elimina los escuchadores del ratón y del marco de entrada. Utiliza un parámetro para determinar si los oyentes deben ser añadidos o eliminados: por defecto es añadir.


Paso 27: Iniciar la función de juego

El siguiente código llama a la función gameListeners() para iniciar el juego.


Paso 28: Movimiento de la pelota

La velocidad de la pelota está determinada por las variables xSpeed y ySpeed, cuando se ejecuta la función update, la pelota comienza a moverse usando estos valores en cada cuadro.


Paso 29: Colisión con la pared

Este código comprueba las colisiones entre la pelota y las paredes.


Paso 30: Perder el evento del juego

Se utiliza una sentencia if para comprobar si la paleta pierde la pelota. Si es así, el jugador pierde una vida.


Paso 31: Colisiones de pelotas de paleta

Cuando la pelota golpea la paleta, la ySpeed se pone en negativo para que la pelota suba. También comprobamos en qué lado de la paleta ha golpeado la pelota para elegir el lado al que se moverá a continuación.


Paso 32: Colisiones de bloques

Usamos un for y hitTest para comprobar las colisiones con los bloques, cuando la pelota choca con un bloque se usa la misma técnica utilizada en la paleta para determinar el lado que seguirá la pelota.


Paso 33: Cambiar la dirección de la pelota y retirar el bloque

El siguiente código cambia la dirección Y de la pelota y elimina el bloque del escenario y el vector.

Si quieres, puedes cambiar esta lógica para que la velocidad y de la bola sólo se invierta si golpea la parte superior o inferior de un ladrillo, y no cuando golpea los lados. Pruébalo y verás qué te parece.


Paso 34: Añadir puntuación y comprobar la victoria

Cada golpe de bloque añadirá 100 a la puntuación, la puntuación se tomará de la constante de puntuación y se añadirá a la puntuación actual utilizando las funciones int y String. Este código también comprueba si no hay más bloques en el vector y muestra una alerta si es así.


Paso 35: Pantalla de alerta

La pantalla de alerta muestra al jugador información sobre el estado del juego, se muestra cuando se alcanza un evento del juego, como perder una vida o completar un nivel.

En esta función se utilizan dos parámetros:

  • t: El título de la alerta
  • m: Un mensaje corto

Paso 36: Función de reinicio

La siguiente función comprueba el estado de la partida (ganada, perdida, terminada) y realiza una acción en función de ello.


Paso 38: Cambiar de nivel

Esta función cambia al nivel escrito en el parámetro.


Paso 39: Borrar el nivel

Una función para eliminar los bloques restantes y las alertas del escenario. También restablecerá la posición de la paleta y la pelota.


Paso 40: Establecer la clase principal

En este tutorial haremos uso de la Clase Documento, si no sabes cómo usarla o estás un poco confundido por favor lee este QuickTip.


Conclusión

El resultado final es un juego personalizable y entretenido, ¡prueba a añadir tus gráficos y niveles personalizados!

Espero que te haya gustado este tutorial de Active Premium, ¡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 Game Development 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.