Programación

ene 25 2011

Primeros pasos en juegos en Flash

Los videojuegos son algo común en nuestra vida, ya sea que uno juegue en minijuegos.com, winning eleven, Dungeons & Dragons Online, Dota, buscaminas o counter. Algo que me parece interesante es intentar hacer juegos, para lo cual no se necesita más que alguna idea, conocer un poco de programación y comenzar a probar a ver qué sale; soy de la idea que un juego no necesita ser una maravilla en gráficos o tener 100 maneras de volarle la cabeza al enemigo, lo principal es que la mecánica del juego sea atractiva y retadora para el jugador (si es adictivo mucho mejor); por ejemplo estos dos juegos: Helicopter Game y Bloons, una idea sencilla + gráficos sencillos pero bonitos = WIN.

Para hacer juegos se puede usar prácticamente cualquier lenguaje de programación (si puedes ingresar datos, procesarlos y mostrar un resultado ya puedes hacer un juego, por ejemplo “guess the number”). Ahora, hay lenguajes que se prestan para hacer juegos, mi favorito es ActionScript que es el que se usa para hacer juegos en Flash aunque también se pueden hacer juegos muy interesantes en Java como el buscaminas que hizo Ali y luego migró a javascript, el gunbound que hizo Clayder o un juego de gohan destruyendo autos también de Clayder.
Flash es una plataforma muy utilizada para hacer juegos y publicarlos en la web, probablemente la mayoría de juegos en Internet estén en Flash, por lo que es una buena opción si uno desea hacer juegos. Personalmente he probado hacer algunos juegos sencillos con Flash y en este post quisiera escribir sobre algunas cosas que he aprendido y algunos conceptos básicos para empezar a hacer juegos en Flash.

Para empezar tenemos el ActionScript, el lenguaje de programación usado para Flash. Actualmente se trabaja con la versión 3.0, la cual presenta ciertas ventajas y cambios en comparación con la versión 2.0 como un enfoque más orientado a objetos (lo que lo hace bastante fácil para alguien con conocimientos en POO), la forma de manejar eventos, manejo de expresiones regulares, mejoras para tareas como pintar figuras mediante código, etc; podemos decir que programar en AS3 es más ordenado y permite tener más control. Encontré una comparación muy interesante que queda mejor sin traducir:

• as3.0 is a Japanese Chef’s knife. Finely crafted but requires care and technique in its use.
• as2.0 is a Machete. Great for hacking things, but useless for anything requiring fine detail or control.
• as1.0 is a plastic spoon.

Aquí hay unas líneas en as3 en las que se puede ver un poco su sintaxis:

package {
	public class Clase1{

		//definición de una variable privada numérica
		private var n:Number=3;

		//Constructor
		public function Clase1() {
			//trace permite imprimir en consola
			trace("Hola mundo");
		}

		//Un método
		public function saluda():void{
			//Instanciación de un arreglo
			var ar:Array=new Array();
			ar.push("Uno");
			ar.push("Dos");
			ar.push("Tres");
			//Recorrido con un for
			for(var i:Number=0;i<ar.length;i++){
				trace("Valor: "+ar[i]);
			}
		}

	}
}

Como se puede ver no es muy diferente a java, c++ o .net.

Cuando se trabaja en flash (refiriéndonos al programa de Adobe) tenemos por un lado la parte gráfica, que es la zona en la que uno agrega sus dibujos y hace interpolaciones trabajando con fotogramas y por otro lado tenemos la parte de código, a la que podemos acceder pulsando F9; esta es una característica muy importante ya que podemos por un lado dibujar una pelota y por el otro realizar la programación para que la pelota baje por la pantalla y luego rebote simulando gravedad. No sólo eso, además podemos tener aparte de nuestro archivo .fla (formato de Flash) varios archivos .as siendo cada archivo una clase en actionscript, de manera que tenemos clases reutilizables o podemos utilizar algún framework con código que otras personas ya hicieron. Podemos ligar símbolos en Flash con una clase específica en AS3 de manera que cuando jalamos un símbolo al escenario se esté ejecutando el constructor de la clase en AS3 automáticamente, adquiriendo el símbolo todas las propiedades y comportamientos definidos en la clase, o incluso podemos aplicar herencia en los símbolos.

A los proyectos en Flash se les puede agregar una clase en actionscript principal, que viene a ser la clase del escenario y que se instancia al iniciar la película, a esta se le denomina Document Class y se le puede poner el nombre que uno quiera, yo suelo llamarla Engine.as

Dos conceptos muy importantes para conocer son el MovieClip y el Sprite. Los dos son una especie de contenedores o lienzos sobre los que se puede trabajar. Imaginemos que tenemos un tablero en blanco, que es el escenario de Flash y un conjunto de papelitos sueltos, en papelito dibujamos un árbol y lo ponemos en el escenario, en otro papelito más grande pintamos un grass y lo ponemos en la parte inferior del escenario y luego cogemos un conjunto de papelitos unidos (como los post it o las hojas de un cuaderno pequeño), en cada hoja dibujamos una persona (tipo stick figure) con algunas diferencias como en la posición de las manos o pies, de manera que al pasarlos rápidamente da la impresión de movimiento, bueno, cogemos ese cuadernillo o lo que sea y lo agregamos también a nuestro pintoresco escenario. Los Sprites son como los papelitos simples donde dibujamos el árbol y el grass, es un sólo lienzo en el que uno puede dibujar, insertar imágenes, videos, incluso otros Sprites o MovieClips. Los Movieclips son similares a los Sprites sólo que tienen línea de tiempo o mejor dicho son como un conjunto de sprites en secuencia, como los frames de una película, uno puede agregarles un cuadrado en un fotograma y moverlo un poco a la derecha en cada fotograma subsiguiente para dar la impresión de movimiento continuo, al igual que los Sprites permite que se le agreguen a su vez más MovieClips o Sprites.

Los eventos son otra cosa a tomar en cuenta al programar un juego, por ejemplo hay eventos para detectar que el usuario ha hecho click en un símbolo, se ha entrado en un frame (viene a ser cada refrescada de pantalla, lo cual se puede configurar, por ejemplo se puede trabajar a 20 fotogramas por segundo o a 32fps si se busca mayor suavidad en la animación). Hay eventos para cuando el jugador presiona una tecla, cuando se terminó de cargar un archivo, cuando terminó un sonido, etc. Para usar estos eventos se necesita agregar un listener que escuche a determinado evento y una función que sea invocada cuando se detecta el evento. Por ejemplo, este código mueve un cuadrado a la derecha cada vez que el usuario hace click en el:

//la clase cuadrado está ligada a un símbolo con un ... cuadrado
var cuad:Cuadrado=new Cuadrado();
//agregamos el cuadrado al escenario
addChild(cuad);
//agregamos el listener para escuchar cuando se le hace click
addEventListener(MouseEvent.Click, miFuncion);
//función que se va a invocar cuando se detecte el click
function miFuncion(e:Event){
    //movemos el cuadrado a la derecha
     cuad.x=cuad.x+10;
}

Para detectar colisiones as3 brinda el método hitTestObject, con el cual podemos ver si dos Sprites/Movieclips colisionan o el método hitTestPoint para ver si un Sprite/Movieclip colisiona con un punto específico. Por ejemplo:

var hayColision:Boolean=persona.hitTestObject(bala);
if (hayColision){
   trace("Recibiste una bala");
}else{
   trace("No moriste");
}

Ahora la parte interesante, vamos a pensar (no programar porque este post ya de por sí está largo) cómo juntamos lo anterior para hacer un juego de pingpong:

1. Crear 1 sprite con un círculo que será la pelota
2. Crear 2 sprites con forma rectangular para las barras-raquetas que usará cada jugador
3. Crear 1 sprite para el fondo, ya sea de un color o agregando una imagen
4. Agregar las 2 barras, una a la izquierda y la otra a la derecha
5. Agregar los listeners para que cuando el jugador presione en el teclado “W” la barra de la izquierda suba y cuando presione “S” la barra baje, algo similar para la otra barra
6. Agregar la pelota al escenario, creándole una clase con 2 variables, la velocidad y la dirección
7. Agregar el evento para que en cada refresco de pantalla (evento llamado EnterFrame) la pelota avance de acuerdo a su velocidad y dirección (hay que aplicar un poquito de trigonometría)
8. Agregar el evento para que en cada refresco de pantalla se pruebe si la pelota colisiona con alguna de las barras, si colisiona con la de la izquierda se cambia su dirección a la derecha y viceversa. Se puede juntar este punto con el anterior formando una sola función que hace varias cosas. Asimismo verificar si la pelota está a la izquierda de la barra de la izquierda, lo que quiere decir que el jugador de la derecha hizo un punto, igualmente para el otro lado.
9. Llevar 2 contadores para ver quién es el primero en llegar a 10.
10. Cuando alguien llegue a 10 agregar un Sprite con un bonito mensaje de Ganaste.

Eso sería todo con este post que espero no haya sido muy desordenado y haya cumplido con lo que quería que es dar algunas ideas de cómo usar flash para crear juegos. Aquí les dejo un juego que hice y espero que les guste, se llama pixerpiente y consiste en mover el mouse evitando obstáculos que van apareciendo y no dejar que el rastro que vas dejando te alcance ya que empieza a consumirse.

By Diego • Geek, Multimedia, Programación, Software • 0