HAPPY ALIEN

Primeros pasos

Ahora que ya lo tienes instalado, inicia Construct 2. Haz clic en el botn File (archivo)
y selecciona New (nuevo).

En el cuadro de dilogo haz clic en New empty project (proyecto nuevo vaco) y luego
en Open (abrir).
Ahora deberas ver un layout (diseo) vaco, es la vista de diseo donde crears y
pondrs los objetos. Este layout sera como un nivel del juego o una pantalla de men.

Ahora grabemos el proyecto, puedes hacerlo con File / Save (grabar). Te recomiendo
crear una carpeta en el escritorio que incluya tu nombre, por ejemplo "Proyectos
Construct JUAN". Luego dale un nombre a tu proyecto, por ejemplo "Plataformero".
Cuando grabes el proyecto, Construct 2 mantendr todos los archivos del proyecto
dentro de un slo archivo .capx con el nombre que escojas.

Crear Layers

En un juego de plataformas tpicamente tenemos tres capas de objetos:

- El fondo: las imgenes de montaas, cerros, etc. Cosas que estn lejos y que son
decorativas.
- Plataformas: son los objetos sobre los que podemos saltar y correr
- UI (User Inteface) o Interfaz de Usuario: son los textos del juego que van por sobre
todo, por ejemplo, las vidas, el puntaje, mensajes de ayuda, etc.

Para poner los objetos ordenadamente vamos a crear tres layers (capas).

Los layouts pueden tener mltiples layers (capas) que puedes usar para agrupar objetos.
Imagina que la capas son lminas de vidrio apiladas una encima de otra con objetos
pintados en cada una. Esto te permite organizar rpidamente cuales objetos se vern por
encima de otros, ocultar una capa y todos sus objetos, bloquearlas, aplicarles efectos y
mucho ms. Por ejemplo, en este juego, queremos que todo (personaje, fantasmas,
balas) se muestren por encima del fondo, as que crearemos una nueva capa para los
nuevos objetos.
Para gestionar las capas, clic en Layers (Pestaa capas) que normalmente est junto a la
derecha al medio al lado de Projects ( Proyectos).

En la lista deberas ver Layer 0 (Construct 2 cuenta desde cero, y no desde uno, ya que
la mayora de los lenguajes de programacin funcionan as). Haz clic en el icono del
lpiz para renombrarla a Fondo, ya que ser nuestra capa de fondo.

Haz clic en el layer "Fondo " que acabas de renombrar. Fjate que a la izquierda de
Construct aparecen en la barra de "Properties" las propiedades de "Fondo". Cambale el
color a un celeste (como de cielo). Asegrate que la propiedad Transparent
(transparente) est en No.
Por ltimo, vuelve a la barra de Layers, haz clic en Fondo y luego en el icono del
pequeo candado para bloquear esa capa. Esto significa que no podrs seleccionar nada
de esa capa. Esto es conveniente para nuestro fondo, ya que sino sera muy fcil
seleccionarlo accidentalmente y realmente no necesitamos editarlo de nuevo. No
obstante, si necesitas hacerle cambios de nuevo, puedes hacer clic de nuevo en el
candado para desbloquearlo.

Ahora haz clic en el icono "+" (aadir) para agregar una nueva capa y cmbiale el
nombre a Plataformas.
En la barra de propiedades, cambale la propiedad Transparent a Yes. Esto es para que
cuandopongamos algo en la capa de Fondo, se pueda ver, de otro modo la capa
Plataformas tapara a Fondo.
Finalmente haz clic en el icono "+" (aadir) para agregar una nueva capa y cmbiale el
nombre a UI.

Las casillas de verificacin te permiten ocultar las capas en el editor, pero no lo

necesitamos hacer ahora. Tus layers debieran verse as:

Agregar Objetos

Aqu tienes las imgenes de las plataformas - gurdalas en tu computador (hazles click
derecho encima y gurdalas en la carpeta de tu proyecto).
Ahora selecciona el layer Plataformas en la barra de layers. De ese modo, cuando
agreguemos objetos van a quedar sobre esa capa.

Necesitamos agregar un Sprite a nuestro juego. Hay varias maneras de hacerlo:

- la manera larga es hacer doble clic en el layout, luego elegir Sprite, luego clic en el
layout, luego clic en Abrir imagen (en el editor de imagen del Sprite), luego cerrar el
editor y luego cambiarle de nombre.
- la manera corta (y la que ocupo yo): desde un explorador de archivos de windows
arrastra la imagen hasta el layout. Inmediatamente se crea un Sprite con el nombre del
archivo!

Agrega los 4 sprites, cada uno con las imgenes de arriba.

Debera verse as al terminar:
Haz clic sobre alien en la barra de objetos (a la derecha). Ahora hazle clic derecho, y
luego elije la opcin Behaviours. En el cuadro de Behaviours haz clic en el cono "+" y
elije Platform. De este modo, le decimos a Construct que nuestro personaje debe
comportarse como un personaje de juego de plataformas (debe poder saltar entre
plataformas).

Ahora haz clic en el pequeo icono 'ejecutar' (es un botn parecido a un "play") en la
ventana de la barra de ttulo - debera iniciarse un navegador mostrando el layout con el
fondo

Qu pas?
Nuestro pequeo amigo alien cay al fondo del juego. Es porque nos falta decirle a
Construct que el pasto debe comportarse como una plataforma!

Haz clic sobre el objeto solid en la barra de objetos (a la derecha). Esta ser nuestra
plataforma, necesitamos que sea slida de modo que al poner al personaje arriba, se
quede encima. Hazle clic derecho a solid y elije Behaviours. Luego agrega el
comportamiento Solid.
En el layout verifica que el pasto est debajo de nuestro personaje (cmo en la imagen
de ms arriba).
Vuelve a probar el juego.
Ahora si se queda parado arriba del pasto! Prueba a ocupar las flechas para mover al
alien.
Puedes cerrar las ventanas de Behaviour abiertas.

Ahora haz clic sobre el objeto jumpthru en la barra de objetos (a la derecha).

Hazle clic derecho a jumpthru y elije Behaviours. Luego agrega el comportamiento
JumpThru.

Ahora haz clic sobre el objeto moving en la barra de objetos (a la derecha).

Hazle clic derecho a moving y elije Behaviours. Luego agrega el comportamiento
Solid. Adems, esta vez agrega el comportamiento Sine. Este ltimo comportamiento
Sine, hace que la plataforma se mueve en un movimiento sinusoidal (es decir que se
mueve como la funcin trigonomtrica seno, si no sabes lo que es no importa, lo que
importa es que se ve bien el movimiento).

Vuelve a probar el juego.

Qu pasa ahora?
El bloque moving se est moviendo horizontalmente. Puedes saltar sobre l y te
desplazas encima. Mientras que le bloque jumpthru te permite pasar a travs de l y
quedarte arriba. Este ltimo es ms difcil de probar, porque puede haber quedado muy
arriba.

Vamos ahora a crear el nivel!

Haz clic sobre el bloque solid en el layout. Necesitamos poner ms de estos bloque en el
nivel. Una manera podra ser alargar el bloque hacia la derecha, tomandola por uno de
los puntos blancos que la rodean (como en la imagen de abajo) pero no te lo
recomiendo, porque la imagen se deforma.
A propsito si quieres girar el bloque puedes tomar el punto blanco que esta cerca del
centro, ste te permite rotar la imagen. Prueba a hacer ambas cosas y para deshacerlas
presiona CTRL-Z o el botn Undo de la barra de botones superior.
Lo que vamos a hacer para copiar los bloque es hacer clic en el bloque solid y apretar
CTRL. Mientras aprietas CTRL mueve el bloque solid. Se hace una copia!

Para que los bloques queden bien alineados y no queden espacios entre ellos, vamos a
activar una opcin especial. En el men superior elije la opcin View y luego activa la
opcin Snap to grid. Adems, cambia Grid width y Grid height a 70 (70 es el alto y
ancho de nuestro pasto). Lo que hace esta opcin es que al mover un sprite se ajustar a
una grilla invisible (puedes hacer que se vea con Show grid) de 70x70.
Ahora mueve un poco todos los bloques y a nuestro alien para que se ajusten a la grilla.

Ahora copia bloques y muevlos para que te quede un nivel como el siguiente:
Todava hay muchas cosas que arreglar. El alien no apoya bien sus pies sobre el pasto y
si te sales de la pantalla no tienes como volver.

A propsito, las lneas punteadas que se ven en el layout son el tamao de la pantalla.
Lo que dibujes fuera no se va a ver. Arreglemos eso primero.

Haz clic sobre alien en la barra de objetos (a la derecha). Ahora hazle clic derecho, y
luego elije la opcin Behaviours. En el cuadro de Behaviours haz clic en el cono "+" y
elije Scroll To.

Vuelve a probar el juego. Ahora la cmara sigue a nuestro personaje!

Ahora puedes ocupar todo el layout para crear el nivel.

Mantn pulsada la tecla control y mueve la rueda del ratn hacia abajo para alejar la
imagen. Otra forma de hacerlo es hacer clic en View / zoom out (ver - alejar) un par de
veces. Tambin puedes mantener pulsada la barra espaciadora o el botn central del
ratn para desplazarte por el layout.
Pulsa control+0 o haz click en View / Zoom to 100% para volver a la vista normal.

Vamos a arreglar que cuando caiga el personaje vuelva a comenzar. Selecciona la

pestaa de eventos Event Sheet 1. Haz doble clic encima o donde dice Add event para
agregar un evento. Clic en alien. Luego Next.

Ahora elije Compare Y (est abajo de la lista en Size & Position, para buscar tambien
puedes escribir en el campo de texto de arriba a la derecha). Luego Next.
En el campo Comparison elije > Greater than.
Luego pon el curso en el campo siguiente. Fjate que hay una ventana cerca que se
llama "Objects with expressions". Esta ventana nos ayuda a encontrar valores de los
objetos. Necesitamos encontrar el alto del layout. Haz clic en System y luego en
LayoutHeight. Para buscar tambin puedes escribir en el campo de texto de arriba a la
derecha (como abajo).
Ahora vamos a agregar una accin para este evento. Haz clic en Add action al lado del
evento que acabas de agregar. Luego haz clic en System y luego en Restart layout.

Tu evento debera quedar as:

Ahora prueba el juego. Cuando te caes fuera del rea de juego, vuelve a comenzar el
juego.

Te has fijado que el alien mete sus patitas dentro del bloque de pasto y que a veces se
queda atrapado en los bordes de los bloques?
Esto es porque estn mal definidos sus bordes de colisin. Vamos a corregir eso ahora.

Haz doble clic sobre alien en la barra de objetos (a la derecha). Se abrirn varias
ventanas. La que nos interesa es el editor de imgenes (el ttulo de la ventana es Edit
image: alien).
En esta ventana podemos cambiar las propiedades de la imagen del alien, incluidos sus
bordes de colisin.
Haz click en ltimo cono de la izquierda (Set collsion polygon).

Mueve los puntos rojos encima del alien a como est mostrado en la imagen.
Las lneas azules son las que determinan los bordes del objeto para detectar colisiones.
Deben estar rodeando lo ms cerca posible al objeto. En este caso dejamos fuera los
brazos porque no queremos que se quede colgando de ellos en las plataformas.

Ahora haz clic en el cono de arriba del que apretaste recin (se llama Set origin and
image points). Vers una cruz sobre la mitad del alien. Haz clic entre las piernas del
alien y lo ms pegado al borde de abajo.
Esto ltimo que hicimos es poner el origen del alien en sus pies. El origen es la
coordenada de la imagen sobre la cual Construct hace clculos o modificaciones. No te
preocupes por el momento no lo usaremos, pero te puede servir cuando ms adelante
hagas que un personaje gire sobre si mismo y el giro se est haciendo respecto de un
punto que no es el que queras.

Cierra el editor de imagen y prueba el juego. Ahora las colisiones entre el alien y las
plataformas estn mucho mejor.

Ahora haz clic sobre alien en la barra de objetos. Fjate en la barra de propiedades a la
izquierda. Son las propiedades del alien. Mira las propiedades en la seccin Behaviors /
Platform. Estas son las propiedades del comportamiento de plataformas. Prueba a
cambiar la gravedad (Gravity), por ejemplo pon un valor 4000 y haz correr el juego.
Luego cambia a un valor menor (por ejemplo 500) y prueba a ver qu pasa.
Modificando ese valor y la posicin de los bloques puedes crear juegos totalmente
distintos!
Ahora vamos a agregar instrucciones al juego.
Selecciona la pestaa Layout 1 para volver a editar el layout.

Volvamos a la barra de Layers que usamos al principio. Seleccina la capa UI

(recuerda que esto la hace la capa activa).
La barra de Propiedades debera mostrar sus propiedades. Ajusta la propiedad
Parallax a 0,0. Por defecto, los layers se desplazan junto la cmara. Para mantener
esta capa en pantalla usamos el ajuste de capa Parallax.

Normalmente el parallax sirve para hacer que diferentes capas se desplacen a

velocidades diferentes y con eso dar la idea de que estn a distintas distancias de la
cmara. Por ejemplo, en juegos de carrera 2D, los cerros que estn al fondo se
mueven ms lento que las capas de ms adelante paradar la idea que estn ms
atrs.
En tu juego ms adelante podras poner nubes o cerros lejanos en la capa Fondo y
luego si le pones un parallax de 50,50 se mover ms lento que tus plataforma,
dndo la sensacin de que estn ms lejos.

Doble clic en algn sitio del layout para colocar un nuevo objeto. Esta vez elige el
objeto Text (texto). Sitalo en la parte superior del layout. En la barra de
propiedades puedes clic en Font y elige un tamao de letra ms grande (por
ejemplo 36). En el campo Text escribe las intsrucciones del juego, por ejemplo
"Muvete con las teclas de flechas y encuentra la bandera." (donde estn la
bandera? En el prximo tutorial la pondremos).
Luego toma el borde del objeto Text y redimnsionalo para que tenga suficiente
ancho para que entre suficiente texto.

Ahora prueba a disear un nivel que sea interesante. Que el alien tenga que pasar
por varias partes hasta llegar hasta el otro extrema del layout.

Agregar Objetos
Aqu tienes las imgenes de las plataformas - gurdalas en tu computador (hazles click
derecho encima y gurdalas en la carpeta de tu proyecto).

Ahora selecciona el layer Plataformas en la barra de layers. De ese modo, cuando

agreguemos objetos van a quedar sobre esa capa.

Necesitamos agregar Sprites a nuestro juego. Recuerdas como hacerlo de la manera

rpida?
Desde un explorador de archivos de windows arrastra cada imagen hasta el layout.
Inmediatamente se crea un Sprite con el nombre del archivo.

Agrega los 6 sprites, cada uno con las imgenes de arriba.

Debera verse as al terminar:

Vamos a agregar un enemigo (slime o babosa).
La lgica es la siguiente, si el personaje toca al enemigo por el lado, hace un flash (la
imagen desaparece momentneamente) y te mata.
Si el personaje toca al enemigo por arriba, lo mata.

Para hacer que el personaje haga el flash, selecciona el alien en la barra de objetos. Clic
derecho en alien y elije Behaviour. Agrega el comportamiento Flash.

Ahora selecciona la pestaa de eventos (Event sheet 1) y agrega un nuevo evento.

Elije al alien luego On collision with another object, luego elije el objeto slime. Si te
fijas, este evento sucede cuando el personaje choca con el enemigo. Pero necesitamos
diferenciar cuando es por el lado y cuando es por arriba. Por esto necesitamos crear 2
sub-eventos.
Haz clic derecho en la flecha verde a la izquierda del evento que recin creaste. Luego
en Add y luego en Add sub-event.
Al evento recin creado falta crearle una accin. Pero antes de eso necesitamos crear
Haz clic en Add action al lado del evento.
Elije alien luego Is falling. Con esto detectamos que el personaje est cayendo y
tocando al enemigo, pero nos falta detectar que realmente est arriba.
Haz clic sobre Is falling y elije Add another condition.
Elije el alien, luego Compare Y. Luego elije < Less Than y en la coordenada pon
slime.Y

Por qu menor que la posicin del enemigo, si debe estar arriba?

Por que el eje Y crece hacia abajo en Construct. As que si la coordenada Y del
personaje es menor que la del enemigo, est por arriba.

Ahora vamos a agregar una accin a este sub-evento. Haz clic sobre el Add action que
est a la derecha de Platform is falling.
Elije slime y luego Destroy.
Vamos a agregar otra accin a ese sub-eevento. Haz clic sobre el Add action que
debajo de slime | Destroy. Elije alien, luego Set vector Y y en el valor escribe -700.
Set vector Y lo que hace es que define la velocidad vertical del movimiento, como la
coordenada Y crece hacia abajo, al darle -700 hacemos que suba. Puedes probar con
otros valores, la idea es que se pegue un pequeo saltito despus de saltar sobre el
enemigo.

Nos falta hacer el otro caso, cuando el personaje toca al enemigo por el lado. Podemos
hacerlo definiendo que ese evento sucede cuando NO sucede el evento que acabamos de
hacer.
Haz clic en la parte de adelante del sub-evento que acabas de crear (donde indica la
flecha en la imagen de abajo). Luego en Add y despus en Add 'Else'.

Muy bien, este sub-evento va a ejecutarse cuando el personaje choque con el enemigo y
cuando no se ejecute el otro evento (es decir cuando el personaje cae por encima del
enemigo).
Agrega una accion a este nuevo sub-evento, elije alien y luego Flash. Deja los valores
por defecto. Luego agrega otra accin al mismo sub-evento. Elije System y luego Wait,
dale 1 segundo. Finalmente agrega una accin ms. Elije System y luego Restart
layout.
Para probar lo que acabas de hacer, haz clic en la pestaa de layout. Pon el enemigo
slime sobre una plataforma cerca del personaje alien. Haz correr el juego y prueba a ver
qu sucede cuando tocas al slime por el lado y por arriba.

Si quieres hacer que el enemigo se mueva, prueba a agregar el comportamiento Sine (el
mismo de las platafromas que se mueven). Haz clic derecho sobre slime en la barra de
objetos y luego Behaviour, luego elije Sine. Puedes cambiar en sus propiedades Period
Offset para que no se mueva coordinado con las plataformas mviles.

Recuerda que puedes poner ms enemigos en el layout presionando CTRL y luego

arrastrando el slime a otra posicin. Para que quede pegado a la plataforma, tendrs que
desactivar la opcin Snap to grid en el men View.

Una manera alternativa de hacer mover los enemigos es la que se muestra en la pgina 7
de este tutorial, pero es ms compleja (y en ingls). Bsicamente lo hace es agregarle
comportamiento Platform al slime, luego poner unos marcadores invisibles al final de
cada plataforma y que cuando el enemigo los toque se den vuelta.

Vamos a repetir parte de lo que hicimos con el objeto spikes (puntas).

En este caso queremos que cada vez que el personaje toque los spikes, se muera,
indepediente de si fue por arriba o por el lado.
Parte posicionando en la layout a un spike en alguna plataforma cercana al personaje
(para que podamos probar cmo funciona).
Agrega un nuevo evento: Alien, luego On collision with y finalmente elije spikes.
Luego selecciona las 3 acciones del sub-evento de arriba (System | Else), haciendo clic
en el primero y luego CTRL y clic en el tercero. Luego haz clic derecho y elije Copy.
Ahora haz clic derecho sobre la flecha verde del nuevo evento que creaste y elije Paste.
Listo! Ahora aprendimos a copiar acciones de un evento a otro. Debera quedarte as.
Prueba a ver qu pasa cuando tocas los spikes.

Puedes repetir lo mismo con el cactus?

Lo ms fcil es copiar completo el evento de spike y luego modificarlo.
Haz clic derecho sobre la flecha verde adelante del evento del spike. Elije Copy. Luego
haz clic en un espacio blanco de los eventos y haz CTRL-V (que es lo mismo que
Paste).
Haz doble clic sobre el nuevo evento. En el objeto cambia spikes por cactus.

Para decorar tu nivel agrega en algunas partes al objeto plant.

Este objeto es solamente decorativo, no va a tener ningn comportamiento o evento
asociado.

Nos falta darle funcionamiento a las monedas.

Vamos a crear un puntaje y cada vez que tomes una moneda le sumaremos 10 puntos.

Necesitamos guardar en alguna parte el puntaje acumulado. Para esto usaremos una
variable global (tambin hay variables de cada instancia, que slo pertenecen a uno de
los objetos del layout).

Haz clic derecho en un lugar vacio de la pestaa de eventos y elije Add global
variable.

Escribe Puntaje y deja los dems valores como estn.

Fjate que se agrega la variable global arriba de la pgina de eventos.

Ahora necesitamos agregar otro evento: Alien, luego On collision with y finalmente
elije coin. Luego en las acciones agrega: coin y luego Destroy.
Y agrega otra ms: System, luego Add to, y el cuadro debera estar seleccionada
Puntaje. Pon 10 en Value.
Ahora necesitamos mostrar el puntaje en alguna parte.
Haz doble clic en el layout para agregar un nuevo objeto. Elije Text. Posicinalo en la
esquina superior derecha. Cambiale el nombre haciendole clic derecho en la barra de
objeto y luego elije Rename. Ponle TextoPuntaje de nombre.
Ahora en las propiedades cambia el Font a Arial 14 y el Text a Puntaje: 0.
Necesitamos achicar el otro texto (el que tiene las instrucciones) para dejarle espacio al
nuevo. Achicale el Font tambin a Arial 14 y achica su tamao para que te queden ms
o menos as.
Ahora necesitamos que de alguna manera se vaya actualizando el texto.
Agrega un nuevo evento: System y luego Every tick (un tick sucede cada vez que se
vuelve a pintar la pantalla del computador con tu juego, o sea, siempre). Agrega la
accin Text y luego Set text. Escribe "Puntaje: " & Puntaje.

Usando el operador & podemos unir un texto al valor de una variable. La primera parte
"Puntaje:" significa que el texto siempre se iniciar con la frase Puntaje:. La segunda
parte & Puntaje es el valor de la variable global Puntaje. El & une ambos fragmentos de
texto en la misma linea.

A esta altura todos tus eventos deberan verse as:

Prueba el juego. Qu pas con el texto de puntaje?
Se va hacia arriba cuando el personaje cae! Esto es porque qued puesto en el layer de
Plataformas. Hay que moverlo al layer de UI.
Para esto haz click en el cuadro de texto en el layout y luego dale clic derecho y elije
Move to layer, luego elije UI.
Bien, slo nos falta hacer que el jugador gane cuando llegue a la bandera
Para esto debes colocar una bandera en el layout. Por el momento djala cerca del
personaje para que podamos probar cmo funciona, luego la movers ms lejos para que
sea ms difcil alcanzarla.

Agrega otro objeto Text como hiciste recin, pero este colcalo en la mitad de la
pantalla. Cmbiale de nombre a TextoGanaste. Cmbiale el Font a Arial 48, el color a
azul (o algn otro) y el Text a GANASTE!.
Por ltimo, cmbiale la propiedad Initial visibility a Invisible. As partir siendo
invisible. Ahora tenemos que hacer que cuando el personaje toque la bandera se vuelva
invisible.
Ah, denuevo se nos qued en el layer Plataforma. Hay que moverlo al layer de UI. Haz
click en el cuadro de texto en el layout y luego dale clic derecho y elije Move to layer,
luego elije UI.

Agrega un nuevo evento. Elije flag, luego On collision with another object y luego
alien. Agrega la accin TextoGanaste y luego Set Visible.
Nos falta hacer que despus de mostrarse el texto, se pueda volver a jugar. Lo ms fcil
es espera 5 segundos y hacer partir de nuevo el juego.
Para esto copia las dos acciones System | Wait 1.0 seconds y System | Restart layout
del evento de cuando el alien choca con el cactus. Pgalas en nuestro evento de la
bandera. Hazle clic a System | Wait 1.0 seconds y ponle 5 segundos.
Te debera quedar as:
Listo!

Prueba tu juego. Ya est listo. Ahora puedes jugar a agrandar el nivel y hacerlo ms
interesante.

Si quieres revisar cmo me qued a m el nivel, puedes bajar aqu el archivo .capx con
mi proyecto del juego.

Algunas ideas para mejorar tu juego:

- podras hacer ms niveles. Esto se hace creando ms layouts. Y que cuando el
personaje toque una bandera se cargue otro layout. Esto se hace con la accin System |
Go to layout.
- puedes agregar nubes en el layer de Fondo. Y podras hacer que se vayan moviendo a
la derecha con el comportamiento Bullet.

Puedes ver otros tutoriales sobre juegos de plataformas:

- Tutorial con Tim de Braid: se ensea como agregar animacin al personaje. Tambin
te ensea como sumar puntos por saltar a cada nivel (lo cul realmente yo no hara).