Juego de ritmo usando flex

Después de tantos tutoriales ya es hora de que ponga algo de mis trabajos para el portafolio online que estoy tratando de armar.

Este es un juego de ritmo que estoy haciendo con as3. Además es la primera vez que uso Flex para manejar el proyecto y la verdad es mucho mas comodo y organizado, desde la manera de programar con el code hinting, hasta los snippets y demás cosas con las que cuenta.
Y por si fuera poco, los pasos de la canción los lee la aplicacion de un xml =P

Enjoy!

Haz click para seguir leyendo...

Contraer

Minituts - Preloader en AS2 y AS3 (precargador)

En este minitut voy a explicar como hacer un preloader o precargador, para que cuando alguien vea tu animación o juego pueda saber que debe esperar un momento a que se cargue.

Primero voy a explicar el codigo que se usa para precargar el archivo, sin nada gráfico. Después de haber entendido eso explicaré como hacer una barra de descarga que refleje lo que se ha descargado tu swf.

AS2

//primero detenemos el flash para que no avance hasta que cargue
stop();
//creamos una función que se va a ejecutar cada que avance un frame
this.onEnterFrame = function(){ 
  //declaramos una variable que va a tener el valor de lo que se ha cargado
    var cargado:Number = Math.round(getBytesLoaded()/getBytesTotal()*100);
    /* 
    getBytesLoaded nos da la cantidad de bytes cargados
    getBytesTotal nos da la cantidad de bytes de nuestro archivo
    Math.round redondea el numero para que no tenga decimales
    Después de esta operación tenemos un valor entre 0 y 100
    de lo que se ha cargado el swf
    */
    //checamos si nuestra variable cargado es 100 o sea si ya se cargó todo
    if(cargado == 100){
        //quita esta función
        delete(onEnterFrame);
        //avanza al siguiente frame
        nextFrame();
    }
}

AS3

//primero detenemos el flash para que no avance hasta que cargue
stop();
//asignamos un evento a loaderInfo que es un elemento de flash predeterminado //cada que se active el evento PROGRESS va a ejecutar la funcion "cargando"
loaderInfo.addEventListener (ProgressEvent.PROGRESS, cargando);

function cargando(evt:ProgressEvent):void {
    //declaramos una variable que va a tener el valor de lo que se ha cargado
    var cargado:Number=Math.round(evt.bytesLoaded/evt.bytesTotal*100);
    /*
    tomamos las propiedades de nuestro evento "evt"
    bytesLoaded nos da la cantidad de bytes cargados 
    bytesTotal nos da la cantidad de bytes de nuestro archivo 
    Math.round redondea el numero para que no tenga decimales 
    Después de esta operación tenemos un valor entre 0 y 100  
    de lo que se ha cargado el swf 
    */

    //checamos si nuestra variable cargado es 100 o sea si ya se cargó todo
    if(cargado==100){
        //quita el listener
        loaderInfo.removeEventListener (ProgressEvent.PROGRESS, cargando);
        //avanza al siguiente frame
        nextFrame();
    }
}

Ahora para hacer una barra que vaya llenándose necesitamos dibujar una, convertirla a MovieClip (F8) y ponerle nombre de instancia "barra". Después tenemos que dibujar la máscara que nos ayudara a que se muestre solo cierta parte de la barra, haz un rectangulo que cubra por completo la barra, hazlo MovieClip y llamalo "mascara".

Por último sólo necesitamos agregar unas cuantas lineas a nuestro código:


AS2

//primero detenemos el flash para que no avance hasta que cargue
stop();

//asignamos la mascara a la barra
barra.setMask("mascara");
//creamos una función que se va a ejecutar cada que avance un frame
this.onEnterFrame = function(){ 
    //declaramos una variable que va a tener el valor de lo que se ha cargado
    var cargado:Number = Math.round(getBytesLoaded()/getBytesTotal()*100);
    /* 
    getBytesLoaded nos da la cantidad de bytes cargados 
    getBytesTotal nos da la cantidad de bytes de nuestro archivo 
    Math.round redondea el numero para que no tenga decimales 
    Después de esta operación tenemos un valor entre 0 y 100  
    de lo que se ha cargado el swf 
    */

    //La escala a lo ancho de la mascara cambia dependiendo del porcentaje cargado
    mascara._xscale = cargado;
    //checamos si nuestra variable cargado es 100 o sea si ya se cargó todo
    if(cargado == 100){ 
       //quita esta función
       delete(onEnterFrame); 
       //avanza al siguiente frame
       nextFrame();
    }
}

AS3

//primero detenemos el flash para que no avance hasta que cargue
stop();

//asignamos la mascara a la barra 
barra.mask = mascara;
//asignamos un evento a loaderInfo que es un elemento de flash predeterminado //cada que se active el evento PROGRESS va a ejecutar la funcion "cargando"
loaderInfo.addEventListener (ProgressEvent.PROGRESS, cargando);

function cargando(evt:ProgressEvent):void {
    //declaramos una variable que va a tener el valor de lo que se ha cargado
    var cargado:Number=Math.round(evt.bytesLoaded/evt.bytesTotal*100);
    /*
    tomamos las propiedades de nuestro evento "evt" 
    bytesLoaded nos da la cantidad de bytes cargados 
    bytesTotal nos da la cantidad de bytes de nuestro archivo 
    Math.round redondea el numero para que no tenga decimales 
    Después de esta operación tenemos un valor entre 0 y 100  
    de lo que se ha cargado el swf 
    */

    //La escala a lo ancho de la mascara cambia dependiendo del porcentaje cargado
    //ya que cargado tiene valores del 1 al 100 y el scaleX en as3 el 100% se maneja     //con 1 necesitamos dividir entre 100
    mascara.scaleX = cargado/100;

    //checamos si nuestra variable cargado es 100 o sea si ya se cargó todo
    if(cargado==100){
        //quita el listener
        loaderInfo.removeEventListener (ProgressEvent.PROGRESS, cargando);
        //avanza al siguiente frame
        nextFrame();
    }
}

Para probarlo debes presionar ctrl+enter pero notarás que la animación de la barra no se ve ya que se cargó muy rapido, así que presiona de nuevo ctrl+enter (sin cerrar la ventana) para simular que tu archivo se esta descargando. Como ya es costumbre aquí estan los archivos fla en AS2 y AS3.

Ahora que ya sabes como funciona un precargador puedes crear distintas maneras de hacer que tu archivo se descargue, desde alguna animación personalizada con texto que indique el porcentaje o incluso hasta un minijuego.

Recuerda que puedes ayudar dando ideas para los siguientes minituts o si crees que algo se debe cubrir con más profundidad.

Haz click para seguir leyendo...

Contraer

Minituts - Drag and drop (Arrastrar y soltar)

En este minitut voy a explicar una manera sencilla de hacer "Drag & drop", es decir arrastrar un objeto con el mouse, tanto en action script 2 como en 3 y sólo usando 3 funciones.
Para empezar crea un MovieClip, en mi caso dibujé un círculo y de nombre de instancia le puse "circulo" (que imaginativo xD).

Ahora lo que sigue es pegar el código en el primer frame, es bastante sencillo y está comentado línea por línea. Sólo escoge tu sabor de actionScript:

AS2

stop();

//activa arrastrar cuando es presionado el circulo
circulo.onPress = arrastrar;
//activa soltar cuando se deja de presionar el circulo
circulo.onRelease = soltar;


function arrastrar():Void{
    //this se refiere a quien activo la funcion
    ////en este caso el circulo, y empieza la función de arrastrar
    this.startDrag();
    //cada que se mueva el mouse refresca la pantalla para
    ////que el movimiento sea más fluido
    this.onMouseMove = refrescarPantalla;
}

function soltar():Void{
    //detiene la función de arrastrar
    this.stopDrag();
    //quita la funcion de refrescar pantalla
    this.onMouseMove = null;
}

function refrescarPantalla():Void{
    //despues de mover el mouse actualiza la pantalla aunque
    ////no haya pasado un frame
    updateAfterEvent();
}

AS3

stop();

//evento que se activa al presionar sobre el círculo
circulo.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
//evento que se activa al soltar el círculo
circulo.addEventListener(MouseEvent.MOUSE_UP,soltar);


function arrastrar(evt:MouseEvent):void{
   //la variable mc toma el movieclip que activo el evento
   ////en este caso el circulo
   var mc:MovieClip = evt.currentTarget as MovieClip;
   //inicia la funcion de arrastrar
   mc.startDrag();
   //evento que se activa cuando el mouse se mueve
   ////refresca la pantalla para que el moviemiento se vea fluido
   mc.addEventListener(MouseEvent.MOUSE_MOVE,refrescarPantalla);
}

function soltar(evt:MouseEvent):void{
   //la variable mc toma el movieclip que activo el evento
   ////en este caso el circulo
   var mc:MovieClip = evt.currentTarget as MovieClip;
   //detiene la funcion de arrastrar
   mc.stopDrag();
   //quita el evento que refresca la pantalla
   mc.removeEventListener(MouseEvent.MOUSE_MOVE,refrescarPantalla);
}

function refrescarPantalla(evt:MouseEvent):void{
   //despues de mover el mouse actualiza la pantalla aunque
   ////no haya pasado un frame
  evt.updateAfterEvent();
}

Los dos códigos son igual de reutilizables, o sea que con las mismas funciones puedes hacer que muchos objetos sean arrastrables al mismo tiempo. Sólo basta agregar unas lineas para cada objeto:

AS2

objetoNuevo.onPress = arrastrar;
objetoNuevo.onRelease = soltar;

AS3

objetoNuevo.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
objetoNuevo.addEventListener(MouseEvent.MOUSE_UP,soltar);

Como siempre, si algo les falló aquí estan los archivos para flash CS3 y CS4.

Recuerden comentar que uso le podrían dar o incluso dar ideas de lo que quieren ver para los siguientes minituts =D

Haz click para seguir leyendo...

Contraer

Minituts - SharedObjects (cookies o saveFiles)

En este minitut vas a aprender como hacer para guardar datos localmente con flash, usando SharedObjects (sin php ni nada extra).

Este es un ejemplo de lo que se puede hacer con sharedObjects

Después de introducir tu nombre y dar clic en el botón de "listo" se almacena esa información en tu maquina, permitiendo que aunque actualizes la pagina, cierres el explorador o pasen unos días, la siguiente vez que visites la página tu nombre se seguirá viendo.

Para empezar lo que tenemos que hacer es obtener el SharedObject de la maquina del usuario con esta línea de código:

var so:SharedObject = SharedObject.getLocal("miFlash");

Lo que hace esa linea es asignar la información que se encuentre con el nombre de "miFlash".

Ahora tenemos que revisar si tiene o no información, ya que dependiendo de eso vamos a saber si ya se había almacenado algo o es la primera vez que el usuario ve tu flash.

if(so.data.info != null) {
   //Hay información almacenada
} else {
   //No hay información
}

Lo siguiente que necesitamos saber es almacenar la información en el sharedObject, esto se hace primero asignando la información que necesitamos y después utilizar la función "flush":

so.data.info = "hola";
//podemos almacenar mas datos con sólo cambiar el nombre de la propiedad del objeto
so.data.nombre = "Eder";
so.data.numVisitas = 0;

so.flush();

Por último si queremos eliminar toda la información del sharedObject, lo único que necesitamos es usar la función "clear":

so.clear();

Pueden usar esto para cosas sencillas como el ejemplo de arriba, para almacenar información sobre preferencias, puntajes y hasta avances en juegos.

¿Se te ocurre alguna otra manera de usar el SharedObject?
Compártela en los comentarios =D.

También puedes checar los demás minituts o dar ideas para los siguientes.

Haz click para seguir leyendo...

Contraer

Juego de plataformas AS3

Ayer me llegó un correo, de un lector de este workspace, donde me pide explicar más a detalle como crear un juego de plataformas con fines educativos y de ser posible en actionScript 3. Así que aprovecho esta entrada para traducir mi código de as2 a as3 y además dar una explicación más a fondo de como funciona cada componente.

Ya que en este tutorial voy a enfocarme en el código, no voy a explicar cosas básicas (herramientas, hacer MovieClips, etc) así que si buscas algo más básico te recomiendo cheques primero mis otros tutoriales.
Esto es lo que vas a poder crear a lo largo de este tutorial.

controles: Flechas

Como podrás notar es practicamente idéntico al juego que ya habíamos hecho en otra entrada, la diferencia es que esta hecho con AS3 ;)

Para empezar vamos a trabajar con este archivo que contiene todos los MovieClips que vamos a necesitar...

Ahora selecciona el layer de acciones y presiona F9 (menu: "Window"->"Actions") para abrir el panel de acciones del primer frame.

Lo primero que necesitamos es una manera de reconocer que teclas estan siendo presionadas, para eso vamos a poner eventListener que reconozcan cuando se presionan y sueltan teclas además de funciones que respondan con estos.

var keysDown:Object = new Object();

///Eventos para saber cuando las teclas son presionadas
stage.addEventListener(KeyboardEvent.KEY_DOWN,presionoTecla);
stage.addEventListener(KeyboardEvent.KEY_UP,levantoTecla);

function presionoTecla(evt:KeyboardEvent):void{
   keysDown[evt.keyCode] = true;
}

function levantoTecla(evt:KeyboardEvent):void{
   delete keysDown[evt.keyCode];
}

function teclaPresionada(keyCode:uint):Boolean {
   return Boolean(keyCode in keysDown);
}

//codigos de teclas
var arriba:Number = 38;
var abajo:Number = 40;
var izquierda:Number = 37;
var derecha:Number = 39;

Primero creamos un objeto que almacenará las teclas que estan siendo presionadas.
En las siguientes líneas le asignamos al stage dos EventListener que van a reaccionar cuando las teclas sean presionadas y cuando dejen de presionarse respectivamente.
La funcion "presionoTecla" almacena en el objeto que habíamos creado el valor de "true" correspondiente a la tecla presionada.
La función "levantoTecla" hace todo lo contrario eliminando el valor.
La función "teclaPresionada" nos va a servir haciendonos saber si la tecla que le indiquemos esta siendo presionada o no.
Y por último declaramos los valores correspondientes a las flechas del teclado en variables para que sea más facil de identificar.

Lo que sigue es el juego de plataformas, primero vamos a declarar las variables.

var velLateral:Number = 3;
var friccion:Number = .8;
var friccionAire:Number = .8;
var gravedad:Number = -3;
var tiempoSalto:Number = 4;
var salto:Number = 30/tiempoSalto;
var velMaxima:Number = 20;

//puntos de colisiones
var puntoIzq:Number = -15;
var puntoDer:Number = 15;
var puntoBajo:Number = 25;
var puntoArriba:Number = -25;

Ahora nuestra primer función que sirve para darle los valores iniciales a nuestro personaje de acuerdo a las variables que declaramos arriba.

function inicializarPersonaje(mc:MovieClip):void{
   if(mc.dx==undefined){
       mc.dx = 0;
       mc.dy = 0;
       mc.saltando = true;
       mc.empezoSalto=0;
   }
   mc.friccion = friccion;
   mc.vel = velLateral;
   mc.salto = salto;
}

Ahora lo siguiente es la funcion que va a hacer que el personaje se mueva de acuerdo a lo que presionemos.

function manejarPersonaje(evt:Event):void{
   if(teclaPresionada(izquierda)){
       mcPlayer1.dx -= mcPlayer1.vel;
   }
   if(teclaPresionada(derecha)){
       mcPlayer1.dx += mcPlayer1.vel;
   }

   if(teclaPresionada(arriba)&&mcPlayer1.saltando==false){
       salta(mcPlayer1);
   }else if(teclaPresionada(arriba)&&mcPlayer1.empezoSalto>0){
       mcPlayer1.dy-=mcPlayer1.salto;
   }
   mcPlayer1.empezoSalto--;
}

En las primeras líneas utilizamos la funcion "teclaPresionada" para saber si se presionan las teclas izquierda y derecha, si es asi aumentamos la propiedad dx hacia la dirección indicada (negativo izquierda, positivo derecha).
El siguiente condicional se activa cuando se presiona "arriba", si el presonaje no esta saltando (o sea es igual a "false") llama la funcion "salta" que haremos más adelante. En cambio si se presiona y el personaje ya esta saltando se checa la variable "empezoSalto" que va disminuyendo desde que inicia el salto.Esta variable sirve para hacer que mientras más se presione "arriba" el salto sea mayor, ya que si esta variable todavía es mayor a cero quiere decir que hace poco empezó el salto y todavía se puede impulsar un poco más.

La siguiente función es la inicia el salto del personaje.

function salta(mc:MovieClip):void{
   inicializarPersonaje(mc);
   mc.friccion = friccionAire;
   mc.dy -= mc.salto;
   mc.saltando = true;
   mc.empezoSalto=tiempoSalto;
}

Ya que le mandamos nuestro personaje como parametro, la variable mc que maneja salta corresponde a nuestro personaje. Primero inicializa al personaje para que cualquier cosa que le afectaba (como cambios de friccion) se eliminen. Después le damos la friccion correspondiente a la del aire, la propiedad dy es cambiada con respecto a la velocidad del salto y se inicializa la propiedad de empezó salto que vimos en la funcion anterior.

Ya que todas las acciones de nuestro personaje han sido asignadas ahora falta una funcion que las efectue contínuamente.

function aplicarMovimiento(evt:Event):void{
   var mc:MovieClip = evt.currentTarget as MovieClip;
   mc.x += mc.dx;
   mc.dx *= mc.friccion;

   if(mc.dx>velMaxima){
       mc.dx = velMaxima;
   }else if(mc.dx<-velMaxima){
       mc.dx =- velMaxima;
   }
   mc.y+=mc.dy;
   if(!mcSuelo.hitTestPoint(mc.x,mc.y+puntoBajo+1,true)){
       mc.saltando = true;
   }
   if(mc.saltando){
       mc.suelo = 0;
       mc.dy -= gravedad;
       if(mc.dy>salto*tiempoSalto){
           mc.dy = salto*tiempoSalto;
       }
   }

   checarColisiones(mc);

   vCam.x=mc.x;
   vCam.y=mc.y;
   vCam.camControl();
}

Lo primero que hace "aplicarMovimiento" es cambiar la posicion del personaje 'x' con respecto a su propiedad 'dx'. Después múltiplica 'dx' por el coeficiente de fricción para que vaya disminuyendo la velocidad cada iteración. Depués checa que la velocidad del personaje no rebase los máximos que habíamos establecido.
Ya que terminamos con 'x' sigue 'y' también aumentandole 'dy. Checamos si nuestro personaje no esta tocando el suelo, con el "hitTestPoint", y de ser así indicamos que esta saltando. Cuando el personaje esta saltando tenemos que aplicarle la gravedad para que disminuya su velocidad de salto hasta llegar de nuevo al suelo.
Después de teminar de mover al personaje en sus coordenadas 'x' y 'y' es tiempo de checar si hay alguna colision con "checarColisiones" que veremos mas adelante.
Por último se ajustan las coordenadas de la cámara con las del personaje y se actualiza con "camControl".

Lo último que necesitamos es la funcion que checa las colisiones.

function checarColisiones(mc:MovieClip):void{
   //pega abajo
   while(mcSuelo.hitTestPoint(mc.x,mc.y+puntoBajo,true)){
       mc.saltando = false;
       mc.y--;
       mc.dy = 0;
   }
   //pega arriba
   while(mcSuelo.hitTestPoint(mc.x,mc.y+puntoArriba,true)){
       mc.y++;
       mc.dy = Math.abs(mc.dy);
   }



   //pega izq
   while(mcSuelo.hitTestPoint(mc.x+puntoIzq+1,mc.y,true)){
       mc.x++;
       mc.dx=0;
   }
   while(mcSuelo.hitTestPoint(mc.x+puntoIzq+1,mc.y+puntoBajo/2,true)){
       mc.x++;
       mc.dx=0;
   }

   //pega der
   while(mcSuelo.hitTestPoint(mc.x+puntoDer-1,mc.y,true)){
       mc.x--;
       mc.dx=0;
   }
   while(mcSuelo.hitTestPoint(mc.x+puntoDer-1,mc.y+puntoBajo/2,true)){
       mc.x--;
       mc.dx=0;
   }
}

Lo que hace esta función es revisar los puntos de choque del personaje con el fondo. Cuando golpea con un punto superior hace que el personaje baje, con un punto inferior el personaje sube, con una colision de un lado mueve al personaje hacia el otro, todo con el objetivo de que el personaje no "atraviese" el objeto.

Y listo, como siempre aquí esta el fla (cs3 , cs4)por si algún punto no lo entendiste bien o simplemente no te funcionó el código.

Ahora que ya saben como funciona más a detalle este "engine" puedes modiicar los valores a tu gusto y crear quiza un personaje que se maneje como si estuviera en la luna y salte exageradamente o incluso tener varios personajes que se manejen con distintas teclas.

Recuerden poner en los comentarios sus dudas y recomendaciones, para asistencia escriban su correo o mejor mandén uno a mi dirección ;)

Haz click para seguir leyendo...

Contraer