Consejo rápido Una pantalla de puntuación simple para juegos flash

Casi todos los juegos utilizan un sistema de puntuación para ayudar a los jugadores a ver su progreso. Es esencial mostrar el puntaje del jugador de una manera clara y divertida. En este Consejo rápido vamos a aprender cómo hacer precisamente eso.!


Introducción

Haga clic en el botón para agregar 20,000 puntos a su puntaje:

En este Consejo rápido aprenderemos cómo crear una pantalla de puntuación. Para mejorar la calidad de nuestra pantalla, vamos a hacer dos cosas:

  1. Agregue comas a nuestra puntuación, para que lea 1,600,000 en lugar de 1600000. Esto hace que sea más fácil para el jugador averiguar qué tan grande es su puntuación.
  2. Realiza nuestra transición de puntuación entre los valores, en lugar de cambiar de inmediato. Esto le da al jugador una sensación de logro, porque realmente ve crecer su puntaje.

Al final tendremos una clase muy simple y útil, que puede usar fácilmente en cualquiera de sus proyectos..

Esta clase solo se ocupará de mostrar la puntuación, no de calcularla..


Paso 1: Creando nuestra clase

En primer lugar vamos a crear nuestra clase; Lo he llamado ScoreDisplay:

 paquete import flash.display.Sprite; La clase pública ScoreDisplay extiende Sprite función pública ScoreDisplay () 

Paso 2: Agregar nuestras variables de puntuación

Vamos a añadir lentamente algunas variables:

 paquete import flash.display.Sprite; La clase pública ScoreDisplay extiende Sprite // la puntuación que se está mostrando, mientras que está aumentando public var currentScore: uint; // puntuación del jugador puntuación var privada: uint; Función pública ScoreDisplay () 

Vamos a mostrar nuestra puntuación en un Campo de texto. Si desea utilizar un símbolo al trabajar con ScoreDisplay, no necesitarás crear el campo de texto por código. Sin embargo, si no desea utilizar un Símbolo, deberá llamar createScoreField ().

Recuerde que si desea usar su propio Símbolo, debe dar al campo de texto dentro de ese símbolo el nombre de instancia de currentScore Field.

 paquete import flash.display.Sprite; importar flash.text.TextField; La clase pública ScoreDisplay extiende Sprite // el campo de texto que mostrará currentScore public var currentScoreField: TextField; // la puntuación que se muestra, mientras que está aumentando public var currentScore: uint; // puntuación del jugador puntuación var privada: uint; función pública ScoreDisplay ()  // si el desarrollador no vinculará esta clase a un símbolo, este método debe llamarse función pública createScoreField (): void currentScoreField = new TextField (); addChild (currentScore Field); 

Paso 3: Cambiar y establecer nuestra puntuación

Ahora vamos a empezar a pensar qué nos gustaría hacer con nuestro ScoreDisplay clase. Nos gustaría poder establecer una puntuación, así como sumar o restar de la puntuación del jugador. Así que vamos a crear esos métodos!

 paquete import flash.display.Sprite; importar flash.text.TextField; La clase pública ScoreDisplay extiende Sprite // el campo de texto que mostrará currentScore public var currentScoreField: TextField; // puntuación del jugador puntuación var privada: uint; // la puntuación que se muestra, mientras que aumenta la variable privada var currentScore: uint; función pública ScoreDisplay ()  // si el desarrollador no vincula esta clase a un símbolo, este método debe llamarse función pública createScoreField (): void currentScoreField = new TextField (); addChild (currentScore Field);  función pública setScore (_valor: uint): void score = _valor;  función pública changeScore (_change: uint): void score + = _change; 

Paso 4: Visualización de nuestra puntuación

Hasta ahora todo bien, ahora podemos establecer y cambiar el valor de la puntuación. Pero, ¿cómo vamos a mostrar esto? Aunque puede que aún no parezca muy útil, usaremos un detector de eventos para ingresar fotogramas. No te preocupes, tendrá sentido.!

 paquete import flash.display.Sprite; import flash.events.Event; importar flash.text.TextField; La clase pública ScoreDisplay extiende Sprite // el campo de texto que mostrará currentScore public var currentScoreField: TextField; // puntuación del jugador puntuación var privada: uint; // la puntuación que se muestra, mientras que aumenta la variable privada var currentScore: uint; función pública ScoreDisplay () addEventListener (Event.ENTER_FRAME, showScore, false, 0, true);  // si el desarrollador no vincula esta clase a un símbolo, este método debe llamarse función pública createScoreField (): void currentScoreField = new TextField (); addChild (currentScore Field);  función pública setScore (_valor: uint): void score = _valor;  función pública changeScore (_change: uint): void score + = _change;  función privada showScore (evento: Evento): void currentScoreField.text = String (puntaje); 

Paso 5: Nuestra clase parcialmente terminada

Si quisiéramos usar nuestra clase en un proyecto, se vería así. Parece funcionar bien, la puntuación cambia, pero no hemos terminado. Recuerda lo que queríamos hacer.?

  1. Agregue comas a nuestra puntuación, para que lea 1,600,000 en lugar de 1600000.
  2. Realiza nuestra transición de puntuación entre valores, en lugar de cambiar de inmediato.

Paso 6: Añadir comas

Empecemos por el primer objetivo, sumando comas..

 paquete import flash.display.Sprite; import flash.events.Event; importar flash.text.TextField; La clase pública ScoreDisplay extiende Sprite // el campo de texto que mostrará currentScore public var currentScoreField: TextField; // puntuación del jugador puntuación var privada: uint; // la puntuación que se muestra, mientras que aumenta la variable privada var currentScore: uint; función pública ScoreDisplay () addEventListener (Event.ENTER_FRAME, showScore, false, 0, true);  // si el desarrollador no vincula esta clase a un símbolo, este método debe llamarse función pública createScoreField (): void currentScoreField = new TextField (); addChild (currentScore Field);  función pública setScore (_valor: uint): void score = _valor;  función pública changeScore (_change: uint): void score + = _change;  función privada showScore (evento: Evento): void currentScoreField.text = addCommas (puntaje);  función privada addCommas (_score: uint): String // una cadena, que tendrá la puntuación con comas var scoreString: String = new String (); // la cantidad de caracteres que nuestra puntuación (sin comas) tiene var scoreLength: uint = _score.toString (). length; scoreString = ""; // agregue las comas a la cadena para (var i: uint = 0; i 

Paso 7: Transición entre puntuaciones

Ahora trabajemos en nuestro segundo objetivo; Transición entre valores de puntuación, en lugar de cambiar al nuevo valor inmediatamente.

Para esto podemos usar las asombrosas capacidades del Tween clase. La mayoría de las veces pensamos en la clase Tween para mover objetos de visualización, pero puede usarla para cambiar cualquier valor numérico, incluida nuestra puntuación.

 paquete import fl.transitions.Tween; importar fl.transitions.easing. *; importar flash.display.Sprite; import flash.events.Event; importar flash.text.TextField; La clase pública ScoreDisplay extiende Sprite // la cantidad de tiempo (en ms) que se necesita para hacer la transición de un valor de puntuación a otro una constante estática privada TRANSITION_LENGTH: uint = 500; // la puntuación que se muestra, mientras que está aumentando public var currentScore: uint; // puntuación del jugador puntuación var privada: uint; // el campo de texto que mostrará currentScore private var currentScoreField: TextField; // esto interpolará el valor de la puntuación actual private var currentScoreTween: Tween; función pública ScoreDisplay () addEventListener (Event.ENTER_FRAME, showScore, false, 0, true);  // si el desarrollador no vincula esta clase a un símbolo, este método debe llamarse función pública createScoreField (): void currentScoreField = new TextField (); addChild (currentScore Field);  función pública setScore (_valor: uint): void score = _valor; tweenCurrentScore ();  función pública changeScore (_change: uint): void score + = _change; tweenCurrentScore ();  función privada showScore (evento: Evento): void currentScoreField.text = addCommas (currentScore);  función privada tweenCurrentScore (): void currentScoreTween = new Tween (this, "currentScore", None.easeNone, currentScore, TRANSITION_LENGTH, true);  función privada addCommas (_score: uint): String // una cadena, que tendrá la puntuación con comas var scoreString: String = new String (); // la cantidad de caracteres que nuestra puntuación (sin comas) tiene var scoreLength: uint = _score.toString (). length; scoreString = ""; // agregue las comas a la cadena para (var i: uint = 0; i 

Estamos hechos!

¡Y eso es! Podría ampliar esta clase y quizás agregar algunos sonidos o "gráficos de lujo". Espero que hayas pasado un buen rato y hayas aprendido algo, saludos.!