Share
En este Consejo rápido, aprenderá cómo hacer un sistema de puntos simple que se pueda extender a sus propios juegos. Este tutorial es para principiantes, y en él aprenderás cómo crear un conjunto de botones en los que el jugador puede hacer clic para agregar o restar puntos a su puntaje. Sencillo!
Aunque este tutorial es para principiantes en la programación de Flash, deberá saber un poco sobre el uso de las herramientas de dibujo en Flash Professional. Si necesita aprender a usar las herramientas de dibujo, lea este artículo.
Echemos un vistazo al resultado final en el que trabajaremos:
Abre Flash y crea un nuevo documento Flash. Establezca el Tamaño del documento en 550x400px, el FPS (Marcos por segundo) en 24 y configure la clase de documento en Principal.
Para crear los gráficos, use la herramienta Oval para crear 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:
Después de crear las monedas, use cuadros de texto estáticos para escribir sus valores respectivos como se muestra en la imagen de arriba. La fuente que usaré en este tutorial es Futura LT Heavy, con un tamaño de 50, pero siéntase libre de usar su propia fuente y tamaño de fuente. Después de completar la instrucción, debe tener una moneda de 10 monedas, 50 monedas, 100 monedas y una moneda de -30.
Ahora convertiremos cada moneda en un MovieClip. Selecciona la Moneda 10 y presiona F8. Deberías ver un diálogo como este:
Repita este paso para las 50 monedas, 100 monedas y la moneda -30 e ingrese lo siguiente debajo de los cuadros Nombre y Clase para cada moneda:
Una vez que haya creado MovieClips de todas las monedas, selecciónelas todas y elimínelas del escenario. Los volveremos a agregar más tarde, usando el código.
Para finalizar este paso, cree un cuadro de texto estático con el texto "PUNTUACIÓN:" y colóquelo con un valor de X de 135 y un valor de Y de 327.
En este paso configuraremos nuestro paquete y la Clase Principal..
Crear una nueva clase de ActionScript y bajo el tipo de nombre de clase Principal. Una vez que haya creado la clase, guárdela en la misma carpeta que su archivo Flash y asegúrese de que esté guardada como Main.as.
Ingrese el código a continuación en su archivo Main.as, luego guárdelo.
Accentsconagua
package // importa las clases necesarias import flash.display.MovieClip import flash.events.MouseEvent; importar flash.text.TextField; importar flash.text.TextFormat; importar flash.text.TextFieldType; import flash.events.Event; la clase pública Main extiende MovieClip var tenCoin: TenCoin = new TenCoin (); // Crea una nueva instancia de Ten Coin var fiftyCoin: FiftyCoin = new FiftyCoin (); // Crea una nueva instancia de Fifty Coin var hundredCoin: HundredCoin = new HundredCoin (); // Crea una nueva instancia de Hundred Coin var badCoin: BadCoin = new BadCoin (); // Crea una nueva instancia de -30 Coin var score: Number = 0; // Establece la puntuación en cero var scoreText: TextField = new TextField (); // Crea un campo de texto para mostrar la puntuación var scoreTextFormat: TextFormat = new TextFormat ("Futura LT Heavy", 50, 0x000000); // Crea un nuevo formato para el campo de texto Score, reemplaza "Futura LT Heavy" con la fuente que está utilizando la función pública Main () displayObjects (); // La función que usaremos para mostrar todo el gráfico en la etapa setUpEventListeners (); // La función que usaremos para agregar nuestros Oyentes de Eventos Primero importamos las clases que necesitamos y luego configuramos nuestra clase de documento. Luego extendemos la clase principal de MovieClip; Podríamos usar Sprite, pero en realidad no importa. Después de eso, declaramos las variables que estamos usando y agregamos código a nuestro Principal() función (nuestra "función constructora").
los Principal() La función mostrará todas las monedas que creamos en el escenario y también agregará los Oyentes de eventos que necesitamos usar..
Nota: Tendrá que incrustar la fuente en su FLA para que se muestre en campos de texto dinámico si su usuario no tiene la fuente instalada. No he hecho esto aquí, para mantener las cosas simples..
displayObjects () Funciónlos displayObjects () La función se llama desde el Principal() función. El propósito de esta función es agregar las monedas y el cuadro de texto de puntuación al escenario y colocarlas en su ubicación correcta.
function displayObjects () // Establece la posición de Ten Coin tenCoin.x = 72; tenCoin.y = 200; // Establece la posición de la Fifty Coin fiftyCoin.x = 207; fiftyCoin.y = 200; // Establece la posición de la Cien Monedas hundredCoin.x = 342; cientoCoin.y = 200; // Establece la posición de la moneda Treinta badCoin.x = 477; badCoin.y = 200; // Coloca el cuadro de texto de puntuación y establece su tipo en dinámico para que se pueda cambiar a través del código scoreText.type = TextFieldType.DYNAMIC; scoreText.x = 305; scoreText.y = 327; scoreText.width = 300; // Establece el formato del cuadro de texto de puntuación scoreText.defaultTextFormat = scoreTextFormat; // Agrega todo al escenario addChild (tenCoin); addChild (fiftyCoin); addChild (hundredCoin); addChild (badCoin); addChild (scoreText);
setUpEventListeners () Función y los controladores de eventosAhora que hemos agregado objetos al escenario, tenemos que crear funciones de controlador de eventos que se activan al hacer clic en las monedas. También necesitaremos un updateScore () Función para usar para que la puntuación se actualice y no permanezca igual..
function setUpEventListeners () // Cambia todos nuestros MovieClips en botones tenCoin.buttonMode = true; fiftyCoin.buttonMode = true; hundredCoin.buttonMode = true; badCoin.buttonMode = true; // Agrega los oyentes del evento para agregar puntos a la puntuación tenCoin.addEventListener (MouseEvent.CLICK, addTenPoints); fiftyCoin.addEventListener (MouseEvent.CLICK, addFiftyPoints); hundredCoin.addEventListener (MouseEvent.CLICK, addHundredPoints); badCoin.addEventListener (MouseEvent.CLICK, removeThirtyPoints); // Agrega la función de actualización para actualizar el resultado stage.addEventListener (Event.ENTER_FRAME, updateScore);
Ahora debemos codificar las funciones que cambian y actualizar el puntaje..
function addTenPoints (evt: MouseEvent) score + = 10; // Agrega 10 puntos a la función de puntuación addFiftyPoints (evt: MouseEvent) score + = 50; // Agrega 50 puntos a la función de puntuación addHundredPoints (evt: MouseEvent) score + = 100; // Agrega 100 puntos a la función de puntuación removeThirtyPoints (evt: MouseEvent) score - = 30; // Resta 30 puntos de la puntuación // Esta instrucción if no permite que la puntuación sea inferior a cero si (puntuación < 10) score -= score; function updateScore(evt:Event) scoreText.text = String(score); //This converts the score variable from a number to a string, because our score textbox can only display strings //Closes the class //Closes the package
Su código ya está listo para la prueba. Presione CTRL + Intro (CMD + Intro en una Mac) y vea cómo cobra vida su sistema de puntos!
Ahora podrías estar pensando: "Perdí mi tiempo, todo lo que aprendí en este tutorial fue crear algunos botones que te den puntos cuando los pulses", pero has aprendido más que esto..
Mira esto como una base para un sistema de puntos más avanzado. Aprendió a usar + = y - para sumar o restar de un número, aprendió a usar escuchas de eventos, aprendió a crear una función para actualizar objetos mientras el SWF se está ejecutando y aprendió a cambiar un número. a una cadena y mostrarlo en un cuadro de texto dinámico que creó completamente a través del código!
Este sistema de puntos se puede extender fácilmente a tus propios juegos. Para aquellos de ustedes que tienen más experiencia en Flash, intente crear un juego que use la función hitTestObject y agregue puntos cuando golpee un objeto.
Espero que hayas aprendido algo nuevo hoy. Gracias por leer!
