Share
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 tanto la creación de gráficos como el código..
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:
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.
Cree un nuevo símbolo de Clip de película (Insertar> Nuevo símbolo). Dale a este símbolo el nombre "dígito".
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.
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 Blur.
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..
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 "números".
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 el dígito 8 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 "números".
Ahora puede desplazarse por los marcos y ver cómo se ven los segmentos apagados del LED detrás de cada número.
Crear otra nueva capa llamada "acciones". 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..
¿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 más que usar texto dinámico.
Crea un nuevo clip de película llamado "Score". Marque 'Exportar para ActionScript' y configure el nombre de la clase como "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 los separadores de coma.
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.
Crear una nueva capa llamada "comas".
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 de número.
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..
Para el fondo del puntaje solo agregaremos un rectángulo redondeado simple.
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 esto 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 comunique..
¿Qué gráfico estaría completo sin un brillo similar al 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 golpe y llénelo con un degradado blanco desde 20% Alpha hasta 0% Alpha.
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:
paquete import flash.display.MovieClip; import flash.events.Event; La puntuación de clase pública amplía MovieClip // Puntaje de la función pública de CONSTRUCTOR ()
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 importamos la clase Event también..
Agregue estas dos líneas a la clase Puntuación justo arriba de la función de constructor.
VELOCIDAD de const privado: int = 1; // qué tan rápido contar privado const NUM_DIGITS: int = 7; // cuántos dígitos hay en la puntuación
Estas son dos constantes, una configuración similar a la de la clase..
Ahora vamos a añadir un par de variables. Pon estos justo debajo de las constantes:
private var _totalScore: int = 0; 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 el puntaje real (como enviarlo a tus tableros de puntaje alto), usarás _totalScore ya que _displayScore podría no ser exacto.
Estoy usando guiones bajos al comienzo de los nombres de las variables para indicar que estas son variables privadas.
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:
// acceso público para la función pública totalScore obtener 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.
Necesitaremos una manera de agregar puntos a la puntuación. Añade este método:
// agregar una cantidad a la función pública puntuación agregar (cantidad: int): void _totalScore + = cantidad; addEventListener (Event.ENTER_FRAME, updateScoreDisplay); // iniciar la pantalla contando
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. Agregaremos eso a continuación.
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.
// esto ejecuta cada cuadro para actualizar la función privada scoreScoreDisplay (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 de VELOCIDAD:
// incrementa la puntuación de visualización en la cantidad de velocidad _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:
// asegúrese de que la puntuación de visualización no sea superior a la puntuación real si (_displayScore> _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); // convertir displayScore como una cadena // agregar ceros iniciales mientras (scoreStr.length < NUM_DIGITS) scoreStr = "0" + 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:
// recorre y actualiza cada dígito para (var i: int = 0; i < NUM_DIGITS; i ++) var num = int (scoreStr.charAt (i)); este ["dígito" + (i + 1)]. gotoAndStop (num + 1); // establece el dígito mc en el marco derecho
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 ["dígito" + (i + 1)] accede al clip con el nombre "digit1" o "digit2", etc., dependiendo del valor de yo.
Estamos usando "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..
// si la puntuación de visualización es igual a la puntuación total, elimine el evento enterframe 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.
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:
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:
myScore.totalScore
Esto llamará al método de acceso y devolverá el valor de _totalScore.
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!
Accentsconagua