Share
Sigue los pasos sencillos de este Tutorial Premium para crear un entretenido juego de disparos con Flash y AS3.
Usando sprites prefabricados y las herramientas de Flash, crearemos una interfaz gráfica con buen aspecto que estará alimentada por varias clases de ActionScript 3.
El usuario podrá controlar una nave espacial y disparar a varios enemigos mientras viaja en el espacio.
Abra Flash y cree un documento de 320 píxeles de ancho y 480 píxeles de alto. Establecer la velocidad de fotogramas a 24 fps.
Nuestra interfaz estará compuesta por varios sprites, campos de texto y clips de película..
Continúe con los siguientes pasos y veremos cómo crearlo..
El fondo será muy simple, ya que las estrellas se generan utilizando ActionScript.
Crea un rectángulo de 320x480 px y rellénalo con negro. Podrías añadir un ligero gradiente radial..
Usa el panel Alinear (Cmd + K) para centrarlo en el escenario.
He usado una gran biblioteca de sprites en la demostración de este tutorial, estos son parte de SpriteLib de Flying Yogi..
Importe los sprites al escenario (Cmd + R), conviértalos a MovieClips y ajuste los marcos para mostrar una animación agradable.
Se necesitará un campo de texto dinámico para mostrar la puntuación del juego. Utilice la herramienta de texto (T) para crear uno; nombralo puntuaciónTF y colóquelo en la esquina inferior izquierda del escenario..
Para utilizar una fuente personalizada en un campo de texto dinámico, debe incrustarla en su aplicación. Selecciona el campo de texto y usa el Propiedades panel de Empotrar? Botón para agregar los caracteres necesarios..
La vista de alerta se mostrará cuando el usuario alcance un estado de juego (ganar, perder). Use la fuente que desee para crear una pantalla simple con dos campos de texto dinámicos; nómbralos titleTF y msgTF, convertir el cuadro a un clip de película y establecer su nombre de clase en AlertView.
Utilizaremos los efectos de sonido para mejorar la sensación del juego, puede encontrar los sonidos utilizados en este ejemplo en Soungle.com utilizando las palabras clave Espacio, explosión y láser..
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 Tween Nano desde su sitio web oficial..
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.Sprite; importar flash.ui.Mouse; import com.greensock.TweenNano; import com.greensock.easing.Expo; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent;
Estas son las variables que usaremos, lea los comentarios en el código para saber más sobre ellas..
var estrellas privadas: Sprite; // almacenará el fondo de las estrellas privado var starsCopy: Sprite; // Otra versión del fondo de estrellas privado var ship: Ship; balas de var privado: vector.= nuevo vector. (); // Mantendrá las balas en el escenario privado var enemigos: Array = new Array (); // Mantendrá a los enemigos en el escenario privado var timer: Timer = new Timer (500); // El tiempo en el que un nuevo enemigo aparecerá privado var alertView: AlertView; vidas privadas: Vector. ; // Guardará los gráficos de vidas privadas var boss: Boss; privada var bossHealth: int = 20; Private var laserSound: Laser = new Laser (); private var bossSound: UFO = new UFO (); Private var exSound: Explosion = new Explosion ();
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 o se ejecuta utilizando la Clase de documento.
Se llama a las funciones necesarias para iniciar el juego. Comprueba esas funciones en los siguientes pasos..
Función final pública Main (): void
buildStars (200); // Esta función inicia la creación del juego
los buildStars () El método utiliza Star MC en la biblioteca para crear un fondo con estrellas colocadas al azar. Se crean dos sprites para interpolar a ambos y simular el movimiento, usando el mismo truco que en este tutorial de desplazamiento de paralaje..
función final privada buildStars (n: int): void stars = new Sprite (); para (var i: int = 0; i < n; i++) var star:Star = new Star(); star.alpha = Math.random() * 1; star.scaleX = Math.random() * 1; star.scaleY = star.scaleX; star.x = Math.floor(Math.random() * stage.stageWidth); star.y = Math.floor(Math.random() * stage.stageHeight-20); stars.addChild(star); /* Create another stars sprite to make animation */ starsCopy = new Sprite(); for(var j:int = 0; j < n; j++) var star2:Star = new Star(); star2.alpha = Math.random() * 1 + 0.2; star2.scaleX = Math.random() * 1; star2.scaleY = star.scaleX; star2.x = Math.floor(Math.random() * stage.stageWidth); star2.y = Math.floor(Math.random() * stage.stageHeight-20); starsCopy.addChild(star2); starsCopy.y = -stage.stageHeight; addChild(starsCopy); addChild(stars); addShip(); //Add ship (player) to stage
Esta función crea una instancia de Ship MC en la biblioteca y la coloca en el escenario con una animación nítida..
función final privada addShip (): void ship = new Ship (); ship.x = stage.stageWidth * 0.5; ship.y = stage.stageHeight + ship.height; addChild (nave); TweenNano.to (nave, 2, y: (stage.stageHeight - ship.height) - 10, facilidad: Expo.easeOut, onComplete: listeners ()); addLives ();
Reutilizando el MC del barco, tres sprites de barco se agregan al escenario como un indicador de vidas. Las naves se agregan a un Vector para verificar el juego más adelante en el juego..
Función final privada addLives (): void lives = new Vector.(); para (var i: int = 0; i < 3; i++) var live:Ship = new Ship(); live.stop(); live.width = 16; live.height = 16; live.x = (stage.stageWidth - live.width * 0.7) - (5 * i+1) - live.width * i; live.y = stage.stageHeight - live.height * 0.7; addChild(live); lives.push(live);
Estas líneas agregarán los oyentes necesarios al escenario y al temporizador; esto incluye eventos del mouse, eventos del temporizador y eventos EnterFrame que actualizarán el juego en cada frame.
escuchas de la función final privada (acción: String = 'agregar'): void if (acción == 'agregar') stage.addEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.addEventListener (MouseEvent.MOUSE_DOWN, disparar); timer.addEventListener (TimerEvent.TIMER, addEnemy); stage.addEventListener (Event.ENTER_FRAME, actualización); timer.start (); else stage.removeEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.removeEventListener (MouseEvent.MOUSE_DOWN, disparar); timer.removeEventListener (TimerEvent.TIMER, addEnemy); stage.removeEventListener (Event.ENTER_FRAME, actualización); timer.stop ();
La nave del jugador será controlada por el mouse, la siguiente función se encarga de que:
función final privada moveShip (e: MouseEvent): void ship.x = mouseX;
Nuestra nave podrá disparar balas para destruir y protegerse de los enemigos. Esta función se ejecutará cada vez que el usuario haga clic en el escenario y colocará una bala frente al barco que luego será movida por el actualizar() función. También reproduce un sonido de disparo..
sesión de función final privada (e: MouseEvent): void var bullet: Bullet = new Bullet (); bullet.x = ship.x; bullet.y = ship.y - (ship.height * 0.5); laserSound.play (); // Reproducir sonido bullets.push (bullet); addChild (viñeta);
No sería un tirador sin algo que disparar. Los enemigos son creados por la siguiente función, un temporizador se usa para crear un enemigo cada 500 milisegundos (puedes cambiar ese valor en el paso de variables) que luego es movido por actualizar() función.
función final privada addEnemy (e: TimerEvent): void var enemy: Enemy = new Enemy (); enemy.x = Math.floor (Math.random () * (stage.stageWidth - enemy.width)); enemy.y = -enemy.height; enemigos.push (enemigo); addChild (enemigo);
La vista de alerta muestra la información del jugador sobre el estado del juego, se muestra cuando se alcanza un evento del juego.
Se utilizan dos parámetros en esta función:
Accentsconagua
alerta de la función final privada (t: String, m: String): void listeners ('remove'); / * Crear y mostrar alerta * / alertView = new AlertView (); alertView.x = stage.stageWidth * 0.5; alertView.y = stage.stageHeight * 0.5; alertView.titleTF.text = t; alertView.msgTF.text = m; alertView.addEventListener (MouseEvent.MOUSE_UP, reinicio); addChild (alertView); los actualizar() La función se ejecuta en cada fotograma, maneja todos los movimientos y colisiones del juego. Es la función de bucle del juego para este juego. Echa un vistazo a los siguientes pasos para ver su comportamiento..
actualización de la función final privada (e: Evento): void // code
El fondo se mueve cada cuadro para simular el viaje espacial; cuando el sprite de las estrellas inferiores alcanza el límite del escenario, se mueve de nuevo a la parte superior, creando un bucle.
stars.y + = 5; starsCopy.y + = 5; if (stars.y> = stage.stageHeight - 20) stars.y = -stars.height; else if (starsCopy.y> = stage.stageHeight - 20) starsCopy.y = -stars.height;
Las siguientes líneas de código comprueban si hay viñetas en etapa; Si es cierto, las balas se mueven hacia arriba; Cuando una bala ya no es visible, se destruye..
if (bullets.length! = 0) for (var i: int = 0; i < bullets.length; i++) bullets[i].y -= 10; /* Destroy offstage bullets */ if(bullets[i].y < 0) removeChild(bullets[i]); bullets[i] = null; bullets.splice(i, 1);
Agregaremos un jefe grande y malo al juego. Cuando el usuario alcanza cierta puntuación, el jefe aparecerá:
if (int (scoreTF.text) == 500 && boss == null) boss = new Boss (); bossSound.play (); boss.x = stage.stageWidth * 0.5; boss.y = -boss.height; TweenNano.to (jefe, 3, y: 80); addChild (jefe);
Los enemigos también se mueven cada cuadro. Este código encuentra a todos los enemigos en el escenario utilizando la matriz y los mueve 5px hacia abajo.
if (enemy.length! = 0) for (var j: int = 0; j < enemies.length; j++) /* Move enemies */ enemies[j].y += 5;
Aquí comprobamos si un enemigo choca con la nave del jugador; Si lo hace, se realizan una serie de acciones comenzando con el sonido de explosión:
/ * si el enemigo golpea al jugador * / if (enemigos [j] .hitTestObject (nave)) exSound.play ();
Después de reproducir el sonido, el enemigo se elimina del escenario y de la matriz, y se establece en nulo para (eventualmente) borrarlo de la memoria.
/ * Eliminar enemigo * / eliminarChild (enemigos [j]); enemigos [j] = nulo; enemigos.splice (j, 1);
Uno de los iconos del contador de vidas también se eliminará de la misma manera que el enemigo..
/ * Eliminar Live * / removeChild (lives [lives.length-1]); lives [lives.length-1] = null; lives.splice (lives.length-1, 1);
Luego verificamos el número de vidas, si el jugador está fuera de vida, usamos el método de alerta para mostrar una alerta que indica que el juego ha terminado, si todavía hay vidas disponibles, el barco está animado en el escenario.
/ * Si no queda vida, el juego termina * / if (lives.length == 0) alert ('Game Over', 'Click to continue'); else / * Tween Ship * / ship.y = stage.stageHeight + ship.height; TweenNano.to (nave, 2, y: (stage.stageHeight - ship.height), facilidad: Expo.easeOut); El siguiente código maneja las colisiones de los jefes, usa el mismo método usado en la colisión de la nave enemiga Aquí usamos el jefe de salud Variable para determinar cuando el jefe es derrotado..
para (var k: int = 0; k < bullets.length; k++) /* Hit Boss */ if(boss != null && bullets[k].hitTestObject(boss)) exSound.play(); removeChild(bullets[k]); bullets[k] = null; bullets.splice(k, 1); bossHealth--; scoreTF.text = String(int(scoreTF.text) + 50); if(bossHealth <= 0 && boss != null) removeChild(boss); boss = null; alert('You Won', 'Click to continue'); Otro código de detección de colisiones. Las balas en la matriz son probadas para colisionar con los enemigos; Cuando esto sucede, ambos son removidos del escenario y sus arreglos..
/ * si la bala golpea al enemigo * / if (bullets.length! = 0 && enemigos [j]! = nulo && bullets [k] .hitTestObject (enemigos [j])) exSound.play (); // Reproducir sonido removeChild (enemigos [j]); enemigos [j] = nulo; enemigos.splice (j, 1); removeChild (balas [k]); balas [k] = nulo; bullets.splice (k, 1); scoreTF.text = cadena (int (scoreTF.text) + 50); // Añadir puntuación al campo de texto en el escenario
El reinicio función() es llamado por el alerta() Función, maneja las operaciones necesarias para reiniciar el juego y reiniciarlo..
reinicio privado de la función final (e: MouseEvent): void // code
La primera parte de la reiniciar() La función maneja los sprites, las siguientes líneas de código eliminan todas las imágenes del escenario..
/ * Eliminar gráficos * / removeChild (envío); nave = nula; para (var i: int = 0; i < bullets.length; i++) removeChild(bullets[i]); bullets[i] = null; bullets.length = 0; for(var j:int = 0; j < enemies.length; j++) removeChild(enemies[j]); enemies[j] = null; enemies.length = 0; for(var k:int = 0; k < lives.length; k++) removeChild(lives[k]); lives[k] = null; lives.length = 0; removeChild(stars); stars = null; removeChild(starsCopy); starsCopy = null; if(boss != null) removeChild(boss); boss = null;
La siguiente parte de reiniciar() elimina la vista de alerta de la etapa:
/ * Eliminar Alert * / removeChild (alertView); alertView = nulo;
En la siguiente parte de reiniciar(), la puntuación y las variables de salud del jefe se restablecen:
/ * Restablecer puntuación * / scoreTF.text = '0'; / * Restablecer Boss Health * / bossHealth = 50;
Finalmente, al final de reiniciar(), Llamamos al método que inicia todo:
/ * Reiniciar * / buildStars (200);
Agregue el nombre de la clase a la Clase campo en el Publicar sección de la Propiedades Panel para asociar la FLA con la clase de documento principal..
Has aprendido a crear un juego de Space Shooter con todas sus características básicas, intenta expandirlo utilizando lo que ya sabes.!
Espero que te haya gustado este tutorial, gracias por leer.!
