Requiere que las imágenes a utilizar sean cargadas previamente en la librería de flash y ligadas a través de un Id.
Bien, a sabiendas de cómo insertar las imágenes, te comento que el motor que he hecho es una Clase, un archivo .as que funcionara con tan solo pegarlo en la misma carpeta que tu proyecto .fla.
Éste motor lo puedes descargar en la siguiente liga: Clase m2d.as
El motor 2D (que mencionaré posteriormente como m2d) tiene un funcionamiento relativamente básico. Comento algunas de sus funciones más importantes y remato con un ejemplo.
Funciones del m2d
- m2d( MovieClip, ancho, alto, teclado )Para poner en marcha el motor es necesario declararlo en una variable, por ejemplo:
var m:m2d = new m2d( this, 320, 240, [Key.LEFT, Key.RIGHT] ); - dónde el primer atributo this representa el MovieClip donde correra el m2d.
- 320 y 240 hacen referencia a el ancho y el alto de la pantalla del m2d.
- [Key.LEFT, Key.RIGHT] es un Array que enlista las teclas que usaremos.
- textura(imagen)De las primeras cosas que hay que hacer es declarar las texturas que usaran nuestros Sprites (claro, previamente las imágenes de nuestras texturas deberán estar cargadas en la librería cómo mencione antes).
var texturaBombero = m.textura("bombero"); - donde "bombero" es el identificador de la imagen que he cargado en mi librería flash.
- crear(textura, columnas, renglones, pivoteX, pivoteY, fijo)Usa ésta función para crear un sprite.
var heroe = m.crear(texturaBombero,4,4,32,32,false); - donde texturaBombero es la textura que se definió previamente.
- 4, 4 son la cantidad de columnas y renglones (respectivamente) en las que se dividirá la textura.
- 32, 32 son las coordenadas x y de pivote o centro de nuestro sprite respecto a una sección de la textura.
- false indica que el atributo fijo de la funcion no estará activado (veremos esto después).
- posX(sprite,x), posY(sprite,y) y posZ(sprite,z)Usa éstas funciones para posicionar donde tu quieras el sprite creado (pese a que es un motor 2d, el atributo Z es usado para el orden de aparición de los sprites).
Cuando el segundo atributo de cada funcion es edfinido, la posicion del Sprite se verá modificado, si se omite no hay modificación.
m.posX(bombero,20); m.posY(bombero,15); m.posZ(bombero);Además éstas funciones devuelven la posicion del sprite indicado
var posicionEnX = m.posX(bombero); - donde el primer atributo es el sprite que deseamos mover
- el segundo es la posición que deseamos que tenga.
- También podría ser valido m.posX(bombero, m.posX(bombero) + 1);
- animar( sprite, cuadros, velocidad, retorno)La función animar sirve para... ya saben, animar el sprite.
m.animar(bombero, [4, 5, 6, 7], 1, 3); - donde el bombero es el sprite que deseamos animar
- [4, 5, 6, 7] es un array que enlista la sucesión de cuadros que deseamos en la animación
- 1 es la velocidad de la sucesión (el valor 1 es el más alto, si es mayor, se saltará cuadros)
- 3 es la cantidad de cuadros que retrosedera una vez concluida la animación, en éste casó volverá a comenzar en el primer cuadro del array que enlista la sucesión de cuadros.
Importante: si se solicita dos veces la misma sucesión de cuadros para el mismo sprites, la segunda petición será ignorada.
- animarX(posicionX,posicionY,fijo,textura,columnas,renglones,cuadros,velocidad)A veces necesitamos efectos que enriquezcan nuestros juegos cómo pueden ser brillitos, gotas, polvo, signos de sorpresa o duda... pequeñas animaciones que duran un corto tiempo y luego nos olvidamos de ellas. La función animarX lo hace posible. Anima un sprite temporal el cual desaparece al concluir su sucesión de cuadros.
m.animarX( 20, 30, false, texturaBombero, 4, 4, [0, 1, 2], 1); - donde 20, 30 hace referencia a la posición donde queremos que aparezca nuestro efecto.
- false indica que el atributo fijo de la funcion no estará activado (veremos esto después).
- texturaBombero es la textura que usará nuestro efecto (claro que debí usar otra pero para efecto didáctico ésta sirve).
- 4, 4 son la cantidad de columnas y renglones (respectivamente) en las que se dividirá la textura.
- [0, 1, 2] es un array que enlista la sucesión de cuadros que deseamos en la animación
- 1 es la velocidad con la que se sucederán los cuadros.
Lamentablemente éste motor no soporta demasiados sprites a la vez, 80 en maquinas a 1.5 Mhz, 160 a 3Mhz y así sucesivamente... se torna lento si sobrepasamos éstas marcas. Es por eso que m2d también incluye un sistema de fondos o backgrounds. Se trata de lienzos donde se pueden pegar segmentos de imágenes e intercalarlas en orden con los sprites.
- crearF(ancho,alto,color,fijo)Crea un lienzo con un color de fondo definido donde luego se puede insertar recortes de imágenes.
var fondo = m.crearF(320,240,0xff000000,false); - donde 320, 240 es el ancho y alto (respectivamente) del lienzo.
- 0xff000000 es un número hexadecimal que indica el color del que estará relleno, en éste caso negro. Usa la técnica de ARGB ( 0x00000000 para transparente )
- false indica que el atributo fijo de la funcion no estará activado (veremos esto después).
- dibujarFondo(fondo,textura,columnas,renglones,cuadro,posicionX,posicionY,transparente)pega segmentos de textura en un fondo.
m.dibujarFondo(fondo,texturaBombero,4,4,0,10,12,true); - donde fondo es el fondo donde queremos dibujar.
- texturaBombero es la textura que usaremos para pegar en el fondo.
- 4,4 son las columnas y renglones (respectivamente) en las que dividiremos la textura.
- 0 es el primer cuadro resultante de la división de la textura que deseamos para pegar.
- 10,12 es la posición en el fondo donde pondremos el cuadro de la textura
- true indica que debe atender las transparencias, en caso contrario (false) la sobrepondrá.
Hasta éste punto no es posible ver nada al ejecutar nuestro flash, ésto es porque para funcionar requiere de un ciclo... ya sea dado por el pasar de los frames de una película flash o por un setInterval. Cada que suceda el ciclo haremos llamado a la función obligatoria ciclo(), si ésta función no está, nunca avanzará el tiempo de nuestro motor 2d y por tanto nada se dibujará.
- ciclo(retraso)Esta función obligatoria va dentro de un ciclo, renderiza y hace todos los procesos necesarios para el motor.
m.ciclo(0); - donde 0 indica el retraso de la animación en general. Éste valor de retraso está dado entre 0 y 255. En realidad indica el nivel de transparencia con el que se dibujará el nuevo frame, de modo que un valor de 80 permitirá ver los cuadros anteriores desvanecerse poco a poco, el valor 0 lo dibuja opaco sin desvanecimientos y el valor 255 no dibujara el cuadro.
Para concluir un juego necesitamos de controles y música. He aquí las opciones para ello
- tcl(tecla) y tclHit(tecla)Éstas funciones devolverán si la tecla solicitada ésta oprimida y si fue golpeada (respectivamente). Es necesario que las teclas solicitadas haya sido definidas previamente al iniciar el motor m2d. Recuerdas? es el atributo array al final del new m2d descrito al principio.
if( m.tcl(Key.LEFT) ) .... if( m.tclHit(Key.LEFT) ) ..... - donde Key.LEFT es la tecla solicitada, én éste caso la tecla Izquierda de la cruceta del teclado.
- crearSonido(sonido,loop)Permite cargar un sonido que, al igual que las imágenes, debe estar previamente en la librería del flash identificado con un Id.
var musica=crearSonido("cancion",true); - donde "cancion" es el identificador del sonido en la librería flash.
- true indica que cuando termine de sonar el sonido vuelva a comenzar a sonar (valga la redundancia de palabras para evitar malos entendidos).
- tocarSonido( sonidoM2D )Toca un sonido previamente definido por crearSonido()
m.tocarSonido(musica); - donde musica es un sonidoM2D previamente definido por crearSonido()
- asociarSonidoXCuadro(sprite,cuadro,sonidoM2D)Asocia un sonido previamente definido a un cuadro de un sprite. De esta forma, el sonido sonará al animar el sprite dándonos la opción de olvidarnos de él.
m.asociarSonidoXCuadro(bombero,1,sonidillo); - donde bombero es el sprite al que queremos asociar el sonido.
- 1 es el cuadro del sprite al que queremos asociar el sonido
- sonidillo es un sonidoM2D previamente definido por crearSonido() con su segundo atributo false.
Importante: el sonido asociado no debe tener true en su atributo loop pues dejara de sonar nunca!!
Para terminar con las funciones menciono éstas ultimas tres que a su vez resuelven el tan postergado tema del atributo fijo de varias de las funciones vistas anteriormente.
- mundoX(posicion) y mundoY(posicion)Éstas dos funciones desplazan, por así decirlo, la cámara con la que se ve el motor. A ésto obedece el atributo fijo de las varias anteriores funciones. Cuando fijo es false, al mover el mundo es posible que los sprites y fondos salgan del rango de visión. Cuando fijo es true, su posición es relativa a la cámara.
m.mundoX(-20); m.mundoY(-10);m.mundoX( m.mundoX() -20 ); - donde el atributo único de cada función es definido para modificar el valor del mismo.
- cada función siempre devuelve su atributo de posición actual ( modificado si se definió un valor ).
- se2dFin()Por ultimo, ésta función elimina de la memoria temporal las imágenes y sonidos cargados optimizando el rendimiento de los demás procesos. Es importante ponerla al finalizar el juego.
m.se2dFin();
Existen algunas otras funciones que podrás ver si abres el archivo m2d.as listadas hasta abajo.
Concluyo ésta entrada presentándote un ejemplo practico escrito en Flash 8 el cual puedes descargar aquí.
Ojala éste motor m2d te sea útil o de interés y si lo usas para alguno de tus proyectos, te pido de favor me menciones por ahí. Gracias.
No hay comentarios.:
Publicar un comentario