Cómo hacer un juego flash: 4 pasos (con imágenes)

Tabla de contenido:

Cómo hacer un juego flash: 4 pasos (con imágenes)
Cómo hacer un juego flash: 4 pasos (con imágenes)

Video: Cómo hacer un juego flash: 4 pasos (con imágenes)

Video: Cómo hacer un juego flash: 4 pasos (con imágenes)
Video: 🎮 CANJEAR CODIGO de Steam [2019] 2024, Noviembre
Anonim

Flash es un formato popular para videojuegos de navegador, como sitios como Newgrounds y Kongregate. Aunque el formato Flash tiende a estar infrautilizado en aplicaciones móviles, todavía hay muchos juegos de calidad que se siguen haciendo con Flash. Flash utiliza ActionScript, un lenguaje que es fácil de aprender y proporciona control sobre los objetos en la pantalla. Consulte el Paso 1 a continuación para aprender a crear un juego flash básico.

Paso

Parte 1 de 3: Primeros pasos

381698 1
381698 1

Paso 1. Diseña el juego

Antes de comenzar a codificar, cree una idea aproximada de su juego. Flash es más adecuado para juegos simples, así que concéntrate en crear juegos que tengan muy pocas mecánicas de juego. Defina el género y la mecánica del juego antes de iniciar el prototipo. Los juegos flash comunes incluyen:

  • Corredor sin fin: el juego mueve personajes automáticamente. Los jugadores tienen que saltar obstáculos o interactuar con el juego. Los jugadores generalmente solo tienen una o dos opciones de control.
  • Luchadores: el juego suele ser de desplazamiento lateral. Los jugadores deben derrotar al enemigo para poder avanzar. El personaje del jugador tiene varios movimientos para derrotar al enemigo.
  • Rompecabezas: los jugadores deben resolver acertijos para superar cada nivel. Empezando por el estilo de reunir objetos tríos como Bejeweled, hasta complejos acertijos como los juegos de aventuras.
  • RPG: el juego se centra en el desarrollo y el progreso de los personajes. Los jugadores se mueven a través de muchas situaciones diferentes, así como diferentes tipos de enemigos. Las mecánicas de combate varían ampliamente, pero muchos de estos tipos se basan en turnos. Los juegos de rol son significativamente más difíciles de codificar que los simples juegos de acción.
381698 2
381698 2

Paso 2. Comprenda cuáles son las ventajas de flash

Flash es más adecuado para juegos en 2D. Se puede hacer flash para crear juegos en 3D, pero es muy complicado y requiere más conocimientos. Casi todos los juegos Flash exitosos tienen un formato 2D.

Los juegos flash también son los más adecuados para sesiones rápidas. Esto se debe a que la mayoría de los jugadores juegan cuando tienen poco tiempo libre, como los descansos, lo que significa que las sesiones de juego suelen durar 15 minutos como máximo

381698 3
381698 3

Paso 3. Familiarícese con el lenguaje ActionScript3 (AS3)

Los juegos flash están programados en AS3, y necesitará tener un conocimiento básico de cómo funcionan para tener éxito en la creación de juegos. Puede crear juegos simples con un conocimiento básico del código en AS3.

Hay muchos libros de ActionScript disponibles en Amazon y otras tiendas, junto con una variedad de tutoriales y acontecimientos en Internet

381698 4
381698 4

Paso 4. Descarga Flash Professional

Este programa es un poco caro, pero es muy bueno para crear programas flash rápidamente. Hay varias otras opciones de programas, incluidas las de código abierto, pero generalmente son menos compatibles o tardan más en completar la misma tarea.

Flash Professional es el único programa que necesitará para comenzar a crear juegos

Parte 2 de 3: Escribir juegos básicos

381698 5
381698 5

Paso 1. Comprender los componentes básicos del código AS3

El juego base tiene varias estructuras de código diferentes. Hay tres partes principales en el código AS3:

  • Variables: se trata de cómo se almacenan los datos. Los datos pueden ser números, palabras (cadenas), objetos y más. Las variables están definidas por el código var y deben constar de una palabra.

    var playerHealth: Número = 100; // "var" indica que está definiendo una variable. // "playerHealth" es el nombre de la variable. // "Número" es el tipo de datos. // "100" es el valor asignado a la variable. // Todas las líneas de actionscript terminan con ";"

  • Controlador de eventos: el controlador de eventos busca ciertas cosas que sucedieron y luego notifica al resto del programa. Esto es importante para la entrada del jugador y el código repetido. Los controladores de eventos suelen llamar a funciones.

    addEventListener (MouseEvent. CLICK, swingSword); // "addEventListener ()" define un controlador de eventos. // "MouseEvent" es la categoría de entrada que se está escuchando. // ". CLICK" Es un evento especificado en la categoría MouseEvent. // "swingSword" es la función que se llama cuando ocurre el evento.

  • Función: un fragmento de código que se asigna a una palabra clave y se puede llamar más tarde. Las funciones manejan la mayoría de la programación de juegos, y un juego complejo puede tener cientos de funciones. Las funciones pueden estar en cualquier orden porque solo funcionan cuando se las llama.

    función swingSword (e: MouseEvent): void; {// Su código aquí} // "función" es la palabra clave que aparece al principio de cada función. // "swingSword" es el nombre de la función. // "e: MouseEvent" es un parámetro agregado, que indica // que la función fue llamada desde el detector de eventos. // ": void" es el valor devuelto por la función. // Si no se devuelve ningún valor, use: void.

381698 6
381698 6

Paso 2. Crea un objeto

ActionScript se utiliza para afectar a objetos en Flash. Para crear un juego debes crear objetos con los que los jugadores puedan interactuar. Dependiendo de la guía que lea, los objetos pueden denominarse sprites, actores o películas. Para este sencillo juego, crearás un rectángulo.

  • Abra Flash Professional. Cree un nuevo proyecto ActionScript 3.
  • Haga clic en la herramienta de dibujo Rectángulo en el panel Herramientas. Este panel puede estar en una ubicación diferente, según la configuración de Flash Professional. Dibuja un rectángulo en la ventana de la escena.
  • Seleccione el rectángulo con la herramienta Selección.
381698 7
381698 7

Paso 3. Establezca las propiedades del objeto

Seleccione el rectángulo recién seleccionado, vaya al menú Modificar y seleccione "Convertir en símbolo". También puede presionar F8 como atajo. En la ventana "Convertir en símbolo", asigne al objeto un nombre fácilmente reconocible, por ejemplo, "enemigo".

  • Busque la ventana Propiedades. En la parte superior de la ventana, habrá un campo de texto en blanco con la etiqueta "Nombre de instancia" al pasar el mouse sobre él. Ponle el mismo nombre que cuando lo convertiste en un símbolo ("enemigo"). Esto crea un nombre único para interactuar a través del código AS3.
  • Cada "evento" es un objeto independiente que puede verse afectado por el código. Puede copiar eventos que se han creado varias veces haciendo clic en la pestaña Biblioteca y arrastrándolos a la escena. Cada vez que se agrega un evento, su nombre cambia para indicar que el objeto está separado ("enemigo", "enemigo1", "enemigo2", etc.).
  • Cuando se refiera a un objeto en el código, simplemente use el nombre del evento, en este caso "enemigo".
381698 8
381698 8

Paso 4. Aprenda a cambiar las propiedades de un evento

Una vez creado el evento, puede configurar sus propiedades a través de AS3. Esto le permite mover objetos, cambiar su tamaño, etc. Puede personalizar una propiedad escribiendo la ocurrencia, seguida de un punto ".", Luego seguida de la propiedad, seguida del valor:

  • enemigo.x = 150; Esto afecta la posición de los objetos enemigos en el eje X.
  • enemigo.y = 150; Esto afecta la posición de los objetos enemigos en el eje Y. El eje Y se calcula desde la parte superior de la escena.
  • enemigo.rotación = 45; Gira los objetos enemigos 45 ° en el sentido de las agujas del reloj.
  • enemigo.escalaX = 3; Estira el ancho del objeto enemigo en un múltiplo de 3. El signo (-) volteará el objeto.
  • enemigo.escalaY = 0,5; Cambia la altura del objeto a la mitad de su altura actual.
381698 9
381698 9

Paso 5. Observe el comando trace ()

Este comando devolverá el valor actual del objeto especificado y es útil para determinar si todo está funcionando como debería. Probablemente no incluya el comando Trace en su código final, pero puede ser útil para localizar la fuente del código fallido.

381698 10
381698 10

Paso 6. Cree el juego base utilizando la información anterior

Ahora tiene un conocimiento básico de las funciones básicas. Puedes crear un juego en el que cada vez que se haga clic en un enemigo, el tamaño disminuirá, hasta que el enemigo sea destruido.

var enemigoHP: Número = 100; // Establece el HP (salud) del enemigo en 100 al comienzo del juego. var playerAttack: Number = 10; // Establece la cantidad de poder de ataque del jugador al hacer clic. enemigo.addEventListener (MouseEvent. CLICK, attackEnemy); // Al agregar esta función directamente al objeto enemigo, // esta función solo ocurre cuando se // hace clic en el objeto mismo, y no cuando se hace clic en cualquier parte de la pantalla. setEnemyLocation (); // Llama a la siguiente función para colocar al enemigo // en la pantalla. Esto sucede cuando comienza el juego. función setEnemyLocation (): void {enemigo.x = 200; // Mueve al enemigo 200 píxeles desde la izquierda de la pantalla. Enemigo. Y = 150; // Mueve al enemigo 150 píxeles hacia abajo desde la parte superior de la pantalla enemigo.rotation = 45; // Gira al enemigo 45 grados en el sentido de las agujas del reloj ("el valor x del enemigo es", enemigo.x, "y el valor y del enemigo es", enemigo.y); // Muestra la posición actual del enemigo para encontrar la fuente del error} function attackEnemy (e: MouseEvent): void // Crea una función de ataque cuando se hace clic en el enemigo {EnemigoHP = EnemigoHP - jugadorAtaque; // Resta el valor de ataque del valor de HP, // Genera un nuevo valor de HP. enemigo.escalaX = enemigoHP / 100; // Cambia el ancho según el nuevo valor de HP. // El valor se divide por 100 y luego se convierte a decimal. enemigo.escalaY = enemigoHP / 100; // Cambia la altura en función de la nueva traza del valor de HP ("Los enemigos tienen", HP del enemigo, "HP restante"); // Muestra la cantidad de HP que le queda al enemigo}

381698 11
381698 11

Paso 7. Pruébelo

Una vez que haya codificado, puede probar este nuevo juego. Haga clic en el menú Control y seleccione Probar película. El juego comienza y puedes hacer clic en un objeto enemigo para cambiar su tamaño. La salida de Trace se mostrará en la ventana Salida.

Parte 3 de 3: Aprendizaje de técnicas avanzadas

381698 12
381698 12

Paso 1. Aprenda cómo funcionan los paquetes

ActionScript está basado en Java y utiliza un sistema de paquetes muy similar. Con los paquetes, puede almacenar variables, constantes, funciones y otra información en archivos separados y luego importar estos archivos al programa. Esto es especialmente útil si desea utilizar paquetes que otras personas han desarrollado para facilitar la creación de juegos.

Busque una guía en Wikihow para obtener más detalles sobre cómo funcionan los paquetes en Java

381698 13
381698 13

Paso 2. Cree la carpeta del proyecto

Si está creando un juego que contiene imágenes y clips de sonido, cree una estructura de carpetas en el juego. Le resultará más fácil almacenar diferentes tipos de elementos, así como guardar diferentes paquetes para llamar.

  • Crea una carpeta base para tu proyecto. En la carpeta base, crea una carpeta "img" para todos los recursos artísticos, una carpeta "snd" para todos los recursos de sonido y una carpeta "src" para todos los paquetes de juegos y códigos.
  • Cree una carpeta "Juegos" en la carpeta "src" para almacenar el archivo Constants.
  • Esta estructura en particular no es necesaria, pero facilitará la organización del trabajo de todos los materiales, especialmente para proyectos más grandes. Para el juego simple descrito anteriormente, no es necesario crear ningún directorio.
381698 14
381698 14

Paso 3. Agrega sonido al juego

Los juegos sin sonido o música aburrirán rápidamente a los jugadores. Puede agregar sonido a los objetos con la herramienta Capas.

381698 15
381698 15

Paso 4. Cree el archivo de constantes

Si tu juego tiene muchos valores que se mantendrán iguales durante todo el juego, puedes crear un archivo Constants para recopilarlos todos en un solo lugar y poder invocarlos fácilmente. Las constantes pueden incluir valores como la gravedad, la velocidad del jugador y otros valores que pueden necesitar ser llamados repetidamente.

  • Si creó un archivo de constantes, colóquelo en una carpeta del proyecto y luego impórtelo como un paquete. Suponga que crea un archivo Constants.as y lo coloca en la carpeta de juegos. Para importarlo, use el siguiente código:

    paquete {juego de importación. *; }

381698 16
381698 16

Paso 5. Observa el juego de otras personas

Si bien muchos desarrolladores no divulgan su código de juego, hay una variedad de proyectos de tutoriales y otros proyectos de código abierto que le permitirán ver el código e interactuar con los objetos del juego. Esta es una excelente manera de aprender una variedad de técnicas avanzadas que pueden ayudar a que su juego se destaque.

Recomendado: