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

Crea un juego de máquina tragamonedas en Flash usando AS3

Read Time: 11 mins

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

Sigue los pasos sencillos de este Tutorial Premium para crear un entretenido juego de máquinas tragamonedas en Flash. ¡Gira las ruedas y mira lo que podrías ganar!


Paso 1: Breve descripción

Usando las herramientas de dibujo de Flash, crearemos una interfaz gráfica atractiva que estará alimentada por varias clases de ActionScript 3.

El usuario podrá apostar diferentes cantidades para ganar los premios.


Paso 2: Configuración del documento Flash

Abre Flash y crea un documento de 480 píxeles de ancho y 320 píxeles de alto. Establece la velocidad de cuadros en 30 fps.



Paso 3: Interfaz


Se mostrará una interfaz oscura; esto involucra múltiples formas, botones, bitmaps y más.

Continúa con los siguientes pasos para aprender cómo crear esta GUI.


Paso 4: El fondo

Crea un rectángulo de 480x320px y llénalo con este degradado radial: #404040, #080808.


Usa el panel Alinear (Cmd + K) para centrarlo en el escenario.


Paso 5: Título

Agreguemos un título a nuestro juego; dependiendo del tema de tu máquina tragamonedas, puedes cambiar los gráficos para que se ajusten a tus necesidades. Aquí he usado el logo de Tuts+.



Paso 6: Fondo del tragamonedas

Usa la herramienta Rectángulo Primitivo (R) para crear un rectángulo de 320x160px. Cambia su radio de esquina a 10 y llénalo con este degradado lineal: #F5DA95, #967226, #91723B.


Duplica la forma, cambia su tamaño a 316x156px y cambia su color al degradado lineal negro que utilizamos anteriormente.



Paso 7: Artículos gráficos

Estos son los gráficos que usaremos como artículos de la máquina tragamonedas. ¡Puedes usar los gráficos que quieras en tu propio juego!



Paso 8: Fondos del carrete

Para crear el fondo de los carretes, usa la herramienta Rectángulo (R) para crear un rectángulo de 98x146px y llénalo con este degradado: #8F8459, #F8F4C7, #8F8459.


Duplica las formas y después las alineas en el área de las ranuras.


Paso 9: Carrete MovieClip

Organiza los gráficos de los elementos en el orden que desees y conviértelos en clips de película. Usaremos el rectángulo de fondo del carrete del último paso para crear el efecto de sombra: cambia su color a negro y cambia sus valores alfa a 65, 15, 0.

Esta puede ser una parte difícil, así que asegúrate de descargar los archivos fuente para ayudarte.


Como puedes ver, he usado dos logotipos de Nettuts+ y dos logotipos de Psdtuts+, pero solo uno de cada uno de los logotipos de Activetuts+ y Vectortuts+. Esto significa que hay una mayor posibilidad de combinar tres logotipos de Nettuts+ que de corresponder tres logotipos de Activetuts+.

Usa la sombra como una Máscara de capa y la Línea de tiempo para animar los elementos hacia abajo. Usé la animación fotograma a fotograma moviendo los elementos 20px hacia abajo en cada fotograma. Podrías usar una interpolación, si quisieras.


Duplica este clic de película y colócalos en el fondo de la ranura correcta. Usa los siguientes nombres de instancia: items1, items2, items3.


Paso 10: Etiquetas

Las etiquetas de la línea de tiempo se usarán para buscar una combinación ganadora. Crea una nueva capa y etiqueta cada cuadro en el que nuestro elemento está en el centro.



Paso 11: Campos de texto estático

Usa la Herramienta de Texto (T) para crear tres campos de texto estáticos: Créditos, Apuesta y Ganador Pagado.



Paso 12: Campos de texto dinámico

Con la herramienta de texto todavía seleccionada, crea tres campos de texto dinámicos, colócalos sobre los estáticos y asígnales un nombre, de izquierda a derecha: creditsT, betT y paidT.



Paso 13: Botones

Usa la herramienta Rectángulo Primitivo para crear tres cuadrados de 45x45px, cambia el radio de la esquina a 4 y llénalo con: #CD0202, #910202. Agrega la etiqueta de texto correspondiente a cada uno, conviértelos a un botón y asígnales un nombre: payTabB, betMaxB y betOneB.



Paso 14: Botón de Giro

El botón Girar es un poco más grande que los demás y también tiene otro color.

Usa el mismo proceso que los otros botones, pero cambia el tamaño a 50x50px y el color a: #5DA012, #3C670C.


Nombra el botón como spinB.


Paso 15: Sonidos


Utilizaremos los Efectos de sonido para mejorar la sensación del juego, puedes encontrar los sonidos utilizados en este ejemplo en Soungle.com usando las palabras clave slot machine.


Paso 16: TweenNano


Usaremos un motor Tween diferente del predeterminado incluido en Flash, esto aumentará el rendimiento y será más fácil de usar.

Puedes descargar TweenNano desde su sitio web oficial.


Paso 17: Nueva clase de ActionScript

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



Paso 18: Estructura de la clase

Crea la estructura básica de tu clase para comenzar a escribir tu código.


Paso 19: Clases requeridas

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


Paso 20: Variables

Estas son las variables que usaremos, lee los comentarios en el código para saber más sobre ellos.


Paso 21: Código 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 en ejecutarse cuando se crea una instancia de un objeto, o se ejecuta cuando SWF carga primero si pertenece a la clase  document.

Llama a las funciones necesarias para comenzar el juego. Verifica esas funciones en los siguientes pasos.


Paso 22: Elementos para detener

Evita que los carretes clips de películas se reproduzcan inmediatamente.


Paso 23: Agregar receptores de botones

Aquí usamos una función personalizada para agregar los eventos del mouse a nuestros botones; esta función se creará más adelante en la clase.


Paso 24: Desactivar el botón de giro

A continuación, usamos otra función personalizada que evitará los eventos del mouse del botón Girar.


Paso 25: Receptores de botones

Esta función agrega o elimina un Evento MouseUp a los botones dependiendo del parámetro especificado.


Paso 26: Habilitar/Deshabilitar botones

La siguiente función usa sus parámetros para interpolar el valor alfa del botón especificado y deshabilita/habilita las interacciones del mouse.


Paso 27: Botón Apuesta Máxima

El botón Bet Max o de Apuesta Máxima es manejado por esta función.

Reproduce el sonido del giro, cambia los campos de texto de créditos y llama a la función de giro.


Paso 28: Botón de apuesta

El botón Bet One se maneja con esta función.

Aumenta la apuesta en uno (si es posible) y reproduce el sonido del botón correspondiente. También habilita el botón Girar.


Paso 29: Mostrar/Ocultar la tabla de pagos

El botón Pay Table se maneja con esta función.

Comprueba si la tabla de pagos ya está en el escenario y, si no, usa un Tween para mostrarla y centrarla. Los otros botones están deshabilitados mientras se muestra la tabla.


Paso 30: Botón de giro

El botón Spin o de Giro se maneja con esta función.

Reproduce el sonido de giro y la función Spin si los créditos son correctos.


Paso 31: Función de giro o Splin

Una de las funciones principales del juego, la función de giro maneja la ganancia y el gasto de créditos, hace girar los artículos en las máquinas tragamonedas y usa un temporizador para detenerlos. Lee los siguientes pasos para obtener una vista más detallada de estas acciones.


Paso 32: Agregar créditos ganados

Esto verifica si los créditos están disponibles para agregar desde el campo de texto paidT, y restablece su valor a 0.


Paso 33: Restar los créditos

Esto resta los créditos utilizados en la última apuesta.


Paso 34: Artículos de giro

Esta función anima los carretes, para hacer que los elementos parezcan girar.


Paso 35: Temporizador de giro

Este temporizador determina (aleatoriamente) el tiempo para que los elementos del carrete giren, es diferente en cada giro.


Paso 36: Función del temporizador

Esta función se ejecuta cada vez que el temporizador finaliza su conteo.

Impide que la ranura actual gire y reproduzca el sonido de detención. Cuando se detienen todos los elementos, borra el temporizador y llama a la función checkWin().


Paso 37: Ajustar al logotipo más cercano

Como el temporizador puede terminar en un cuadro donde el elemento actual no está en el centro, verificamos el marco actual del clip de película y usamos gotoAndStop() para mostrar el elemento más cercano.

Es posible que debas modificar este código para que coincida con los símbolos y la animación de giro que elijas.


Paso 38: Verificar el triunfo

Esta función comprueba si los tres elementos son iguales, si es verdadero, reproduce el sonido ganador y agrega la cantidad correspondiente al campo de texto pagado.


Paso 39: Establecer la clase principal


Estamos haciendo uso de la clase Document en este tutorial, si no sabes cómo usarlo o estás un poco confundido, lee esta sugerencia rápida.

Establece la clase de documento de tu FLA en Main.


Paso 40: Prueba

Ahora estamos listos para probar el clip de película y ver si todo funciona como se espera, ¡no olvides probar todos los botones!



Conclusión

El resultado final es un juego personalizable y entretenido; ¡intenta agregar tus gráficos personalizados y premios! También podrías intentar alterar la probabilidad de que sea más fácil o más difícil ganar.

Espero que les haya gustado este tutorial, ¡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.