Objetivo:
Al terminar el tutorial, vas a tener el conocimiento mínimo sobre la creación de videojuegos en flash, Además un marco de trabajo básico que puedes utilizar para futuros proyectos. Como incorporar elementos gráficos y sonoros en la programación de tu videojuegos y una máquina de estados para controlar los diferentes estados del videojuego.
Descripción del videojuego:
El videojuego será ambientado en la casa de una bruja, los ingredientes para crear una poción caerán del cielo y el jugador tendrá que mover una olla, para atrapar todos los ingredientes que sean posibles.
Requisitos:- Adobe Flash CS3 o superior.
- Conocimientos mínimos de programación orientada a objetos.
Preparar el ambiente de trabajo:
Crear un archivo Flash ActionScript 3.0 nuevo.
Guardar y nombrar el archivo con la ubicacion y nombre de tu preferencia. El tutorial usará el archivo: juego.fla
Crear un archivo ActionScript:
Guardar el archivo ActionScript con el mismo nombre y misma ubicación que el archivo anterior. (juego.as para el Tutorial)
Regresar al archivo juego.fla, y en el panel de propiedades, en el campo Clase del documento, escribir el nombre (sin la extension) del archivo .as que acabamos de crear. Si estás siguiendo el Tutorial, deberás escribir
juego 
Creación de MovieClips
Regresar al entorno de diseño de flash (la pestaña que dice juego.fla)
Presionar Ctrl+F8
Nombrar el MovieClip
Hacer click en el botón "Avanzado"
Activar la casilla Exportar para ActionScript
(*)Cambiar el campo de texto "Clase" por "Ingredientes" (sin comillas).
(*)El nombre de la clase se tiene que cambiar, respecto al movieclip que estamos creando, en este caso, estamos creando el movieclip que contendrá las imagenes de los ingredientes.
(!) Al momento de hacer click en el botón aceptar, aparecerá un mensaje de advertencia. Simplemente hacer click en Aceptar y continuar con el tutorial.
Ingredientes: Este MovieClip, contendrá los ingredientes que caeran del techo de la cabaña, 5 fotogramas y cada fotograma con la imagen de un ingrediente diferente, en un fotograma clave.
Olla: El movieclip, contendrá la imagen de la olla en donde los ingredientes serán depositados.
Escenario: El movieclip del escenario. Es importante utilizar una imagen de fondo por varias razones, dentro de las mas importantes es que cuando se publican videojuegos en una página web, la etiqueta <embed> de HTML puede cambiar el fondo del pantalla de nuestro swf y arruinar todo el diseño del videojuego. Otra razón es que una imagen de fondo, hace mas atractivo el diseño del videojuego. El escenario, es el laboratorio de la bruja. La imagen del tutorial tiene marca de agua de su autor. El resto de las imagenes fueron encontradas en iconfinder.com
Guardar los cambios en el archivo .fla, regresar al archivo .as y ya nos encontramos listos para empezar a programar. Si todo se encuentra en su lugar, al hacer click en el icono al lado de la clase del documento
flash deberá cambiarse automaticamente al entorno de programación.
El código.
En este punto del tutorial te estarás muriendo por empezar a programar. Este es el código completo. copialo y pegalo en el entorno de programación, y después del código escribiré la explicación.
Código:
package {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.*;
import flash.events.*;
import flash.geom.Rectangle;
public class juego extends flash.display.MovieClip {
public static const ESTADO_INICIAR:int = 10;
public static const ESTADO_JUGAR:int = 20;
public static const ESTADO_FIN:int = 30;
public var estadoDeJuego:int = 0;
public var vidaPerdidas:int = 0;
public var ingredientesAtrapados:int = 0;
public var bg:MovieClip;
public var ingredientes:Array;
public var ollaImagen:MovieClip;
public var nivel:Number = 0;
public function juego() {
addEventListener(Event.ENTER_FRAME, cicloDelJuego);
bg = new background();
addChild(bg);
estadoDeJuego = ESTADO_INICIAR;
}
public function cicloDelJuego(e:Event):void {
switch (estadoDeJuego) {
case ESTADO_INICIAR :
inicializarJuego();
break;
case ESTADO_JUGAR :
jugar();
break;
case ESTADO_FIN :
terminarJuego();
break;
}
}
public function inicializarJuego():void {
vidaPerdidas = 0;
ollaImagen = new Olla();
ingredientes = new Array();
nivel = 1;
addChild(ollaImagen);
ollaImagen.startDrag(true,new Rectangle(0,272,422,0));
estadoDeJuego = ESTADO_JUGAR;
}
public function jugar():void {
crearIngredientes();
tirarIngredientes();
loAtrapo();
condicionParaPerder();
}
public function crearIngredientes():void {
var crearTemporal:Number = Math.floor(Math.random() *75);
var ingredienteTemporal:MovieClip;
if (crearTemporal < 2 + nivel) {
ingredienteTemporal = new Ingredientes();
ingredienteTemporal.velocidad = 3 + nivel;
ingredienteTemporal.gotoAndStop(Math.floor(Math.random()*5) + 1);
ingredienteTemporal.y = 0;
ingredienteTemporal.x = Math.floor(Math.random() * 515);
addChild(ingredienteTemporal);
ingredientes.push(ingredienteTemporal);
}
}
public function tirarIngredientes():void {
var ingredienteTemporal:MovieClip;
for (var i:int = ingredientes.length -1; i >= 0; i--) {
ingredienteTemporal = ingredientes[i];
ingredienteTemporal.y += ingredienteTemporal.velocidad;
if (ingredienteTemporal.y > 464) {
vidaPerdidas++;
ingredientes.splice(i,1);
removeChild(ingredienteTemporal);
}
}
}
public function loAtrapo():void {
var ingredienteTemporal:MovieClip;
for (var i:int = ingredientes.length -1; i >= 0; i--) {
ingredienteTemporal = ingredientes[i];
if (ingredienteTemporal.hitTestObject(ollaImagen)) {
ingredientes.splice(i,1);
removeChild(ingredienteTemporal);
}
}
}
public function condicionParaPerder():void {
if (vidaPerdidas>= 5) {
estadoDeJuego = ESTADO_FIN;
} else if (ingredientesAtrapados > nivel*20) {
nivel++;
}
}
public function terminarJuego():void {
for (var i:int = 0; i < ingredientes.length; i++) {
removeChild(ingredientes[i]);
}
ingredientes =[];
ollaImagen.stopDrag();
}
}
}
Guarda los cambios en el archivo .as
Prueba el juego, presionando Ctrl+Enter para compilar el código y ejecutarlo.
Si estas siguiendo el tutorial al pie de la letra, no deberas tener ningun problema al momento de ejecutarlo. Sin embargo si cambiaste el nombre del proyecto a algo diferente de juego.fla, y juego.as, entonces en el código, deberás cambiar lo siguiente:
public class
juego extends flash.display.MovieClip {
public function
juego() {
por:
public class
EL_NOMBRE_DE_TU_ARCHIVO extends flash.display.MovieClip
public function
EL_NOMBRE_DE_TU_ARCHIVO() {
Si todo sale correctamente, verás en tu pantalla algo muy parecido a lo siguiente:
Los archivos:
Puedes descargar los archivos utilizados en el tutorial, de la siguiente dirección.
[URL="http://www.alanchavez.com/Tutoriales/Videojuegos/Tutorial%201/juego.zip"]juego.zip[/URL]
Y ver el juego en ejecución en la siguiente dirección:
[URL="http://www.alanchavez.com/Tutoriales/Videojuegos/Tutorial%201/index.html"]juego en ejecucion[/URL]