Você está na página 1de 27

Space Invaders

Space Invaders
En mi universo infantil, este fue el primer video juego apasionante de
verdad. Una mquina recreativa en un bar de mi barrio. Recuerdo que
introduje la moneda y ante mi sorpresa los aliengenas comenzaron a
moverse, hacer ruidos extraos y a atacar sin provocacin por mi
parte! Entre ambos, unos muros verdes hacan proporcionaban
proteccin temporal. Pero los aliengenas no se conformaban con
disparar: descendan a gran velocidad. Comprend de inmediato la
motivacin del juego, la idea subyacente, la metfora, la misin: eran
ellos o yo.

44
Creacin de videojuegos con Construct 2

Alineacin y espaciado de objetos

Creamos un proyecto vaco y le asignamos un tamao de 800x600


tanto a la ventana como al Layout. Adems, al Layout damos el valor
0,0 al margen y a la capa (layer) le damos el negro como color de
fondo.

Ponemos nombre a la capa del fondo y la bloqueamos. Creamos otra


capa que va a ser en la que se desarrolle la accin. La renombramos
(como siempre).

Ahora agregamos cuatro sprites correspondientes a los muros


defensivos y otro ms correspondiente a la nave/tanqueta defensiva
dentro de la zona de juego, colocndolos en su sitio. Las torretas se
puede opia pega : despus de pega de e os a ast a el
objeto porque de lo contrario se quedarn solapados original y copia y
puede que nos den algn problema.

Para alinear o distribuir los espacios de un grupo de elementos, los


seleccionamos y pulsamos botn derecho. A travs de la opcin
Alig pode os ali ea los o o ue a os. E uest o aso a os a
sele io a la op i Alig ->Edges->Top ue alie a los o des
superiores de los objetos. Despus sele io a os Alig ->Space-
>Ho izo tall pa a ue se dist i u a ho izo tal e te de a e a
proporcional.

Debemos tener dos objetos en el proyecto: uno correspondiente al


muro y otro a la nave/tanqueta. Recuerda dar nombre a cada uno de
ellos (Muro y Tanqueta por ejemplo) que despus nos va a hacer falta.

45
Space Invaders

Ya tenemos nuestro sistema defensivo casi al completo, pero an nos


falta lo ms importante: el rayo lser.

Agregando proyectiles

Lo primero que hay que saber es que el proyectil es un objeto que no


va a estar visible hasta que no lo pongamos en marcha. Por eso lo
ubicaremos fuera de la pantalla de juego, concretamente en el lado
izquierdo. Le ponemos de nombre Laser.

Una vez creado y renombrado, le agregamos comportamiento


(seleccionamos el lser pulsa os so e la op i Beha io s
despus sobre la opcin agregar). Elegi os la op i Bullet ,
identificada con la imagen de una bala.

46
Creacin de videojuegos con Construct 2

Ejecutamos y vemos como la bala aparece por la izquierda y


desaparece por la derecha sin que nosotros hagamos nada. A esto le
podemos poner remedio de manera sencilla: seleccionamos la bala y
ponemos el estado inicial del comportamiento en desactivado.

Disparando con el teclado

Si probamos ahora ya no veremos la bala por ningn sitio. Hagamos


que cuando el jugador pulse el espacio la bala salga desde la
nave/tanqueta hacia arriba. Para ello lo primero es aadir el
controlador de teclado al juego: insertamos un nuevo objeto y
sele io a os la op i Ke oa d de la se i I put .

47
Space Invaders

Y ahora nos vamos a la hoja de eventos y agregamos un nuevo evento


de tipo te lado, su tipo O ke p essed , elegi os el espa io o o
tecla a tratar, seleccionamos la nave como origen de la accin y como
a i Spawn another object (crear un nuevo objeto), seleccionando
el lser como objeto a crear. Con todo esto le hemos dicho a Construct
2 que cuando se pulse el espacio se cree un nuevo lser.

El evento debera quedar de la siguiente manera.

Si ejecutamos ahora el resultado no ser el esperado. Al pulsar el


espacio aparece el rayo lser en el centro de la tanqueta, pero est
detrs y no se ve. Ni se mueve.

Tenemos, por lo tanto dos desafos: hacer que el lser aparezca en el


can de la tanqueta y que salga disparado. De lo contrario estamos
en manos de los aliengenas y eso no puede ser. Jams lo
consentiremos.

48
Creacin de videojuegos con Construct 2

Los puntos de la imagen (otra vez)

i os fija os e el e e to, ua do di e Lase o la e i age poi t


, est ubicando el lser en el punto 0 de la nave/tanqueta. El punto
0 es el centro (salvo que lo cambiemos). Como no lo queremos
cambiar lo que vamos a hacer es crear otro punto, (al que llamaremos
Canyon), que posicionaremos justo en el extremo del can de la
nave/tanqueta.

Para ello hacemos doble clic sobre la nave/tanqueta, pulsamos sobre


la a i et o igi a d i age poi t despus so e el s olo de
agregar (ms).

Creamos un nuevo punto en el extremo del can y le llamamos


Ca o .

49
Space Invaders

Modificamos la accin del evento, haciendo doble clic sobre ella, y


a ia os el alo po e el a po I age poi t .

Si ejecutamos el juego ahora y pulsamos el espacio, nos aparece el


lser en el extremo de la nave tanque.

Pero sigue sin moverse. Por qu? Es fcil: le dijimos al proyectil que el
estado e a desa ti ado po lo ue ah est, uieto, a ata do
nuestras instrucciones. Para cambiar esto vamos a agregar una nueva
accin al evento que tenemos creado para que adems de mostrar el
rayo lser lo ponga en marcha.

Va os a la hoja de e e tos, ha e os li so e Add a tio ,


sele io a os el a o lse , la a i et e a led de la atego a
Bullet sele io a os el alo E a led al desplega le tate .
Pulsa os Do e p o a os.

Se mueve? Horizontalmente, pero se mueve. No est mal, pero as


vamos a destruir pocos aliengenas.

50
Creacin de videojuegos con Construct 2

Volvemos a seleccionar el rayo lser y cambiamos el valor del ngulo


A gle a g ados el alo de et a gle a No pa a ue el
proyectil no cambie de posicin.

Probamos y ahora deberamos poder disparar sin fin. Las balas saldrn
desde el extremo del can y subirn hasta el espacio exterior, en
l ea e ta a la elo idad i di ada e la p opiedad peed , ue
podremos modificar para que los rayos vayan ms despacio o ms
rpido.

Destruyendo objetos intiles

Slo nos falta decir a los proyectiles que cuando salgan de la zona de
juego desaparezcan y no destruyan lo que no deben. Esto se consigue
ag ega do u ue o o po ta ie to al a o lse . e lla a Dest o
outside la out , ue sig ifi a ue se dest u a ua do salga de la zo a
51
Space Invaders

de juego y es muy til para ahorrar recursos del dispositivo en el que


finalmente juguemos.

Una vez hecho esto nos ponemos manos a la obra de hacer que la
nave se mueva con las teclas del cursor. Veremos lo sencillo que es.

Usando el teclado para controlar un personaje

Construct 2 automatiza mucho el control de personajes. El mecanismo


ms sencillo es agregando un comportamiento de la seccin
Mo e e ts o i ie tos . E iste u os ua tos tipos y todos son
tiles di e tidos: el tipo Ca ue ha ue el pe so aje se ue a
o o u o he o el tipo Platfo ue ha ue ha ue se
comporte como Mario (el de Super Mario Bros.) o Sir Arthur (el de
Ghosts'n Goblins). Son slo dos ejemplos.

52
Creacin de videojuegos con Construct 2

Nosot os elegi e os Di e tio . Este tipo de o i ie to os


permite mover el personaje en todas las direcciones. Si probamos el
juego podemos mover la nave con las teclas del cursor 5. Nos permite
movernos por toda la zona de juego, lo cual es muy interesante pero
no para este juego, ya que en Space Invaders la nave/tanqueta slo se
podra mover de derecha a izquierda y viceversa. Corrijamos esto.

Seleccionamos la nave y nos fijamos en la pestaa de propiedades,


o eta e te e la se i Beha iou s de t o de ella e la
se i Di e tio .

5
Haz clic sobre la zona de juego del navegador si la nave/tanqueta no se mueve. A
veces es necesario.
53
Space Invaders

Vemos que podemos modificar unos cuantos parmetros que definen


como se va a comportar el movimiento del personaje. Nosotros
indicaremos que la direccin del movimiento va a ser en horizontal
Di e tio s - Left& ight ue el gulo de posi i del
a e/ta ueta o se a a odifi a et a gle No ie t as os
movemos, ya que de lo contrario la nave/tanqueta a veces estar boca
abajo y eso no es muy til.

Probemos ahora. Ya tenemos una nave que se mueve en horizontal


con las teclas del cursor y que es capaz de disparar poderosos rayos
lser. Rayos lser que son capaces de atravesar como si nada los muros
de defe sa Co ija os esto a tes de o ti ua .

Agregamos un nuevo evento en la hoja de eventos. Este evento, en


resumen, dir lo siguiente: cuando el lser choque contra un muro
haremos que el lser desaparezca. No lo va a destruir, slo
desaparecer. Esto aporta dificultad al juego, ya que para disparar a los
aliengenas tendremos que estar a descubierto, exponiendo la
integridad de nuestra nave/tanqueta. Los juegos fciles son aburridos.

La hoja de eventos ahora estar as:

54
Creacin de videojuegos con Construct 2

La tanqueta se mueve con las teclas del cursor, la barra de espacio


pe ite dispa a a os lse estos o at a iesa los u os e
completo silencio. Vale, s, es cierto. En el espacio el sonido no tiene un
medio fsico para transmitirse y no se escuchan los rayos lser, pero
esto es un videojuego y el sonido es muy importante.

Agregando sonido

Construct 2 nos sugiere que utilicemos los siguientes formatos: wav,


flac, ogg y mp4. Admite ms, pero estos son sus favoritos. En este caso
vamos a utilizar un fichero con la extensin ogg que reproduce un
sonido que bien podra ser el que emiten los rayos lser.

En la carpeta de proyecto, pulsamos el botn derecho sobre la carpeta


ou ds sele io a os I po t sou ds . Co esto ag ega e os el
fichero de sonido al proyecto. Seleccionamos ahora el fichero y si
aparece una ventana de importacin pulsamos sobre el botn
I po t si s o a os a e t a e detalles, pa a eso est el
a ual de efe e ia . Pulsa os aho a so e el ot Ok
aparecer el fichero sele io ado e la a peta ou ds del p o e to.

55
Space Invaders

Ahora tenemos que agregar el manejador de sonido al proyecto. Lo


hacemos pulsando con el botn derecho sobre el layout y ejecutando
la a i I se t Ne O je t . Elegi e os el o jeto ou d de la
secci Media . E la a peta O je t t pes del p o e to de e
apa e e aho a u ue o ele e to o el o e Audio .

Y por ltimo agregar una nueva accin al evento que captura la


pulsacin del botn de espacio para que, adems de lanzar el rayo
lser haga que este suene.

Vamos a la hoja de eventos y agregamos una nueva accin al evento


O Ba a Espa iado a p essed ue diga a Co st u t ue
ep oduz a so ido del lse : pulsa os Add a tio pa a ag ega la
a i , sele io a os el o jeto ou d o o fuente de la accin y
pulsa os Ne t , sele io a os la a i Pla de la se i
56
Creacin de videojuegos con Construct 2

Ge e al sele io a os el fi he o de so ido ue ag ega os


a te io e te e la lista desplega le Audio file . El esto de las
opciones las dejamos como estn (hacen referencia a si queremos que
el sonido se reproduzca una vez tras otra y al volumen del mismo).

Cua do pulse os el ot Do e uie e de i ue he os


terminado) la hoja de eventos debe quedar de la siguiente manera:

57
Space Invaders

Probamos ahora y vemos como nuestro sistema de defensa est a


ple o e di ie to ue los a os lse sue a a i to ia.
Necesitamos unos enemigos de manera urgente. Vamos a crearlos.

Las animaciones

E iste u supuesto defe to e el ojo hu a o de o i ado


pe siste ia eti ia a ue ha e ue cuando miramos una imagen
durante una pequea fraccin de segundo seamos capaces de ver la
imagen durante un instante ms del que estuvo visible. Muy poco
tiempo, eso s, pero suficiente para sacar partido a esa memoria visual.
Basndose en esta caracterstica del ojo los hermanos Lumire crearon
el cine: la rpida exposicin de fotografas estticas hace que el
espectador vea una imagen en movimiento. La ciencia, al parecer, ha
desmontado esta teora y ha achacado el efecto al cerebro. En
cualquier caso la realidad es que si mostramos una secuencia de
imgenes a la velocidad adecuada podemos conseguir un efecto visual
que permita al espectador ver imagen en movimiento. Algo que en los
juegos llamamos animacin.

En Space Invaders la animacin ms vistosa se encuentra en los


aliengenas. Estos se desplazan lateral y verticalmente, pero adems
mueven sus patitas a cada paso que dan. Nuestra versin de Space
Invaders no ser completa, pero los aliengenas van a moverse como
deben.

Si nos fijamos en la imagen siguiente, veremos (separados por una raya


vertical) los dos frames (las dos imgenes) que van a formar la

58
Creacin de videojuegos con Construct 2

animacin. Estn en un nico fichero png (y no tienen raya vertical) y


el fondo es transparente 6.

Lo que vamos a hacer es insertar en el juego un nuevo objeto de tipo


p ite . Una vez hecho, y antes de abandonar el editor de la imagen,
pulsa el ot de e ho so e la e ta a A i atio f a es ,
importar los frames o la op i F o sp ite st ip
seleccionamos el fichero png que tiene los frames.

Ahora hay que indicar la distribucin de los frames en la imagen. En


este caso tenemos dos celdas horizontales y una vertical.

6
En realidad los aliengenas son de color blanco. En la imagen se muestran as para
que se puedan ver con claridad.
59
Space Invaders

Pulsa os el ot OK e la e ta a A i atio f a es de e
aparecer tres frames. El primero est vaco. Pulsando con el botn
derecho lo podemos eliminar, para que la animacin no haga despus
cosas raras.

Por ltimo, modificamos las propiedades de la animacin para que


esta se desarrolle sin fin. En la ventana de propiedades, modificamos el
alo de la p opiedad Loop le asig a os el alo Yes .

60
Creacin de videojuegos con Construct 2

Cerramos el editor de imagen y cambiamos el nombre al nuevo objeto


le po e os Alie po o e.

Si ejecutamos ahora veremos como el aliengena mueve las patitas. La


velocidad de la animacin se puede cambiar modificando el valor de la
p opiedad peed .

Lo siguiente que vamos a hacer es crear ms bichos invasores. Esto es


muy, muy, muy fcil. En la ventana de edicin copiamos y pegamos el
objeto que queremos copiar y colocamos cada uno ms o menos en su
posicin. Utilizaremos las ayudas que proporciona Construct 2 para
colocarlos correctamente como hicimos con los muros defensivos.

Hagamos una fila de 6 aliengenas. Los seleccionamos todos, pulsamos


el botn derecho sobre uno de los invasores y seleccionamos la opcin
Alig -Edges-Top pa a ali ea los todos po la pa te supe io
despus la op i Alig -Space-Ho izo tall pa a ue se dist i u a
horizontalmente de tal manera que dejen el mismo espacio entre
todos.

Ahora tenemos seis extraterrestres con bastante mal aspecto


moviendo sus patitas en la pantalla, pero estn muy estticos y as no
va a ser difcil acabar con ellos. Hagamos ahora que se muevan
horizontalmente. Para ello tendremos que utilizar los ticks del juego.
Los ticks?

Los tick

Los videojuegos tienen corazn. Lo sabas? Hay algo dentro que


marca el ritmo al cual se mueven los extraterrestres invasores. Un
diapasn que va repitiendo una vez tras otra un pulso constante (tick,

61
Space Invaders

ti k, ti k, ti k ue o sigue ue los o jetos del juego o se


detengan aunque nosotros dejemos de jugar.

Construct 2 nos permite crear acciones asociadas al evento tick. Esto


es perfecto para hacer que elementos del juego que no van a ser
manejados por el jugador tengan vida propia. En nuestro caso, los
aliengenas son unos candidatos perfectos. Vamos a decir a Construct
2 que cada vez que haya un tick los aliengenas se muevan de izquierda
a derecha o de derecha a izquierda, segn sea necesario.

Tenemos que tener en cuenta que cuando los invasores lleguen al


extremo de la pantalla deben comenzar a desplazarse hacia el lado
contrario, para que no desaparezcan del juego. Esto se puede hacer
as.

Ag ega os u e e to de la atego a ste lla ado E e ti k .


Como accin vamos a modificar el objeto Alien, en concreto el valor de
la propiedad X, indicando que el nuevo valor es Alien.X+1. Esto quiere
decir que cada tick, la nueva posicin horizontal del invasor ser la
posicin que tena anteriormente desplazado un pixel hacia la derecha.
Algo as:

Una ejecucin rpida nos permite ver cmo los aliengenas se


desplazan de izquierda a derecha, pero se van del juego y no vuelven.
Tiene solucin, aunque esto puede no ser tan sencillo. Nos vamos a
ayudar de las variables globales, para saber hacia dnde tenemos que
mover a los invasores.
62
Creacin de videojuegos con Construct 2

Las variables globales

Una variable global es, en programacin, un papel en el que podemos


anotar cualquier informacin que se puede consultar en cualquier
momento. Algo as como una agenda para los desmemoriados.

Los programas de ordenador utilizan variables todo el rato, porque es


as cmo son capaces de recordar cosas. Construct 2 es un programa
de ordenador que nos evita la tarea de escribir nuevos programas para
ha e juegos pe o sigue sie do u p og a a. Y a e es e esita
variables para tener memoria.

Las variables globales se crean en la hoja de eventos, haciendo clic en


el botn derecho del ratn sobre la hoja.

Va os a ea u a a ia le glo al o o e di e io , tipo
Nu e alo i i ial . Este alo se si los aliengenas se
desplazan de izquierda a derecha y -1 si van de derecha a izquierda.

63
Space Invaders

Y ahora lo que vamos a decir a Construct 2 es en qu momento debe


cambiar la direccin. Agregamos un nuevo evento en la hoja de
e e tos. Lo aso ia os o el o jeto Alie , sele io a os Co pa e
X de la se i ize & Positio e la e ta a de la o di i
i di a os > G eate tha La outWidth- .

64
Creacin de videojuegos con Construct 2

Co o a i sele io a e os ste o o ele e to so e el ue


a tua , despus la op i et Value de la se i Glo al & lo al
a ia les . E la e ta a de asig a i del alo sele io a os la
a ia le glo al di e i le i di a os el alo - .

Co esto esta os di ie do a Co st u t ue ua do el o jeto Alie


(cualquiera de las copias) est a menos de 50 pxeles del extremo
derecho de la zona de juego se cambie el valor de la variable
di e i a -1.

Ahora modificamos la accin que asociamos al tick del juego, la que


i e e ta a e el alo de la posi i X del o jeto Alie . E luga
de sumar , a os a su a el alo de la a ia le di e i . As
cambiar de valor y en lugar de sumar, restar cuando llegue al
extremo derecho.

Incluimos un nuevo evento, el correspondiente al cambio de sentido


cuando los invasores se estn dirigiendo hacia la izquierda. En este
caso le decimos que cuando la posicin de los invasores sea menor que
50 la direccin pase a tomar un valor 1 (que vuelvan hacia la derecha).

65
Space Invaders

Nuestra hoja de eventos debe quedar as:

Si ejecutamos ahora el juego, los extraterrestres deben moverse


lateralmente sin llegar a salir de la zona de juego. Tambin mueven sus
patitas, los muy invasores. Por supuesto, con las teclas del cursor
podemos mover horizontalmente la nave/tanqueta y disparar,
provocando el relajante sonido del rayo lser. Rayo lser que no
at a iesa los u os de defe sa pe o s los i aso es

Agregamos un nuevo evento. Dir a Construct 2 que cuando el lser


colisione con el Alien lo destruya. Tambin le vamos a decir que
destruya el lser, porque de lo contrario quedar raro ver cmo el rayo
destruye al invasor y sigue su camino destruyendo todo a su paso.
Demasiado poder destructor para una nave/tanqueta tan sencilla.

Este nuevo evento debe tener este aspecto:

66
Creacin de videojuegos con Construct 2

Si queremos agregar un sonido de explosin ya sabemos cmo hacerlo:


agregamos un nuevo sonido al proyecto y una nueva accin al evento
de la colisin anterior.

Esto ya tiene pinta de video juego. Vamos a hacer una ltima mejora.
Incluiremos una pantalla de fin de juego que se mostrar cuando
hayamos terminado con los invasores.

Cambiando de layout

Lo primero que hemos de hacer es crear otra pantalla (layout). Esto se


hace desde la carpeta de proyecto, pulsando con el botn derecho
so e la a peta La out sele io a do la a i Add la out . Le
damos un nombre (GameOver), un tamao (800,800) y modificamos el
margen (0,0).

Ag ega os u o jeto de tipo te to o el e saje Ga e O e . Le


damos la posicin, tamao, color, tipo de letra, etc., que ms nos guste
y vamos otra vez a la hoja de eventos.

En la hoja de eventos creamos una nueva variable global. Esta se va a


lla a e e igos lle a la ue ta del e o de e e igos ue
an nos queda por destruir. Inicialmente le damos el valor de 6.

Agregamos una nueva accin al evento de la colisin. Ser una accin


de siste a ue este a la a ia le e e igos . As de i os a
Construct 2 que cada vez que un rayo lser impacte con un objeto
67
Space Invaders

Alie este a la a ia le e e igos . Cua do e e igos llegue a


es cuando mostraremos la pantalla de fin de juego.

Agregamos, por lo tanto, un nuevo evento que diga a Construct 2 que


ua do e e igos te ga alo a ie el la out isi le.

Si ejecutamos ahora el juego veremos lo siguiente:

- Unos muros de defensa capaces de detener los disparos de los


rayos lser.

68
Creacin de videojuegos con Construct 2

- Aliengenas invasores que se desplazan de derecha a izquierda


(y viceversa) mientras mueven las patitas.
- Una nave/tanqueta que podemos mover de derecha a
izquierda con las teclas del cursor.
- Una nave/tanqueta con la que podemos disparar rayos lser
con el espacio. Este rayo lser:
o Suena como un rayo lser, desafiando las leyes de la
fsica del espacio.
o No atraviesa los muros.
o Destruye aliengenas invasores.
- Adems, nuestro juego muestra una pantalla de fin de juego
cuando acabamos con todos los malvamos invasores.

Segn el original nos faltara por aadir al juego:

- Puntuacin.
- Ms invasores. Varias filas de ellos.
- Hacer que los invasores disparen.
- Hacer que los invasores desciendan poco a poco, con el
objetivo de invadir el planeta.
- Hacer que los muros de defensa se destruyan cuando reciben
impactos de los rayos lser.

Lo vamos a dejar aqu. Hemos aprendido un buen montn de cosas


pero no nos vamos a entretener ms en un juego tan sencillo. Si te
apetece puedes intentar terminarlo por tu cuenta. Algunas cosas son
ms fciles que otras, pero todo lo que hagas te servir para aprender
ms an.

Divertido verdad?

69
Super Mario Land

Super Mario Land


Aunque parezca increble, no tengo ningn vnculo infantil con Mario,
el popular personaje de Shigeru Miyamoto (creador de sagas tan
clebres como las de Donkey Kong, The Legend of Zelda o la del propio
Mario). En la poca en la que aparecieron los juegos protagonizados
por Mario yo me diverta con un Amstrad CPC 464 con monitor de
fsforo verde y, aunque haba una versin del Mario Bros. para este
ordenador, nunca jugu a ella. Despus me pas al PC y durante unos
cuantos aos las consolas y sus juegos me interesaron ms bien poco.

70