Notas sobre la traducción

Se ha actualizado la traducción a la versión actual de Construct 2 (r178).

Se utilizará la terminología en inglés para las opciones del propio programa.

• Páginas traducidas/corregidas: Todas
• Repaso final: Pendiente

Primeros pasos con Construct 2: Crea tu juego HTML5

¡Gracias por elegir Construct 2! Comencemos creando nuestro primer juego en HTML5. Desarrollaremos el juego de demostración ‘Ghost Shooter’. Puedes probarlo aquí para ver nuestro objetivo: un personaje que se orienta hacia el puntero del ratón, se mueve con las teclas de dirección y dispara con el botón izquierdo.

Aprenderás todo lo necesario para crear un juego básico, ¡desde el uso de layers (capas) hasta el sistema de eventos!

Nota: Por favor, no pidas ayuda en los comentarios de este tutorial. En su lugar, dirígete a nuestro foro para obtener la mejor respuesta posible a cualquier pregunta que puedas tener.

Tutoriales Alternativos

Otro tutorial para principiantes es: Cómo hacer un juego de plataformas, que se enfoca en los clásicos juegos de plataformas (como Sonic o Mario) en lugar de un top-down shooter (juego de disparos con vista cenital, como el antiguo GTA 2). Puedes comenzar con cualquiera de los dos, pero te recomendamos completar ambos para tener una idea de cómo hacer los dos tipos de juegos.

También puedes ver Clon de Asteroids en menos de 100 eventos por Kyatric, que es un poco más avanzado, pero recomendable por lo detallado que está.

Instalación de Construct 2

Si aún no lo has hecho, descarga una copia de la última versión de Construct 2 aquí. El editor Construct 2 es solo para Windows, pero los juegos que creas pueden ejecutarse en otras plataformas, como Mac, Linux o iPad. Construct 2 también se puede instalar en cuentas de usuario con permisos restringidos. Incluso es portable, por lo que puedes instalarlo, por ejemplo, en una memoria USB y llevarlo contigo.

Comenzando un nuevo proyecto

Ahora que estás listo, inicia Construct 2. Haz clic en la pestaña File (Archivo) y selecciona New (Nuevo).

Aparecerá una ventana para que escojas una template (plantilla) para tu nuevo proyecto. Elegiremos New empty project (Proyecto en blanco) para empezar desde cero. Guárdalo a través de la opción File > Save as single file (esto generará un único fichero con la extensión .capx). Guárdalo donde prefieras, pero es recomendable crear un directorio con un nombre adecuado para mantener el orden.

Te pedirá un nombre para el fichero .capx, que bien podemos llamarlo «Ghost Shooter». A partir de aquí, con un simple save, se actualizará nuestro fichero .capx.

Ahora deberías estar ante un layout vacío, que es la vista de diseño donde se crean y colocan los objetos. Este layout (plano de maquetación o lienzo) nos servirá para diseñar los niveles de nuestro juego o pantallas de usuario, como menús de opciones, tablas de puntuaciones, pantallas informativas, etc.

En otros programas, lo llaman: room (habitación), 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 largo y ancho formando un mosaico. El objeto Tiled Background (Fondo de tiles) puede hacer esto por nosotros. Para empezar, aquí tienes la imagen que nos hará de Tile para nuestro fondo: haz clic derecho sobre ella y guárdala en alguna parte de tu ordenador:

Ahora, haz doble clic en cualquier parte del layout para insertar un nuevo objeto. (Más adelante, si está lleno de objetos, también puedes hacer clic derecho y seleccionar Insert New Object (Insertar Nuevo Objeto)). En el cuadro de diálogo que aparece, haz doble clic en el objeto Tiled background para insertarlo.

Abrir imagen en tamaño completo

Aparecerá una cruz para indicarte dónde se va a colocar el objeto. Haz clic en algún lugar cerca del centro del layout. El editor de imágenes se abre automáticamente 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 dónde guardaste el fichero y selecciónalo.

Cierra el editor de imágenes 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 tamaño para que lo cubra por completo. Asegúrate de que el objeto esté seleccionado, de modo que en la barra de propiedades (Properties Bar) de la izquierda se muestren todos los ajustes para el objeto, incluyendo su tamaño y posición. Establece su posición en 0, 0 (parte superior izquierda del layout) y su tamaño a 1280, 1024 (el tamaño del layout. Si el layout tiene otro tamaño, ponle este mismo).

Conviene que de vez en cuando guardes tu proyecto para evitar pérdidas indeseables.

Veamos lo que hemos hecho. Necesitamos alejarnos para poder ver todo el layout. Para ello, puedes mantener pulsada la tecla Ctrl y girar la rueda del ratón hacia abajo (zoom out) o hacer clic en View -> Zoom Out (Ver ->Alejar) hasta ver todo el layout. También puedes mantener pulsada la barra espaciadora o pulsar el botón central del ratón para desplazarte por el layout. Fácil, ¿verdad?.

Tu fondo de tiles debería ahora cubrir todo el layout:

Abrir imagen en tamaño completo

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 triángulo que apunta hacia la derecha- en la barra de título de Construct 2. ¡Un navegador se abrirá mostrando el fondo de tiles sobre el layout. ¡Wiiii!)

Añadir una capa (layer)

Bien, ahora queremos añadir algunos objetos más. 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. Imagínate 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 fácilmente los objetos que se encuentren más cerca de ti de otros que se hallen más lejos. Las capas pueden ocultarse, bloquearse, contemplan la posibilidad de paralaje y muchas cosas más. 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 dónde depositaremos nuestros nuevos objetos.

Para gestionar las capas, haz clic en el Layers tab (pestaña Capas), que por lo general encontrarás al lado del Projects tab (pestaña Proyectos) en el Project bar (Barra de proyectos):

En la lista de capas verás Layer 0 (Construct 2 cuenta a partir de cero, como es habitual en toda programación). Haz clic en el icono del lápiz y cambia su nombre por Background (Fondo), ya que será nuestra capa de fondo. Ahora haz clic en el icono ‘add’ (añadir) 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 pequeño candado, al lado de Background, esta capa quedará bloqueada. Eso significa que ya no podrás seleccionar nada en esta capa. Eso es muy conveniente para nuestro fondo de tiles para evitar seleccionarlo accidentalmente. Además, ya no vamos a necesitar volver a tocarlo. Sin embargo, si por alguna razón, vas a querer realizar algún cambio, tan sólo haz clic sobre el candado para que la capa quede desbloqueada.

Las casillas de verificación también te van a permitir ocultar capas en el editor, pero esto no lo vamos a necesitar de momento. La barra de capas debería tener este aspecto:

Ahora, asegúrate 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 añadir, lo harán 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 de Construct 2) y también se muestra en un tooltip (pequeño mensaje emergente informativo) cuando se añade un nuevo objeto – vale la pena prestar atención a estas informaciones.

Añadir los objetos de entrada

Pon tu atención de nuevo sobre el layout. Haz doble clic para insertar un nuevo objeto. Esta vez, selecciona el objeto ratón (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. Están ocultos y funcionan automáticamente en todo el proyecto. El teclado y ratón 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í están sus imágenes -guárdalas en tu disco duro al igual que la imagen anterior.

Jugador:

Monstruo:

Bala:

y explosión:

Para cada uno de estos objetos, vamos a utilizar el objeto Sprite. Simplemente muestra una imagen, que puede desplazarse, rotar y cambiar de tamaño. Por regla general, el objeto más 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 ratón se convierta en una cruz, haz clic en cualquier parte del layout. La descripción debe ser ‘Main’. (Recuerda que esta es la capa activa.)
4. El editor de imágenes aparece. Haz clic en el icono open (abrir) y carga una de las cuatro texturas.
5. Cierra el editor de imágenes, guarda los cambios. Ahora deberías de ver el objeto en el layout!

Nota: Otra forma, más rápida, de insertar objetos Sprite es arrastrar y soltar el fichero de imagen, desde su ubicación en nuestro disco duro, al layout. Construct 2 creará un Sprite con esa imagen. Asegúrate de arrastrar las imágenes de una en una, porque si arrastras las cuatro a la vez, Construct 2 creará un solo Sprite con cuatro frames (cuadros de animación). Otra ventaja es que de este modo los sprites quedarán automáticamente renombrados con el mismo nombre del fichero.

Mueve la bala y la explosión a algún lugar fuera del layout – no queremos verlos cuando se inicie el juego.

Estos objetos se llamarán Sprite, Sprite2, Sprite3 y Sprite4. Esto no es muy útil – las cosas se vuelven confusas de esta manera. Cámbiales el nombre a Player, Monster, Bullet y Explosion según corresponda. Puedes hacerlo seleccionando el objeto y a continuación cambiar el nombre de la propiedad Name (Nombre) en la barra de propiedades:

Cómo añadir 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 (Sólido) al suelo y tendrás rápidamente la base de un juego de plataformas. Puedes hacer lo mismo en los eventos (events), pero lleva más 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, también 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 cámara siga a un objeto que se mueve (también conocido como scrolling). Adecuado para aplicarlo a nuestro personaje.
• Bound to layout. Esto evitará que un objeto abandone el área del layout. Esto también 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 volarían 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 añadir estos comportamientos a los objetos que los necesiten.

Cómo añadir un comportamiento

Vamos a añadir el comportamiento 8 direction movement al jugador. Haz clic en el jugador para seleccionarlo. En la barra de propiedades, fíjate en la categoría Behaviors (Comportamientos). Doble clic sobre Add/Edit (Añadir/Editar). El cuadro de diálogo de comportamientos del jugador se abrirá.

Haz clic en el icono en forma de cruz «Add New» en el cuadro de diálogo de comportamientos. Haz doble clic en 8 direction movement para añadirlo.

Haz lo mismo otra vez y en esta ocasión agrega el comportamiento Scroll To, para que la cámara siga al jugador y añade también el comportamiento Bound to layout, para mantenerlo dentro del layout. El cuadro de diálogo debería tener este aspecto:

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

Damos por hecho que tienes un navegador compatible con HTML5 instalado. De lo contrario, asegúrate de obtener la última versión de Firefox o Chrome o Internet Explorer 9 (o superior). Una vez que tengas el juego en ejecución, observa que ya te puedes mover con las teclas de flechas y la cámara 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 – añaden rápidamente un poco de funcionalidad.

Más adelante, añadiremos funcionalidades personalizadas, por medio del sistema de eventos.

Añadiendo los otros comportamientos

Podemos añadir comportamientos a los otros objetos de la misma forma – selecciónalos, haz clic en Agregar / Editar para abrir su cuadro de diálogo y añade algunos.

Vamos a añadir otros comportamientos:

• Añadir Bullet movement y Destroy outside layout para el objeto Bala (como es evidente)
• Añadir Bullet movement para el objeto Monster (ya que sólo se mueven hacia adelante)
• Añadir el comportamiento Fade al objeto Explosion (por lo que desaparecerá gradualmente después de aparecer). Por defecto, el comportamiento fade también destruye el objeto después de que se ha desvanecido, lo cual nos ahorra tener que preocuparnos acerca de las explosiones invisibles que podrían obstruir el juego.

Si se ejecuta el juego, observarás que lo único diferente es que cualquier monstruo que puedas ver en pantalla, saldrá de ella rápidamente. Vamos a reducir esta velocidad a un ritmo más pausado. Selecciona el objeto Monster. Fíjate como tan pronto añadimos un comportamiento, algunas propiedades adicionales han aparecido en la barra de propiedades:

Esto nos permite modificar cómo trabajan los comportamientos. Cambiar la velocidad de 400 a 80 (esto es en píxeles recorridos por segundo).

Del mismo modo, cambiar la velocidad del objeto Bullet a 600 y en el objeto Explosion cambiar el tiempo de fundido Fade out time a 0.5 (medio segundo).

Crear unos cuantos monstruos más

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 también comparten la misma textura. Esto es muy bueno para la eficiencia – cuando los jugadores juegan su juego en línea, en lugar de tener que descargar 8 texturas monstruo para 8 monstruos, sólo se necesita descargar una textura monstruo y Contruct 2 la repetirá 8 veces. Ahondaremos más sobre la diferencia entre ‘tipos de objetos’ y sus ‘instancias’ más 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 sólo un tipo de enemigo (el monstruo), todos los enemigos que nos puedan aparecer serán instancias de un mismo tipo de objeto. Y puede haber un montón, 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 más iniciarse el juego. Puedes alejar la imagen con Ctrl + rueda del ratón hacia abajo y distribuirlos por todo el layout . Obtendrás algo similar a esto.

Ahora es el momento de agregar funcionalidades personalizadas a través del método visual de programación de Contruct 2 – el sistema de eventos (event system).

Eventos

En primer lugar, haz clic en la pestaña superior Event sheet 1 en la parte superior para cambiar al editor de eventos. Una lista de eventos es llamada Event Sheet y se pueden tener varias para diferentes partes del juego o para organizarse mejor. Las hojas de eventos pueden «incluir», a su vez, otras hojas de eventos, lo que nos va a permitir, por ejemplo, la reutilización de eventos en distintos niveles. De momento, no nos va a hacer falta.

Acerca de los eventos

Como nos indica el texto en una página de eventos en blanco, el Construct 2 va a ejecutar todos los eventos de la hoja, una vez por cada ‘tick’. La mayoría de los monitores actualiza su pantalla 60 veces por segundo, por lo que Construct 2 tratará de dar una visualización suave. Esto significa que la hoja de eventos se ejecuta normalmente 60 veces por segundo, seguido de un redibujado de la pantalla. Eso es lo que un tick significa – una unidad de «ejecutar los eventos y luego redibujar la pantalla».

Los eventos se ejecutan de arriba hacia abajo por lo que los eventos que estén más arriba en la hoja de eventos, se ejecutarán en primer lugar.

Las condiciones, acciones y sub-eventos

Los eventos consisten en condiciones , que comprueban si se cumplen ciertos criterios, por ejemplo, «¿Está la barra espaciadora pulsada?». Si todas las condiciones se cumplen, las acciones de todos los eventos, se ejecutarán, por ejemplo, «Crear un objeto bala». Después de que las acciones se han ejecutado, los sub-eventos también se ejecutan – estos pueden tener más condiciones, que en caso de cumplirse ocasionará que se ejecuten sus acciones correspondientes y en caso de existir más sub-eventos la cosa sigue… . El uso de este sistema, puede construir una funcionalidad sofisticada para nuestros juegos y aplicaciones. De todos modos, no vamos a necesitar de sub-eventos en este tutorial.

Vamos a repasar de nuevo. En resumen, un evento básicamente funciona así:

¿Todas las condiciones se cumplen?
—> Sí : ejecutar todas las acciones del evento.
—> No : ir al siguiente evento (si hay sub-eventos, se omitirán).

Esto está un tanto simplificado. Construct 2 proporciona muchas características en sus eventos que nos permitirán cubrir muchas cosas diferentes que bien podrás llegar a necesitar. Sin embargo, por ahora, esta es una buena forma para tratar de entender su funcionamiento.

Tu primer evento

Queremos que el jugador siempre esté orientado hacia el ratón. Se parecerá a esto cuando hayas terminado:

Recuerda que un «tick» se ejecuta cada vez que se redibuja la pantalla, por lo que si hacemos que el jugador mire el ratón a cada tick, parecerá que siempre está mirando al ratón.

Vamos a empezar a hacer este evento. Haz doble clic en un espacio en la hoja de eventos (Event Sheet). Esto nos pedirá que agregues una condición para el nuevo evento.

Objetos diferentes tienen diferentes condiciones y acciones en función de lo que puedan hacer. También está el objeto System, que contiene las funcionalidades internas del Construct 2. Haz doble clic sobre el objeto Sistema como se muestra. El cuadro de diálogo nos mostrará una lista de todas las condiciones del objeto ‘System’:

Doble clic en la condición Every tick para insertarla. El cuadro de diálogo se cerrará y el evento se crea, sin acciones. Ahora debería tener este aspecto:

Ahora queremos añadir una acción para que el jugador mire al ratón. Haz clic en el vínculo Agregar acción a la derecha del evento. (Asegúrate de tener Add action en el enlace, no Add event que está por debajo del cuadro de eventos o añadirás otro evento completamente diferente) El cuadro de diálogo Agregar acción aparecerá:

Al igual que con la adición de un evento, tenemos nuestra misma lista de objetos para elegir, pero esta vez para añadir una acción . Trata de no confundirte entre la adición de condiciones y la adición de acciones! Como se muestra, haz doble clic en el objeto de jugador , porque es el jugador el que queremos que vea el ratón. La lista de acciones disponibles en el objeto Jugador aparece:

Observa cómo el jugador tiene sus propias acciones en el movimiento » 8 Direction». Nosotros no tenemos que preocuparnos de esto, por ahora.

En lugar de ajustar el ángulo del jugador a un número de grados, es conveniente utilizar el ángulo Set angle towards position. Esto calculará automáticamente el ángulo desde el jugador para coordinar las coordenadas en X y Y .Haga doble clic en Set angle towards position.

Construct 2 ahora tiene que saber la coordenada X y la coordenada Y para
coordinar al jugador en:

Estos se denominan parámetros de la acción. Las condiciones pueden tener parámetros también, pero Every tick no los necesita.

Queremos establecer el ángulo hacia la posición del ratón. Este dato nos lo puede proporcionar el objeto ratón. Introduce Mouse.X para X , y Mouse.Y para Y . Son las llamadas Expresiones . Son como las sumas que se calculan. Por ejemplo, también se puede introducir Mouse.X + 100 o sin (Mouse.Y) (aunque estos ejemplos en particular, no nos serían muy útiles, en nuestro caso). De esta manera puedes utilizar cualquier dato de cualquier objeto o para elaborar parámetros en las acciones y condiciones. Es muy potente, y una especie de fuente oculta de gran parte de la flexibilidad de Construct 2.

¿Recibió un error que decía «El ratón no es un nombre de objeto»? Asegúrese de agregar el objeto Mouse! Volver a la página 2 y comprobar en «Agregar los objetos de entrada» .

Tal vez te preguntes sobre cómo recordar todas las posibles expresiones disponibles. Por suerte, ahí está el «panel de objetos», que deberías ver flotando un poco más arriba. Por defecto, se presenta de forma tenue para evitar distracciones.

Pasa el ratón sobre él o clic en él y se hará completamente visible. Esto hace las veces de algo similar a un diccionario que contiene todas las expresiones a nuestra disposición, con sus descripciones, que nos vendrán muy bien como recordatorio. Si haces doble clic en un objeto, verás todas sus expresiones en la lista. Si haces doble clic en una expresión esta se insertará automáticamente, lo que evita tener que escribirla.

De todos modos, haz clic en Done en el diálogo de parámetros. La acción se añade! Como se vio antes, debería tener este aspecto:

Ahí está tu primer evento! Prueba a ejecutar el juego y

el jugador ahora debe ser capaz de moverse como antes, pero siempre de cara al ratón. Este es nuestro primer evento de funcionalidad personalizada.

Agregando funcionalidad al juego

Si cada evento es descrito con tanto detalle como antes, va a ser un tutorial muy largo. Vamos a hacer una breve descripción para los próximos eventos. Recuerda, los pasos para agregar una condición o acción son:

1. Doble clic para insertar un nuevo evento o clic en Añadir acción si se trata de una acción.
2. Doble clic en el objeto de la condición / acción correspondiente.
3. Doble clic en la condición / acción que se desea.
4. Introduce los parámetros, si son necesarios.

De ahora en adelante, los eventos se describirán con el objeto, seguido por la condición / acción, seguido de los parámetros. Por ejemplo, el caso anterior quedaría como sigue:

Añadir condición System -> Every tick 
Añadir acción Player -> Set angle towards position -> X: Mouse.X , Y: Mouse.Y

Hacer que el jugador dispare

Cuando el jugador haga un clic de ratón se debe disparar una bala. Esto se puede hacer con el Spawn an object action en el Player, que crea una nueva instancia de un objeto en la misma posición y ángulo. The Bullet movement que agregó anteriormente para hacerla ir hacia adelante. Haz el siguiente evento:

Condiciones: Mouse -> On click -> Left clicked (por defecto)
Acción: Player -> Spawn another object -> Para Objeto: , elije el objeto Bullet. Para la capa, poner 1 («Main» es la capa 1 – recuerda que Construct 2 cuenta desde cero). Deja image point* en 0.

El evento debe parecerse a esto:

Si pruebas el juego, te darás cuenta de que las balas disparan desde el centro del jugador, en lugar de desde el extremo de la pistola. Vamos a arreglarlo mediante la colocación de un punto de imagen en el extremo de la pistola. (Un punto de imagen es sólo una posición en una imagen a partir de la cual se pueden generar objetos.)

Haz clic sobre el jugador, bien en el proyecto o en la barra de objetos y selecciona Editar animaciones (Edit animations).

El editor de imágenes para el jugador reaparece. Haz clic en la herramienta origin and image points:

… Y el diálogo de la herramienta se abrirá:

Observa como el punto «Origin» aparece como un punto rojo. Ese es el «punto caliente» o «punto de giro» del objeto. Si haces girar el objeto, éste girará pivotando sobre el origen. Queremos añadir otro punto de imagen nos indicará la salida de las balas, así que haz clic en el botón verde añadir . Un punto azul aparece – ese es nuestro punto de imagen. Haz clic izquierdo en el extremo de la pistola del jugador para colocar el punto de imagen allí:

Cierra el editor de imágenes. Haz doble clic en la accion Spawn an object que hemos añadido antes, y cambia el Image point a 1. (El origen es siempre el punto de imagen 0 y recuerda que Construct 2 cuenta desde cero.) El evento debe parecerse a la imagen de abajo – fíjate como ahora pone image point 1:

Prueba el juego. Las balas ahora disparan desde el extremo de la pistola! Las balas todavía no hacen daño. Sin embargo, ya puedes darte cuenta de que una vez que llegues a familiarizarte con el sistema de eventos, podrás añadir funcionalidades rápidamente.

Vamos a hacer que las balas puedan eliminar a los monstruos. Añadir el siguiente evento:

Condiciones: Bullet -> On collision with another object -> pick Monster .
Acción: Monster -> Destroy 
Acción: Bullet -> Spawn another object -> Explosión , layer 1 
Acción: Bullet -> Destroy

El efecto Explosión

Ejecutar el juego y tratar de disparar a un monstruo. Si atinamos a darle, veremos aparecer una explosión con un molesto borde negro!

Tranquilo que el juego no va a quedar con esta imagen tan fea. Vamos a corregir esto.
Clic en el objeto Explosión en la barra de objetos en la parte inferior derecha o en la barra del proyecto (en la misma zona que la barra de capas). Sus propiedades aparecen en la barra de propiedades de la izquierda. En la parte inferior, cambia su propiedad Effect a Additive. Ahora prueba el juego de nuevo.

Explosión con efecto aditivo:

¿Por qué funciona esto? Sin entrar en demasiados detalles, las imágenes comunes se «depositan» en la parte superior de la pantalla. Con el efecto aditivo, cada píxel es añadido (sumado) al píxel (del fondo de tiles)que está justo por debajo. El valor del pixel de color negro tiene valor cero, por lo que en este caso, no se ha añadido nada – el fondo queda como estaba. En el caso de colores más brillantes se refuerzan los colores del fondo, por lo que estos se presentarán con más intensidad. Esto nos resultará muy útil para explosiones o efectos de luz.

Haciendo monstruos un poco más inteligentes

De momento, los monstruos se limitan a avanzar hacia la derecha saliendo del layout. Vamos a hacer que su movimiento sea más interesante. En primer lugar, vamos a empezar por dotarles de un ángulo (dirección)inicial aleatorio.

Condiciones: System -> On start of Layout 
Acción: Monster -> Set angle -> random(360)

Como no nos interesa que se salgan del área de juego para perderse por siempre jamás, vamos a procurar que se mantengan dentro del layout. Vamos a hacer que al intentar abandonar el layout vuelvan hacia su interior y además haremos que se dirijan hacia el jugador. Por lo tanto, se trata de conseguir dos cosas: por un lado, mantenerlos dentro del escenario y por otra si el jugador se mantuviese quieto, van a ir directamente a por él.

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

Prueba el juego. Si esperas un rato, verás como los monstruos se mantienen dentro del área de juego y que se mueven en todas direcciones. No es gran cosa como inteligencia artificial, pero algo es algo!

Ahora, supongamos que queremos que el monstruo sufra cinco impactos de bala antes de que muera, en lugar de morir al primero como hasta ahora. ¿Cómo podemos hacer eso? Si sólo hacemos uso de un contador de «Salud», entonces tan pronto como un monstruo muera, morirán todos los demás. En su lugar, tenemos que hacer que cada monstruo tenga su propio contador de salud . Para ello nos valdremos de las variables de instancia.

Las variables de instancia

Las variables de instancia permiten que cada monstruo almacene su propia salud. Una variable es simplemente un contenedor que almacena un valor que puede variar según las circunstancias. En el caso de «variables de instancia» se asignan por separado a cada instancia, de ahí su nombre.

Vamos a asignar una variable de instancia health (salud) a nuestro monstruo. Recordar que sólo tenemos un tipo de objeto «monstruo» y lo que aparece en pantalla son instancias de ese objeto. Por lo tanto, haz clic en el monstruo en la barra de objetos o en el barra de proyecto. También podrías regresar al layout y seleccionar un objeto monstruo. El caso, es mostrar las propiedades del monstruo en la barra de propiedades. Doble clic sobre Instance variables > Add/edit.

Aparecerá el cuadro de diálogo Variables de Instancia. Es similar al cuadro de diálogo de Comportamientos que hemos visto antes, pero en su lugar este nos permite añadir y cambiar las variables de instancia del objeto. Clic sobre la cruz Add New para añadir una nueva variable de instancia.

En el cuadro de diálogo que aparece, escribe health (salud) en el nombre, deja Type como Number y en Initial value introduce 5 (como se muestra). De este modo se le da una salud 5 inicial a cada monstruo. Al recibir un impacto de bala le vamos a restar 1 de salud y cuando esta llegue a cero, lo daremos por muerto, por lo tanto lo destruiremos.

Una vez hecho, clic en Aceptar. Ten en cuenta que la variable aparece ahora en el cuadro de diálogo ‘variables de instancia’ y también en las propiedades del monstruo. (Puedes de esta forma, cambiar rápidamente los valores iniciales en la barra de propiedades, pero para añadir o eliminar variables tendrás que hacer clic en Agregar / Editar.)

Cambiando los eventos

Volvamos al editor de eventos. De momento, los monstruos quedan muertos difuntos, tan pronto como reciben un impacto de bala. Vamos a cambiar esto, restando a su «salud» una unidad tras cada impacto.

Vamos a editar el evento Bullet: on collision with Monster. Puedes ver que tenemos como acción el «destruir monstruo». Vamos a sustituir esto por «restar 1 a la salud». Haz clic con el botón derecho en esta acción y clic en Sustituir .

Nos aparece el mismo cuadro de diálogo que ya vimos al añadir una nueva acción. En esta ocasión se va a sustituir por la acción que vamos a escoger a continuación. Escoge Monster – Subtract from (en la categoría variables de instancia) -> variable de instancia «health» y como valor ponle 1 . Clic en Done. La acción quedará como sigue:

Ahora, cuando los monstruos sean alcanzados por una bala, perderán una unidad de salud y la bala explotará (demasiada explosión en este caso, hay que reconocerlo). Pero nos falta por hacer un evento para que los monstruos queden destruidos al agotarse su salud. 
Añadir, por tanto, otro evento:

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

¿Por qué «menor o igual que 0» en lugar de «igual a 0»? Supón que tras el impacto en lugar de restarle una unidad de vida, le restamos 2 (por una mejora del arma, por ejemplo). Como la vida inicial de cada monstruo la hemos establecido en 5, la salud seguiría la siguiente serie a cada impacto: 5 , 3 , 1 , -1 , -3 … como vemos, en ningún momento su salud es exactamente igual a cero , por lo que la condición no se cumpliría y nuestro monstruo no moriría! Por lo tanto, es una buena práctica utilizar «menor o igual» para asegurarnos de la muerte de los monstruos al agotarse su nivel de salud.

Prueba el juego. Ahora verás como los monstruos desaparecen, al ser alcanzados 5 veces!
Y esto para cada monstruo, cada uno de forma independiente del resto.

Llevando la puntuación

Vamos a crear un sistema de puntuación de modo que el jugador pueda saber lo bien que lo está haciendo y cual es su puntuación final. Vamos a necesitar de una nueva variable para esto. La llamaremos «Score» (puntuación). Se podría pensar en usar una variable de instancia y asignarla al jugador. En principio no parece mala idea, pero tenemos que tener en cuenta que este tipo de variables están asignadas a un objeto. Si el objeto desaparece, también lo hará su variable. En nuestro caso, al morir el jugador, nos quedaremos sin puntuación.

En su lugar, podemos usar una variable global. Al igual que una variable de instancia, una variable global puede almacenar valores bien sean de texto o números. La ventaja de este tipo de variables es que no depende de ningún objeto, ni tampoco depende de ningún layout, de modo que estará a nuestra disposición para todos los niveles de nuestro proyecto. De ahí el nombre de «global». Se trata en definitiva de variables asignadas al proyecto.

Haz clic derecho en un espacio en blanco, en el editor de eventos. Selecciona Add global variable (Añadir una variable global).

Introduce Score como nombre. Los otros parámetros, dejarlos como están por defecto. Se creará una variable global de tipo numérico con valor inicial 0.

Ahora la variable global aparece en una línea en la hoja de eventos. Sin embargo, como ya hemos dicho, será accesible desde cualquier otra hoja de eventos de cualquier layout para todo el proyecto.

Nota: también existen variables locales que tienen un acceso más restringido, pero que ni usaremos ni trataremos en este tutorial.

Vamos a darle al jugador un punto por cada monstruo que aniquile. En nuestro evento «Monster: health less or equal 0» (cuando el monstruo muere), hacer clic en Añadir acción y escoge System -> Add to (en variables globales y locales) -> Score , value 1. El evento nos quedará:

Con esto, nuestro juego, queda dotado de un sistema de puntuación, que inicialmente parte de 0 y que se verá incrementado en una unidad por cada monstruo que muera en manos de nuestro jugador. Todavía no lo podemos ver, pero lo vamos a subsanar a continuación, haciendo que aparezca en pantalla a través de un objeto de texto.

Creación de un heads-up display (HUD)

Un HUD (pantalla de información) es la interfaz de usuario, que nos mostrará en pantalla, la salud de nuestro personaje, su puntuación y demás informaciones propias del juego, útiles para el jugador. Vamos a hacer un HUD muy simple, con un objeto de texto.

El HUD debe permanecer en el mismo sitio de la pantalla, por mucho que esta se desplace a través del layout. Una forma sencilla de hacerlo es poner todos los objetos de nuestro HUD en una capa y ajustar su paralaje a cero. El Parallax(paralaje) es una propiedad de las capas, que permite que estas se desplacen a distintas velocidades. Muy útil para hacer que las capas del fondo se muevan a menor velocidad que las que están en primer plano, lo que nos va a dar una sensación de profundidad que aporta cierto realismo al movimiento de un personaje a través de un escenario. Lo habrás visto en infinidad de juegos. El caso es que si ajustamos el paralaje a cero, la capa permanecerá fija lo cual nos viene muy bien para nuestro HUD.

Volvamos a la barra de capas que ya hemos usado con anterioridad. Añadir una nueva capa llamada HUD . Asegurarse de que esté en la parte superior y seleccionarla (recuerda que esto la convierte en la capa activa). La barra de propiedades nos mostrará sus propiedades. Basta con ajustar la propiedad Parallax a 0, 0 (para sus ejes X e Y).

Doble clic sobre el layout de esta capa para añadir un nuevo objeto. Esta vez escoger el objeto texto . Colócalo en la esquina superior izquierda del layout. Si el color del texto es el negro, va a ser difícil de ver, de modo que vamos a cambiar alguna de sus propiedades. Vamos a ponerlo en negrita, cursiva, color amarillo y vamos a escoger un tamaño de letra ligeramente más grande. Es posible que el recuadro de texto, nos quede algo pequeño, por lo que lo adaptaremos a nuestras necesidades. 
Nos quedará algo parecido a esto:

Volvamos a nuestra hoja de eventos. Lo único que tenemos que hacer, es que este texto nos muestre en todo momento la puntuación de nuestro juego. En el evento Every tick que ya teníamos, vamos a añadir la siguiente 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, ponle:

«Score:» & Score

La primera parte ( «Score:» ) significa que el texto que se nos va a mostrar en pantalla empezará siempre con Score: . La segunda parte ( Score ) es el valor actual de la variable global Score. Tenemos por tanto por un lado un valor de tipo texto y por otro un valor de tipo numérico. Y queremos que los dos nos aparezcan en la misma linea. Para ello tenemos el & que une ambas variables en un texto único.

Prueba el juego, recorre el escenario y dispara a algunos monstruos. Verás como se muestra la puntuación y esta permanece en el mismo lugar de la pantalla!

Toques finales

Estamos a punto de terminar. Vamos a añadir algunos toques finales.

En primer lugar, vamos a hacer que algunos monstruos aparezcan regularmente, porque una vez que se ha aniquilado todos los monstruos no hay nada más que hacer. Vamos a crear un nuevo monstruo cada 3 segundos. Añadir un nuevo evento:

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

Por lo tanto, los monstruos se crearán en un punto que tendrá por coordenada X 1400 , cerca del límite derecho de nuestro layout y una coordenada Y random (1024) que abarca la altura de nuestro «layout». En resumen, se van a crear en la parte derecha de nuestra área de juego a distinta altura.

Por último, vamos a hacer que el jugador pueda morir.

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

Conclusión

Felicitaciones, has hecho tu primer juego HTML5 con el Construct 2! Si tu tienes un servidor y quieres mostrar tu trabajo, haz clic en Export en el menú file. Construct 2 guardará todos los ficheros del proyecto en una carpeta de tu ordenador. Podrás subir esta carpeta a un servidor o usar Dropbox o similar y compartirlo.

Has aprendido algunos aspectos básicos de Construct 2: Insertar objetos, usar capas, comportamientos, eventos y mas. Estos conceptos, constituyen unos buenos cimientos que te permitirán profundizar en el aprendizaje del Construct 2! Sigue explorando y experimenta con estas características y mira lo que puedes hacer con ellas.

Una última cosa 
Trata de descargar el último tutorial actualizado. He añadido algunas características extra como una pantalla de «Game Over» y monstruos que se aceleran gradualmente. Con lo que has aprendido en este tutorial, no te resultará difícil de comprender como funcionan estas novedades. Encontrarás muchos comentarios describiendo como funciona.

Muy bien! Si tienes algún problema o crees que alguna parte de este tutorial puede ser mejorada, deja algún comentario en el foro. Veremos que podemos hacer!

Por último, si te ha gustado este tutorial y crees que a algún conocido le pueda gustar , ¿por qué no le envías un enlace a este tutorial? No temas, no le hará ningún daño! 🙂

Lecturas a mayores 
¿Quiere agregar música y efectos de sonido? Mira sonidos y música en el manual.

Es muy probable que puedas estar interesado en seguir el tutorial alternativo de iniciación que versa sobre cómo crear un juego de plataformas.

Si quieres saber más acerca de cómo trabajan los eventos en Construct 2, consulta la sección cómo trabajan los eventos, en el manual. Es muy recomendable para poder avanzar más rápido en tus propios proyectos!

No te olvides que está a tu disposición, para mayor información, el manual del Construct 2