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

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.

Paso 2: Creando los gráficos

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:

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.

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.

1

package {

2

	//imports the necessary classes

3

	import flash.display.MovieClip

4

	import flash.events.MouseEvent;

5

	import flash.text.TextField;

6

	import flash.text.TextFormat;

7

	import flash.text.TextFieldType;

8

	import flash.events.Event;

9

10

	public class Main extends MovieClip {

11

        var tenCoin:TenCoin = new TenCoin(); //Creates a new instance of the Ten Coin

12

		var fiftyCoin:FiftyCoin = new FiftyCoin(); //Creates a new instance of the Fifty Coin

13

		var hundredCoin:HundredCoin = new HundredCoin(); //Creates a new instance of the Hundred Coin

14

		var badCoin:BadCoin = new BadCoin(); //Creates a new instance of the -30 Coin

15

16

		var score:Number = 0; //Sets the score to zero

17

		var scoreText:TextField = new TextField(); //Creates a textfield to display the score

18

		var scoreTextFormat:TextFormat = new TextFormat("Futura LT Heavy", 50, 0x000000); //Creates a new format for Score textfield, replace "Futura LT Heavy" with the font that you are using 

19

20

		public function Main() {

21

			displayObjects(); //The function that we will use to display all of the graphic on the stage

22

			setUpEventListeners(); //The function that we will use to add our Event Listeners

23

		}

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.

1

function displayObjects() {

2

	// Sets the position of the Ten Coin

3

	tenCoin.x = 72;

4

	tenCoin.y = 200;

5

	// Sets the position of the Fifty Coin

6

	fiftyCoin.x = 207;

7

	fiftyCoin.y = 200;

8

	// Sets the position of the Hundred Coin

9

	hundredCoin.x = 342;

10

	hundredCoin.y = 200;

11

	// Sets the position of the -Thirty Coin

12

	badCoin.x = 477;

13

	badCoin.y = 200;

14

	//Positions the score textbox and sets its type to dynamic so that it can be changed through code

15

	scoreText.type = TextFieldType.DYNAMIC;

16

	scoreText.x = 305;

17

        scoreText.y = 327;

18

	scoreText.width = 300;

19

	//Sets the format of the score textbox

20

        scoreText.defaultTextFormat = scoreTextFormat;

21

	//Adds everything to the stage

22

	addChild(tenCoin);

23

	addChild(fiftyCoin);

24

	addChild(hundredCoin);

25

	addChild(badCoin);

26

	addChild(scoreText);

27

}

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.

1

function setUpEventListeners() {

2

	//Changes all of our MovieClips into Buttons 

3

	tenCoin.buttonMode = true;

4

	fiftyCoin.buttonMode = true;

5

	hundredCoin.buttonMode = true; 

6

	badCoin.buttonMode = true; 

7

	//Adds the event listeners to add points to the score

8

	tenCoin.addEventListener(MouseEvent.CLICK, addTenPoints);

9

	fiftyCoin.addEventListener(MouseEvent.CLICK, addFiftyPoints);

10

	hundredCoin.addEventListener(MouseEvent.CLICK, addHundredPoints);

11

	badCoin.addEventListener(MouseEvent.CLICK, removeThirtyPoints);

12

	//Adds the update function to update the score

13

	stage.addEventListener(Event.ENTER_FRAME, updateScore);

14

}

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

1

function addTenPoints(evt:MouseEvent){

2

	score += 10; //Adds 10 points to the score

3

}

4

5

function addFiftyPoints(evt:MouseEvent){

6

	score += 50; //Adds 50 points to the score

7

}

8

9

function addHundredPoints(evt:MouseEvent){

10

	score += 100; //Adds 100 points to the score

11

}

12

13

function removeThirtyPoints(evt:MouseEvent){

14

	score -= 30; //Subtracts 30 points from the score

15

	// This if statement doesn't allow the score to go below zero

16

	if(score < 10) {

17

		score -= score;

18

	}

19

}

20

21

function updateScore(evt:Event){

22

	scoreText.text = String(score); //This converts the score variable from a number to a string, because our score textbox can only display strings

23

}

24

} //Closes the class

25

} //Closes the package

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!