Gua de inicio a Construct 2

Muchas gracias por elegir Construct 2! Vamos a empezar con nuestro primer juego HTML 5. Realizaremos el juego demo 'Disparando a los fantasmas' (Ghost Shooter). Juega primero aqu para saber cul es el objetivo: un jugador que apunta en la direccin del ratn, se mueve con las flechas de desplazamiento y dispara a los monstruos con el ratn. Aprenders todo lo que necesitas para hacer un juego sencillo - desde capas hasta el sistema de eventos!

Instalando Construct 2
Si an no lo has hecho, obtn una copia de la ltima versin de Construct 2 aqu. El editor es slo para Windows, pero los juegos creados funcionarn en cualquier sistema como Mac, Linux o iPad. Construct 2 tambin puede ser instalado en cuentas de usuario restringidas. Tambin es portable, as que lo puedes instalar, por ejemplo, en una memoria USB y llevrtelo contigo.

Primeros pasos
Ahora que ya lo tienes instalado inicia Construct 2. Haz clic en el botn Archivo(File) y selecciona Nuevo (New).

En el cuadro de dilogo Nuevo proyecto (New Project) no necesitas cambiar nada, slo haz clic en Crear proyecto (Create project). Construct 2 mantendr todo el proyecto en un slo archivo .capx. Ahora deberas de ver en un layout vaco la vista de diseo donde crears y pondrs los objetos. Este layout sera como un nivel de juego o pantalla de men. En otros programas, lo llaman room, escena o frame.

Aadiendo objetos Fondo de tiles (baldosas)

Lo primero que queremos es un fondo de tiles que se repita a lo alto y a lo ancho. El objeto Fondo de tiles (Tiled Background) puede hacerlo por nosotros. Primero, aqu est la textura de fondo - botn derecho para guardar la imagen en tu ordenador: Ahora haz doble clic en cualquier lugar del layout para aadir un objeto nuevo. (Ms adelante tambin puedes usar el botn derecho y seleccionar Aadir nuevo objeto (Insert new object)). Cuando aparezca el

cuadro de dilogo, doble clic en el objeto Fondo de tiles para aadirlo.

Un sealador aparecer para indicarte donde situar el objeto. Haz clic en cualquier lugar cerca del centro del layout. Ahora se abre el editor de textura (texture editor) para que introduzcas una textura al tile, importa la imagen que guardaste antes. Clic en el icono de la carpeta para cargarla desde el disco duro, busca donde la has guardado y seleccinala.

Cierra el editor de textura en la X que est arriba a la derecha. Si te lo pregunta, asegrate de guardarlo! Ahora deberas de ver tu objeto fondo de tiles en el layout. Vamos a redimensionarlo para que cubra toda la superficie. Para ello seleccinalo y mira todos los ajustes del objeto en la Barra de propiedades (Properties bar) de la izquierda, incluyendo el tamao y la posicin. Pon la posicin en 0,0 (esquina superior izquierda del layout) y dale un tamao de 1280 por 1024 (el del layout).

Inspeccionemos el trabajo. 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 ver alejar (view - zoom out) un par de veces. Tambin puedes mantener pulsada la barra espaciadora o el botn central del ratn para desplazarte por el layout. Fcil eh? Ahora tu fondo de tiles debera cubrir todo el layout:

Pulsa control+0 o ver - tamao 100% (view to 100%) para volver a la vista 1:1. (Si eres impaciente como yo, haz clic en el pequeo icono 'ejecutar' (run) en la ventana de la barra de ttulo - debera iniciarse un navegador mostrando el layout con el fondo! Woo!)

Pag 2
Aadiendo una capa (layer)
Bien, ahora vamos a aadir ms objetos. Sin embargo, vamos a mantener

accidentalmente seleccionado el fondo de tiles a menos que lo bloqueemos, hacindolo no seleccionable. Usaremos el sistema de capas para hacerlo. Los layouts pueden tener mltiples capas (layers) que puedes usar para agrupar objetos. Imagina que la capas son lminas de cristal apiladas una encima de otra con objetos pintados en cada una. Esto te permite organizar rpidamente que objetos se vern por encima de otros, las capas pueden ser ocultadas, bloqueadas, aplicarles efectos de paralaje y ms. Por ejemplo, en este juego, queremos que todo se muestre por encima del fondo, as que crearemos una nueva capa para los nuevos objetos. Para gestionar las capas, clic en la Pestaa capas (Layers tab) que normalmente est junto a la Barra de proyecto (Project bar):

En la lista deberas de ver Layer 0 (Construct 2 cuenta desde cero, ya que funciona mejor como en la programacin). Clic en el icono del lpiz para renombrarla a Background (Fondo), ya que ser nuestra capa de fondo. Ahora haz clic en el icono verde 'aadir' (add) para aadir una nueva capa para el resto de objetos, llmala Main (Principal). Por ltimo, si haces clic en el icono del pequeo candado al lado de Background, se bloquear. Esto significa que no podrs seleccionar nada. Esto es conveniente para nuestro fondo, ya que si no sera muy fcil seleccionarlo accidentalmente y no necesitamos editarlo de nuevo. No obstante, si necesitas hacer cambios de nuevo, haz clic de nuevo en el candado para desbloquearlo. Las casillas de verificacin tambin te permiten ocultar las capas en el editor, pero no lo necesitamos hacer ahora. La barra de capas debera mostrarse as:

Ahora, asegrate que capa 'Main' est seleccionada en la barra de capas. Esto es importante porque la capa seleccionada en la capa activa. Todos los objetos nuevos sern colocados en la capa activa, as que si no est seleccionada, podramos colocarlos en una capa equivocada. La capa activa se muestra en la barra de estado (status bar) y tambin se muestra en un mensaje de ayuda (tooltip) cuando sita un nuevo objeto. Vale la pena mantenerse atento a estos mensajes.

Aadir los objetos de entrada

Presta atencin de nuevo al layout. Doble clic para colocar un nuevo objeto. Esta vez, selecciona el objeto Ratn (Mouse), ya que necesitaremos interaccionar con el ratn. Reptelo para el objeto Teclado (Keyboard). Nota: estos objetos no necesitan situarse en el layout. Est ocultos y funcionan automticamente en todo el proyecto. Ahora todos los layouts en nuestro proyecto aceptan entradas de ratn y teclado.

Los objetos del juego

Ahora vamos a colocar los objetos del juego! Aqu tienes las texturas gurdalas antes a tu disco duro. Jugador:

Monstruo:

Bala: y Explosin:

Para cada uno de estos objetos usaremos un objeto sprite. Simplemente muestra una textura, la cual puedes mover alrededor, rotar o redimensionar. Los juegos, generalmente, estn compuestos en su mayora de sprites. Colocaremos cada uno de los cuatro objetos anteriores como sprites.

El proceso es similar a lo que hicimos con el fondo: 1. Doble clic para colocar un objeto nuevo. 2. Doble clic en el objeto 'Sprite'. 3. Cuando el puntero del ratn se convierte en un sealador, haz clic en cualquier lugar del layout. El mensaje de ayuda debera mostrar 'Main'. (Recuerda que esta es la capa activa.) 4. Se muestra el editor de textura. Clic en el botn de abrir (open) y carga una de las cuatro texturas. 5. Cierra el editor de textura guardando los cambios. Deberas de ver el objeto en el layout! Nota: otra forma rpida de colocar objetos sprite es arrastrar y soltar el archivo de imagen desde Windows al rea del layout. Construct 2 crear automticamente un sprite con esa textura. Mueve los sprites bala y explosin a algn lugar fuera de los lmites del layout - no queremos verlos cuando comience el juego. Estos objetos se llaman Sprite, Sprite2, Sprite3 and Sprite4. Esto no es muy til porque con muchos objetos creara confusin para identificarlos. Renmbralo a un ms apropiado Player, Monster, Bullet y Explosion. Puedes hacerlo seleccionando el objeto y cambiando la propiedad Nombre (Name) en la barra de propiedades:

Pag 3

Aadiendo comportamientos (behaviors)

Los comportamientos son funcionalidades prediseadas en Construct 2. Por ejemplo puedes aadir un comportamiento Plataforma (Platform) a un objeto, el comportamiento Slido (Solid) al suelo y al momento puedes tener un buen juego de plataformas. Puedes hacer lo mismo con los eventos (events) pero lleva ms tiempo, y no hay punto de comparacin si el comportamiento ya es suficientemente bueno! Vamos a ver cuales podemos usar. Ente otros Construct 2 tiene estos comportamientos: - Movimiento en 8 direcciones. Permite mover un objeto alrededor con las flechas de desplazamiento. Viene muy bien para el movimiento del jugador. - Movimiento de bala (bullet). Simplemente mueve un objeto hacia delante con el su ngulo actual. Funciona bien para los proyectiles de los jugadores. A pesar de su nombre, tambin funciona bien para mover a los monstruos - ya

que el movimiento es mover objetos hacia delante con la misma velocidad. - Desplazar a (scroll to). Hace que la pantalla siga un objeto que se mueva (tambin conocido como scrolling). Es til en el jugador. - Limitar al layout (bound). Para un objeto que est dejando el rea del layout. Tambin es til para el jugador, as no puede salir fuera del rea de juego! - Destruir al salir del layout (destroy outside). En vez de parar el objeto que deje el rea de juego, este comportamiento lo destruye si lo hace. Es til para las balas. Sin l, seguiran volando fuera de la pantalla para siempre, consumiendo recursos de procesador y memoria. As que es mejor destruir las balas cuando se van del layout. - Desvanecer (fade). Hace que un objeto se desvanezca gradualmente, as que lo usaremos en las explosiones. Vamos a aadir estos comportamientos a los objetos que los necesiten.

Como aadir un comportamiento

Vamos a aadir el movimiento de 8 direcciones al jugador. Clic en el jugador para seleccionarlo. En la barra de propiedades fjate en la categoraComportamientos (Behaviors). Clic all en Aadir / Editar (Add / Edit) para abrir el cuadro de dilogo Comportamientos.

Clic en el icono verde 'aadir comportamiento' en el cuadro de dilogo. Doble clic en el movimiento de 8 direcciones para aadirlo.

Haz lo mismo pero esta vez con el comportamiento Desplazar a, para hacer que la pantalla siga al jugador y tambin Limitar al layout para mantenerlo dentro del layout. El cuadro de dilogo debera de verse as:

Cierra el cuadro de dilogo. Clic en Ejecutar para probar el juego!

Por suerte tendrs instalado un navegador web compatible con HTML 5. Por otro lado, asegrate de tener la ltima versin de Firefix o Chrome, o Internet Explorer 9 si ests en Vista o superiores. Una vez que arranque el juego, fjate que ya te puedes mover con las flechas y la pantalla sigue al jugador! Tampoco puedes salir del rea de juego gracias al comportamiento Limitar al

layout. Por eso los comportamientos son buenos para aadir las funcionalidades ms habituales. Pronto usaremos el sistema de eventos para personalizarlas.

Aadir el resto de comportamientos

Podemos aadir comportamientos al resto de objetos de la misma forma seleccionndolos, abriendo el cuadro de dilogo haciendo clic en Aadir / Editar y aadiendo algunos comportamientos. Vamos a usar los siguientes: - Aadir el Movimiento de bala y Destruir al salir del layout al objeto Bullet (como es normal). - Aadir el Movimiento de bala al objeto Monster (porque tambin se mueve hacia delante). - Aadir el comportamiento Desvanecer al objeto Explosion (de esta forma desaparece gradualmente despus de aparecer). Por defecto el comportamiento Desvanecer tambin destruye el objeto una vez que desaparece, lo que nos permite despreocuparnos de objetos Explosion invisibles obstruyendo la fluidez del juego. Si pruebas el juego, notars que la nica cosa diferente es que cualquier monstruo que ves dispara rpido y de repente. Vamos a reducir la velocidad a un ritmo ms pausado. Selecciona el objeto Monster. Observa que desde que aadimos el comportamiento, algunas propiedades extras aparecen en la barra de propiedades:

Esto nos permite ajustar la funcionalidad del comportamiento. Cambia la velocidad de 400 a 80 (la medida es en pixeles por segundo). De igual forma cambia la velocidad del objeto Bullet a 600, y el desvanecimiento de la Explosion a un tiempo de 0.5 (medio segundo).

Creando algunos monstruos ms

Manteniendo pulsada la tecla control, haz clic y arrastra el objeto Monster. Observa que esto crea otras instancias, cada una de ellas representa otro objeto del tipo Monster. Los tipos de objeto son esencialmente 'clases' de objetos. En el sistema de eventos trabajas con tipos de objetos. Por ejemplo, puedes crear un evento que diga "Bala colisiona con Monstruo" que significara "Cualquier

instancia del tipo objeto Bala colisiona con cualquier instancia de tipo objeto Monstruo" - as no tendras que hacer un evento para cada uno de los monstruos. Con los Sprites todas las instancias de un mismo tipo de objeto comparten la misma textura. Esto es bueno para la eficiencia - cuando los jugadores juegan online, en vez de descargar 8 texturas de monstruos para 8 monstruos, slo tienen que descargar una y Construct 2 la repite 8 veces. Hablaremos ms adelante sobre los tipos de objetos vs instancias. Por ahora un buen ejemplo es pensar que diferente tipos de enemigos son diferentes tipos de objeto, entonces los enemigos reales en si (puede haber varios) son instancias de esos tipos de objetos. Usando control + arrastrar, crea 7 u 8 monstruos. No los sites demasiado cerca del jugador porque si no lo matarn al empezar! Puedes alejarlos con control + rueda del ratn como ayuda y distribuirlos por todo el layout. Deberas de ver algo as.

Ahora ya podemos aadir funcionalidades personalizadas a travs del mtodo de programacin visual de Construct 2 - el sistema de eventos (event system). Pag 4

Eventos (events)
Primero, haz clic arriba en la pestaa Pgina de evento 1 (Event sheet 1) para cambiar al Editor de pgina de evento (Event sheet editor). Una lista de eventos se llama Pgina de evento y puedes tener varias para diferentes partes del juego o para organizarte mejor. Estas pginas tambin pueden "incluir" a su vez otras pginas de eventos, lo que permite, por ejemplo, volver a usar eventos en varios niveles. Pero por ahora no es necesario.

Sobre los eventos

Como indica el texto en la pgina en blanco, Construct 2 todo en la pgina de evento una vez cada instante. La mayora de los monitores actualizan la informacin 60 veces por segundo, as que el programa intentar hacerlo coincidir para mostrar un movimiento suave. Esto significa que la pgina de evento normalmente se ejecuta 60 veces por segundo, cada uno seguida de redibujado de pantalla. Esto es lo que es un instante - una unidad de "ejecutar los eventos y luego dibujar la pantalla" (run the events then draw the screen). Los eventos se ejecutan desde arriba hacia abajo, as que aquellos que estn al principio de la pgina se ejecutarn primero.

Condiciones, acciones y sub eventos

Los eventos consisten en condiciones que comprueban si se cumple cierto criterio, por ejemplo "Est pulsada la barra espaciadora?". Si se cumplen todas las condiciones las acciones asociadas a los eventos se ejecutan, por ejemplo "Crear un objeto bala". Despus de las acciones tambin se lanzan los sub eventos - que pueden comprobar ms condiciones y luego ejecutar ms acciones y ms sub eventos. Usando este sistema podemos desarrollar funcionalidades ms sofisticadas para nuestros juegos y aplicaciones. Por el momento no necesitaremos sub eventos en este tutorial. Repasemos de nuevo, resumiendo un evento es as: Se cumplen todas las condiciones? --> Si: se ejecutan las acciones del evento. --> No: ir al siguiente evento (sin incluir ningn sub evento). Esto sera simplificndolo mucho. Construct 2 trae bastantes caractersticas de evento que cubren muchas de las cosas que necesitars. De todas formas, por ahora, es una buena manera de pensar en ello.

Tu primer evento
Queremos que el jugador siempre siga al puntero del ratn. Se ver as cuando lo tengamos hecho:

Recuerda que se ejecuta cada vez que la pantalla se redibuja, as que si hacemos esto el jugador siempre mirar a la posicin donde est el ratn. Empecemos. Doble clic en algn lugar de la pgina de evento. Nos muestra el cuadro de dilogo aadir condicin para un nuevo evento.

Diferentes objetos tienen condiciones y acciones distintas dependiendo de lo que puedan hacer. Tambin est el objeto Sistema (System) que representa las funcionalidades prediseadas de Construct 2. Doble clic en el objeto Sistema que se ve. El cuadro de dilogo listar todas las condiciones del objeto Sistema:

Doble clic en la condicin Cada instante (Every tick) para aadirla. El cuadro se cerrar y el evento se crea sin acciones. Se debera de ver as:

Ahora queremos aadir una accin para hacer que el jugador mire al ratn. Clic en Aadir accin (Add action) a la derecha del evento. (Asegrate que sea el enlace Aadir accin, no el de Aadir evento debajo de aquel porque crearas un evento diferente otra vez). El cuadro de dilogo Aadir accin aparecer: Aadiendo un evento tenemos la misma lista de objetos para elegir, pero esta vez para aadir una accin. Procura no equivocarte entre aadir condiciones y acciones! Como se muestra, haz doble clic en el objeto Jugador, que es el jugador que queremos que siga al ratn. Aparece la lista de acciones disponibles para este objeto:

Fjate que el comportamiento del jugador movimiento de 8 direcciones tiene sus propias acciones. Por el momento no tenemos que preocuparnos de eso. Para ajustar el ngulo en un nmero de grados es conveniente usar la accin Ajustar ngulo hacia la posicin de (Set angle towards position). Esto calcula automticamente el ngulo desde el jugador a las coordenadas X e Y dadas y luego ajusta el ngulo del objeto a eso. Doble clic en la accin Ajustar ngulo hacia la posicin de. Construct 2 necesita saber las coordenadas X e Y a donde apunta el jugador:

Estos son los parmetros de la accin. Las condiciones tambin pueden tener parmetros, pero Cada instante no los necesita. Queremos ajustar el ngulo hacia la posicin del ratn. El objeto Ratn (mouse) puede darnos esos datos, escribe Mouse.X para X y Mouse.Y para Y. A esto le llamamos expresiones, son como sumas que son calculadas. Por ejemplo, podras escribir Mouse.X + 100 o sin(Mouse.Y) (aunque estos ejemplos en particular no seran muy itles!). De esta forma puedes usar cualquier dato de cualquier objeto o un clculo para elaborar los parmetros en las acciones y condiciones. Esto es muy til y demuestra la gran flexibilidad de Construct 2. Te da un error que dice "El ratn no es un nombre de objeto"? Asegrate entonces que has aadido el objeto Mouse! Vuelve a la pgina 2 y repasa el apartado "Aadir los objetos de entrada". A lo mejor te gustara saber cmo recordar todas las expresiones que puedes escribir. Por suerte, hay un "panel objeto" (object panel) que deberas de ver sobre l mismo. Por defecto, esta desvanecido para que no te distraiga.

Pasar el ratn sobre l o haz clic y se pondr del todo visible. Te servir a modo de diccionario de todas las expresiones que puedes usar, con descripciones, para ayudarte a recordar. Si haces doble clic en un objeto vers un listado con todas sus expresiones. Haciendo doble clic en una expresin la colocar por ti, evitndote as tener que teclearlas a mano. De todos modos clic en Hecho (Done) en el cuadro de parmetros. La accin se ha aadido. Como viste antes debera verse as:

Este es tu primer evento! Prueba el juego y el jugador debera ser capaz de moverse como antes, pero mirando siempre hacia el ratn. Esta es nuestra primera pieza de funcionalidad personalizada. Pag 5

Aadiendo funcionalidades al juego

Si describimos cada evento con mucho detalle como antes, el tutorial sera muy largo. Haremos descripciones ms breves en los siguientes eventos. Recuerda los pasos para aadir una accin son: 1. Doble clis para colocar un nuevo evento o clic en el enlace Aadir accin para aadir la accin. 2. Doble clic en el objeto al que le afecta la condicin/accin. 3. Doble clic en la condicin/accin que quieres. 4. Escribir los parmetros si son necesarios. En lo sucesivo los eventos se describirn como el objeto, seguido por la condicin/accin seguido por algn parmetro. Por ejemplo, el evento que hemos hecho se escribira: Aadir condicin Sistema -> Cada instante Aadir accin Jugador-> Ajustar ngulo hacia la posicin de -> X: Mouse.X, Y:Mouse.Y

Conseguir que el jugador dispare

Cuando el jugador haga clic debera disparar una bala. Esto se puede hacer con la accin Generar un objeto (Spawn an object) aplicada al Jugador, que crea una instancia de un objeto con la misma posicin y ngulo. El Movimiento bala que aadimos anteriormente le har volar hacia delante. Haz el siguiente evento: Condicin: Mouse -> On click -> Left clicked (predeterminado) Accin: Player -> Spawn another object -> Para Objecto, elige Bullet. Para Layer, pon 1 (la capa "Main" 1 - recuerda que Construct 2 cuenta desde cero). Deja en 0Image point. Tu evento debera de verse as:

Si pruebas el juego notars que las balas salen desde el centro del jugador, en vez del extremo de la pistola. Vamos a corregirlo situando un punto de imagen (image `point) al final de la pistola. (Un punto de imagen es una posicin en una imagen desde donde puedes generar objetos.) Botn derecho en el jugador o en la barra de objeto y seleccionar Editar animaciones (Edit animations).

Reaparece el editor de imagen para el jugador. Clic en la herramienta origen y puntos de imagen (origin and image points):

...y se abre el cuadro de dilogo puntos de imagen:

Fjate que el origen del objeto aparece marcado con un punto rojo. Ese es el "centro de giro" del mismo, si lo rotas gira sobre el origen. Ahora queremos aadir otro punto de imagen para representar la pistola, haz clic en el botn verde aadir. Aparece el nuevo como un punto azul. Clic izquierdo al final de la pistola del jugador para situarlo all:

Cerramos el editor de imgenes. Doble clic en la accin Generar un objeto que aadimos antes y cambiamos el Punto de imagen a 1. (El origen siempre es el primer punto de imagen, y recuerda que Construct 2 siempre cuenta desde cero.) El evento debera de verse como abajo, ahora pone Image point 1:

Prueba el juego. Ahora las balas se disparan desde el final de la pistola, aunque an no hacen nada. De todas maneras y una vez que te familiarices con el sistema de eventos podrs ponerle interactividad a cualquier elemento del juego con gran rapidez. Ahora haremos que las balas maten monstruos. Aade el siguiente evento: Condicin: Bullet -> On collision with another object -> elige Monster. Accin: Monster -> Destroy Accin: Bullet -> Spawn another object -> Explosion, layer 1 Accin: Bullet -> Destroy

El efecto explosin

Prueba el juego e intenta disparar a un monstruo. Oops, la explosin tiene un feo borde negro!

Tranquilo que el juego no quedara con esta imagen tan mala, vamos a mejorarlo.Clic en el objeto Explosin en la barra de Objetos en la parte inferior derecha o en la barra de Proyecto (en la misma zona que la barra de capas). Sus propiedades aparecen en la barra de propiedades a la izquierda. Abajo ajustaEfecto (Effect) a Aditivo (Additive). Prueba el juego de nuevo.

Why does this work? Without going in to the nuts and bolts, ordinary images arepasted on top of the screen. With the additive effect, each pixel is instead added(as in, summed) with the background pixel behind it. Black is a zero pixel value, so nothing gets added - you don't see the black background. Brighter colors add more, so appear more strongly. It's great for explosions and lighting effects.

Haciendo a los monstruos un poco ms listos

Por el momento los monstruos slo pasean por fuera del layout a la derecha, vamos a hacerlos ms interesantes. Para empezar, empezarn a moverse en un ngulo aleatorio. Condicin: System -> On start of Layout Accin: Monster -> Set angle -> random(360)

De esta forma seguirn vagando cuando salen del layout para no ser vistos de nuevo. Hay que mantenerlos dentro. Haremos que regresen hacia el jugador

cuando abandonen el layout con estas dos cosas: siempre permanecern en el layout y si el jugador se detiene, los monstruos irn hacia l! Condicin: Monster -> Is outside layout Accin: Monster -> Set angle toward position -> Para X, Player.X - para Y, Player.Y. Prueba el juego. Si esperas un momento, te fijars que los monstruos se mantienen en el layout y se mueven en todas direcciones. Es una IA (Inteligencia Artificial) escasa, pero algo es! Ahora, supn que necesitamos disparar cinco veces para matar al monstruo en lugar de una muerte instantnea como hasta ahora. Como lo hacemos? Si slo incluimos un contador de "Salud" (Health), en vez de uno para cada monstruo, todos los monstruos moriran a la vez. En vez de eso, necesitamos que cada monstruo recuerde su propia salud. Eso lo podemos hacer con las variables de instancia. Pag 6

Variables de instancia
Las variables de instancia permiten a cada monstruo tener su propia cantidad de salud. Una variable slo es un valor que puede cambiar (o variar), y se guardan de forma separada para cada instancia, de ah el nombre variable de instancia. Vamos a aadir una variable de instancia salud (health) a nuestros monstruos. Clic en el monstruo en la barra de proyecto o en la de objeto. Tambin puedes regresar al layout y seleecionar un objeto monstruo. Se mostrarn las propiedades del monstruo en la barra de propiedades. Clic Aadir/editar en Editar variables.

Aparece el cuadro de dilogo Variables de Instancia. Es similar al de Comportamientos que vimos antes, pero este te permite aadir y cambiar variables de instancia al objeto. Clic en el botn verde Aadir para incluir uno nuevo.

Una vez en l, escribe health en el Nombre (Name), deja Tipo (Type) comoNmero (Number) y para Valor inicial (Initial value) marca 5 (como se muestra). Esto le da un 5 de salud a cada monstruo. Cuando reciben un disparo se le restar 1 de salud y cuando llegue a 0 se destruir el objeto. Clic en Aceptar (OK). Fjate que la variable aparece ahora en el cuadro de dilogo variables de instancia y tambin en las propiedades del monstruo. (Puedes cambiar de forma rpida los valores iniciales en la barra de propiedades, pero para aadir o borrar variables necesitars hacer clic en el enlace Aadir/Editar).

Cambiando los eventos

Volvamos a la pgina de eventos. Por el momento, destruimos los monstruos tan pronto como reciben un balazo. Vamos a cambiar esto restndole 1 al indicador de salud. Encuentra el evento que dice: Bullet - on collision with Monster. Fjate que ahora tenemos una accin "destruir monstruo". Vamos a sustiruirlo por "restar 1 a la salud". Haz clic con el botn derecho en la accin "destruir monstruo" y clic enSustituir.

Aparece el mismo cuadro de dilogo como cuando aadimos una nueva accin, pero esta vez sustituiremos la accin sobre la que hicimos clic. Elige Monster -> Subtract from (en la categora Variables de instancia) > Instance variable "health", y escribe un Value de 1. Clic en Done. La accin se debera de ver as:

Ahora cuando disparemos a los monstruos perdern 1 de su salud y la bala explota, pero an no hemos hecho un evento que mate a los monstruos cuando llegue a cero. Aade otro evento: Condicin: Monster -> Compare instance variable -> Health, Less or equal, 0 Accin: Monster -> Spawn another object -> Explosion, layer 1 Accin: Monster -> Destroy

Por qu "menor o igual a 0" en vez de "igual a 0"? Imagen que aadimos un arma ms potente que resta 2 de la salud. Cuando dispares a un monstruo, su salud debera de ser 5, 3, 1, -1, -3... fjate que nunca se llega a un valor igual a cero, as que no morira! Por eso es una buena prctica usar "menor o igual" para probar is algo pierde todo su nivel de salud. Prueba el juego. Ahora debers de acertar cinco veces en los monstruos para matarlos!

Llevando la cuenta
Ahora necesitamos una puntuacin para que el jugador sepa como lo est haciendo, para ello usaremos una nueva variable. Podra pensar "pondremos la puntuacin en un variable de instancia en un jugador!". No es una mala idea, pero recuerda que el valor se guarda "en" el objeto. Si no hay instancias tampoco hay variables! As que si destruimos al jugador no podremos mostrar cual es la puntuacin, porque se destruir con l.

En vez de ello, usaremos una variable global. Como una variable de instancia, una global puede almacenar textos o nmeros. No obstante, slo puede guardar un valor que estar disponible en todo el juego sin importar los layouts - cmodo si la queremos usar en otros niveles. Haz clic derecho en un espacio en blanco al final de la pgina de eventos y selecciona Aadir variable global.

Escribe Score como nombre. Los otros campos djalos como estn, se crear un nmero con valor inicial de 0.

Ahora la variable global aparece como una lnea en la pgina de eventos. Est en este pero se podra acceder desde cualquier pgina de evento en cualquier layout.

Nota: tambin hay variables locales a las que pueden acceder un nmero ms reducido de "mbitos" de eventos, pero por el momento no los usaremos. Le daremos un punto al jugador por matar un monstruo. En nuestro evento "Monster: health less or equal 0" (cuando el monstruo muere), clic en Aadir accin y selecciona System -> Add to (debajo de Global & local variables) >Score, value 1. Ahora el evento debera de verse as:

Ahora el jugador tiene una puntuacin, que se incrementa en 1 por cada monstruo que mate - pero por el momento no lo puede ver! Lo mostraremos con un objeto de texto. Pag 7

Creando un heads-up display (HUD)

Un heads-up display (aka HUD o pantalla de informacin) es una interfaz que nos muestra la salud del jugador, la puntuacin y otra informacin del juego. Haremos uno sencillo con un objeto de texto. El HUD siempre aparece en el mismo lugar de la pantalla. Si tenemos algunos objetos de interfaz no querremos tener que desplazarnos cuando el jugador se mueva - debera de estar fijo en la pantalla. Por defecto, los layers se desplazan. Para mantenerlo en pantalla podemos usar el ajuste de capa Parallax. Esto permite que diferentes capas se desplacen a velocidades diferentes para crear un efecto de semi-3D. Si ajustamos Parallax a cero la capa no se mover - idela para un HUD. Volvamos a la barra de capas que usamos antes. Aade una nueva llamad HUD. Asegrate que est arriba y seleccinala (recuerda que esto la hace la capa activa). La barra de Propiedades debera mostrar sus propiedades. Ajusta laParallax a 0,0 (ejes X e Y). Doble clic en algn sitio para colocar un nuevo objeto. Esta vez elige el objetoTexto. Sitalo en la esquina superior izquierda del layout. Ser difcil de ver si es negro, as que en la barra de propiedades cambila negrita, cursiva, amarilla y elige un tamao de tipografa un poco grande. Redimnsionalo y dale suficiente ancho para que entre suficiente texto. Debera de verse algo como:

Volvamos a la pgina de eventos. Mantendremos el texto actualizado con la puntuacin del jugador. En el evento Cada instante (Every tick) que aadimos antes, aade la accin Text -> Set text. Usando el operador & podemos convertir un nmero a texto y unirlo a otra cadena de texto. As que para el texto, escribe: "Score: " & Score La primera parte ("Score: ") significa que el texto siempre empezar con la fraseScore:. La segunda parte (Score) es el valor actual de la variable global Score. El& los une en un texto nico.

Prueba el juego y dispara a algunos monstruos. Se muestra tu puntuacin y permanece en el mismo lugar de la pantalla!

Toques finales
Ya casi est hecho, incluiremos algunos toques finales. Primero haremos que cada cierto tiempo "nazcan" algunos monstruos porque de otra forma una vez que matemos a todos no habr nada ms que hacer. Crearemos un nuevo monstruo cada 3 segundos. Aadir un nuevo evento: Condicin: System -> Every X seconds -> 3 Accin: System -> Create object -> Monster, layer 1, 1400 (for X),random(1024) (for Y) 1400 una coordenada X al lado del lmite del layout, y random(1024) es una coordenada Y con la altura del layout. Por ltimo haremos que los fantasmas maten al jugador. Condicin: Monster -> On collision with another object -> Player Accin: Player -> Destroy

Conclusin
Enhorabuena, has realizado tu primer juego HTML 5 en Construct 2! Si tienes un servidor y quieres mostrar tu trabajo, clic en Exportar en el men Archivo (File). El programas guardar todo los archivos del proyecto en una carpeta de tu ordenador, que puedes subir o integrar en un sitio web. Si no tienes servidor propio, puedes compartirlo en Dropbox. Has aprendido algunos conceptos bsicos sobre Construct 2: colocar objetos, usar layouts, comportamientos, eventos y ms. Esto te deja bien preparado para aprender ms sobre Construct 2! Sigue explorando y practica estas caractersticas y mira lo que puedes hacer con ellas.

Una ltima cosa

Intenta descargar el proyecto del tutorial finalizado. He aadido algunas caractersticas extras como algn texto "Fin de juego" y monstruos que se aceleran gradualmente. Sabiendo lo que ya sabes no te debera ser difcil averiguar como funcionan. Tambin hay muchos comentarios describiendo

como funciona. Bien! Si tienes algn problema o piensas que alguna parte de este tutorial puede ser mejorada, deja un comentario o un mensaje en el foro. Veresmo que podemos hacer! Por ltimo, si te gusta este tutorial y piensas que a algn conocido tambin le puede gustar Construct 2, por qu no le envas un enlace a este tutorial? Sin duda, no le har dao :)

Leer ms
Si quieres conocer ms sobre como trabajan los eventos en Construct 2, mira la seccin How Events Work en el manual. Es muy recomendable para poder avanzar ms rpido en tus propios proyectos.