Tutorial: Como hacer un juego. 1- Movimiento

Hola! Abro esta sección porque me pareció que mucha gente tiene ganas de aprender a hacer juegos pero no puede por varias razones. Voy a utilizar el Adobe Flash CS3 Professional; si tienen el Macromedia Flash Professional 8 o el MX no hay problema ya que me voy a dedicar a ActionScript 2.0 (lenguaje de programación del Flash).Vamos a empezar con algo básico y fácil de hacer: un juego de esquivar. Empecemos desde cero.


Introducción
Flash usa algo llamado Clips de Película para identificar los dibujos que se transforman en parte del juego (un personaje, una barra, el enemigo, etc... siempre son Clips de Película). Estos forman parte de los símbolos. Otros símbolos son los botones y los gráficos. Para crear un Clip de película (desde ahora los vamos a llamar MC) abran el Flash que tengan y clickeen en Archivo de Flash ActionScript 2.0 .



Ahora lo que van a hacer es seleccionar la herramienta pincel y van a dibujar un círculo.


Ahora presionen F8. Les aparecerá algo así:


Lo que nos sirve es lo que está arriba de la linea celeste. No se preocupen si solo aparece esa parte, la otra no es necesaria. En el texto Nombre: escriban Jugador. Si el casillero del Clip de Película está seleccionado y el punto de Registro: seleccionado es el centro clickeen Aceptar.
Ya tenemos nuestro MC. Ahora pasamos al movimiento de este MC que va a ser nuestro "Jugador". Selecciónenlo con la flecha negra y presionen F9. Acaban de abrir el Panel de Acciones. Aquí vamos a poner las órdenes que el Flash va a recibir y ejecutar. La primer linea que se debe escribir en las acciones de un MC es esta:

1
2
onClipEvent(enterFrame){
}
  • onClipEvent: esto es un identificador. Como estamos en un MC el identificador que debemos poner es este. Si fuese un Botón el identificador sería on simplemente. Así que recuerden, siempre va onClipEvent en un MC.
  • (enterFrame): luego del identificador viene el tiempo. Sí, lo que está entre paréntesis indica cuando van a suceder las acciones. enterFrame es como decir cada vez que pasa una frame. Otros ejemplos son: load (cuando la frame carga, sirve para crear "variables"), mouseDown (cuando el botón izquierdo del mouse es presionado), etc...
  • { y }: Esto abre siempre una función. Todo lo que vaya entre "{" y "}" va a modificar algo (onClipEvent = Clip de película) y en un determinado tiempo (enterFrame = dentro del fotograma o frame)
Movimiento
Ya tenemos la base de nuestro código. Ahora vamos a darle el movimiento a nuestro "jugador".
Vamos a hacer que el mouse sea la posición del círculo. Presionen ENTER dos veces en el final de la línea 1 así crean la línea 2 en blanco. Ahora agreguen esto.

1
2
3
4
onClipEvent(enterFrame){
this._x = _root._xmouse
this._y = _root._ymouse
}
Antes de explicar estas dos líneas nueva tienen que entender bien lo que es el sistema cartesiano del Flash.
Wikipedia define las coordenadas cartesianas así:
Las coordenadas cartesianas son un sistema de referencia respecto de un eje (recta), dos ejes (plano), o tres ejes (en el espacio), perpendiculares entre sí (plano y espacio), que se cortan en un punto llamado origen de coordenadas. En el plano, las coordenadas cartesianas (o rectangulares) x e y se denominan respectivamente abscisa y ordenada, y se representan como (x, y).

Una explicación gráfica:
Como ven, la forma de posicionar los MC en Flash es mediante un sistema de coordenadas. Por ejemplo: el círculo azul tiene coordenadas x = 350 (pixeles) e y = 100 (pixeles), las coordenadas del gris son x = 50 e y = 200 y finalmente el rojo tiene x = 200 e y = 350. De esta forma podemos decir la posición de nuestro MC. Ahora sí paso a explicar las dos líneas nuevas.

Línea 2
y 3: Lo que estamos haciendo ahora es modificar una característica del MC (la posición X e Y). Siempre que se quiere modificar algo de un Símbolo se debe poner el "nombre" del mismo, un punto y luego la característica que se modifica.
  • this: Lo principal es el nombre y para resumir flash nos da el "this" para utilizarlo cuando vamos a modificar el mismo MC en el que está el código. Generalmente se menciona el nombre de instancia (ya lo veremos más tarde) pero por ahora utilicemos "this".
  • _x o _y: Después del nombre viene la característica. La posición como vimos se compone de la posición vertical(_y) y la horizontal(_x). Una nota; todas las características vienen después de un guión bajo.
  • = : Obviamente tenemos que decir, si queremos cambiar algo, a que va a ser igual. Para eso está el signo igual. Nada complicado.
  • _root: Se usa para identificar algo que es externo al MC que estamos modificando. Como necesitamos la posición del mouse con respecto al escenario, no al MC, tenemos que poner este "_root".
  • _xmouse o _ymouse: Estás son variables especificas. Como supongo que ya deben haber deducido son la posición X del mouse y la posición Y.
Se podría decir que una traducción al español de lo que venimos haciendo sería:
En un MC (onClipEvent), cuando estamos en la frame ((enterFrame)), la posición (_x)X e Y(_y) de este MC(this.) es igual(=) a la posición X(_x) e Y(_y), respectivamente, del mouse(_xmouse y _ymouse).
Supongo que querrán comprobar si esto es verdad... Bueno presionen CONTROL+ENTER y vean que el círculo que hicimos sigue al mouse. Si les parece que tiene algo de retraso lo único que tiene que hacer es aumentar el numero de fotogramas por segundo. Pueden presionar CTRL+J (o van a Modificar-Documento), así abren las propiedades del documento. En el recuadro donde dice Velocidad de Fotogramas cambien el número a 24 o 30. Debería quedar algo así:

Si ya cambiaron a 24 o 30 esto clickeen Aceptar y vean la diferencia si antes estaba demasiado lento. Recuerden guardar este documento porque vamos a seguir modificándolo.
Espero que les sirva. Si quieren seguir con la creación de su juego, la parte 2 ya está en el blog!
-Rest

4 comentarios:

Anonymous dijo...

muy malo

Anónimo dijo...

no tendran alguno de Adobe flash cs4?

SumGato dijo...

ActionScript 2 es más viejo que mi abuela. .-.

Anónimo dijo...

che si van a decir algo malo para eso ni ablen

Publicar un comentario

Bueno, les pedimos que si quieren pongan el nombre de usuario de Kongregate en el comentario y sean moderados.