Share
Uno de los juegos Flash más populares de todos los tiempos es Bloons, en el que juegas un mono lanzando dardos a los globos. Ha generado numerosas secuelas, incluso extendiéndose a otros géneros como la defensa de la torre. Este tutorial le mostrará cómo crear su propio juego de reventar globos con el motor QuickBox2D.
Echemos un vistazo al resultado final en el que trabajaremos:
Haga clic y mantenga presionado para determinar el ángulo de la toma. Intenta hacer estallar todos los globos.!
En este tutorial usaremos una serie de clases de ActionScript para crear un juego Bloons Inspired. El objetivo del juego es disparar a los globos para hacerlos explotar a todos..
Abra Flash y cree un documento de 480 píxeles de ancho y 320 píxeles de alto. Establecer la velocidad de fotogramas a 24 fps.
Se utilizará una interfaz colorida y simple, con varias formas, botones y MovieClips. En los próximos pasos construiremos esta GUI. Los gráficos de ardilla y bellota son de openclipart.org.
Este fondo fue creado en Flash usando rectángulos simples y formas ovaladas. La barra marrón en la parte inferior servirá como barra de información..
Para crear el título, seleccione la herramienta de texto (T) y cambie el color a #EEEEEE; escriba el texto de su título (he usado la fuente GoodDog) y agregue una sombra simple. Para el globo, seleccione la herramienta Oval (O) y cree un óvalo de 20x30 px # FFCE47. Usa la herramienta Poly Star para el pequeño triángulo debajo de él..
Utilizar de nuevo el Herramienta de texto para crear dos botones como se muestra en la imagen de arriba. Conviértalos en botones y déles nombres de instancia descriptivos para que podamos usarlos más adelante en el código. Convertir los gráficos en el escenario a uno solo. Clip de película y nombrarlo TitleView - recuerde revisar el Exportar para el cuadro de ActionScript.
Esta es la pantalla del juego, que contiene todos los elementos dinámicos e interactivos del juego. Se generarán más de ellos en tiempo de ejecución utilizando ActionScript. Puedes leer los nombres de instancia en la imagen de arriba.
los Creditos pantalla aparecerá delante de la Título pantalla; Usa los gráficos y fuentes de antes para crearlo. Nombralo Creditosvista y recuerde revisar el Exportar para ActionScript caja.
Se mostrará una alerta cuando se hayan reventado todos los globos; se mostrará un juego sobre el mensaje y la puntuación. Utilizar el Herramienta rectangular para crearlo y establecer su nombre de instancia en AlertView. De nuevo, marca el Exportar para ActionScript caja.
Usaremos efectos de sonido para mejorar la sensación del juego; Puede encontrar el sonido utilizado en este ejemplo en Soungle.com usando la palabra clave popular.
Usaremos un motor de interpolación diferente del predeterminado incluido en Flash, esto aumentará el rendimiento y será más fácil de usar..
Puedes descargar TweenNano desde su sitio web oficial..
Usaremos la útil biblioteca de física QuickBox2D para crear este juego. Si no está familiarizado con él, puede seguir la serie de introducción de Activetuts+.
Puede descargar QuickBox2D desde su sitio web oficial.
Haremos que nuestra aplicación sea interactiva utilizando una clase externa. Añadir su nombre a la Clase campo en el Publicar sección de la Propiedades Panel para asociar la FLA con la clase de documento principal..
Cree una nueva clase de ActionScript 3.0 (Cmd + N) y guárdela como Main.as en la carpeta de tu clase.
Crea tu estructura de clase básica para comenzar a escribir tu código.
paquete import flash.display.Sprite; clase pública Main extiende Sprite función pública Main (): void // código constructor
Estas son las clases que necesitaremos importar para que nuestra clase funcione; la importar La directiva hace que las clases y los paquetes definidos externamente estén disponibles para su código..
importar flash.display.MovieClip; importar com.actionsnippet.qbox. *; import com.greensock.TweenNano; import com.greensock.easing.Expo; import flash.events.MouseEvent; importar Box2D.Common.Math. *; import flash.events.Event; importar flash.net.navigateToURL; importar flash.net.URLRequest;
Estas son las variables que usaremos. Lea los comentarios en el código para saber más sobre ellos; Algunos de sus nombres se explican por sí mismos, por lo que no habrá comentarios allí..
private var titleView: TitleView = new TitleView (); Créditos var privados: CreditsView; mundo de var privado: QuickBox2D; privado var bellota: QuickObject; private var bellotas: Array = []; // almacena las bellotas arrojadas a los contactos privados var: QuickContacts; // usado para manejar colisiones en quickbox2d private var balloons: Array = []; // almacena los globos en el escenario privado var yImpulse: Number = 0; // fuerza vertical para disparar la variable privada bellota xImpulse: int = 3; // fuerza horizontal predeterminada la bellota es lanzada privada var pop: Pop = new Pop (); // el sonido en la biblioteca
El constructor es una función que se ejecuta cuando un objeto se crea a partir de una clase, este código es el primero en ejecutarse cuando se crea una instancia de un objeto. El constructor de la clase de documento es un caso especial: se ejecuta al inicio del juego..
Usamos esto para llamar a las funciones necesarias para iniciar el juego. Comprueba esas funciones en los siguientes pasos..
Función final pública Main (): void // Code
Comenzamos agregando el TitleView de la biblioteca al escenario..
addChild (titleView); startButtonListeners ();
Esto agregará los escuchas del mouse a los botones en la vista de título, que nos llevará a la pantalla del juego o créditos..
función final privada startButtonListeners (acción: String = 'add'): void if (action == 'add') titleView.creditsBtn.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.playBtn.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsBtn.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.playBtn.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
los Creditos La pantalla se muestra cuando el usuario hace clic en el botón Créditos. Un oyente de ratón se agrega a la totalidad Clip de película para eliminarlo.
función final privada showCredits (e: MouseEvent): void titleView.creditsBtn.visible = false; titleView.playBtn.visible = false; créditos = nuevo CreditsView (); addChild (créditos); TweenNano.from (credits, 0.3, x: -credits.width, onComplete: function (): void credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Cuando el Creditos Se hace clic en la pantalla, se interpone y se elimina del escenario..
función final privada hideCredits (e: MouseEvent): void TweenNano.to (credits, 0.3, x: -credits.width, onComplete: function (): void titleView.creditsBtn.visible = true; titleView.playBtn.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;);
Las siguientes líneas eliminan el Título pantalla y dejar el Juego Pantalla visible. Aquí también llamamos a las funciones necesarias para iniciar el juego; Estas funciones se explican en los siguientes pasos..
Accentsconagua
función final privada showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = null; startGame ();); Paremos aquí para hacer una prueba rápida y asegurarnos de que nuestro código de juego funciona:
Tenga en cuenta que algunas líneas se han comentado, ya que algunas funciones aún no se han creado..
Recuerde que los hitos están incluidos en los archivos de origen, por lo que si por alguna razón su archivo no imita este, mire la fuente para ver qué está causando eso..
Esta función agrega los dispositivos de escucha del mouse necesarios para realizar el disparo de bellota.
función final privada gameListeners (action: String = 'add'): void if (action == 'add') bg.addEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.addEventListener (MouseEvent.MOUSE_UP, disparo); restartBtn.addEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.addEventListener (Event.ENTER_FRAME, actualización); else bg.removeEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.removeEventListener (MouseEvent.MOUSE_UP, disparo); restartBtn.removeEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.removeEventListener (Event.ENTER_FRAME, actualización);
Aquí comenzamos el juego creando el mundo de Box2D y llamando a las funciones que crearán los globos y manejarán los eventos del mouse..
función final privada startGame (): void / * Hide gCircle * / gCircle.visible = false; / * Nuevo mundo B2D * / world = new QuickBox2D (esto, debug: 0); contacts = world.addContactListener (); contacts.addEventListener (QuickContacts.ADD, onAdd); / * Crear función de globo * / gameListeners (); createBalloons ();
Anidado para Los bucles se utilizan para colocar los globos en el escenario. Esta función utilizará el QuickBox2D addBox método para crear un nuevo objeto Box2D que se establecerá como Sensor - esto significa que no habrá una reacción física a la colisión (es decir, la bellota no rebotará), pero aún se detectará una colisión. Usando este método podemos destruir el globo pero dejar que la bellota continúe su camino como si nada hubiera pasado..
El globo se agrega a una matriz; Esto nos dará acceso a todos los globos fuera de esta función..
función final privada createBalloons (h: int = 5, v: int = 3): void for (var i: int = 0; i < h; i++) for(var j:int = 0; j < v; j++) var balloon:QuickObject = world.addBox(x:10 + (i * 0.66), y:4 + (j * 1), width: 0.66, height: 1, skin:Balloon, fixedRotation:true, draggable:false, density:0); balloon.shape.m_isSensor = true; balloons.push(balloon); /* Set balloon counter */ targetTF.text = String(balloons.length); /* Start Physics */ world.start();
Por supuesto, no tienes que usar anidado. para Bucles para posicionar los globos; Esta es la forma más fácil de colocarlos en una cuadrícula, pero puede colocarlos manualmente si lo prefiere..
Esta función maneja la colisión mencionada en el Paso 26. Lo primero que debe hacer es ir a través de la matriz de globos, verificando cada uno para ver si está chocando con la bellota..
función final privada onAdd (e: Event): void for (var i: int = 0; i < balloons.length; i++) if(contacts.isCurrentContact(balloons[i], acorn))
Si la colisión es cierta, llamamos a la destruir() Método del globo QuickObject y eliminar el elemento de la matriz.
globos [i] .destroy (); globos.splice (i, 1);
Luego reproducimos un sonido que indica el golpe, lo que mejora la sensación de juego.
pop.play ();
La puntuación y los contadores de objetivos se actualizan de acuerdo con los globos extraídos y los globos que quedan..
scoreTF.text = cadena (int (scoreTF.text) + 50); targetTF.text = String (balloons.length);
Se llama una alerta cuando se hacen estallar todos los globos; Veremos esta función más adelante en el tutorial..
if (targetTF.text == '0') alert ();
Este código revelará el indicador de dirección de la bellota, restablecerá la variable de impulso y de la bellota y agregará un oyente de enterframe que manejará el objetivo.
función final privada startCharge (e: MouseEvent): void yImpulse = 0; gCircle.visible = true; gCircle.addEventListener (Event.ENTER_FRAME, cargo);
El indicador de objetivo gira para mostrar la dirección en que se disparará la bellota y ajusta la variable de impulso y en consecuencia. La dirección del disparo se ve afectada por dos variables., xImpulse y Impulso, que se combinan para formar una impulso vector despues. xImpulse se mantiene constante, y Impulso se cambia cuando el usuario mantiene presionado el botón del ratón.
cargo de la función final privada (e: Evento): void gCircle.rotation - = 3; yImpulse - = 0.2; / * Evita la rotación excesiva * / if (gCircle.rotation < -80) yImpulse = -5.4; gCircle.rotation = -80;
Las siguientes acciones ocurren cuando el botón del mouse está arriba.
disparo final de la función privada (e: MouseEvent): void / * Hide gCircle * / gCircle.removeEventListener (Event.ENTER_FRAME, charge); gCircle.visible = false; gCircle.rotation = 0; / * Crear nuevo Acorn * / acorn = world.addBox (x: 2.76, y: 7.33, ancho: 0.66, alto: 0.53, skin: Acorn, fixedRotation: true, draggable: false, density: 1); bellotas.push (bellota); / * Disparar bellota * / var impulse: b2Vec2 = new b2Vec2 (xImpulse, yImpulse); acorn.body.ApplyImpulse (impulse, acorn.body.GetWorldCenter ()); / * Actualizar el contador de bellotas * / acornsTF.text = String (int (acornsTF.text) -1);
Paremos aquí para hacer una prueba rápida y asegurarnos de que nuestro código de juego funciona:
Tenga en cuenta que algunas líneas se han comentado ya que esas funciones aún no se han creado..
La función de actualización realizará una serie de operaciones EnterFrame. Veamos esas acciones en los siguientes pasos..
Actualización de la función final privada (e: Evento): void
Las siguientes líneas eliminarán cada bellota que salga del escenario..
/ * Eliminar bellotas fuera del escenario * / para (var i: int = 0; i < acorns.length; i++) if(acorns[i].y > 10.66) bellotas [i] .destroy (); bellotas (1, 1);
El juego termina cuando el jugador se queda sin bellotas (o destruye todos los globos como se mencionó anteriormente).
/ * Comprobar el nivel fallido * / if (int (acornsTF.text) <= 0) alert('lose'); Este código se ejecuta cuando se hace clic en el botón Reiniciar. Se reiniciarán las variables necesarias y los oyentes para reiniciar el nivel..
función final privada restartLvl (e: MouseEvent): void / * Remove Listeners * / gameListeners ('rmv'); / * Destroy World * / world = null; / * Destruye globos, restablece la puntuación y las bellotas * / para (var i: int = 0; i < balloons.length; i++) balloons[i].destroy(); scoreTF.text = '0'; acornsTF.text = '5'; balloons = [];//clear balloons array startGame(); Esta función detendrá el juego y mostrará el mensaje Game Over. También agrega un detector de ratón para restablecer el juego cuando se hace clic.
alerta de la función final privada (gameState: String = 'win'): void gameListeners ('rmv'); world.stop (); alerta de var: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scoreTF.text; alert.addEventListener (MouseEvent.MOUSE_UP, reinicio); if (gameState == 'lose') alert.titleTF.text = 'Level Failed!'; addChild (alerta); TweenNano.from (alerta, 0.6, scaleX: 0.2, scaleY: 0.2, facilidad: Expo.easeOut); Este código volverá a cargar el SWF, restaurando cualquier valor y regresando a la pantalla inicial..
reinicio privado de la función final (e: MouseEvent): void navigationToURL (nueva URLRequest (stage.loaderInfo.url), '_level0');
Haz tus propios ajustes al juego y disfruta creandolo. Tal vez podría cambiar el diseño de los globos, o agregar nuevos niveles, o alterar los gráficos.
Espero que te haya gustado este tutorial, gracias por leer.!
