- Tema Autor
- #1
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:
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.
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.
juego.zip
Y ver el juego en ejecución en la siguiente dirección:
juego en ejecucion
Código explicado
package {
es una directiva que siempre tenemos que utilizar al empezar a programar un archivo .as externo, nos permite incorporar toda una estructura jerarquica de clases al momento de programar en flash, pero son temas mas avanzados, de momento dejemoslo así.
Imports
Aqui es donde vamos a importar las librerías necesarias para manejar diferentes objetos en pantalla.
Utilizamos la librería geometríca rectangulo, porque vamos a definir un rectangulo en donde la olla se puede mover para atrapar los objetos.
La clase y su constructor.
public class juego extends flash.display.MovieClip {
En esta linea empezamos a definir una nueva clase, la palabra reservada "extends" quiere decir que "extiende" o "hereda" todos los métodos de la clase nativa "MovieClip", es decir que nuestra clase juego, al ser instanciada como un objeto, tendrá todos los métodos (y los que deseemos agregar) de la clase MovieClip, cada clase dependiendo de su comportamiento, puede extender o no, a otras clases nativas.
Este es el constructor del juego:
El constructor debe tener el mismo nombre de la clase. Es el método/función que se encarga de inicializar las variables de una clase. Al momento de instanciar la clase, es donde el programa empieza a ejecutarla.
En el constructor, estamos diciendole al programa que al momento en el que entre a un fotogramadel flash, va a ejecutar la funcion cicloDeJuego y va a pasar como argumento, el evento ENTER_FRAME
bg = new background();
recordemos, que cuando exportamos el movieclip del fondo de pantalla a ActionScript, lo exportamos con el nombre "background".
Lo que hizo flash, fue transformar ese MovieClip en una clase, y esta linea estamos instanciando la clase, convirtiendola en un objeto llamado bg que podremos manipular a nuestro gusto.
El método addChild, nos permite agregar dicho objeto ya instanciado, al escritorio de trabajo de flash.
Y finalmente inicializamos la variable de estado, al estado inicial.
Las variables
Las funciones
Ejercicios
Modifica el código del juego de tal manera que:
Este no es el método mas efectivo, ni el recomendado para crear videojuegos. Si se trabaja en proyectos mas grandes, los videojuegos serán tardados de compilar, y sobretodo de mantener. crearía un archivo externo pesadísimo y muy díficil de trabajar en equipo, pero si proporciona un punto de inicio para el curioso programador que quiere aprender a programar videojuegos en Flash.
Elegí realizar el tutorial en Flash, debido a que Flash proporciona un ambiente de diseño, programación y animación en el mismo programa. No hay necesidad de instalar librerías gráficas externas, y el lenguaje de programación es facil de aprender y los métodos basicos para la programación de videojuegos, flash ya los tiene incrustados de manera nativa.
Espero les haya servido mi tutorial. Posteriormente escribiré uno acerca de como conectar un videojuego (o cualquier aplicación) a facebook y empezar a hacer un videojuego de distribución viral.
Estoy apenas realizando mi propia página web, en donde pondré este tutorial, y muchos mas, relacionado con la programación de videojuegos en diferentes lenguajes, primordialmente flash, php y c++
Cualquier comentario, respondan a este thread y les deseo que aprendan mucho.
Recuerden las imagenes no son mías, fueron obtenidas de IconFinder.com y de ToonBoom.com, los derechos son de sus respectivos autores y no deben usuarse con animos de lucro. Pueden usar este código libremente, sin necesidad de dar crédito.
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
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.
juego.zip
Y ver el juego en ejecución en la siguiente dirección:
juego en ejecucion
Código explicado
package {
es una directiva que siempre tenemos que utilizar al empezar a programar un archivo .as externo, nos permite incorporar toda una estructura jerarquica de clases al momento de programar en flash, pero son temas mas avanzados, de momento dejemoslo así.
Imports
Aqui es donde vamos a importar las librerías necesarias para manejar diferentes objetos en pantalla.
Utilizamos la librería geometríca rectangulo, porque vamos a definir un rectangulo en donde la olla se puede mover para atrapar los objetos.
La clase y su constructor.
public class juego extends flash.display.MovieClip {
En esta linea empezamos a definir una nueva clase, la palabra reservada "extends" quiere decir que "extiende" o "hereda" todos los métodos de la clase nativa "MovieClip", es decir que nuestra clase juego, al ser instanciada como un objeto, tendrá todos los métodos (y los que deseemos agregar) de la clase MovieClip, cada clase dependiendo de su comportamiento, puede extender o no, a otras clases nativas.
Este es el constructor del juego:
Código:
public function juego() {
addEventListener(Event.ENTER_FRAME, cicloDelJuego);
bg = new background();
addChild(bg);
estadoDeJuego = ESTADO_INICIAR;
}El constructor debe tener el mismo nombre de la clase. Es el método/función que se encarga de inicializar las variables de una clase. Al momento de instanciar la clase, es donde el programa empieza a ejecutarla.
En el constructor, estamos diciendole al programa que al momento en el que entre a un fotogramadel flash, va a ejecutar la funcion cicloDeJuego y va a pasar como argumento, el evento ENTER_FRAME
bg = new background();
recordemos, que cuando exportamos el movieclip del fondo de pantalla a ActionScript, lo exportamos con el nombre "background".
Lo que hizo flash, fue transformar ese MovieClip en una clase, y esta linea estamos instanciando la clase, convirtiendola en un objeto llamado bg que podremos manipular a nuestro gusto.
El método addChild, nos permite agregar dicho objeto ya instanciado, al escritorio de trabajo de flash.
Y finalmente inicializamos la variable de estado, al estado inicial.
Las variables
- ESTADO_INICIAR,ESTADO_JUGAR,ESTADO_FIN. Son las variables de la máquina de estados que esta constantemente monitoreando el comportamiento del videojuego, dependiendo del estado en el que se encuentre el juego, es como se comportará el videojuego.
- estadoDeJuego. Es la variable que se encuentra de almacenar el estado actual del videojuego. Si se encuentra activo, si esta por inicializarse, o si ya se alcanzó el final del juego.
- vidaPerdidas. Define la cantidad de vidas que el jugador puede perder, antes de que la variable estadoDeJuego se cambie a ESTADO_FIN, que termina con la ejecución del juego.
- ingredientesAtrapados. Lleva control de los ingredientes que han sido atrapados por la olla. La función que incrementa el nivel del juego, monitorea esta variable, para que en función de la misma, el nivel incremente.
- bg, es una variable de tipo Movieclip que almacena la imagen de fondo del videojuego.
- ingredientes. Es un arreglo, que almacena el indice de los diferentes ingredientes que se pueden agregar al videojuego.
- ollaImagen. Una variable tipo Movieclip que almacena la imagen de la olla.
- nivel. La variable que se encuentra de monitorear el nivel actual del videojuego.
Las funciones
- cicloDeJuego(e:Event):void
En este método, creamos nuestra máquina de estados. Es la función que se va a encargar de monitorear el estado actual del videojuego, y dependiendo del estado, entonces va a ejecutar una función. - incializarJuego()
En éste método incializamos todo lo necesario para que nuestro juego empieze a funcionar.
La linea:
ollaImagen.startDrag(true,new Rectangle(0,272,422,0));
Define un rectangulo, en la posición (0,272) de 422 pixeles de alto, y 0 alto, en la cual se puede mover la imagen (por eso el uso del metodo startDrag).
Esta linea, restringe el movimiento de la olla, al eje de las X.
- jugar()
Esta función es la que ejecuta secuencialmente las instrucciones al juego. - crearIngredientes()
Esta función, genera un número aleatorio entre 0 y 75. Verifica si ese número aleatorio es menor a 2 + nivel actual.
Si la condición resulta ser positiva, va a instanciar la clase Ingredientes, que previamente habíamos exportado al ActionScript, y vamos a definir la variable velocidad, la cual va a aumentar conforme aumente el nivel del juego.
Esta misma funcion genera otro número aleatorio, entre 1 y 5, para accesar a los diferentes ingredientes que tenemos en nuestro MovieClip.
Definimos el punto de partida de donde van a empezar a salir los ingredientes, y despues, los dibujamos en pantalla, en una posicion aleatoria a lo largo de la pantalla.
- tirarIngredientes()
Es el método que se encarga de mover los ingredientes a lo largo de la pantalla. Conforme aumenta el nivel, mas rápido caen. Tambien verifica que si despues de que el ingrediente, salga de la pantalla, entonces lo va a remover del stack en la memoria, para no llegar a un overhead innecesario y repercutir en la ejecución del juego.
- loAtrapo()
Es el método que se encarga de monitorear las colisiones entre la olal y los ingredientes. Si existe una colisión el método elimina el ingrediente con el que se encuentra colisionando de la lista.
- condicionParaPerder()
Es el método que se encuentra monitoreando la variable de vidasPerdidas, en el momento en el que la variable de vidasPerdidas alcance el valor de 5. El método, cambia la variable de estado, a estado final.
- terminarJuego()
Es el metodo que se encarga de terminar la ejecución del juego.
Ejercicios
Modifica el código del juego de tal manera que:
- Solo se permita atrapar un tipo de ingrediente.
- Caigan Ingredientes de Bonus, de tal manera que al momento de atrapar dicho ingrediente, se le de una bonificación al jugador.
- Cuando se pierda, se muestre el texto "Fin del Juego" en pantalla.
- Las ingredientes que caigan, se encuentren animados.
- Tener un texto, que muestre la puntuación.
Este no es el método mas efectivo, ni el recomendado para crear videojuegos. Si se trabaja en proyectos mas grandes, los videojuegos serán tardados de compilar, y sobretodo de mantener. crearía un archivo externo pesadísimo y muy díficil de trabajar en equipo, pero si proporciona un punto de inicio para el curioso programador que quiere aprender a programar videojuegos en Flash.
Elegí realizar el tutorial en Flash, debido a que Flash proporciona un ambiente de diseño, programación y animación en el mismo programa. No hay necesidad de instalar librerías gráficas externas, y el lenguaje de programación es facil de aprender y los métodos basicos para la programación de videojuegos, flash ya los tiene incrustados de manera nativa.
Espero les haya servido mi tutorial. Posteriormente escribiré uno acerca de como conectar un videojuego (o cualquier aplicación) a facebook y empezar a hacer un videojuego de distribución viral.
Estoy apenas realizando mi propia página web, en donde pondré este tutorial, y muchos mas, relacionado con la programación de videojuegos en diferentes lenguajes, primordialmente flash, php y c++
Cualquier comentario, respondan a este thread y les deseo que aprendan mucho.
Recuerden las imagenes no son mías, fueron obtenidas de IconFinder.com y de ToonBoom.com, los derechos son de sus respectivos autores y no deben usuarse con animos de lucro. Pueden usar este código libremente, sin necesidad de dar crédito.
