Lo que estoy practicando esta día y de lo que decidí escribir ahora es la arquitectura básica de un desarrollo de juego también básico, el código de este juego está adaptado para AS3 también la manera como está organizado la disposición grafica en la biblioteca de Flash, este juego servirá de base para la creación de la arquitectura de juegos más avanzados.
Lo primero que se debe hacer es la organización de elementos en la biblioteca, un juego de Pong está básicamente formada por: una pelota, las paletas y el fondo en el cual se desarrolla el juego.
Debo de crear esos elementos en la biblioteca así que voy a Insertar/Nuevo Símbolo… (ctrl + F8) llamado mcPelota y dar clic en aceptar, ahora dibujamos en el escenario una pelota pequeña le di un tamaño de 15x15 px. Ahora voy a dibujar la paleta de la misma manera debemos de crear un nuevo símbolo paleta llamado mcPaleta; ahora con la herramienta rectángulo dibujamos un rectángulo de 70x10 px. El fondo de nuestro juego será del mismo tamaño que el del escenario de 300x500 px. Igual se debe darle un nombre de símbolo llamado mcFondo. Estos serán los elementos más importantes que tendrá nuestro juego.
Ahora debemos de organizar nuestra línea de tiempo por lo cual debemos de crear en nuestra línea de tiempo las capas necesarias: fondo, paletas, pelota y la capa de acciones; ahora acomodamos en escenario cada uno de los elementos de la biblioteca.
Ahora a programar; por el momento el poner las dos paletas en el escenario no será necesario, lo que programaremos ahora será el movimiento de la pelota en el escenario, así que acomodamos la pelota en su respectiva capa y en el panel de propiedades le damos el nombre de instancia necesario para que funcione nuestro programa, como nombre de instancia en el panel propiedades seleccionando la pelota le doy el nombre de pelota_mc. También acomodamos el fondo en su capa respectiva y le damos de nombre de instancia fondo_mc.
Abrimos el panel de Acciones (F9) y escribimos el siguiente código:
//control de la dirección de la pelota
var xDireccion:Number = 10;
var yDireccion:Number = -10;
function iniciaJuego(event:MouseEvent):void
{
pelota_mc.addEventListener(Event.ENTER_FRAME, movimientoPelota);
fondo_mc.removeEventListener(MouseEvent.CLICK, iniciaJuego);
}
function movimientoPelota(event:Event):void
{
if(pelota_mc.x <=0)
{
xDireccion *= -1;
}
else if(pelota_mc.x >= stage.stageWidth - pelota_mc.width)
{
xDireccion *= -1;
}
if(pelota_mc.y <=0)
{
yDireccion *= -1;
}
else if(pelota_mc.y >= stage.stageHeight - pelota_mc.height)
{
yDireccion *= -1;
}
pelota_mc.x += xDireccion;
pelota_mc.y += yDireccion;
}
//inicia el juego
fondo_mc.addEventListener(MouseEvent.CLICK, iniciaJuego);
Lo que primero hacemos es definir la dirección x e y con la que se controlara el rebote de la pelota en el escenario, la función iniciaJuego es llamada desde el listener asociado a el objeto fondo_mc, que es la última línea en nuestro código y es la que realmente inicia todo el juego al hacer clic en algún punto del escenario.
Dentro de la función inciaJuego también esta otro listener asociado otra vez al objeto fondo que borra el evento de ratón inicialmente creado. Luego se hace la llamada a la función movimientoPelota que es un evento que se desarrolla durante todo el juego. Dentro de esta función se controla la dirección de la pelota con respecto a los límites del escenario y se modifica la dirección del objeto pelota al llegar a uno de esos límites.
Por el momento esta sería una primera parte del desarrollo del juego, y el resultado sería este:
Ahora debemos de añadir una paleta al escenario en su respectiva capa, y le damos el nombre de instancia paleta_mc , ahora en el panel de acciones se debe de añadir las variables que controlan la paleta, como la paleta solo se mueve de izquierda a derecha en el eje X añadimos la variable targetX (nuestro objetivo “paleta” en eje X), una variable easing que añadimos es útil para el suavizado del movimiento, esta definición de variables esta después de las variables que controlan la dirección de la pelota.
//definimos las variables que controlan la paleta var targetX:Number = paleta_mc.x; var easing:Number = 7; //suavizado de movimiento
Dentro de la función iniciaJuego, creamos un listener para la instancia del objeto paleta de tipo evento que es similar al evento que controla el movimiento de la pelota, este listener hace el llamado a la función movimientoPaleta y lo que hacemos es escribir esta función debajo de la función movimientoPelota.
//--------------------------control de movimiento de la paleta--------
function movimientoPaleta(event:Event):void{
if(this.mouseX <= paleta_mc.width/2)
{
targetX = 0;
}
else if(this.mouseX >= stage.stageWidth - paleta_mc.width/2)
{
targetX = stage.stageWidth -paleta_mc.width;
}
else
{
targetX = this.mouseX - paleta_mc.width/2;
}
paleta_mc.x += (targetX - paleta_mc.x)/2;
}
Esta función que controla el movimiento de la paleta hace uso de la variable target y el control del mouse en el escenario sobre el eje X , el código lo que hace es básicamente captar el evento de movimiento del ratón sobre el eje X y mover así también la paleta respecto a su posición, debemos notar que para que funcione bien este código debemos de acomodar la posición de nuestra paleta en un punto (0,0); en la definición del objeto en la biblioteca ya que el movimiento del puntero lo que busca es el centro de la paleta respecto al ancho con la que se ha dibujado por lo que ubicamos ese centro así:
Por el momento lo que tenemos es un movimiento de paleta sencillo pero funcional notemos que en anterior código no se ha utilizado la variable de suavizado easing antes definida, esta variable lo que hace es dar el efecto de deslizamiento que tendrá nuestra paleta cuando el puntero se mueva de izquierda a derecha o de derecha a izquierda lo único que debemos de modificar es en la línea de código:
paleta_mc.x += (targetX - paleta_mc.x)/2;
Por:
paleta_mc.x += (targetX - paleta_mc.x)/easing;
Que utiliza la variable easing que tiene un valor de 7, y hace que el movimiento de la paleta sea este:
Por el momento esta sería la primera parte de la programación y arquitectura de nuestro pequeño proyecto Pong que es muy sencillo pero que es un gran ejemplo de cómo organizar nuestra biblioteca y la manera de controlar los distintos eventos que se necesitan para que sea funcional.