Crear una clase contador de puntaje de estilo pinball

() translation by (you can also view the original English article)

Dos veces al mes, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores de toda la historia de Activetuts +. Este tutorial se publicó por primera vez en febrero de 2010.

En este tutorial, creará una clase de puntuación reutilizable que cuenta hasta el nuevo total cuando se agregan puntos (en lugar de saltar a la nueva puntuación). Cubriremos la creación de gráficos, así como el código.

Vista previa del resultado final

En algunos juegos, cuando ganes puntos, verás que tu puntuación saltará inmediatamente al nuevo total. Creo que es mucho mejor si la puntuación cuenta uno por uno, por lo que el jugador puede "acumular puntos". Eso es lo que haremos aquí.

Aquí hay un ejemplo de la clase de puntuación en acción:

La idea principal detrás de este tutorial es enseñarle a programar la funcionalidad de "contar", pero también le mostraré cómo crear la pantalla LED que se ve en la vista previa. Comenzaremos diseñando los números:

Paso 1: Configura tu archivo flash

Cree un nuevo archivo Flash (ActionScript 3.0). La configuración de tu película variará dependiendo de tu juego. Para esta demostración, estoy configurando mi película como 500x300, fondo negro y 30 fps.

Paso 2: Crea el símbolo del dígito

Cree un nuevo símbolo de Clip de película (Insertar > Nuevo símbolo). Dale a este símbolo el nombre "dígit".

Paso 3: Crea el campo de texto de dígitos

Dentro del clip de película del dígito, use la herramienta Texto para agregar un número 0 al símbolo. Estoy usando una fuente llamada Lectura digital, pero cualquier fuente de estilo LED debería funcionar.

Establezca el tamaño del texto en 40 pt y conviértalo en un color ámbar claro / naranja (#F4C28B). Establecer el formato de párrafo en centrado.

Paso 4: Añadir resplandores

Agrega dos filtros luminosos separados a tu campo de texto. Establezca el color en rojo (#FF0000) para ambos y establezca la intensidad de ambos en 200%.

Marque la casilla de verificación Resplandor interno para uno y establezca Desenfoque en 2px. Deja el otro en 5px.

Puede usar un color diferente si lo desea (azul o verde se verían bien). El truco para lograr que se vea realista es hacer que el color del texto quede un poco descolorido y establecer el brillo en un color más saturado. Esto hace que parezca que está emitiendo luz.

Paso 5: Añadir más números

Cree fotogramas clave en los fotogramas 1-10 del clip de película del dígito. Una forma fácil de hacer esto es seleccionar los cuadros 1-10 (haga clic en el cuadro 1, luego presione Mayús y haga clic en el cuadro 10) y presione F6.

Ahora debería tener 10 cuadros, cada uno con un cuadro clave con su campo de texto brillante 0. Ir a través de cada marco y cambiar los números para que tenga los dígitos 0-9. El cuadro 1 tendrá "0", el cuadro 2 tendrá "1", el cuadro 3 tendrá "2", etc.

Nombra esta capa "numbers".

Paso 6: Añadir el fondo de LED

Ahora agregaremos un estado "apagado" para los números de LED, por lo que podrá ver los segmentos apagados de la pantalla LED.

Copia tus 8 dígitos (en el cuadro 9). Crear una nueva capa llamada "fondo". Con la nueva capa seleccionada, use Pegar en el lugar (Editar> Pegar en el lugar) para pegar los 8 dígitos en la posición exacta como la que copiamos.

Elimine los resplandores del nuevo 8 dígitos y cambie su color a gris oscuro (#333333). Agregue un filtro de desenfoque con el desenfoque establecido en 3px. Mueve esta capa debajo de la capa "numbers".

Ahora puede desplazarse por los marcos y ver cómo se ven los segmentos apagados del LED detrás de cada número.

Paso 7: Añadir la acción de parada

Crear otra nueva capa llamada "actions". Abra el Panel de acciones y agregue una acción stop() en el marco 1.

Esto mantendrá la pantalla mostrando '0' hasta que le indiquemos lo contrario.

Paso 8: ¿Por qué marcos?

¿Por qué estamos colocando manualmente cada dígito en su propio marco en lugar de usar un campo de texto dinámico? Buena pregunta.

La razón principal es que al hacerlo es más flexible para actualizar los gráficos más adelante. Si desea cambiar el diseño y usar mapas de bits para los números, o hacer que cada dígito se muestre en una fuente o color diferente, esto lo hace más fácil.

Además, si los diseñadores y desarrolladores están trabajando juntos en un proyecto, es mejor crear las cosas de manera que los diseñadores puedan acceder fácilmente a la mayor cantidad de gráficos posible.
Siento que esta configuración hace eso más que usar texto dinámico.

Paso 9: Crea el clip de película Score

Crea un nuevo clip de película llamado "Score". Marque 'Exportar para ActionScript' y configure el nombre de la clase en "Puntuación" también.

Arrastre el clip de película del dígito desde la Biblioteca hasta el clip de película Puntuación. Duplique el clip de dígitos (Edición> Duplicar) seis veces (para que tenga siete dígitos) y espacíelos de manera uniforme.

Como solo tenemos siete dígitos, la puntuación máxima que podremos mostrar es de 9,999,999. Si su juego tendrá que acomodar puntuaciones más altas, agregue más dígitos en consecuencia.

Agregue un poco más de espacio entre cada tercer dígito para permitir separadores de coma.

Paso 10: Nombra los clips de dígitos

Seleccione el clip de película del dígito más a la izquierda y asígnele el nombre de instancia "dígito1". Nombre el siguiente a la derecha "digit2", luego "digit3" y así sucesivamente.

Paso 11: Añadir comas

Crea una nueva capa llamada "commas".

La forma más fácil de hacer que las comas se vean exactamente como los números es ir a uno de los clips de dígitos y copiar uno de los campos de texto numérico.
Vuelva dentro del clip de película Score, pegue el campo de texto en la capa de comas y cambie el número a una coma. Duplícalo y muévelo tantas veces como necesites.

Paso 12: Añadir un fondo

Para el fondo del puntaje solo agregaremos un simple rectángulo redondeado.

Cree una nueva capa llamada "fondo" y colóquela detrás de las capas de números y comas. Seleccione la herramienta Rectángulo y pulse Opción (Alt-clic) en el escenario. Haz un rectángulo de 200px x 40px con esquinas de 3px (haz el tuyo más largo si tienes más dígitos). Haga que el relleno sea negro y el trazo 1px gris (#666666).

Por alguna razón, Flash siempre distorsiona los trazos en rectángulos redondeados. Para solucionar esto, seleccione el trazo y elija Modificar > Forma > Convertir líneas a rellenos. Esto convierte el trazo de una línea a una forma rellena y ya no se distorsionará.

Si cree que este es un truco total para una funcionalidad básica que debería haberse solucionado hace años, le insto a que se ponga en contacto con Adobe y se lo haga saber.

Paso 13: Añadir Brillo

¿Qué gráfico estaría completo sin un brillo similar al de un iPhone?

Crear una nueva capa por encima de todo lo demás llamado "brillo". Agregue un nuevo rectángulo redondeado, ligeramente más pequeño que el de fondo. Esta vez no le dé ningún trazo y rellénelo con un degradado blanco desde 20% Alpha hasta 0% Alpha.

Paso 14: Crea la clase de puntaje

Crea un nuevo archivo de Actionscript llamado "Score.as". Guárdelo en el mismo directorio que su archivo principal de Flash. Dado que el nombre de esta clase y el nombre de la clase de exportación de nuestro clip de película de Score son los mismos, Flash los vinculará automáticamente.

Agregue este código al archivo Score.as:


package {

  import flash.display.MovieClip;
	import flash.events.Event;

	public class Score extends MovieClip {

		// CONSTRUCTOR
		public function Score() {

		}
		
	}
}

Esto es solo un shell vacío de una clase por ahora. Tenemos que extender la clase MovieClip ya que esta clase está vinculada a un clip de película en la biblioteca, por lo que también tenemos que importar la clase MovieClip. Utilizaremos el evento ENTER_FRAME, por lo que también importamos la clase Event.

Paso 15: Añadir variables y constantes

Agregue estas dos líneas a la clase Puntaje justo arriba de la función del constructor.

1
2	private const SPEED:int = 1; // how fast to count
3	private const NUM_DIGITS:int = 7; // how many digits there are in the score

Estas son dos constantes, algo así como configuraciones para la clase.

El primero, VELOCIDAD, controla la rapidez con la que cuenta la puntuación. Lo tengo configurado para contar uno por uno, pero si tu juego usa puntuaciones más altas, esto podría ser demasiado lento. Puede cambiar esto a 5 o 10 o 50 para contar por esos incrementos.
La segunda constante, NUM_DIGITS, define cuántos dígitos tenemos en nuestro clip de película Score. Si agregó más (o menos) de 7 dígitos, deberá cambiar esto.

Ahora vamos a añadir un par de variables. Pon estos justo debajo de las constantes:

1
2	private var _totalScore:int = 0;
3	private var _displayScore:int= 0;

Estas variables mantendrán las dos versiones diferentes de nuestra puntuación. "_totalScore" será la puntuación real. "_displayScore" será el número que está actualmente
se muestra en la pantalla LED. Si agrego 50 al puntaje, el _totalScore será inmediatamente 50, pero el _displayScore será 1, luego 2, luego 3, hasta que alcance 50.

Si alguna vez necesitas saber la puntuación real (como enviarla a tus tableros de puntuaciones más altas), usarás _totalScore, ya que _displayScore podría no ser preciso.

Estoy usando guiones bajos al comienzo de los nombres de las variables para indicar que estas son variables privadas.

Paso 16: Agregue el método totalScore Accessor

Entonces, si _totalScore es una variable privada, ¿cómo accederemos desde fuera de la clase Score? Usaremos un método "accessor" o "getter".

Agregue este método debajo de la función constructora:


// public accessor for totalScore
public function get totalScore():int {
	return _totalScore;
}

Este método simplemente devuelve el valor de la variable _totalScore. Nos da una forma de acceder a ese valor sin tener que exponerlo como una variable pública.

Paso 17: Agregar el método add

Necesitaremos una manera de agregar puntos a la puntuación. Añade este método:


// add an amount to the score
public function add(amount:int):void {
	_totalScore += amount;
	addEventListener(Event.ENTER_FRAME, updateScoreDisplay); // start the display counting up
}

Este método acepta un "monto" entero que se agrega a la variable _totalScore. La segunda línea inicia un evento ENTER_FRAME que llama a un método llamado updateScoreDisplay cada fotograma. Lo añadiremos a continuación.

Paso 18: Agregue el método updateScoreDisplay

Ahora agregue un método updateScoreDisplay. Aquí es donde ocurrirá toda la funcionalidad de conteo fresco. Debe aceptar un evento, ya que se llama desde un evento ENTER_FRAME.


// this runs every frame to update the score
private function updateScoreDisplay(e:Event):void {
	
}

Ahora vamos a añadir alguna funcionalidad. Lo primero que hará este método es incrementar la variable _displayScore en la cantidad que configuramos en nuestra constante SPEED:

1
2	// increment the display score by the speed amount
3	_displayScore += SPEED;

Aunque hay un problema potencial aquí. ¿Qué pasa si nuestra velocidad se establece en 10 y tratamos de agregar 5 a la puntuación? El displayScore será más alto que el totalScore. Vamos a añadir un par de líneas para arreglar eso:


// make sure the display score is not higher than the actual score
if(_displayScore &gt; _totalScore){
	_displayScore = _totalScore;
}

Eso verifica si el displayScore es más alto que el totalScore y, de ser así, establece que el displayScore sea igual al totalScore.

A continuación debemos agregar los ceros iniciales a la puntuación. Haremos esto convirtiendo el displayScore en una cadena y agregando ceros hasta que la longitud sea igual al número de dígitos definidos por la constante NUM_DIGITS:


var scoreStr:String = String(_displayScore); // cast displayScore as a String

// add leading zeros
while(scoreStr.length &amp;lt; NUM_DIGITS){
	scoreStr = &quot;0&quot; + scoreStr;
}

Ahora, para mostrar realmente la puntuación, vamos a recorrer cada uno de nuestros clips de dígitos (recuerde que llamamos a continuación "digit1", "digit2", etc.) y usamos el número correspondiente de la cadena de puntuación para establecer el número de cuadro del acortar:


// loop through and update each digit
for (var i:int = 0; i &amp;lt; NUM_DIGITS; i++) {
	var num = int(scoreStr.charAt(i));
	this[&quot;digit&quot;+(i+1)].gotoAndStop(num+1);// set the digit mc to the right frame
}

El método charAt recupera el carácter de una cadena en la posición especificada. Esto nos permite ir carácter por personaje a través de la cadena de puntuación.

Los corchetes en la siguiente línea nos permiten crear dinámicamente el nombre del clip. El código, este this["digit"+(i+1)] accede al clip con el nombre "dígit1" o "dígit2", etc., según el valor de i.

Estamos utilizando "num + 1" como número de cuadro porque los números de cuadro se desplazan en 1 con respecto a los dígitos que contienen (el cuadro 1 muestra 0, el cuadro 2 muestra 1, etc.)

Lo último que debemos hacer en este método es verificar si el displayScore y el totalScore son iguales. Si es así, podemos eliminar al oyente y dejar de llamar a este método por ahora.


// if the display score is equal to the total score remove the enterframe event
if(_totalScore == _displayScore){
	removeEventListener(Event.ENTER_FRAME, updateScoreDisplay);
}

Si se perdió en algún lugar en ese paso, puede revisar los archivos de origen para ver la clase completada.

Paso 19: La clase de puntuación en uso

Para utilizar esta clase, arrastre el clip de película Score de la Biblioteca al escenario y asígnele el nombre de instancia "myScore". Puede agregar puntos a su puntaje utilizando esta línea en su Clase de documento:

1
2	myScore.add(50);

Puedes ver un ejemplo de esto en los archivos de origen. Estoy agregando a la puntuación cuando se hace clic en los botones del parachoques, pero es más probable que esté llamando a add() cuando ocurran eventos en su juego.

Si necesita saber la puntuación del jugador, puede obtener el totalScore utilizando:

1
2	myScore.totalScore

Esto llamará al método de acceso y devolverá el valor de _totalScore.

Conclusión

Ahora tienes una clase de puntuación de conteo reutilizable que puedes usar en cualquiera de tus juegos.

Creo que el aspecto del LED es genial, pero definitivamente debes modificar el diseño para que se adapte al aspecto de tu juego. Aquí hay un par de ideas para diferentes diseños para comenzar:

Gracias por leer este tutorial. ¡Déjame saber lo que piensas!