PAC MAN

Creando el mapa basado en mosaico

En primer lugar, usted debe hacer clic derecho y guardar los siguientes spritesheets e
imgenes:

Al iniciar un nuevo proyecto, suelo comenzar por ir a la pestaa Capas, y crear 3 capas:
"Background", "Main", y "GUI" (abreviatura de "Graphical User Interface"). Haga clic
derecho en la ventana de diseo e inserte un fondo de azulejos; Personalmente, prefiero
una textura transparente con un patrn sutil, como este:

Hemos de tener en cuenta que por el bien del jugador, es probable que desee un poco de
contraste entre los sprites y sus background.

De vuelta en el panel Propiedades: para este proyecto, cambie el tamao del diseo
(Layout Size) de 640 por 640 pxeles, y luego en Configuracin del proyecto (Project
Settings), cambie el tamao de la ventana al 640 por 640 para que coincidan. Cambiar el
tamao del fondo de azulejos para coincidir con el tamao de la ventana, asegrese de
que est en la capa "Background" y, a continuacin, en el panel Capas, haga clic en el
icono de "candado". Esto hace que los objetos de la capa correspondiente no sean
seleccionables, lo que nos ahorrar algunos dolores de cabeza ms adelante al hacer clic
alrededor en la ventana de diseo. Haga clic izquierdo en algn lugar en los mrgenes
de la ventana de diseo para que el panel Propiedades muestra propiedades de
representacin (Layout Properties), una vez ms, y cambiar la capa activa a "Main".

En la barra de herramientas que se ejecuta a lo largo de la parte superior de la ventana

de Construct 2, bajo Ver, seleccione la casilla junto a "Ajustar a la cuadrcula" (Snap to
grid), e introduzca 32 para la anchura y la altura de la rejilla. (Esto se debe a que las
imgenes que vamos a utilizar para las paredes y los personajes son todos cuadrados de
32 pxeles.)
Crear un nuevo Sprite denominada "Wall". En la ventana de cuadros de animacin que
emergente, haga clic derecho en la ventana y seleccione "Import sprite strip...".
Seleccione la imagen que contiene las paredes de color azul desde arriba, y en la
siguiente ventana, ingrese "10" para el nmero de clulas horizontales y "3" para el
nmero de celdas verticales. De vuelta en la ventana de cuadros de animacin, borrar
cada fotograma que no contiene una pared, y usted debe terminar con algo como esto:

(En este punto, probablemente te preguntes por qu estamos cargando todas estas
imgenes en una animacin nica en lugar de animaciones por separado con un solo
fotograma cada uno, o incluso en sprites separados. Principalmente por conveniencia;
Este mtodo era una solucin temporal antes de la introduccin de las Familias en
Construct 2, e incluso con esa opcin, para los sprites no animados este mtodo puede
resultar ms fcil para trabajar.)

En la ventana de la lista de Animacin, no slo debe ser "Default". Haga clic en la

palabra "Default" y en el panel Propiedades, debajode las propiedade de animacin
'Default', cambie Speed a "0". A continuacin cerrar el Editor de imgenes.

En la ventana de diseo, debe haber un solo sprite de Muro (Wall). Arrastrelo al rea del
margen superior de la ventana de diseo. (Usted debe notar que al arrastrarlo se encaja
en lugares cuyas coordenadas X e Y son mltiplos de 32. Si esto no sucede, vuelva a
leer la seccin anterior sobre "Ajustar a la cuadrcula".)

Ahora, uno de mis mtodos abreviados de teclado favoritos: con el sprite Wall
seleccionado, mantenga pulsada la tecla Ctrl, haga clic en el sprite Wall, y arrastre para
crear una copia del sprite. Repita hasta que haya tantas copias del sprite Wall como sea
necesario (en nuestro caso, 25). Deje espacios entre ellos. Luego haga clic en cada uno
de ellos, y cambie en el panel Propiedades el nmero de "marco inicial" de modo que
uno de sprites es frame 0, otro es el frame 1, otro es el frame 2, etc, hasta el fotograma
25. Disponerlas convenientemente (tal vez al igual que en el diseo original de
spritesheet). La parte superior de mi ventana de diseo ahora se ve as:

Ahora para configurar el laberinto en la ventana de la parte principal de la ventana de

diseo, todo lo que tiene que hacer es mantener presionada la tecla Ctrl y haga clic y
arrastre para hacer una copia de la imagen de la pared de sprites que desea, y colocarla
en la posicin deseada; se encajar en su lugar. Crea tu nivel de laberinto soado de
PacMan, y en la siguiente parte vamos a crear un personaje PacMan que se mueve de
rejilla a rejilla (grid-square to grid-square).

Movimiento basado en rejilla

Ahora, vamos a configurar el sprite PacMan.

Crea un nuevo Sprite, y cmbiale el nombre a Pacman. En la ventana de cuadros de

animacin, haz clic derecho y elige la opcin "Import sprite strip..." y selecciona la
imagen del principio de este tutorial que contiene el PacMan y las imgenes de
fantasmas. El nmero de celdas horizontales es 14; el nmero de celdas verticales es 4.
Elimina todas las tramas que no contienen una imagen de PacMan. En el panel
Propiedades, establezca la velocidad a 8 y Loop en "Yes". Luego, en la ventana de
animaciones, haz clic en "Default" y seleccione "Duplication". Realiza esto un total de
tres veces, quedando con 4 animaciones. (Esto ahorra la molestia de recrear cada
animacin del spritesheet original). Haz clic en cada una de las animaciones y
cambiarles el nombre a "A0", "A90", "A180", "A270". En la animacin A0, borrar
todos los marcos excepto los dos donde PacMan se enfrenta a la derecha (de cara a un
ngulo de 0 grados). Del mismo modo, para las animaciones A90, A180 y A270, borrar
todos los marcos excepto los donde PacMan enfrenta a Abajo, a la Izquierda y a Arriba
respectivamente. Cierra el Editor de imgenes; hemos terminado aqu.

A continuacin, aade el comportamiento de la bala (Bullet behavior) al sprite PacMan,

y establecer el valor predeterminado de la velocidad a 0. Tambin, agregar las
siguientes variables de instancia a PacMan.:

* Direction (nmero) - Almacena el ngulo de movimiento que PacMan tiene

actualmente. Establecer el valor inicial 0.
* MoveDuration (nmero) - Almacena el nmero de segundos necesarios para PacMan
para viajar el ancho de 1 casilla de rejilla. Establecer el valor inicial 0. (Sintase libre de
ajustar esto ms adelante si lo desea.)
* TargetX (nmero) - Almacena la coordenada X de la cuadrcula en que PacMan esta
viajando. Establecer el valor inicial 0.
* TargetY (nmero) - Igual que el anterior, pero para la coordenada Y.

A continuacin, agregue un objeto Teclado para al "layout". Tambin agregue otro

elemento sprite y cambiarle el nombre a "CollisionDetector" (o algo similar). Para la
imagen, puede usar el cuadrado de abajo:

Sin embargo, cualquier imagen cuadrada ms pequea que sus cuadrculas funcionar.
En el panel de propiedades, establezca la visibilidad inicial del sprite CollisionDetector
a "invisible".

Finalmente, nos dirigiremos a la Hoja de Eventos. En primer lugar, aadir una variable
global llamada "TileSize" y establezca su valor en 32 (el ancho, en pxeles, de cada
cuadrcula).
A continuacin, haga clic con el botn derecho para agregar un grupo, cambie el
nombre a "PacMan Movement". Incluso si tienes un nmero limitado de eventos, el uso
de grupos para organizar el cdigo es fundamental para mantenerlo organizado y
legible.

En lugar de escribir todos los eventos, la siguiente captura de pantalla muestra los
eventos que se necesitan. Presta especial atencin a que los eventos son eventos
secundarios de los dems, el cdigo se explicar despus de la imagen.

Open full size image

Tenemos el control de movimiento de PacMan por "turning the bullet speed on and off",
es decir, ponindolo a cero y valores distintos de cero. Desde PacMan slo puede
moverse por plazas enteras de cuadrcula, slo se procesa la entrada de teclado cuando
ha terminado un movimiento y se centr en una cuadrcula, que se indica con velocidad
de una bala de PacMan igual a cero.

Por lo tanto, cuando la velocidad de una bala es igual a cero, comprobamos para ver si
alguna de las flechas de direccin han sido pulsadas. Si es as, dejamos la instancia de
variable "Direction" en el ngulo correspondiente (0 = derecha, 90 = abajo, 180 =
izquierda, 270 = hacia arriba). A continuacin, si cualquiera de las teclas de flecha han
sido pulsadas (ntese el uso de un bloque OR aqu), se calcula las coordenadas X e Y de
PacMan, almacenadas en las variables de instancia correspondientes, y estableciendo las
coordenadas de CollisionDetector a ese lugar. Si el sprite CollisionDetector superpone
con un sprite Wall, PacMan no puede moverse en esta direccin y nada ms ocurre.
Sin embargo, si no hay solapamiento, la magia sucede. En este caso, establecemos
velocidad de una bala de PacMan con el valor necesario para cubrir la cantidad de
pxeles en cantidad MoveDuration de segundos. Tambin establecemos el ngulo de la
bala de movimiento para que PacMan se mueva en la direccin correcta. Converiendo
"Direction" a una cadena de texto, tambin activamos la animacin correspondiente de
PacMan viajando en esa direccin (esto fue por eso que nombramos las animaciones en
la forma en que lo hicimos, utilizando las ms obvias) y a continuacin, se utiliza el
comando de espera del sistema. Lo realmente bueno de este comando es que los sucesos
siguientes en la hoja de evento se ejecutarn (as, por ejemplo, los fantasmas que vamos
a aadir ms tarde continuarn en movimiento); slo las acciones siguientes al comando
wait se retrasan. (Para obtener ms informacin, consulte el tutorial
http://www.scirra.com/tutorials/56/how-to-use-the-system-wait-action.) Esperamos
MoveDuration segundos, exactamente la cantidad de tiempo que PacMan necesita para
completar el viaje a la siguiente cuadrcula. Debido a que la velocidad de la bala no es
cero durante este tiempo, los acontecimientos mencionados no tendrn lugar hasta que
el movimiento se ha completado. Finalmente, despus de que se complete el comando
wait del sistema, fijamos las coordenadas X e Y de PacMan a lo que debera ser
(corrigiendo los errores fraccionales, esencialmente "snapping PacMan to the grid"), y
pusimos la velocidad de vuelta a cero, lo que le permite a la hoja de evento procesar la
entrada de teclado adicional para mover PacMan.

Movimiento de fantasmas e I.A.

Primero creamos un solo Sprite, y lo llamamos "Ghost". Este objeto Sprite se utilizar
para todos los fantasmas (esta es una solucin de versin libre para el plugin
"Familias"). En la ventana de cuadros de animacin, importa la tira de sprites como
antes; eliminar todos los cuadrados sin fantasmas, ajusta la velocidad de la animacin a
6 y Loop en Yes. A continuacin, duplicar esta animacin 18 veces para un total de 19
animaciones. (S, leste bien, diecinueve animaciones en total para el sprite Ghost.)
Tradicionalmente, los nombres de los fantasmas son Blinky (el fantasma rojo), Pinky (el
fantasma rosa), Inky (el fantasma azul) y Clyde (el fantasma naranja). As que cambia el
nombre de las primeras 16 animaciones a Blinky0, Blinky90, Blinky180, Blinky270,
Pinky0, Pinky90, Pinky180, Pinky270, Inky0, etc, hasta Clyde270. Tambin cambiar el
nombre de una animacin a Vulnerable, otro a VulnerableBlink, y la animacin final a
Eaten. Para las animaciones especficas nombre de fantasma, borra todos los marcos
excepto los correspondientes al nombre de fantasma y direccin de referencia en el
nombre de la animacin. Por ejemplo, en Clyde90, elimina todos los frames de la
animacin, excepto los dos que contienen un fantasma naranja mirando hacia abajo. (Si
esta explicacin es poco claro, por favor ver las animaciones en el archivo capx
disponible para su descarga en la Scirra Arcada.) En la animacin Vulnerable, slo
mantn los dos frames de la imagen del fantasma con los ojos abiertos de color azul; en
la animacin VulnerableBlink, mantn los dos frames con el fantasma azul con los ojos
abiertos y los dos frames con el fantasma blanco con los ojos abiertos; en la animacin
Eaten, slo mantener la imagen de un frame que consta de slo los ojos.

Ahora, la parte divertida comienza!

A continuacin, tenemos dos aspectos a considerara: la forma de obtener las direcciones

disponibles para un fantasma en cualquier momento, y la forma de seleccionar entre
esas direcciones (esta ser la parte de Inteligencia Artificial (IA) del programa).
El movimiento del sprite Ghost de baldosa en baldosa ser tratado de la misma manera
que se manej el movimiento del PacMan en la parte anterior de este tutorial, por lo que
debes aadir el comportamiento de bala al objeto Ghost.

Agrega las siguientes variables de instancia al Sprite Ghost:

Direction, MoveDuration, TargetX, TargetY (todos nmeros). Estos servirn con los
mismos fines que los que se hicieron para el sprite PacMan.

Aadir, adems, el fantasma de una variable de instancia llamada "GhostName" (texto)

y VulnerableTimer (nmero).

Crea cuatro instancias del sprite Ghost en el diseo principal en cuatro lugares
separados (no sobreponiendose en las paredes) y, para cada uno de estos fantasmas,
haga clic en ellos y en el panel Propiedades, en la seccin Variables de instancia,
cambie el nombre de uno de Blinky , el otro a Pinky, el otro Inky, y el ltimo a Clyde.

Para almacenar las direcciones disponibles para un fantasma, hay varias opciones (como
una cadena de texto que contiene opciones separadas por comas), pero me parece que es
ms fcil trabajar con objeto Array debido a toda la funcionalidad que tiene
incorporada. Haz clic derecho en el diseo, selecciona "Insert new object", y haga clic
en Array. Cambia el nombre a "AvailableDirections" o algo similar. Vamos a utilizarlo
como una lista, por lo que ser una matriz N por 1 por 1; N ser de entre 0 y 4,
dependiendo del nmero de direcciones estn disponibles para un fantasma en una
posicin dada.

En la hoja de evento, crear un nuevo grupo llamado "Ghost Movement"; aqu es donde
vamos a incluir todo el siguiente cdigo (de nuevo, por motivos de organizacin).

A continuacin, configura los siguientes eventos, que explicar ms adelante. (Los

comentarios son opcionales, pero en general son una muy buena idea para incluir.)

Open full size image

Vamos a usar algunos bucles (estos eventos se encuentran debajo de System) para
mantener el nmero total de eventos manejables. En primer lugar es un bucle for-each -
queremos que cada fantasma siga el mismo conjunto de eventos. Debajo de esto est el
evento secundario para comprobar si la velocidad de la bala es 0. Si no es cero, entonces
el fantasma est en el medio del movimiento y no hay acciones que deban tomarse en
este momento. Todo lo que sigue es un evento secundario de esto.

En primer lugar, establecemos el tamao del array AvailableDirections a (0,1,1). Esto,

bsicamente, "borra" la lista.

El siguiente es un bucle de Sistema (que no debe confundirse con un bucle for-each). El

propsito de esto es para comprobar cada una de las cuatro direcciones (0 grados, 90
grados, 180 grados, 270 grados) para ver si hay una pared en el camino.

Crea una variable global llamada "n" (un nmero). Esto, de nuevo, es slo por
conveniencia. Vamos a volver a utilizar esta variable con frecuencia. (Si las
declaraciones de variables no contaron como eventos, o si no estbamos preocupados
por mantener bajo el nmero de eventos, en vez de eso podran crean variables locales
segn sea necesario.)

Hemos establecido el bucle for para comenzar en 0 y terminan a las 3, y en cada juego
de paso:

1 n = 90 * (valor del ndice del bucle)

El valor del ndice de bucle se obtiene por la expresin loopindex (name_of_loop). Por
lo tanto, en este bucle la variable n se enfrentar a los valores 0, 90, 180, y 270. A
continuacin, con un poco de trigonometra, se establece la posicin del sprite
CollisionDetector a la plaza adyacente a la posicin del fantasma; fijamos

1 CollisionDetector.X = Ghost.X + cos(n) * TileSize

2 CollisionDetector.Y = Ghost.Y + sin(n) * TileSize

y comprobamos para ver si el sprite CollisionDetector est solapando con un sprite

Wall. Si este no es el caso, entonces la baldosa adyacente en la direccin del ngulo n
est disponible para el fantasma para viajar en el siguiente movimiento. Esta
informacin se aade a la lista de direcciones posibles mediante el uso de la matriz de
comando "push". Empujamos hacia el "eje X" porque usamos la matriz como una lista,
no una cuadrcula. Adems, el uso de "push front" o "push back" es irrelevante para
nuestros propsitos. Una vez que se calcula esta informacin, el siguiente paso es
seleccionar la direccin en la que un fantasma viajar.

...continuar...

Mientras tanto, sintase libre de visitar el archivo capx acabado, disponible para su
descarga en la Scirra Arcade:
http://www.scirra.com/arcade/example/1217/omnomnomagon-returns