Tutorial de Ping Pong con AS3 - Parte 1

En este tutorial vamos a crear un juego sencillo de ping pong, con una mecánica similar al clásico juego que se puede ver en la imagen, pero un poco más llamativo y menos prehistórico.

Lo primero que debemos hacer es abrir el Adobe Flash, en mi caso tengo el CS4, y crear nuevo Archivo de Flash (AS 3.0). En el panel de propiedades cambiar el tamaño del lienzo a 450 x 300 px, que es el tamaño con el que vamos a trabajar el juego.

Luego vamos a agregar una imagen para que sea el fondo del juego, asegurense que cubra todo el lienzo, no importa si se pasa.

Ahora hay que dibujar un rectángulo que va a ser la barra que moverá el jugador para evitar que la pelota pase su lado (basta con dibujar uno ya que la otra barra será igual). Podemos crear otra capa en la parte inferior haciendo click en el pequeño ícono de hoja doblada; hay que poner la capa encima de la que contiene la imagen de fondo para evitar dibujar detrás de la imagen. Luego de dibujar la digura presionamos F8 para "convertir en símbolo", le ponemos por nombre "Player", tipo "Clip de película" y presionamos Aceptar; con eso ya tenemos la primera barra lista.

Para crear la segunda barra hay ir a la "Biblioteca" y arrastrar el símbolo "Player" al escenario, ubicándolo a la derecha.

Lo siguiente es crear la Document Class, que es la clase en actionscript principal. Para esto ir a "Archivo", "Nuevo Documento", "Archivo ActionScript". En el nuevo archivo escribimos el siguiente código, con lo que estamos creando una clase a la que llamaremos "Engine".

package
{
 import flash.display.MovieClip;
 
 public class Engine extends MovieClip {  
  public function Engine() : void
  {
  
  }
 }
}

Para agregarla como clase principal hay que escribir "Engine" en la parte "Clase" del panel "Propiedades".

Ahora vamos a crear una clase a la que llamaremos "Player". Repetimos el proceso anterior pero esta vez ingresamos el siguiente código.

package
{
 import flash.display.MovieClip;
 
 public class Player extends MovieClip {
             //con esta variable indicamos cuántos
  //pixeles debe moverse la barra
  //a mayor número mayor velocidad
  var velocidad:Number=2;
  
  public function Player() : void
  {
  }
  
  public function sube():void{
   //reducir el valor de "y" para subir 
   //validación para no subir más que
   //el inicio de la pantalla
   if(y-velocidad<0){
    y=0;
   }else{
    y=y-velocidad;
   }
  }
  
  public function baja():void{
   //aumentar el valor de "y" para bajar
   //validación para no bajar más que
   //el final de la pantalla
   if(y+velocidad>300-height){
    y=300-height;
   }else{
    y=y+velocidad;
   }
  }
 }
}

Hecho esto hay que asignar esta clase al símbolo Player. En la "Biblioteca" hacemos click derecho en Player, propiedades y donde dice "Clase" escribimos Player. De esta manera el símbolo y la clase en actionscript está relacionados.

Vamos a agregar un método llamado onLoop a la clase Engine y haremos que se ejecute en cada evento Enter_Frame, es decir, en cada fotograma de la película flash. El número de fotogramas por segundo se puede modificar en el panel "Propiedades".

package
{
 import flash.display.MovieClip;
 import flash.events.Event;
 
 public class Engine extends MovieClip
 {  
  public function Engine() : void
  {
   addEventListener(Event.ENTER_FRAME,onLoop);
  }
  function onLoop(e:Event){
   trace("Hola");
  }
 }
}

Hay que asignar un nombre a la instancia de la clase Player que tenemos en el escenario (el que dibujamos al inicio). Elegimos el símbolo y en el panel de "Propiedades" escribimos en el campo de texto superior "player1", con minúsculas para identificar que es un objeto. Hacemos lo mismo para la otra barra, pero en este caso le ponemos "player2".

Ahora vamos a dar un poco de movimiento a la barra. Para identificar las pulsaciones de teclado es mejor usar una clase de utilidad llamada KeyObject de Senocular la cual es más exacta que usar el evento normal que trae AS3 (El código de esta clase está incluido en el .rar al final del post).

Modificaremos el método onLoop de Engine para que si el jugador presiona "w" la barra suba, invocando a su método sube, y si presiona "s" la barra baje llamando al método baja. Para la barra derecha usaremos las flechar direccionales.

Para probar el movimiento de la barra les recomiendo minimizar el CS4 y ejecutar el .swf que se ha generado porque al pulsar "w" o "s" el programa puede confundirlo con atajos de teclado.

package
{
 import flash.display.MovieClip;
 import flash.events.Event;
 import flash.ui.Keyboard;

 public class Engine extends MovieClip
 {  
  private var key:KeyObject;
  
  public function Engine() : void
  {
   //Se crea el objeto KeyObject
   key = new KeyObject(stage);
   //Seteamos la velocidad de player1 y 2
   player1.velocidad=8;
   player2.velocidad=8;
   //Se asigna el método onLoop al evento Enter_Frame
   addEventListener(Event.ENTER_FRAME,onLoop);
  }
  function onLoop(e:Event){
   //W=87
   if(key.isDown(87)){
    player1.sube();
   }
   //S=83
   if(key.isDown(83)){
    player1.baja();
   }
   
   if(key.isDown(Keyboard.UP)){
    player2.sube();
   }
   if(key.isDown(Keyboard.DOWN)){
    player2.baja();
   }
  }
 }
}

El resultado sería algo así:

Esto es todo para la primera parte de este tutorial, espero les haya servido y haya sido claro. Puede descargar AQUI el código fuente.