Gua para principiantes

Gracias por haber elegido Construct 2! Pongmonos en marcha para hacer

nuestro primer juego HTML5. Vamos a crear la demo del juego 'Ghost Shooter'.
Puedes probarlo aqu para ver cual es nuestro objetivo: un personaje orientado
hacia el puntero del ratn, se mueve con las teclas "flechas de direccin" y
dispara con el botn izquierdo del ratn. Aprenders todo lo que necesitas
saber para hacer un juego bsico - desde usar layers (capas) hasta usar el
sistema de eventos!
Instalando Construct 2
Si todava no lo has hecho, descarga una copia de la ltima versin de
Construct 2 aqu. El editor Construct 2 es slo para Windows, pero los juegos
que hagas pueden ejecutarse tambin en otras plataformas, como Mac, Linux o
iPad. Construct 2 tambin se puede instalar en cuentas restringidas de usuario.
Incluso es portable, de modo que puedes instalarlo, por ejemplo, en una
memoria USB y llevrtelo contigo!
Comenzando
Ahora que ests preparado, inicia Construct 2. Haz
clic en la pestaa File (Archivo) y selecciona New
(Nuevo).

Te saldr una ventana para que escojas un template (plantilla) para tu nuevo
proyecto. Escogeremos New empty project (Proyecto en blanco), para empezar
de cero. Lo guardamos a travs de la opcin File > Save as single file (Esto nos
generar un nico fichero con la extensin .capx). Lo guardamos dnde mejor
nos parezca, pero no es mala idea crear un directorio con un nombre adecuado
y salvarlo en l, por cuestin de orden.
Nos pedir un nombre para el fichero .capx, que muy bien podemos llamarlo
"Ghost Shooter". A partir de aqu, con un simple save, se actualizar nuestro
fichero .capx.
Ahora deberas estar ante un layout vaco - que es la vista de diseo donde se
pueden crear y colocar los objetos. Este layout (plano de maquetacin o lienzo)
nos servir para disear los niveles de nuestro juego o pantallas de usuario;
como mens de opciones, tabla de puntuaciones, pantallas informativas, etc.
En otros programas, lo llaman: room (habitacin), scene (escena)
o frame(marco).

Insertando objetos
Fondo de tiles (Tiled Background)
Lo primero que necesitamos es
un Background (fondo) compuesto
de Tiles(baldosas) que se repiten a lo alto y a lo
ancho formando un mosaico. El objetoTiled
Background (Fondo de tiles) puede hacer esto por
nosotros. Para empezar, aqu tienes la imagen que
nos har de Tile para nuestro fondo - botn derecho
sobre ella y gurdala en alguna parte de tu
ordenador:

Ahora, haz doble clic en cualquier parte del layout para insertar un nuevo
objeto. (Ms adelante, si est lleno de objetos, tambin puedes hacer clic
derecho y seleccionar Insert New Object (Insertar Nuevo Objecto) ). En el
cuadro de dilogo que aparece, haz doble clic en el objeto Tiled
background para insertarlo.

Aparecer una cruz para indicarte dnde se va

a colocar el objeto. Haz clic en algn lugar
cerca del centro del layout. El editor de
imgenes se abre automticamente, para que
puedas cargar nuestro tile . Vamos a importar
la imagen que hemos guardado anteriormente.
Haz clic en el icono con forma de carpeta para
cargar la imagen desde el disco, busca dnde guardaste el fichero y
seleccinalo.

Cierra el editor de imgenes haciendo clic en la X

en la parte superior derecha. Ahora puedes ver tu
objeto fondo de tiles en el layout. Vamos a
cambiar su tamao para que lo cubra por
completo. Asegrate de que el objeto est
seleccionado, de modo que en la barra de
propiedades (Properties Bar) de la izquierda
deben mostrarse todos los ajustes para el objeto,
incluyendo su tamao y posicin. Establece su
posicin en 0, 0 (parte superior izquierda
dellayout) y su tamao a 1280, 1024 (el tamao
del layout. Si el layout tiene otro tamao, ponle

este
mismo).
Conviene que de vez en cuando vayas guardando tu proyecto, para evitar
prdidas indeseables.

Veamos lo que hemos hecho. Necesitamos alejarnos para poder ver todo
ellayout. Para ello podemos mantener pulsada la tecla Ctrl y girar la rueda del
ratn hacia abajo (zoom out) o hacer clic en View -> Zoom Out (Ver ->Alejar)
hasta ver todo el layout. Tambin podemos mantener pulsada la barra
espaciadora o pulsado el botn central del ratn para desplazarnos con el ratn

por el layout. Fcil, verdad?.

el layout:

Tu fondo de tiles debera ahora cubrir todo

Pulsa Ctrl + 0 o haz clic en view to 100% para regresar a una vista 1:1
(SI eres impaciente como yo, pulsa en run layout -el tringulo que apunta
hacia la derecha- en la barra de ttulo del C2 - un navegador se abrir
mostrando el fondo de tiles sobre el layout. Wiiii !)
Aadir una capa (layer)

Bien, ahora queremos aadir algunos objetos ms. Sin

embargo, queremos evitar seleccionar por accidente
el fondo de tiles y que este se nos mueva sin querer.
Necesitamos, pues, bloquearlo de alguna manera. Para
ello, vamos a utilizar el sistema de capas:
Los layout pueden constar de varias capas, que se
pueden utilizar para agrupar objetos. Imagnate las
capas, como placas de vidrio apiladas unas encima de
otras, con los objetos pintados en cada una de ellas. El
uso de capas, te permitir organizar fcilmente los
objetos que se encuentren mas cerca de ti de otros que
se hallen mas lejos. Las capas pueden ocultarse,
bloquearse, contemplan la posibilidad de paralaje y
muchas cosas mas. Por ejemplo, en este juego,
queremos que todo se vea por encima
del fondo de tiles, para ello crearemos una
capa superior a la del fondo en dnde
depositaremos nuestros nuevos objetos.

Para gestionar las capas, haz clic en el Layers tab (pestaa Capas),
que por lo general encontrars al lado del Projects tab (pestaa
Proyectos) en el Project bar (Barra de proyectos):

En la lista de capas vers Layer 0 (Construct 2 cuenta a partir de

cero, como es habitual en toda programacin). Haz clic en el icono
del lpiz y cambia su nombre por Background (Fondo), ya que ser
nuestra capa de fondo. Ahora haz clic en el icono 'add' (aadir) para
agregar una nueva capa en la que pondremos nuevos objetos. La
vamos a llamar Main (Principal) . Por ltimo, si haces clic en el icono
con forma de pequeo candado, al lado de Background, esta capa
quedar bloqueada. Eso significa que ya no podrs seleccionar nada,
en esta capa. Eso es muy conveniente para nuestro fondo de tiles para evitar
seleccionarlo accidentalmente. Adems ya no vamos a necesitar volver a
tocarlo. Sin embargo, si por alguna razn, vas a querer realizar algn cambio,
tan slo haz clic sobre el candado para que la capa quede desbloqueada.

Las casillas de verificacin tambin te van a permitir ocultar capas en el editor,

pero esto no lo vamos a necesitar de momento. La barra de capas debera
tener este aspecto:

Ahora , asegrate de que la capa "Main"

est seleccionada en la barra de capas. Esto
es importante pues la capa seleccionada es
la capa activa. Todos los nuevos objetos que
se van a aadir, lo harn en la capa activa, de modo que si no est
seleccionada, estaremos trabajando accidentalmente en una capa distinta. La
capa activa se muestra en el status bar (barra de estado, en la parte inferior
del C2) y tambin se muestra en un tooltip (pequeo mensaje emergente
informativo) cuando se aade un nuevo objeto - vale la pena prestar atencin a
estas informaciones.
Aadir los objetos de entrada
Pon tu atencin de nuevo sobre el layout. Haz doble clic para insertar un
nuevo objeto. Esta vez, selecciona el objeto ratn (mouse), ya que lo vamos a
utilizar. Haz lo mismo para el objeto teclado (Keyboard).
Nota: No es necesario colocar estos objetos en el layout. Estn ocultos y
funcionan automticamente en todo el proyecto. El teclado y ratn, quedan
pues habilitados para todos los layout de nuestro proyecto.
Los objetos del juego
Es el momento de insertar los objetos de nuestro juego! Aqu estn sus
imgenes -gurdalas en tu disco duro al igual que la imagen anterior.

jugador

monstruo
bala

explosin

Para cada uno de estos objetos, vamos a utilizar el objeto Sprite. Simplemente
muestra una imagen, que puede desplazarse, rotar y cambiar de tamao. Por
regla general, el objeto ms empleado en los juegos es el objeto Sprite. Vamos
a insertar cada uno de los cuatro objetos como objetos sprite. El proceso es
similar al de insertar el fondo de tiles:
1. Doble clic para insertar un nuevo objeto
2. Doble clic sobre el objeto 'Sprite'.
3. Cuando el puntero del ratn se convierta en una cruz, haz clic en cualquier
parte del layout. La descripcin debe ser 'Main'. (Recuerda que esta es la capa
activa.)
4. El editor de imgenes aparece. Haz clic en el icono open (abrir) y carga una
de las cuatro texturas.
5. Cierra el editor de imgenes, guarda los cambios. Ahora deberas de ver el
objeto en el layout!
Nota: Otra forma, mas rpida, de insertar objetos Sprite es arrastrar y soltar el
fichero de imagen, desde su ubicacin en nuestro disco duro, al layout.
Construct 2 crear un Sprite con esa imagen. Asegrate de arrastrar las
imgenes de una en una, porque si arrastras las cuatro a la vez, Construct 2
crear un solo Sprite con cuatro frames (cuadros de animacin). Otra ventaja
es que de este modo los sprites quedarn automticamente renombrados con
el mismo nombre del fichero.
Mueve la bala y la explosin a algn lugar fuera del layout - no queremos
verlos cuando se inicie el juego.
Estos objetos se
llamarn Sprite , Sprite2 , Sprite3 y Sprite4 . Esto
no es muy til - las cosas se vuelven confusas de
esta manera. Cmbiales el nombre
a Player ,Monster, Bullet y Explosion segn
corresponda. Puedes hacerlo seleccionando el
objeto y a continuacin cambiar el nombre de la propiedad Name (Nombre) en
la barra de propiedades:
Cmo aadir comportamientos (behaviors)
Los comportamientos son funcionalidades predefinidas en Construct 2. Por
ejemplo, puedes agregar un comportamiento Platform (Plataforma) a un objeto
y el comportamiento Solid (Slido) al suelo y tendrs rpidamente la base de

un juego de plataformas. Puedes hacer lo mismo en los eventos (events), pero

lleva ms tiempo y no es necesario si el comportamiento es ya lo
suficientemente bueno! As que vamos a echar un vistazo a los
comportamientos que podemos utilizar. Entre otros, Construct 2 tiene estos
comportamientos:
- 8 Direction movement (Movimiento en 8 direcciones). Esto permite mover
un objeto en hasta 8 direcciones, por medio de las teclas con flechas de
desplazamiento. Adecuado para el movimiento de nuestro personaje.
- Bullet movement (Movimiento de bala). Esto simplemente mueve hacia
adelante un objeto con su ngulo actual. Adecuado para el caso de "balas". A
pesar del nombre, tambin es adecuado para el movimiento de "enemigos" ya que dota a los objetos de un movimiento hacia adelante con velocidad
constante.
- Scroll to . Esto hace que la cmara siga a un objeto que se mueve (tambin
conocido como scrolling). Adecuado para aplicarlo a nuestro personaje.
- Bound to layout . Esto evitar que un objeto abandone el rea del layout.
Esto tambin ser til aplicado a nuestro personaje, para que no se salga del
rea de juego!
- Destroy outside layout . Esto hace que se destruya el objeto si se sale del
layout. Es adecuado, por ejemplo, para el caso de "balas". Sin este
comportamiento, las balas volaran fuera de la pantalla indefinidamente,
consumiendo recursos de memoria y micro (cpu). Para evitar este consumo
innecesario, debemos destruir las "balas" una vez que han dejado el rea de
juego.
- Fade . Esto hace que los objetos poco a poco se desvanezcan, nos vendr
muy bien para nuestras explosiones.
Vamos a aadir estos comportamientos a los objetos que los necesiten.
Cmo aadir un comportamiento
Vamos a aadir el comportamiento 8 direction movement al jugador. Haz clic
en el jugador para seleccionarlo. En la barra de propiedades, fjate en la
categora Behaviors (Comportamientos). Doble clic
sobre Add/Edit(Aadir/Editar). El cuadro de dilogo de comportamientos del
jugador se abrir.

Haz clic en el icono en forma de cruz "Add New" en el cuadro de dilogo de

comportamientos. Haz doble clic en 8 direction movement para aadirlo

Haz lo mismo otra vez y en esta

ocasin agrega el
comportamiento Scroll To , para que
la cmara siga al jugador y aade
tambin el comportamiento Bound
to layout , para mantenerlo dentro
del layout. El cuadro de dilogo
debera tener este aspecto:

Cierra el cuadro de dilogo. Clic en

Ejecutar para probar el juego!

Damos por hecho que tienes un navegador compatible con HTML5 instalado.
De lo contrario, asegrate de obtener la ltima versin de Firefox o Chrome o
Internet Explorer 9, si tienes Vista o superior. Una vez que tengas el juego en
ejecucin, observa que ya te puedes mover con las teclas de flechas y la
cmara sigue al jugador! Tampoco se puede salir del rea de juego, gracias al
comportamiento Bound to layout. Por esto, es por lo que los comportamientos
son buenos - aaden rpidamente un poco de funcionalidad.
Mas adelante, aadiremos funcionalidades personalizadas, por medio del
sistema de eventos.
Aadiendo los otros comportamientos
Podemos aadir comportamientos a los otros objetos de la misma forma seleccinalos, haz clic en Agregar / Editar para abrir su cuadro de dilogo y
aade algunos.
Vamos a aadir otros comportamientos:
- Aadir Bullet movement y Destroy outside layout para el
objeto Bala (como es evidente)
- Aadir Bullet movement para el objeto Monster (ya que slo se mueven
hacia adelante)
- Aadir el comportamiento Fade al objeto Explosion (por lo que desaparecer
gradualmente despus de aparecer). Por defecto, el
comportamiento fadetambin destruye el objeto despus de que se ha
desvanecido, lo cual nos ahorra tener que preocuparnos acerca de las
explosiones invisibles que podran obstruir el juego.
Si se ejecuta el juego, observars que lo nico diferente es que cualquier
monstruo que puedas ver en pantalla, saldr de ella rpidamente. Vamos a

reducir esta velocidad a un ritmo mas

pausado. Selecciona el objeto Monster.
Fjate como tan pronto aadimos un
comportamiento, algunas propiedades
adicionales han aparecido en la barra de
propiedades:
Esto nos permite modificar cmo trabajan los comportamientos. Cambiar la
velocidad de 400 a 80 (esto es en pxeles recorridos por segundo).
Del mismo modo, cambiar la velocidad del objeto Bullet a 600 y en el
objetoExplosion cambiar el tiempo de fundido Fade out time a 0.5 )(medio
segundo).
Crear unos cuantos monstruos mas
Manteniendo pulsada la tecla control, hacer clic y arrastrar el objeto Monster.
Con ello se generar una nueva instancia del objeto Monster. Esto es
simplemente otro objeto de tipo Monster.
Los tipos de objetos son esencialmente "clases" de objetos. En el sistema de
eventos, se trabaja principalmente con tipos de objetos. Por ejemplo, es posible
hacer un evento que sea "Bullet colisiona con Monster". Esto en realidad
significa " Cualquier instancia del 'tipo de objeto' Bullet colisiona con cualquier
instancia del 'tipo de objeto' Monster " - en lugar de tener que realizar un
evento separado para cada uno de los monstruos. Con Sprites, todas las
instancias de un tipo de objeto tambin comparten la misma textura. Esto es
muy bueno para la eficiencia - cuando los jugadores juegan su juego en lnea,
en lugar de tener que descargar 8 texturas monstruo para 8 monstruos, slo se
necesita descargar una textura monstruo y Contruct 2 la repetir 8 veces.
Ahondaremos mas sobre la diferencia entre 'tipos de objetos' y sus 'instancias'
mas adelante. De momento, un buen ejemplo para pensar sobre ello, es que
diferentes tipos de enemigos son diferentes tipos de objetos, de modo que en
nuestro caso al tener slo un tipo de enemigo (el monstruo), todos los
enemigos que nos puedan aparecer sern instancias de un mismo tipo de
objeto. Y puede haber un montn, como lo ser en nuestro caso.
Usa la tecla Ctrl + arrastrar, para crear 7 u
8 nuevos monstruos. No los coloques
demasiado cerca del jugador para evitar que
este muera nada mas iniciarse el juego!
Puedes alejar la imagen con Ctrl + rueda del
ratn hacia abajo y distribuirlos por todo
el layout . Obtendrs algo similar a esto.
Ahora es el momento de agregar
funcionalidades personalizadas a travs del
mtodo visual de programacin de Contruct
2 - el sistema de eventos (event system)