Advertisement
  1. Code
  2. Games

Tip rápido: Crea un sistema de puntos simple usando AS3

Scroll to top
Read Time: 6 min

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

En este tip rápido, aprenderás a crear un sistema de puntos simple que se pueda extender a tus propios juegos. Este tutorial es para personas totalmente principiantes, y en él aprenderás a crear un conjunto de botones en los que el jugador puede hacer clic para agregar o restar puntos a su puntuación. ¡Sencillo!

Aunque este tutorial es para principiantes en la programación Flash, necesitarás saber un poco sobre el uso de las herramientas de dibujo en Flash Professional. Si necesitas aprender a usar las herramientas de dibujo, lee este artículo.


Vista previa del resultado final

Echemos un vistazo al resultado final de lo que vamos a trabajar:


Paso 1: Configuración de tu archivo Flash

Abre Flash y crea un nuevo documento Flash. Establece el tamaño del documento en 550x400px, el FPS (cuadros por segundo) en 24 y establece la clase 'document' en Main.

This is how it should look.

Paso 2: Creando los gráficos

These are the graphics you will need to create.These are the graphics you will need to create.These are the graphics you will need to create.Estos son los gráficos que necesitarás crear.

Para crear los gráficos, utiliza la herramienta Oval y haz cuatro círculos con un contorno #000000 (negro) y un tamaño de trazo de 12,50.

Cada círculo debe tener un color de relleno diferente. Los colores de relleno son los siguientes:

  • Moneda de 10: #993300
  • Moneda de 50: #999999
  • Moneda de 100: #FFCC00
  • Moneda de -30: #990000

Después de crear las monedas, usa cuadros de texto estáticos para escribir sus respectivos valores como se muestra en la imagen de arriba. La fuente que usaré a lo largo de este tutorial es Futura LT Heavy, con un tamaño de 50, pero siéntete libre de usar tu propia fuente y su tamaño. Después de completar las instrucciones, debes tener una moneda de 10, una moneda de 50, una moneda de 100 y una moneda de -30.

Ahora convertiremos cada moneda en un clip de película. Selecciona la moneda 10 y presiona F8. Deberías ver un diálogo como este:

The image has everything filled out. Make sure you write down the same things in your dialog.The image has everything filled out. Make sure you write down the same things in your dialog.The image has everything filled out. Make sure you write down the same things in your dialog.La imagen tiene todo el relleno. Asegúrate de escribir las mismas cosas en tu diálogo.

Repite este paso para la moneda de 50, la moneda de 100 y la moneda de -30 e ingresa lo siguiente en las casillas 'Name' y 'Class' para cada moneda:

  • Moneda de 50: FiftyCoin
  • Moneda de 100: HundredCoin
  • Moneda de -30: BadCoin

Una vez que hayas creado los MovieClips de todas las monedas, selecciónalas todas y elimínalas del escenario. Los agregaremos nuevamente más adelante, usando código.

Para finalizar este paso crea un cuadro de texto estático con el texto "SCORE:" y colócalo con un valor X de 135 y un valor Y de 327.


Paso 3: Configurar el paquete y la clase Main

En este paso, configuraremos nuestro paquete y la clase Main.

Crea una nueva clase de ActionScript y, en la clase Name, escribe Main. Una vez que hayas creado la clase, guárdala en la misma carpeta que tu archivo Flash y asegúrate de que esté guardada como Main.as.

Make sure your dialog looks like this.Make sure your dialog looks like this.Make sure your dialog looks like this.Asegúrate de que tu cuadro de diálogo se vea como este.

Ingresa el código a continuación en tu archivo Main.as, luego guárdalo.

Primero importamos las clases que necesitamos y configuramos nuestra clase 'document'. Luego ampliamos la clase Main de MovieClip; podríamos usar Sprite, pero realmente no importa. Después de eso, declaramos las variables que estamos usando y agregamos código a nuestra función Main() (nuestra "función constructora").

La función Main() mostrará todas las monedas que creamos en el escenario y también agregará los oyentes de eventos que necesitamos usar.

Nota: Deberás incrustar la fuente en tu FLA para que se muestre en campos de texto dinámicos si tu usuario no tiene la fuente instalada. No he hecho esto aquí, para simplificar las cosas.


Paso 4: Programar la función displayObjects()

La función displayObjects() se llama desde la función Main(). El propósito de esta función es agregar las monedas y el cuadro de texto de la puntuación al escenario y colocarlos en su ubicación correcta.


Paso 4: Programar la función setUpEventListeners() y los controladores de eventos.

Ahora que hemos agregado objetos al escenario, tenemos que crear funciones de manejo de eventos que se activan al hacer clic en las monedas. También necesitaremos una función updateScore() para usar para que la puntuación se actualice y no permanezca igual.

Ahora debemos codificar las funciones que cambian y actualizar la partitura.

Tu código ahora está listo para ser probado. Presiona CTRL + Enter (CMD + Enter en una Mac) y observa cómo tu sistema de puntos cobra vida.


En resumen

Ahora podrías estar pensando: "He perdido el tiempo, todo lo que este tutorial me enseñó a hacer fue crear algunos botones que le dan puntos cuando hace clic en ellos", pero has aprendido más que esto.

Mira esto como base para un sistema de puntos más avanzado. Aprendiste a usar += y -= para sumar o restar de un número, aprendiste a usar detectores de eventos, aprendiste a crear una función para actualizar objetos mientras el SWF se está ejecutando y aprendiste a cambiar un número a una cadena y mostrarlo en un cuadro de texto dinámico que creaste completamente a través del código.


Conclusión

Este sistema de puntos puede ampliarse fácilmente a tus propios juegos. Para aquellos de ustedes que tienen más experiencia en Flash, intenta crear un juego que usa una función hitTestObject y agrega puntos cuando golpeas un objeto.

Espero que hayas aprendido algo nuevo hoy. ¡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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.