Guía introducctoria al Construct 2

FUNDACIÓN OMAR DENGO
Guía introducctoria al
Construct 2
25/03/2014
[Escriba aquí una descripción breve del documento. Normalmente, una descripción breve es un
resumen corto del contenido del documento. Escriba aquí una descripción breve del documento.
Normalmente, una descripción breve es un resumen corto del contenido del documento.]
Introducció n
Construct 2 es un software para Windows que nos permite desarrollar juegos de calidad en HTML5
de una forma fácil y rápida, sin necesidad de experiencia en programación.
Con este software podemos crear juegos a través de una interfaz intuitiva, la cual nos ofrece
muchas opciones y nos permite controlar los eventos, que es donde se va desarrollando el juego.
Posee un motor de efectos físicos que nos permite agregar esos efectos a los juegos.
Una vez que terminamos el juego, antes de distribuirlo, podemos probarlo en móviles y tabletas
utilizando Wifi.
La calidad de los juegos por supuesto dependerá de nuestra imaginación y habilidad.
Ofrece 3 licencias: Free, Standard y Business. La primera con limitaciones, la podemos descargar y
usar por el tiempo que se nos ocurra, pero no podemos comercializar los juegos. La “Standard”
ofrece más características y nos permite comercializar los juegos como desarrolladores
particulares. Por último la licencia de “Business” posee las mismas características de la versión
“Standard” pero su licencia es para empresas dedicadas al desarrollo, además de permitir
comercializar los juegos sin ningún tipo de restricciones.
Podemos descargar la versión gratuita del software desde la web oficial de su editora Scirra
(https://www.scirra.com/) y ponernos a crear nuestro juego en cuestión de minutos. El programa
sigue una filosofía de arrastrar y soltar, de forma que si queremos añadir un fondo o un sprite a
nuestra escena, no hay más que arrastrarlo directamente desde la carpeta donde se encuentra.
1
Có mo hacer un juego de plataformas
Instalando Construct 2
Si no lo has hecho todavía, baja una copia de la última versión de Construct 2 desde el siguiente
enlace: http://www.scirra.com/construct2/releases/new
Construct 2 es sólo para Windows, pero los juegos que puedes hacer corren en cualquier
plataforma, ya sea Mac, Linux, iPad y Android. Construct 2 puede también ser instalado en en
cuentas de usuario limitadas. También es portátil, así que puedes instalarlo por ejemplo en una
memoria USB y llevarlo contigo a donde quieras.
Este tutorial usa los sprites de Jungle Platformer este paquete lo puedes descargar desde el
apartado de recursos en nuestro sitio web.
Comenzando
Una vez listo, abre Construct 2. Haz click en File y selecciona New.
Creación de nuevo proyecto
En el cuadro de diálogo New Project (Nuevo proyecto) no necesitas cambiar nada. Sólo haz click en
Create project (Crear proyecto). Construct 2 nos conservará el proyecto completo en un único
archivo .capx. Ahora te aparecerá un lienzo vacío (Layout), esta es la vista de diseño donde
crearás y posicionarás los objetos. Piensa en este lienzo como si fuera el nivel de un juego, o una
pantalla de menú inicial. En otras herramientas, esto puede ser llamado “cuarto”, “escena” o
“cuadro” (room, scene or frame).
2
Tamaño del lienzo
Ante todo necesitamos que este lienzo sea un poco más grande que lo normal. Click izquierdo en
cualquier lugar del lienzo y en la “barra de propiedades” (Properties Bar) aparecerán las
“propiedades del lienzo” (Layout Properties). Cambie el tamaño a 4000 x 2048.
Vamos a colocar una imagen tipo “azulejo” en el fondo del lienzo. Doble-click en cualquier lugar
del lienzo. Nos aparece la opción Insert Object. Doble click en el objeto Tiled Background para
insertarlo.
El Mouse se vuelve una cruz. No importa donde lo coloques inicialmente, solo le das click
izquierdo en algún lugar del lienzo. Se abre entonces el “Editor de imagen” Image editor de tal
forma que puedas colocar la imagen. Vamos entonces a importar el archivo Background
Image\Background.png desde el paquete de sprites. Click en Open para importar una imagen.
3
Selecciona el archivo Background Image\Background.png y entonces cierra el editor de imagen.
Ahora verás parte de la imagen de fondo en el lienzo.
Necesitamos cubrir todo el fondo. Comprueba que que está seleccionado (click izquierdo en el
lienzo) y sus propiedades aparecerán en la Properties Bar. Para cubrir el lienzo completo, coloca su
posición (Position) a 0, 0 y su tamaño (Size) to 4000, 2048 (el mismo tamaño que el lienzo).
La imagen del fondo es bastante grande, así que es difícil verla toda de una vez. Vamos a hacer
zoom out para mirarla más. Presiona Control y scroll the mouse wheel down para alejar la vista.
Alternativamente, presiona View - Zoom out en la cinta un par de veces. Podrás entonces ver el
lienzo complete, un poco como esto.
4
Fíjate que el contorno de trazos en la parte superior izquierda es el tamaño de la ventana en
comparación con el resto de la disposición. Presiona Ctrl 0 para hacer zoom back to 100%, or View
- Zoom to 100% en la cinta. Probablemente has hecho zoom en el medio del lienzo. Use las barras
de desplazamiento para navegar desde la parte superior hasta la esquina izquierda del lienzo.
También puedes hacer click y arrastrar el botón medio del mouse, para panear alrededor del
lienzo. O haz click en la barra espaciadora para conseguir lo mismo si no tienes un mouse con
botón en el centro.
Añadiendo una nueva capa
De acuerdo, ahora vamos a añadir algunos objetos nuevos. Sin embargo, si notamos al pulsar click
derecho sobre el lienzo seleccionamos el fondo. Para evitar esto vamos a usar el sistema de capas.
Los layouts(lienzos) pueden consistir en multiples capas (layers), que puedes usar para agrupar
objetos. Piensa en las capas como en hojas transparentes puestas una encima de otra, con objetos
pintados en cada hoja. Esto te permite facilmente orgazinar los objetos que aparecen encima de
otros, además las capas pueden ocultarse, bloquearse, aplicarles efecto de parallax y más cosas.
Por ejemplo, en este juego, queremos que todo se muestre por encima del fondo, así que
podemos crear otra capa para nuestros objetos.
Para administrar las capas, haz click en la pestaña Layers Layers tab, que normalmente está junto a
la pestaña de Proyecto Proyect bar.
5
Debes estar viendo la capa 0 Layer 0 en el listado (Construct2 cuenta desde cero, porque así
trabaja mejor, como en la programación). Haz click en el icono del lápiz y renombra la capa a
Fondo, ya que es nuestra capa de fondo. Ahora haz click en el icono + 'add' para añadir una nueva
capa para nuestros objetos. Vamos a llamarla Principal. Finalmente, si haces click en el pequeño
icono del candado al lado de la capa Fondo, esta capa se bloquea. Lo que significa que no se podrá
seleccionar nada que haya en ella. Esto es muy conveniente para nuestro fondo de azulejos, que
puede ser fácilmente seleccionado sin querer, y que no necesita volver a ser modificado de nuevo.
De todos modos, si necesitaras hacer cambios, sólo tienes que hacer click en el icono del candado
de nuevo para desbloquearla.
Las casillas de checkbox te permiten ocultar las capas en el editor, pero no necesitamos hacer esto
de momento. Tus capas deberían verse así en este momento:
Ahora, asegutate de que la capa “Principal” está seleccionada en la barra de capas. Esto es
importante- la capa seleccionada es la capa activa. Todos los objetos nuevos que se insertan se
insertan en la capa activa, así que si no está seleccionada, podríamos insertar accidentalmente los
objetos en una capa equivocada. La capa activa se muestra en la barra de estado, además se
muestra en un tooltip cuando colocamos un nuevo objeto - merece la pena echarle un ojo a esto.
Añadiendo tiles*
*Nota: Tiles se debe traducir como azulejo o valdosa en español, pero aquí se refiere a las piezas
que juntas te permiten formar una plataforma (lo verás claramente en las imágenes). Como no me
parecía muy correcto llamar a esto "azulejo" he decidido dejarlo como tile, que hace más
referencia a una pieza de mosaico.
El paquete Jungler Platformer tiene un set de tiles en la carpeta Tiles\Tiles.png. Vamos a
importarlos como un objeto sprite y usarlo como un objeto tile.
Realizamos los mismos pasos que utilizamos el fondo de azulejo, doble-click y en algún punto del
layout e insertas el nuevo objeto. Esta vez escoger Sprite. El ratón se transforma en una cruz de
nuevo. Hacer click en algún lugar en el centro de la pantalla.
6
El Editor de Imágenes se abre, con algunas ventanas extras, porque los Sprites pueden ser
animados. De todos modos, nosotros no vamos a ejecutar la animación (su velocidad será 0). Lo
que vamos a hacer es poner un tile diferente en cada frame de la animación. Entonces podremos
modificar el tile que se muestra simplemente cambiando el frame de la animación.
Click derecho en algún punto de Los frames de la animación en el panel de abajo, y selecciona
Import sprite strip.... Esto nos permite cortar imágenes para las animaciones, que también sirve
para los mapas de tiles.
Se abre el dialogo de apertura de archivo. Selecciona el archivo Tiles\Tiles.png del paquete de
sprites. Construct 2 necesita saber cuántos tiles hay en la imagen. Te habrás dado cuenta que
Tiles.png" es una cuadricula de 12x12 tiles. Introduce 12 y 12 y haz click en OK.
Dale a Construct 2 un momento para cortar los tiles. Ahora deberías tener los 144 tiles importados
como frames de animación. No necesitamos el primer frame vacío, así que click derecho sobre él y
selecciona “delete” para borrarlo.
7
Querrás cambiar el tamaño de la ventana Animation Frames y hacerla más grande para ver mejor
tus tiles. Además, puedes hacer click derecho en un lugar y cambiar el tamaño de las miniaturas
(thumbnails) a Large si prefieres miniaturas más grandes.
Por defecto la velocidad de la animación es 5, lo que significa que los tiles iran cambiando.
Queremos que los tiles se queden quietos en su frame, así que asegurémonos de que la velocidad
de animación sea 0. Selecciona la animación Default en la ventana Animations.
La barra de propiedades ahora te muestra las propiedades de la animación. Pon la propiedad
Speed (velocidad) en 0.
Ahora los tiles no iran cambiando de imagen, se quedan en el mismo frame. Cierra el editor de
imagen haciendo click en la X de una de las tres ventanas flotantes. Tu Sprite tile ahora debe estar
en el layout.
Creando un escenario con tiles
Date cuenta que el objeto Sprite tiene una propiedad llamada Initial frame. Podemos usarla para ir
cambiado de tile. Selecciona el objeto Tile y cambia su initial frame a 1:
8
Notarás que la imagen cambia para mostrarnos el tile que hay en el frame 1 de la animación. Así
es como podemos ir poniendo diferentes tiles en nuestro escenario.
Manten la tecla Control y haz click y arrastra el tile. Crearás otro objeto tile. Hazlo de nuevo y
tendrás tres tiles en fila. Selecciona el del medio y pon su initial frame en 10. Haz lo mismo para el
de la derecha, pero haz que su initial frame sea el 13. Ahora debes tener algo similar a esto:
Si te preguntas como saber que numero de frame corresponde a cada tile, simplemente haz doble
click en el objeto tile. El editor de imagen se abre de nuevo con la ventana de animación donde
puedes comprobarlo. Recuerda que puedes hacer control y arrastrar en un tile para duplicarlo, y
así no tener que escribir su initial frame.
Habilitando Ajustar a rejilla (snap to grid)
Alinear los tiles a mano puede ser un dolor de cabeza. Puedes habilitar la rejilla para hacerlo más
fácilmente. En la barra superior, haz click en View y habilita Snap to Grid. La rejilla por defecto
tiene un tamaño de 32x32, lo cual está bien. Nuestros tiles son de 128x128 que es múltiplo de 32.
Esto nos hará más sencillo ajustar los tiles uno al lado del otro y nos sigue dando cierta libertad de
posicionamiento.
Intenta arrastrar los tiles ahora. Notarás que se ajustan a una rejilla de 32x32. Ahora debe ser
sencillo ajustar tres tiles juntos
Añadiendo el sprite del jugador
Vamos a añadir un sprite para el jugador. Al igual que antes, damos doble clic en un espacio en el
layout para insertar un nuevo objeto Sprite. Cuando la cruz aparezca, haga clic en algún lugar por
encima del fondo. Aparecerá el Editor de imágenes.
9
Vamos a importar la tira de sprites para la animación de cuando el jugador está inactivo. Al igual
que antes, haga clic derecho en la ventana de cuadros de animación y seleccione la opción Import
sprite strip....
Elegimos el archivo de la carpeta Player\Idle\Idle.png. Hay que tener en cuenta que es la tira de
sprites completo, no uno de los fotogramas de la animación. También podemos importar la
secuencia utilizando frames individualmente desde la opción “Import frames…”, pero por esta vez
vamos a realizarlo a esta forma.
Debido a que la tira no es cuadrada, Construct 2 realiza una suposición del número de fotogramas.
Debe identificar que hay 11 fotogramas. Haga clic en Aceptar y los frames serán importados.
*Nota: todavía tenemos el marco en blanco de forma predeterminada en el inicio. Hacemos clic
derecho sobre el frame y lo eliminamos. Ahora d tener una secuencia de 11 cuadros para la
animación de inactividad del jugador.
Recortar un Sprite.
Notaremos que el jugador tiene un poco de espacio transparente vacío a su alrededor. Esto es
común después de la importación de imágenes. Sin embargo, es una mala práctica que dejarlo
aquí - desperdicia memoria y puede hacer que las colisiones sean menos precisas.
10
Hay una manera rápida de deshacerse de él. Mantenemos pulsado la tecla SHIFT y pulsamos el
botón Recortar en la barra de herramientas de edición de imágenes.
Si no mantienes la tecla Shift, sólo ese frame se recortará, por lo que debes asegúrate de que has
presionado la tecla Shift al hacer clic en él para recortar toda la animación. La imagen del
personaje del jugador debe estar bien recortada, sin espacio innecesario.
Ajuste del punto de origen
El punto de origen es el centro, o "punto caliente", del objeto. En los juegos de plataformas es
mejor tener el origen en los pies del jugador. Esto significa que si la animación cambia la altura
como parte del juego, crecerá del suelo hacia arriba en cambio, si lo dejamos en el centro crecerá
tanto hacia arriba como hacia abajo y quedará medio cuerpo debajo del suelo.
Para definir el origen, haga clic en el origen y la herramienta Set puntos de imagen en el editor de
imágenes.
Notaremos un icono circular sobre una cruz sobre nuestro personaje. Ese es el origen. Puede hacer
clic en para cambiarlo. Sin embargo, esta vez vamos a ubicarlo en la parte central inferior.
11
Podemos asignarlo rápidamente está pulsando la tecla 2 en el teclado numérico (si Bloq Num está
activado). Si usted no tiene un teclado numérico (por ejemplo, algunas computadoras portátiles),
puede hacer clic derecho sobre el punto de origen en la ventana Image Points y seleccione Quick
Assing -> Bottom.
Es una molestia para hacer esto para cada frame, pero por suerte hay otro atajo: en la ventana
Image Points, haga clic derecho sobre el punto de origen y haga clic en “Apply to whole animation”
(Aplicar a toda la animación).
Bucle de la animación
Haga clic en la animación por defecto en la ventana de animaciones. Cambiaremos el nombre a
Inactivo.
En la Barra de propiedades, cambiaremos la velocidad de la animación (Speed) a 9 y establecemos
la propiedad Bucle (Loop) en Yes.
12
Haga clic derecho en la animación “Inactivo” en la ventana de animaciones y seleccione Vista
previa (Preview). Usted debe ver el personaje que sube y baja con suavidad. ¡Ya está! Cierre la
vista previa de la animación y el editor de imágenes. Usted debe ver a su personaje en el Layout.
Cambiaremos el nombre del Sprite por “Personaje” en la barra de propiedades para llevar un
buen orden.
Añadir comportamientos (Behaviors).
Construir 2 viene con un montón de comportamientos (behaviors). Esto hace que los objetos
funcionen de manera pre-definida que a menudo nos ahorra un montón de tiempo. Es posible
realizar todo lo que los comportamientos hacen utilizando el sistema de eventos, pero a menudo
resulta difícil y requiere mucho tiempo. Es por eso que los comportamientos son realmente
prácticos para conseguir poner nuestro juego en marcha rápidamente.
El comportamiento de plataforma (Platform behavior) puede hacerse cargo de la complejidad de
los movimientos de plataforma por nosotros. Sin embargo, hay un dato importante para utilizarlo:
el comportamiento se debe aplicar a un objeto rectángulo invisible y al personaje del jugador
colocado en la parte superior. El comportamiento de plataforma funciona mucho mejor si el
objeto con el comportamiento no está animado, ya que el cambio de frame de la animación puede
hacer que el objeto en partes se pegue en una pared y hace que se confunda su comportamiento.
Además, evita situaciones de colisión tontas como cuando su personaje está colgando de una
cornisa por la nariz o algo que lo esté sosteniendo.
Así que tenemos que hacer un cuadrado invisible para el primer movimiento. Pulsamos doble clic
en el layout para agregar un nuevo sprite, y esta vez lo crearemos desde el editor de imágenes.
Pulsamos sobre el bote de pintura y seleccionamos un color que podamos identificar fácilmente
dentro del layout, esta vez escojamos el color azul, luego damos clic en cualquier parte del editor
de imagen. Debemos ver lo siguiente:
13
Para ahorrar recursos vamos a redimensionar esta imagen, pulsamos sobre el ícono de recortar
Al igual que antes, debemos tener el punto de origen en la parte inferior. Procedemos a darle clic
en configurar el punto de origen y puntos de la imagen, de nuevo pulsamos la tecla 2 del teclado
numérico (o use el menú de asignación rápida) para situar el punto de origen en la parte inferior.
Cambiaremos el nombre de este objeto a CajaJugador ya que es la caja para el movimiento y las
pruebas de colisión para el jugador. También, en la barra de propiedades, establezca la visibilidad
inicial en “Invisible” ya que no la queremos ver en nuestro juego.
14
También vamos a tener que darle el comportamiento de plataforma al objeto CajaJugador para
que la detección de colisiones sea más fiable. Pulsamos sobre “Behaviors”, luego en el diálogo
que aparece, haga clic en el botón con el ícono de cruz.
Damos doble clic sobre el behavior “Platform”.
Como porás notar, nuevas propiedades han aparecido en la barra de propiedades bajo el
comportamiento de plataforma. Puedes ajustar la configuración del movimiento como la
velocidad y la aceleración. Vamos a hacer que los saltos sean un poco más ágiles. Establecemos la
fuerza de saltar (Jump strength) a 1100 y la gravedad (Gravity) a 2500.
También queremos que la pantalla siga al jugador, así que hacemos clic en el botón de agregar
comportamientos (behaviors) y agregamos el “Scroll To”.
15
Una vez creados ambos comportamientos, cerramos el diálogo de behaviors.
El comportamiento de plataforma tiene que saber sobre qué objetos puede caer. El jugador caerá
a través de los objetos si no poseen el comportamiento sólido. Así que esta vez seleccione el sprite
Tile y añadimos un comportamiento, en esta ocasión debemos de elegir el comportamiento sólido.
Ahora tenemos que colocar el objeto Personaje sobre el objeto CajaPersonaje. Cambiamos a la
pestaña de eventos: “Event sheet 1”. Aquí es donde definimos la lógica del juego usando el
sistema de eventos de Construct 2.
Crear eventos
Los eventos funcionan comprobando si se han cumplido una serie de condiciones. Si es así, las
acciones se ejecutan.
En nuestro caso necesitamos colocar el personaje del jugador en la parte superior del objeto
CajaJugador. Para ello debemos actualizar su posición en “cada momento”.
Hacemos doble clic en un espacio en la Hoja Evento para crear un nuevo evento o pulsamos sobre
la opción “Add Event”.
16
Haga doble clic en el objeto Sistema, que contiene la condición “Every Tick”.
Ahora tenemos un evento vacío que se desarrollará sus acciones en “cada momento” (Every tick):
Ahora pulsamos sobre “Add Action”.
17
Queremos darle la posición a nuestro Personaje, así que damos doble clic en “Personaje”.
Damos doble clic en la opción “Set position to another object”. Cuando despliegue la ventana
pulsaremos sobre la opción <click to choose> y seleccionamos el objeto “CajaJugador”. Dejamos
el punto imagen (Image point) en 0 (que significa el punto de origen). Haga clic en "Done". El
evento final se debe ver similar a esto:
Lo que hemos realizado hasta el momento es colocar nuestro personaje sobre el objeto
“CajaJugador” y hacer que tome la posición del mismo ya que es el objeto con la propiedad de
plataforma. Para estar más claros y ver cómo funciona presionamos sobre el ícono de “Play” en la
parte superior de la ventana o en el botón “Run Layout”.
Muévete y salta con las flechas del teclado. Como verás, ¡ya tenemos nuestro juego básico de
plataformas en funcionamiento!
18
Si juegas un poco podrás notar algunos problemas:
1. El jugador no gira a la izquierda.
2. Todavía no hay ninguna otra animación.
Vamos a corregir estos problemas, primero haremos que el jugador gire a la izquierda y la
derecha.
Volveremos al Layout utilizando las pestañas en la parte superior. Doble clic en el layout para
insertar un objeto nuevo e insertamos el objeto Teclado (Keyboard). Este objeto nos permite que
interactuemos en el juego pulsando alguna tecla.
En lugar de crear una nueva animación entera con el jugador viendo hacia la izquierda, podemos
utilizar la acción predefinida del Construct2 llamada “Set Mirrored”, que reflejará
automáticamente el objeto para que parezca que se está viendo a la izquierda en lugar de la
derecha.
Cambiamos a la ficha de Evento. Vamos a hacer un nuevo evento "On left arrow key pressed" y la
acción "Set player mirrored".
Hacemos doble clic en un espacio para crear un nuevo evento o en el vínculo Agregar evento.
Haga doble clic en el objeto del teclado, ya que contiene la clave A condición presionada.
19
Nos aparecerá todas las condiciones del objeto del teclado. Haga doble clic en “On key pressed”
(Al pulsar una tecla).
Construir2 tiene que saber qué tecla se quiere detectar. Haga clic en el botón <click choose>,
pulsamos la tecla de flecha a la izquierda, a continuación, pulsamos Aceptar. Haga clic en Done.
Ahora necesitamos agregar la acción "Set player mirrored". Al igual que antes, primero tienes que
elegir el objeto, después tienes que elegir el tipo de condición o acción, entonces se introduce
algún parámetro. Pulsamos en el vínculo Agregar acción a la derecha del evento.
Hacemos doble clic Personaje.
Hacemos doble clic en “Set Mirrored” (Establecer espejo).
Deja el estado en “Mirrored” y haga clic en Done.
20
Ahora debemos tener lo siguiente:
Construct2 nos permite ahorrar trabajo copiando y pegando eventos, esto es sumamente útil
cuando se trata de las mismas acciones solo que por ejemplo cambia la tecla que lo efectúa.
Pulsamos clic derecho sobre el evento “On Left arrow pressed”, nos desplegará un menú, luego
pulsamos sobre la opción “Copy”. Otra opción es pulsar sobre el evento que queremos copiar y
una vez quede resaltado (de color amarillo) pulsamos las teclas Ctrl + C.
21
Ahora hay dos maneras en que podemos pegar nuestro evento, pulsando las teclas Ctrl + V o
pulsamos clic derecho sobre el mismo evento y luego en la opción “Paste”.
Bien, como vemos hay dos eventos iguales, ahora procedemos a cambiar el evento para que
también el personaje vea hacia la derecha. Pulsamos doble clic sobre el evento que pegamos,
luego que nos despliegue la ventana pulsamos sobre el botón “Left arrow” y lo cambiamos
pulsando la tecla derecha, pulsamos done. Ahora cambiamos la acción, pulsamos doble clic sobre
la acción “Set Mirrored” y en la opción State la cambiamos por “Not Mirrored”. Ahora deberíamos
ver nuestra hoja de eventos de la siguiente manera:
Ahora puedes probar el juego para que compruebes lo hecho hasta el momento.
Añadiendo más animaciones
Vamos a obtener el resto de las animaciones del jugado. En primer lugar, vamos a añadir más
plataformas para que el jugador pueda saltar con lo cual podemos ver más fácilmente cómo
funcionan las animaciones.
Vuelva a la vista del Layout donde se puede ver los objetos de los jugadores y del piso. Hacemos
clic y arrastramos para seleccionar tres baldosas. A continuación, pulse la tecla Control y arrastre
los azulejos para copiarlos. Haga esto un par de veces para crear algunas plataformas para que
nuestro personaje pueda saltar sobre ellas. Puede ser útil disminuir el zoom para realizar este
procedimiento.
22
Ahora que tenemos un lugar para saltar vamos a ir añadiendo el resto de las animaciones del
personaje.
Recuerde que estamos usando la acción “Set Mirrored” para voltear automáticamente el
personaje a la izquierda y a la derecha así que sólo tenemos que importar las animaciones para el
personaje que ve hacia la derecha.
Haga doble clic en el personaje en el Layout para abrir el editor de animaciones. Hay cuatro
animaciones que debemos importar:
1.
2.
3.
4.
InactivoACorrer
Correr
SaltarCorriendo
SaltarQuieto
Para cada una de estas animaciones, el proceso para añadir ellos es el siguiente:
1. Hacemos clic derecho en la barra de Animaciones (donde creamos la animación “Inactivo”)
y seleccione Agregar animación.
2. Introduzca el nombre de la animación. Es fácil de recordar si utilizamos nombres como
“InactivoACorrer”.
3. Damos clic izquierdo a la animación para cambiar a ella. Se debe tener un único frame
vacío.
4. Hacemos clic derecho en la barra de fotogramas de animación y seleccione la opción
“Import sprite strip”.
5. Busque la tira de imágenes correspondiente a la animación.
6. Compruebe que el número de imágenes sea correcto, haga clic en Aceptar.
7. Eliminamos el primer marco vacío.
23
8. En el primer frame, colocar el origen de los pies del jugador. Trate de conseguir que el
origen sea el mismo de la animación “Inactivo”. Aplicamos el origen a toda la animación
como lo realizamos en la animación “Inactivo” (haga clic en el punto de origen en el
cuadro de diálogo Puntos de Imagen y seleccione Aplicar a toda la animación).
9. Mantenga pulsado SHIFT y pulse Recortar para recortar todos los fotogramas importados
al mismo tiempo quitando las áreas transparentes innecesarias.
10. En la Barra de propiedades , asegúrese de que cada animación tiene las siguientes
propiedades:
Speed: 22 para SaltarQuieto, 15 para todo lo demás
Loop: Sí para Correr, No para todo lo demás
Hacemos esto para cada animación, al final tendremos cinco animaciones para el personaje.
Cerramos el editor de animaciones. Ahora necesitamos decirle al personaje que cambie a la
animación apropiada en el momento apropiado. Para ello, el comportamiento plataforma
proporciona disparadores de animación y eventos que se ejecutan cuando el personaje debe
cambiar la animación. Para ello tenemos que utilizar la acción “Set Animation” del personaje.
Recuerde que el comportamiento de la plataforma (con los disparadores de animación) se
encuentra en el objeto CajaJugador, después establecemos la animación del objeto Personaje.
También tenga en cuenta que tenemos una animación InactivoACorrer. Esto significa que cuando
empezamos a mover al personaje las animaciones deberían ir así:
Detenido: Inactivo
Cuando se comience a mover: InactivoACorrer
Cuando termina InactivoACorrer: Correr
Esto también es fácil de configurar con eventos.
Configuración de los eventos de animación
Para estos pasos esperamos que usted ya este familiarizado con el proceso de creación de un
evento:
1. Seleccione el objeto.
2. Seleccione la condición o acción.
24
3. Opcional: Introducir parámetros si la condición o acción tiene ninguna.
Cambiamos de nuevo a la pestaña de Eventos. En primer lugar, vamos a configurar la animación
InactivoACorrer, utilizamos la función del comportamiento de la plataforma que detecta si se
movió (“Platform On Moved”) del objeto CajaJugador, luego agregamos la acción Set Animation al
Personaje y en el cuadro en la opción Animation “InactivoACorrer”, debe quedar así:
Cuando la animación InactivoACorrer termina, debemos cambiar a la animación Correr. Podemos
hacer esto usando el evento “On Finished” del Personaje, luego acción Set Animation al Personaje
y en el cuadro en la opción Animation escribimos “Correr”, debe quedar así:
Si el personaje se mueve y luego se detienen tenemos que volver a la animación Inactivo.
Podemos hacer esto con el evento “On stopped animation” del objeto CajaJugador realizando los
mismos pasos de la acción anterior:
Ejecuta el juego. El Personaje ahora debería ser capaz de cambiar la animación cada vez que se
detiene y corre, además de la animación InactivoACorrer que se ejecuta cuando el personaje se
dispone a correr. Sin embargo, nos falta realizar las animaciones de los saltos. Tenemos dos
animaciones para los saltos, también debemos configurar una animación diferente dependiendo
de si el personaje está corriendo o no cuando salta. Esto se puede hacer con el siguiente evento:
25
Nótese aquí que hemos utilizado subeventos que aparecen con sangría debajo del evento “On
Jump”. Los eventos secundarios se ejecutan después de que el evento "padre" se ha ejecutado.
Para tener una idea más clara vamos a describir esta lógica: cuando la el evento “On Jump”
(cuando CajaJugador salta) comprueba si CajaJugador se está moviendo, si es así cambie la
animación del personaje a "SaltarCorriendo"; de lo contrario, cabiela a "SaltarQuieto".
Para hacer una sub-evento, haga clic en el evento principal y seleccione Agregar -> Agregar subevento, o selecciónelo y pulse la tecla S.
Para hacer que el evento anterior funcione correctamente, tenemos que invertir una condición
(Que aparece con una x roja). Las condiciones invertidas significan lo contrario de lo que afirman.
En este caso, el inverso de "Platform is moving" (Si la plataforma se está moviendo) sería "
Platform is NOT moving" (Si la plataforma no se está moviendo). Para invertir una condición,
primero hay que añadirlo normalmente, luego hacemos clic derecho sobre él y seleccionamos
“Invert” (Invertir). Una manera más sencilla es primero selecciónelo y luego pulse la tecla I.
Sólo hay una cosa más que debemos de hacer: el jugador permanecerá en su animación “Saltar”
después de saltar, incluso después de que toque la tierra, a menos que establezcamos la
animación de nuevo a “Inactivo” o “Correr”. Esto es muy similar a lo que realizamos
anteriormente: Seleccionamos el evento “Platform On landed” (Cuando la plataforma aterriza),
luego agregamos dos subeventos iguales a los anteriores, el único cambio es en la animación que
asignamos, “Correr” e “Inactivo”. Debe quedarnos de la siguiente manera:
Una vez que hemos realizado estos eventos, ejecutamos el juego.
¡Felicitaciones! ¡Hemos creado un personaje para el jugador totalmente animado! Observe cómo
las diferentes animaciones cambian si saltas cuando estas quieto, o saltas al correr. También veras
26
cómo continua corriendo después de tocar tierra, o bien ir queda “Inactivo” al detenerse,
dependiendo de si usted está en movimiento o no.
Pues bien, ¡es tiempo de crear un enemigo!
Agregando un enemigo
En este punto ya debes estar familiarizado con el proceso de agregar sprites y animaciones. Así,
que por consiguiente no se repetirán los pasos en su totalidad. Vamos a añadir un nuevo sprite
para crear un enemigo.
1.
2.
3.
4.
5.
6.
7.
8.
Añadir un nuevo objeto Sprite en el Layout.
Impórtalo de la carpeta Enemigos\TiraSpritesCaracol.
Eliminar el primer frame de la animación que esta vacío.
Establecer que la animación se repita (Loop), Speed (velocidad) igual a 15.
Establecer el origen hasta la base de la imagen del caracol, y aplicarlo a toda la animación.
Recortar todos los fotogramas (shift + cortar).
Cierre el editor de animación y cambiar el nombre del objeto para 'SnailEnemy'.
Colóquelo sobre una baldosa como se muestra.
Ahora queremos implementar la lógica siguiente :
- Si el jugador se queda en el caracol de lado, parpadean y se lastiman .
- Si el jugador salta en la parte superior del caracol , el caracol es asesinado.
Para hacer que el reproductor de flash, seleccione el jugador y añadir el comportamiento de
Flash. Recuerde seleccionar el jugador real, no el objeto PlayerBox (ya que es el jugador que
queremos visible a parpadear ) . Vamos a utilizar la acción de ' Flash' de este comportamiento
en un momento.
27
Cambie a la vista de hoja de eventos, y añadir un nuevo evento:
PlayerBox -> En la colisión con otro objeto -> SnailEnemy
Este evento se ejecuta cuando chocamos con el SnailEnemy desde cualquier ángulo. Podemos
entonces utilizar sub-eventos para probar si el jugador está saltando en la parte superior o
corriendo desde el lado . Vamos a ver primero si el jugador está por encima .
Añadir un evento sub al evento de colisión :
PlayerBox -> Is Falling
También hay que probar que el jugador es en realidad por encima del enemigo. Esto puede
evitar que el caracol accidentalmente mató si caemos pasado de una cornisa , por ejemplo.
Haga clic con el estado ' está cayendo "y seleccione" Agregar otra condición " . Recuerde que
todas las condiciones se deben cumplir para el evento a correr. Añadir la condición:
PlayerBox - > Comparar Y - > Menor que, SnailEnemy.Y
El eje Y se incrementa hacia abajo, por lo que si coordenada Y del jugador es inferior a los de
los caracoles , son por encima de ella .
En este caso , agregue la acción :
SnailEnemy -> Destroy
También podemos hacer que el jugador rebotan añadiendo otra acción :
PlayerBox -> Establecer como vector Y -> -700
28
'Set vector Y ', básicamente, sólo fija la velocidad vertical del movimiento de la plataforma ; si
se establece en un valor negativo coloca hacia arriba ( de nuevo, el eje Y se incrementa hacia
abajo ), y 700 es un poco menos de la fuerza de salto de 1100. Así que esto hará que el jugador
rebotan como si lo hicieron un salto débil.
Nosotros no hemos finalizado: haga clic en el margen del evento 'está cayendo' (el espacio
justo a la izquierda del icono PlayerBox) y seleccione Agregar -> Else. 'Else' es una condición
especial que se ejecuta si el evento anterior no se ejecutó. Así que este evento se ejecutará si
chocamos con el caracol, pero no estábamos saltando en la parte superior de la misma - nos
encontramos a ella desde un lado, dicen. En este caso queremos que el jugador se lastime.
Agregue la acción
Jugador -> Flash -> (valores predeterminados y haga clic en la licencia de Hecho)
Recuerde que el comportamiento de Flash está en el objeto Player, no PlayerBox.
Aceptar , por lo que el jugador nunca va a morir , ellos sólo flash. Pero tenemos la detección
establecido de si saltaron encima o corrieron a un lado. Este tutorial no cubre todas las
campanas y silbidos , pero espero que pueda ver dónde crear efectos Kill ( intente crear un
sprite ' puf ' en la SnailEnemy cuando es destruido , mediante la acción de la SnailEnemy
"objeto de Spawn ' ) y dónde el despegue de la salud (en el caso de que hace que el
reproductor de flash - usted puede aprender acerca de la salud el uso de variables de instancia
en el tutorial de arriba hacia abajo tirador que es posible que desee mirar después).
Vamos a hacer el enemigo caracol se mueve hacia atrás y adelante a través de la plataforma.
29
Mover el enemigo
El principal problema con el movimiento del caracol es la forma de detectar cuando se ha llegado
al borde de una plataforma. La forma más fácil de hacerlo es con marcadores invisibles ‘borde’.
Estos son sólo sprites invisibles que cambiar la dirección del caracol cuando se los toca.
También podemos utilizar el comportamiento de la plataforma de nuevo para el caracol. Esto es
conveniente porque:
- Se puede lograr que se mueve a la izquierda y derecha
- Que va a subir y bajar pendientes al igual que el jugador puede
- Se caerá repisas si usted quiere que
- Si usted quiere hacer un enemigo que salta, usted puede hacer que el enemigo salta
automáticamente también el uso de la acción de "control simular" .
Añadir el comportamiento Plataforma con la clase Sprite SnailEnemy . Dado que no estamos
utilizando animaciones complicadas en este objeto , podemos conseguir lejos con usar el
comportamiento plataforma directamente en el objeto sin un objeto invisible 'caja' . Tenga en
cuenta si usted hace un juego de plataformas diferentes de enemigos con animaciones
complicadas , se debe utilizar la misma técnica de la caja se utilizó en el reproductor.
El caracol también necesita saber en qué dirección se está moviendo actualmente - ya sea la
izquierda o la derecha. Podemos hacer esto con las variables de instancia. Estos son simplemente
números o texto que se almacena en cada instancia del objeto. Si tenemos varios caracoles, cada
uno de ellos almacenar sus variables de instancia por separado. Esto les permite tener valores
únicos para su salud, dirección de la corriente, y así sucesivamente. Una técnica simple para el
control de los enemigos de forma automática es crear una variable de instancia de "acción", que
sostiene su estado actual. Por ejemplo, se podría "salir corriendo", "player chase" o "inactivo". En
este caso solo necesitamos "izquierda" y "derecha", pero es útil para su instalación de la misma
manera.
30
Seleccione el objeto SnailEnemy. En la barra de propiedades, haga clic en Agregar / Editar en
"variables de instancia.
Aparece un diálogo con una lista de todas las variables de instancia para el objeto. Haga clic en el
icono "Añadir" para añadir una nueva. Establezca el nombre de la acción, el tipo de texto, y el
valor inicial a la derecha (para mover a la derecha).
Haga clic en Aceptar y cierre el diálogo variables de instancia. Cambie a la hoja de eventos.
Queremos poner en práctica la siguiente lógica:
- Si la acción es "correcto", simular el movimiento de la plataforma manteniendo pulsada la tecla
"correcta" para mover el caracol derecha.
- Si la acción es "left", simular el movimiento de la plataforma que sostiene la tecla de flecha
"izquierda" para mover el caracol izquierda.
También:
- Si el caracol golpea el EdgeMarker, voltear su acción (si es "izquierda" en posición "correcta", y si
"derecho" el valor de "izquierda").
Podemos establecer el movimiento con los siguientes dos eventos:
Evento: SnailEnemy -> Comparar variable de instancia -> acción igual a "la derecha" (utilice
comillas dobles para indicar el texto)
31
Acción: SnailEnemy -> Simular Control -> Derecha
Debe ser fácil de hacer lo mismo por la izquierda. También queremos que la imagen de espejo
izquierdo y derecho como lo hicimos para el jugador. Así que añadir SnailEnemy -> Set refleja en el
evento de "izquierda", y SnailEnemy -> No conjunto reflejado en el evento "correcta". Usted debe
terminar con esto:
Ahora para voltear la dirección del caracol en los bordes:
Evento: SnailEnemy -> En la colisión con otro objeto -> EdgeMarker
Subevento: SnailEnemy -> Comparar variable de instancia -> acción igual a "la derecha"
Acción: SnailEnemy -> Valor de ajuste -> acción de "izquierda"
Subevento: Else
Acción: SnailEnemy -> Valor de ajuste -> acción de "derecho"
Es importante utilizar más aquí, porque los eventos se ejecutan desde arriba hacia abajo. Si en vez
de 'else' dijimos 'acción igual a "izquierda" ", cuenta el caso anterior habría simplemente
configurarlo para eso. Por lo que sólo había puesto las cosas bien de nuevo, que no tiene efecto
general. Mediante el uso de 'else', evitamos que el segundo evento en funcionamiento si el
primero era cierto.
Ejecute el proyecto. Observe el caracol se mueve hacia atrás y adelante en su plataforma. Esto
hace que sea un poco más difícil de saltar en! Este es un sistema muy rudimentario "AI", pero
espero que usted puede imaginar que se podría crear enemigos más inteligentes, controlando el
movimiento con más eventos, posiblemente, incluso permitiendo que se caen de los bordes, o
utilizando otros marcadores para provocar un salto para que sea verá como el enemigo sabía que
saltar a una plataforma.
Trate de crear una plataforma con dos caracoles en él. Observe que controlarse a sí mismos de
forma individual, ya que cada uno tiene su propia variable de instancia la acción individual que
32
sostiene su estado actual. Esperamos que usted puede comenzar a ver la importancia de las
variables de instancia son para el control de los casos de forma independiente - que no todos
tienen que estar haciendo exactamente lo mismo que los demás!
Jump-thru objetos
Si coloca algunas baldosas alrededor, usted podría notar si saltas a una baldosa de debajo se
golpea la cabeza en ella y vuelven a caer. ¿Qué pasa si usted quiere hacer las plataformas se puede
saltar a partir de debajo? Esto es lo que hace el comportamiento Jump-thru. Al igual que el
comportamiento Solid usted puede estar parado en él con el comportamiento de la plataforma,
pero el jugador puede saltar a él desde abajo.
Vamos a hacer una versión de Jump-thru de nuestro objeto de baldosas. Haga clic en el objeto de
baldosas y seleccione el tipo de objeto Clonar. Esto hará que un tipo de objeto independiente,
Tile2, que puede tener diferentes comportamientos. Eliminar el comportamiento sólido y agregar
el Jump-thru comportamiento.
Utilice azulejos 134 y 135 para hacer un salto-por así:
Ejecutar el juego. Observe cómo se puede saltar a él desde abajo.
Esperemos que ahora sabe lo suficiente para diseñar un nuevo nivel entero! Aquí está un diseño de nivel
está reducida junté rápidamente al escribir el tutorial. Le puede ayudar a mostrar algunas de las
33
posibilidades. Observe el uso de los marcadores a través de plataformas para mantener a los caracoles en
sus plataformas:
Paralax
Trate de añadir un efecto de paralaje para que el fondo parece más lejos. Seleccione la capa de fondo de la
barra de capas. En la barra de propiedades, establezca la propiedad Parallax a 50, 50 (que significa la mitad
de la velocidad de desplazamiento). Observe cómo el fondo se mueve más lentamente, dando una
sensación de distancia. El uso de múltiples capas, todas con diferentes tipos de paralaje puede crear casi
3D sentir a un juego en 2D
Conclusión
Este tutorial cubre mucho. Es posible que desee revisar un poco de tiempo . Éstos son algunos de los
puntos clave:
- Para el comportamiento del jugador Plataforma , añadir siempre el movimiento de una caja invisible sin
animaciones. Coloque el visible , reproductor de sprites animados en la parte superior de la caja. Esto
evitará animaciones causando problemas técnicos en el movimiento de la plataforma .
- Los niveles pueden ser construidos de azulejos.
- El conjunto reflejado acción le ahorra tener que hacer copias de espejo de todas las animaciones.
- Animaciones a veces necesitan un poco de trabajo para ser importado, establecido con la velocidad
adecuada y las propiedades de bucle , con el conjunto de origen correcto, y todos los marcos recortada .
También es posible que quiera cambiar las máscaras de colisión , aunque esto no estaba cubierto .
- Los enemigos también se pueden controlar con el comportamiento Plataforma . Establecer controles por
defecto en No y utilizar la acción de control Simular para controlar automáticamente el movimiento .
- Se puede detectar si el jugador está cayendo sobre un enemigo en lugar de correr a ellos por medio de
pruebas , si ambos están bajando y por encima de los enemigos en el eje Y al chocar . De lo contrario
(usando 'Else ' ) , se deben ejecutar en el enemigo , y deben hacerse daño .
- Las variables de instancia pueden almacenar números o texto único para cada instancia de un objeto .
Esto ayuda a los objetos de control individual , que es útil para " AI " .
- Las balizas de borde son una manera rápida y fácil de hacer enemigos van y vienen en una plataforma .
- Jump -thru son plataformas que se pueden se subieron a la parte inferior.
34
- Parallax es un efecto fácil e intrigante para agregar a los juegos de plataformas .
Obviamente no hemos hecho un juego de plataformas lleno! Sin embargo , este tutorial ha cubierto las
partes más difíciles, y los elementos esenciales importantes cada creador juego de plataformas debería
saber de antemano . A partir de aquí esperamos que pueda tener una idea de cómo el resto de un juego
de plataformas va a venir juntos. Se necesita tiempo para familiarizarse con una herramienta de desarrollo
complejo con Construct 2 . Sin embargo , la experimentación puede ser divertido, y le enseñará mucho !
Así que pasar un rato jugando , rompiendo cosas , ajustar las cosas, y ver lo que puede ocurrir. Plataformas
feliz!
Otras lecturas
Usted puede estar interesado en la guía del principiante alternativa, que es un tutorial para hacer un juego
de acción de arriba hacia abajo . Cubre algunos puntos diferentes como la fabricación de un heads-up
display , y se va a las variables de instancia en algo más de detalle también. Estas son las dos cosas que se
pueden aplicar a los juegos de plataformas , por lo que sin duda sería útil ir a través de ella , además de
este tutorial.
¿Quieres añadir música y efectos de sonido ? Consulte Sonidos y música en el manual.
Si desea saber más acerca de cómo funcionan los eventos en Construct 2 , consulte la sección sobre Cómo
Eventos Trabaje en el manual. Es muy recomendable para que pueda ponerse en marcha rápidamente con
sus proyectos ! Entonces para aún más información, no olvide que hay una documentación completa en el
manual.
35