Guía 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 cuál es el objetivo: un jugador que apunta en la dirección del ratón, se mueve con las flechas de desplazamiento y dispara a los monstruos con el ratón. Aprenderás todo lo que necesitas para hacer un juego sencillo - ¡desde capas hasta el sistema de eventos!

Instalando Construct 2Si aún no lo has hecho, obtén una copia de la última versión de Construct 2 aquí. El editor es sólo para Windows, pero los juegos creados funcionarán en cualquier sistema como Mac, Linux o iPad. Construct 2 también puede ser instalado en cuentas de usuario restringidas. También es portable, así que lo puedes instalar, por ejemplo, en una memoria USB y llevártelo contigo.

Primeros pasosAhora que ya lo tienes instalado inicia Construct 2. Haz clic en el botón Archivo(File) y selecciona Nuevo (New).

En el cuadro de diálogo Nuevo proyecto (New Project) no necesitas cambiar nada, sólo haz clic en Crear proyecto (Create project). Construct 2 mantendrá todo el proyecto en un sólo archivo .capx. Ahora deberías de ver en un layout vacío la vista de diseño donde crearás y pondrás los objetos. Este layout sería como un nivel de juego o pantalla de menú. En otros programas, lo llaman room, escena o frame.

Añadiendo 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 - botón derecho para guardar la imagen en tu ordenador: Ahora haz doble clic en cualquier lugar del layout para añadir

un objeto nuevo. (Más adelante también puedes usar el botón derecho y seleccionar Añadir nuevo objeto (Insert new object)). Cuando aparezca el

cuadro de diálogo, doble clic en el objeto Fondo de tiles para añadirlo.

Un señalador 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 selecciónala.

Cierra el editor de textura en la X que está arriba a la derecha. Si te lo pregunta, ¡asegúrate de guardarlo! Ahora deberías de ver tu objeto fondo de tiles en el layout. Vamos a redimensionarlo para que cubra toda la superficie. Para ello selecciónalo y mira todos los ajustes del objeto en la Barra de propiedades (Properties bar) de la izquierda, incluyendo el tamaño y la posición. Pon la posición en 0,0 (esquina superior izquierda del layout) y dale un tamaño de 1280 por 1024 (el del layout).

Inspeccionemos el trabajo. Mantén pulsada la tecla control y mueve la rueda del ratón hacia abajo para alejar la imagen. Otra forma de hacerlo es hacer clic en ver - alejar (view - zoom out) un par de veces. También puedes mantener pulsada la barra espaciadora o el botón central del ratón para desplazarte por el layout. Fácil ¿eh? Ahora tu fondo de tiles debería cubrir todo el layout:

Pulsa control+0 o ver - tamaño 100% (view to 100%) para volver a la vista 1:1.

(Si eres impaciente como yo, haz clic en el pequeño icono 'ejecutar' (run) en la ventana de la barra de título - debería iniciarse un navegador mostrando el layout con el fondo! Woo!) 

Pag 2

Añadiendo una capa (layer)

Bien, ahora vamos a añadir más objetos. Sin embargo, vamos a mantener

accidentalmente seleccionado el fondo de tiles a menos que lo bloqueemos, haciéndolo no seleccionable. Usaremos el sistema de capas para hacerlo.Los layouts pueden tener múltiples capas (layers) que puedes usar para agrupar objetos. Imagina que la capas son láminas de cristal apiladas una encima de otra con objetos pintados en cada una. Esto te permite organizar rápidamente que objetos se verán por encima de otros, las capas pueden ser ocultadas, bloqueadas, aplicarles efectos de paralaje y más. 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 Pestaña capas (Layers tab) que normalmente está junto a la Barra de proyecto (Project bar): 

En la lista deberías de ver Layer 0 (Construct 2 cuenta desde cero, ya que funciona mejor como en la programación). Clic en el icono del lápiz para renombrarla a Background (Fondo), ya que será nuestra capa de fondo. Ahora haz clic en el icono verde 'añadir' (add) para añadir una nueva capa para el resto de objetos, llámala Main (Principal). Por último, si haces clic en el icono del pequeño candado al lado de Background, se bloqueará. Esto significa que no podrás seleccionar nada. Esto es conveniente para nuestro fondo, ya que si no sería muy fácil 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 verificación también te permiten ocultar las capas en el editor, pero no lo necesitamos hacer ahora. La barra de capas debería mostrarse así:

Ahora, asegúrate 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 serán colocados en la capa activa, así que si no está seleccionada, podríamos colocarlos en una capa equivocada. La capa activa se muestra en la barra de estado (status bar) y también se muestra en un mensaje de ayuda (tooltip) cuando sitúa un nuevo objeto. Vale la pena mantenerse atento a estos mensajes.

Añadir los objetos de entradaPresta atención de nuevo al layout. Doble clic para colocar un nuevo objeto. Esta vez, selecciona el objeto Ratón (Mouse), ya que necesitaremos interaccionar con el ratón. Repítelo para el objeto Teclado (Keyboard).

Nota: estos objetos no necesitan situarse en el layout. Está ocultos y funcionan automáticamente en todo el proyecto. Ahora todos los layouts en nuestro proyecto aceptan entradas de ratón y teclado.

Los objetos del juego

Ahora vamos a colocar los objetos del juego! Aquí tienes las texturas - guárdalas antes a tu disco duro.

Jugador:

Monstruo:

Bala:

y Explosión:

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, están compuestos en su mayoría 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 ratón se convierte en un señalador, haz clic en cualquier lugar del layout. El mensaje de ayuda debería mostrar 'Main'. (Recuerda que esta es la capa activa.)4. Se muestra el editor de textura. Clic en el botón de abrir (open) y carga una de las cuatro texturas.5. Cierra el editor de textura guardando los cambios. Deberías de ver el objeto en el layout!

Nota: otra forma rápida de colocar objetos sprite es arrastrar y soltar el archivo de imagen desde Windows al área del layout. Construct 2 creará automáticamente un sprite con esa textura. 

Mueve los sprites bala y explosión a algún lugar fuera de los límites 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 crearía confusión para identificarlos. Renómbralo a un más apropiado Player, Monster, Bullet y Explosion. Puedes hacerlo seleccionando el objeto y cambiando la propiedad Nombre (Name) en la barra de propiedades:

Pag 3

Añadiendo comportamientos (behaviors)

Los comportamientos son funcionalidades prediseñadas en Construct 2. Por ejemplo puedes añadir un comportamiento Plataforma (Platform) a un objeto, el comportamiento Sólido (Solid) al suelo y al momento puedes tener un buen juego de plataformas. Puedes hacer lo mismo con los eventos (events) pero lleva más tiempo, y no hay punto de comparación 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, también 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 (también conocido como scrolling). Es útil en el jugador. - Limitar al layout (bound). Para un objeto que esté dejando el área del layout. También 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, seguirían 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 añadir estos comportamientos a los objetos que los necesiten.

Como añadir un comportamiento

Vamos a añadir el movimiento de 8 direcciones al jugador. Clic en el jugador para seleccionarlo. En la barra de propiedades fíjate en la categoríaComportamientos (Behaviors). Clic allí en Añadir / Editar (Add / Edit) para abrir el cuadro de diálogo Comportamientos.

Clic en el icono verde 'añadir comportamiento' en el cuadro de diálogo. Doble clic en el movimiento de 8 direcciones para añadirlo.

Haz lo mismo pero esta vez con el comportamiento Desplazar a, para hacer que la pantalla siga al jugador y también Limitar al layout para mantenerlo dentro del layout. El cuadro de diálogo debería de verse así:

Cierra el cuadro de diálogo. Clic en Ejecutar para probar el juego!

Por suerte tendrás instalado un navegador web compatible con HTML 5. Por otro lado, asegúrate de tener la última versión de Firefix o Chrome, o Internet Explorer 9 si estás en Vista o superiores. Una vez que arranque el juego, fíjate 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 añadir las funcionalidades más habituales. Pronto usaremos el sistema de eventos para personalizarlas.

Añadir el resto de comportamientos

Podemos añadir comportamientos al resto de objetos de la misma forma - seleccionándolos, abriendo el cuadro de diálogo haciendo clic en Añadir / Editar y añadiendo algunos comportamientos. Vamos a usar los siguientes:

- Añadir el Movimiento de bala y Destruir al salir del layout al objeto Bullet (como es normal).- Añadir el Movimiento de bala al objeto Monster (porque también se mueve hacia delante).- Añadir el comportamiento Desvanecer al objeto Explosion (de esta forma desaparece gradualmente después de aparecer). Por defecto el comportamiento Desvanecer también 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, notarás que la única cosa diferente es que cualquier monstruo que ves dispara rápido y de repente. Vamos a reducir la velocidad a un ritmo más pausado. Selecciona el objeto Monster. Observa que desde que añadimos 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 más

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 significaría "Cualquier

instancia del tipo objeto Bala colisiona con cualquier instancia de tipo objeto Monstruo" - así no tendrías 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, sólo tienen que descargar una y Construct 2 la repite 8 veces. Hablaremos más 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 sitúes demasiado cerca del jugador porque si no lo matarán al empezar! Puedes alejarlos con control + rueda del ratón como ayuda y distribuirlos por todo el layout. Deberías de ver algo así.

Ahora ya podemos añadir funcionalidades personalizadas a través del método de programación visual de Construct 2 - el sistema de eventos (event system).

Pag 4

Eventos (events)Primero, haz clic arriba en la pestaña Página de evento 1 (Event sheet 1) para cambiar al Editor de página de evento (Event sheet editor). Una lista de eventos se llama Página de evento y puedes tener varias para diferentes partes del juego o para organizarte mejor. Estas páginas también pueden

"incluir" a su vez otras páginas de eventos, lo que permite, por ejemplo, volver a usar eventos en varios niveles. Pero por ahora no es necesario.

Sobre los eventosComo indica el texto en la página en blanco, Construct 2 todo en la página de evento una vez cada instante. La mayoría de los monitores actualizan la información 60 veces por segundo, así que el programa intentará hacerlo coincidir para mostrar un movimiento suave. Esto significa que la página 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 estén al principio de la página se ejecutarán primero. 

Condiciones, acciones y sub eventosLos 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". Después de las acciones también se lanzan los sub eventos - que pueden comprobar más condiciones y luego ejecutar más acciones y más sub eventos. Usando este sistema podemos desarrollar funcionalidades más 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 ningún sub evento). 

Esto sería simplificándolo mucho. Construct 2 trae bastantes características de evento que cubren muchas de las cosas que necesitarás. De todas formas, por ahora, es una buena manera de pensar en ello.

Tu primer eventoQueremos que el jugador siempre siga al puntero del ratón. 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 posición donde esté el ratón.

Empecemos. Doble clic en algún lugar de la página de evento. Nos muestra

el cuadro de diálogo añadir condición para un nuevo evento. 

Diferentes objetos tienen condiciones y acciones distintas dependiendo de lo que puedan hacer. También está el objeto Sistema (System) que representa las funcionalidades prediseñadas de Construct 2. Doble clic en el objeto Sistema que se ve. El cuadro de diálogo listará todas las condiciones del objeto Sistema:

Doble clic en la condición Cada instante (Every tick) para añadirla. El cuadro se cerrará y el evento se crea sin acciones. Se debería de ver así:

Ahora queremos añadir una acción para hacer que el jugador mire al ratón. Clic en Añadir acción (Add action) a la derecha del evento. (Asegúrate que sea el enlace Añadir acción, no el de Añadir evento debajo de aquel porque crearías un evento diferente otra vez). El cuadro de diálogo Añadir acción aparecerá: Añadiendo un evento tenemos la misma lista de objetos para elegir, pero esta vez para añadir una acción. Procura no equivocarte entre añadir condiciones y acciones! Como se muestra, haz doble clic en el objeto Jugador, que es el jugador que queremos que siga al ratón. Aparece la lista de acciones disponibles para este objeto:

Fíjate 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 número de grados es conveniente usar la acción Ajustar ángulo hacia la posición de (Set angle towards position). Esto calcula automáticamente 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 acción Ajustar ángulo hacia la posición de.

Construct 2 necesita saber las coordenadas X e Y a donde apunta el jugador:

Estos son los parámetros de la acción. Las condiciones también pueden tener parámetros, pero Cada instante no los necesita.

Queremos ajustar el ángulo hacia la posición del ratón. El objeto Ratón (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, podrías escribir Mouse.X + 100 o sin(Mouse.Y) (aunque estos ejemplos en particular no serían muy úitles!). De esta forma puedes usar cualquier dato de cualquier objeto o un cálculo para elaborar los parámetros en las acciones y condiciones. Esto es muy útil y demuestra la gran flexibilidad de Construct 2.

¿Te da un error que dice "El ratón no es un nombre de objeto"? Asegúrate entonces que has añadido el objeto Mouse! Vuelve a la página 2 y repasa el apartado "Añadir los objetos de entrada".

A lo mejor te gustaría saber cómo recordar todas las expresiones que puedes escribir. Por suerte, hay un "panel objeto" (object panel) que deberías de ver sobre él mismo. Por defecto, esta desvanecido para que no te distraiga.

Pasar el ratón 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

verás un listado con todas sus expresiones. Haciendo doble clic en una

expresión la colocará por ti, evitándote así tener que teclearlas a mano.

De todos modos clic en Hecho (Done) en el cuadro de parámetros. La acción se ha añadido. Como viste antes debería verse así:

Este es tu primer evento! Prueba el juego y el jugador debería ser capaz de moverse como antes, pero mirando siempre hacia el ratón. Esta es nuestra primera pieza de funcionalidad personalizada.

Pag 5

Añadiendo funcionalidades al juego

Si describimos cada evento con mucho detalle como antes, el tutorial sería muy largo. Haremos descripciones más breves en los siguientes eventos. Recuerda los pasos para añadir una acción son:

1. Doble clis para colocar un nuevo evento o clic en el enlace Añadir acción para añadir la acción.2. Doble clic en el objeto al que le afecta la condición/acción.3. Doble clic en la condición/acción que quieres.4. Escribir los parámetros si son necesarios. 

En lo sucesivo los eventos se describirán como el objeto, seguido por la condición/acción seguido por algún parámetro. Por ejemplo, el evento que hemos hecho se escribiría:

Añadir condición Sistema -> Cada instante

Añadir acción Jugador-> Ajustar ángulo hacia la posición de -> X: Mouse.X, Y:Mouse.Y

Conseguir que el jugador dispare

Cuando el jugador haga clic debería disparar una bala. Esto se puede hacer con la acción Generar un objeto (Spawn an object) aplicada al Jugador, que crea una instancia de un objeto con la misma posición y ángulo. El Movimiento bala que añadimos anteriormente le hará volar hacia delante. Haz el siguiente evento:

Condición: Mouse -> On click -> Left clicked (predeterminado)Acción: 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 debería de verse así:

Si pruebas el juego notarás 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 posición en una imagen desde donde puedes generar objetos.)

Botón 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 diálogo puntos de imagen:

Fíjate 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 añadir otro punto de imagen para representar la pistola, haz clic en el botón verde añadir. Aparece el nuevo como un punto azul. Clic izquierdo al final de la pistola del jugador para situarlo allí:

Cerramos el editor de imágenes. Doble clic en la acción Generar un objeto que añadimos 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 debería de verse como abajo, ahora pone Image point 1:

Prueba el juego. Ahora las balas se disparan desde el final de la pistola, aunque aún no hacen nada. De todas maneras y una vez que te familiarices con el sistema de eventos podrás ponerle interactividad a cualquier elemento del juego con gran rapidez.

Ahora haremos que las balas maten monstruos. Añade el siguiente evento: 

Condición: Bullet -> On collision with another object -> elige Monster.Acción: Monster -> DestroyAcción: Bullet -> Spawn another object -> Explosion, layer 1Acción: Bullet -> Destroy

El efecto explosión

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

Tranquilo que el juego no quedara con esta imagen tan mala, vamos a mejorarlo.Clic en el objeto Explosión 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 más listos

Por el momento los monstruos sólo pasean por fuera del layout a la derecha, vamos a hacerlos más interesantes. Para empezar, empezarán a moverse en un ángulo aleatorio.Condición: System -> On start of LayoutAcción: Monster -> Set angle -> random(360)

De esta forma seguirán 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 permanecerán en el layout y si el jugador se detiene, los monstruos irán hacia él!

Condición: Monster -> Is outside layoutAcción: Monster -> Set angle toward position -> Para X, Player.X - para Y, Player.Y.

Prueba el juego. Si esperas un momento, te fijarás que los monstruos se mantienen en el layout y se mueven en todas direcciones. Es una IA (Inteligencia Artificial) escasa, pero algo es!

Ahora, supón que necesitamos disparar cinco veces para matar al monstruo en lugar de una muerte instantánea como hasta ahora. ¿Como lo hacemos? Si sólo incluimos un contador de "Salud" (Health), en vez de uno para cada monstruo, todos los monstruos morirían 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 sólo 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 añadir una variable de instancia salud (health) a nuestros monstruos. Clic en el monstruo en la barra de proyecto o en la de objeto. También puedes regresar al layout y seleecionar un objeto monstruo. Se mostrarán las propiedades del monstruo en la barra de propiedades. Clic Añadir/editar en Editar variables. 

Aparece el cuadro de diálogo Variables de Instancia. Es similar al de Comportamientos que vimos antes, pero este te permite añadir y cambiar variables de instancia al objeto. Clic en el botón verde Añadir para incluir uno nuevo.

Una vez en él, escribe health en el Nombre (Name), deja Tipo (Type) comoNúmero (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). Fíjate que la variable aparece ahora en el cuadro de diálogo variables de instancia y también en las propiedades del monstruo. (Puedes cambiar de forma rápida los valores iniciales en la barra de propiedades, pero para añadir o borrar variables necesitarás hacer clic en el enlace Añadir/Editar).

Cambiando los eventosVolvamos a la página de eventos. Por el momento, destruimos los monstruos tan pronto como reciben un balazo. Vamos a cambiar esto restándole 1 al indicador de salud.

Encuentra el evento que dice: Bullet - on collision with Monster. Fíjate que ahora tenemos una acción "destruir monstruo". Vamos a sustiruirlo por "restar 1 a la salud". Haz clic con el botón derecho en la acción "destruir monstruo" y clic enSustituir.

Aparece el mismo cuadro de diálogo como cuando añadimos una nueva acción, pero esta vez sustituiremos la acción sobre la que hicimos clic. Elige Monster -> Subtract from (en la categoría Variables de instancia) -> Instance variable "health", y escribe un Value de 1. Clic en Done. La acción se debería de ver así:

Ahora cuando disparemos a los monstruos perderán 1 de su salud y la bala explota, pero aún no hemos hecho un evento que mate a los monstruos cuando llegue a cero. Añade otro evento:

Condición: Monster -> Compare instance variable -> Health, Less or equal, 0Acción: Monster -> Spawn another object -> Explosion, layer 1Acción: Monster -> Destroy

¿Por qué "menor o igual a 0" en vez de "igual a 0"? Imagen que añadimos un arma más potente que resta 2 de la salud. Cuando dispares a un monstruo, su salud debería de ser 5, 3, 1, -1, -3... fíjate que nunca se llega a un valor igual a cero, así que no moriría! Por eso es una buena práctica usar "menor o igual" para probar is algo pierde todo su nivel de salud.

Prueba el juego. Ahora deberás de acertar cinco veces en los monstruos para matarlos!

Llevando la cuenta

Ahora necesitamos una puntuación para que el jugador sepa como lo está haciendo, para ello usaremos una nueva variable. Podría pensar "pondremos la puntuación 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 puntuación, porque se destruirá con él.

En vez de ello, usaremos una variable global. Como una variable de instancia, una global puede almacenar textos o números. No obstante, sólo puede guardar un valor que estará disponible en todo el juego sin importar los layouts - cómodo si la queremos usar en otros niveles.

Haz clic derecho en un espacio en blanco al final de la página de eventos y selecciona Añadir variable global.

Escribe Score como nombre. Los otros campos déjalos como están, se creará un número con valor inicial de 0.

Ahora la variable global aparece como una línea en la página de eventos. Está en este pero se podría acceder desde cualquier página de evento en cualquier layout.

Nota: también hay variables locales a las que pueden acceder un número más 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 Añadir acción y selecciona System -> Add to (debajo de Global & local variables) ->Score, value 1. Ahora el evento debería de verse así:

Ahora el jugador tiene una puntuación, 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 información) es una interfaz que nos muestra la salud del jugador, la puntuación y otra información 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 - debería 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. Añade una nueva llamad HUD. Asegúrate que está arriba y selecciónala (recuerda que esto la hace la capa activa). La barra de Propiedades debería mostrar sus propiedades. Ajusta laParallax a 0,0 (ejes X e Y).

Doble clic en algún sitio para colocar un nuevo objeto. Esta vez elige el objetoTexto. Sitúalo en la esquina superior izquierda del layout. Será difícil de ver si es negro, así que en la barra de propiedades cambiála negrita, cursiva, amarilla y elige un tamaño de tipografía un poco grande. Rediménsionalo y dale suficiente ancho para que entre suficiente texto. Debería de verse algo como:

Volvamos a la página de eventos. Mantendremos el texto actualizado con la puntuación del jugador. En el evento Cada instante (Every tick) que añadimos antes, añade la acción Text -> Set text.

Usando el operador & podemos convertir un número 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 puntuación 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 más que hacer. Crearemos un nuevo monstruo cada 3 segundos. Añadir un nuevo evento: 

Condición: System -> Every X seconds -> 3Acción: System -> Create object -> Monster, layer 1, 1400 (for X),random(1024) (for Y)

1400 una coordenada X al lado del límite del layout, y random(1024) es una coordenada Y con la altura del layout.

Por último haremos que los fantasmas maten al jugador. 

Condición: Monster -> On collision with another object -> PlayerAcción: Player -> Destroy

Conclusión

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 básicos sobre Construct 2: colocar objetos, usar layouts, comportamientos, eventos y más. Esto te deja bien preparado para aprender más sobre Construct 2! Sigue explorando y practica estas características y mira lo que puedes hacer con ellas.

Una última cosa

Intenta descargar el proyecto del tutorial finalizado. He añadido algunas características extras como algún texto "Fin de juego" y monstruos que se aceleran gradualmente. Sabiendo lo que ya sabes no te debería ser difícil averiguar como funcionan. También hay muchos comentarios describiendo

como funciona.

Bien! Si tienes algún 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 algún conocido también le puede gustar Construct 2, ¿por qué no le envías un enlace a este tutorial? Sin duda, no le hará daño :) 

Leer más

Si quieres conocer más sobre como trabajan los eventos en Construct 2, mira la sección How Events Work  en el manual. Es muy recomendable para poder avanzar más rápido en tus propios proyectos.