Consejo rápido Cursor de punto de mira personalizado y sonido de disparo

En este Consejo rápido crearemos un punto de mira personalizado junto con un sonido de disparo. Esta podría ser la base para un juego de disparos. En este ejemplo, colocamos agujeros de bala en el escenario en el punto donde hace clic.


Nota: A pesar de la nueva función de Cursor nativo introducida en FP10.2, este método de la vieja escuela sigue siendo una forma válida de crear un cursor personalizado. Tiene la ventaja de permitirle utilizar gráficos más grandes, además de que funcionará con versiones anteriores de Flash Player. Echaremos un vistazo a Native Cursor's en FP10.2 mañana :)

Breve descripción

En el SWF verás un botón de inicio. Cuando haces clic en este botón, tu ratón se convierte en una cruz lista para hacer algún daño. Al hacer clic en el escenario, se reproduce un sonido de bala y se agrega un gráfico de agujero de bala al escenario en el punto donde hizo clic con el mouse..


Paso 1: Configuración del documento

Abra un nuevo documento de Flash y establezca las siguientes propiedades

  • Tamaño del documento: 500x400px
  • Color de fondo: #FFFFFF

Paso 2: Configuración de los elementos del juego

Para el botón de Inicio, dibujé un rectángulo redondeado y coloqué un texto con la palabra Inicio en él. Luego convertí el botón y el texto en un clip de película dibujando una selección alrededor de ellos y presionando F8. Le di al botón el nombre empezar juego, y también usado empezar juego como el nombre de la instancia en el panel de propiedades. Si el panel de propiedades no se muestra, vaya a Menú-> Ventana-> Propiedades o simplemente presione CTRL + F3.

En los archivos de ejercicios se incluyen dos imágenes: una es el gráfico en forma de cruz y la otra es el gráfico en forma de buey. Los importé de uno en uno al escenario y los convertí en un clip de película haciendo clic en ellos y presionando F8. Les di los nombres de instancia "BulletHole" y "CrossHair", me aseguré de que los puntos de registro se establecieran en el centro en ambos casos y usé el mismo nombre para la Clase en el Enlace de cada símbolo. A continuación se muestra una imagen de cómo configuré el BulletHole; Es lo mismo para el CrossHair..

Para el sonido, lo importé a la Biblioteca, luego hice clic derecho y seleccioné Propiedades. Luego le di el nombre GunShot y configuré la Clase de vinculación como GunShot también.

Ahora que tenemos todos nuestros elementos de juego listos, podemos sumergirnos en el código.


Paso 3: Configurar el paquete y la clase principal

Aquí configuramos nuestro paquete y la clase principal para nuestro juego.

Primero importamos algunas clases que necesitaremos, luego configuramos nuestra clase de documento. Esta clase principal debe extender MovieClip o Sprite; Aquí extendemos MovieClip. Luego declaramos algunas variables que usaremos y codificamos nuestra función de constructor. La función constructora agrega un detector de eventos al botón, que es donde configuramos el resto del juego.

 paquete import flash.display.MovieClip; import flash.events.MouseEvent; importar flash.ui.Mouse; import flash.media.Sound; importar flash.media.SoundChannel; public class Main extiende MovieClip // Los clips de película y Sound in the Library var crosshair: CrossHair = new CrossHair (); var bullethole: BulletHole; var gunshot: GunShot = nuevo GunShot (); // Necesario para el sonido de disparo var soundChannel: SoundChannel = new SoundChannel; // Si el usuario ha hecho clic o no 1 vez var firstShot = true;  función pública Main () // Mostrar cursor de mano cuando el usuario hace clic sobre el botón startGame.buttonMode = true; startGame.addEventListener (MouseEvent.CLICK, startTheGame); 

Paso 4: Codificando el comenzar el juego() Función

los comenzar el juego() La función se llama cuando el usuario hace clic en el botón. Esta función elimina el botón del escenario, oculta el mouse y agrega el punto de mira al escenario. Luego agregamos dos oyentes de eventos al escenario..

 función privada startTheGame (e: MouseEvent): void // Eliminar el botón del escenario removeChild (startGame); // Oculta el mouse Mouse.hide (); // Agrega la cruz y establece sus propiedades x e y // a las coordenadas x e y del mouse addChild (cruceta); punto de mira.x = mouseX; punto de mira.y = mouseY; stage.addEventListener (MouseEvent.MOUSE_MOVE, moveCursor); stage.addEventListener (MouseEvent.CLICK, fireShot); 

Paso 5: Codificación mover el cursor () y disparo de fuego()

los mover el cursor () La función se llama siempre que el usuario mueve el mouse, debido al detector de eventos MOUSE_MOVE que agregamos al escenario. En esta función, simplemente nos aseguramos de que la cruz esté en la misma posición que el mouse usando mouseX y Pardusco.

 función privada moveCursor (e: MouseEvent): void // Se asegura de que el punto de mira xey es siempre // donde x y y del ratón son crosshair.x = mouseX; punto de mira.y = mouseY; 

los disparo de fuego() La función se llama cada vez que el usuario hace clic en el escenario. Primero verificamos si esta es la primera vez que el usuario hace clic; si no lo está, entonces reproducimos el sonido de disparo y agregamos el agujero de bala a la misma posición en el escenario donde el usuario hizo clic con el botón e.stageX ye.estageY. El evento contiene información sobre sí mismo: puede ver lo que contiene utilizando trace (e.toString ()).

Si no verificamos si esta fue la primera vez, cuando el usuario hizo clic por primera vez en el botón de inicio, agregaría una cruz y reproducirá el sonido de disparo (no queremos eso)..

 función privada fireShot (e: MouseEvent): void // Si han hecho clic una vez, hacemos esto si (firstShot == false) // Reproduce el sonido soundChannel = gunshot.play (); // Crea un nuevo bullethole y lo agrega a la // etapa en el lugar donde el usuario hizo clic en bullethole = new BulletHole (); addChild (bullethole); bullethole.x = e.stageX; bullethole.y = e.stageY; // Siempre queremos la cruz en la parte superior, así que intercambiamos las "Profundidades" // de la cruz y la bala SwapChildren (bullethole, crosshair);  firstShot = falso;  // Cerrar la clase // Cerrar el paquete

Conclusión

Esta podría ser la base para muchos juegos de tipo disparar. Sería muy fácil engendrar algunos enemigos y luego hacer un hitTestPoint () verificar con la X y la Y del ratón contra el objeto de visualización del enemigo..

Espero que hayas disfrutado este tutorial. Gracias por leer!