2 de mayo de 2015

Fundamentos Construct 2: Capas (Layers)

Hola a todos

Como mencioné en el artículo anterior, ahora hablaré de una de las herramientas mas útiles de los mapas, las Capas (También conocidas como layers)

Si han utilizado algún software de diseño gráfico como Photoshop, GIMP, Inkscape, etc, sabrán a que me refiero con Capas; pues bien, Construct 2 funciona de la misma manera.



Para quienes no sepan que son las capas, ya sea porque nunca han usado un software de diseño gráfico o no tengan claro el concepto, lo explicaré de forma ilustrativa:





Imaginen que tienen una hoja de papel blanco y quieren dibujar un paisaje que tenga montañas, arboles, personas caminando, piedras y uno que otro animal; pero no están seguros de donde dejar a las personas y animales.

Una solución sería dibujar primero todo el fondo y luego ir ubicando los arboles y las personas, pero si hacen eso tendrían que dibujar el cielo y las montañas, luego borrar una parte para dejar los arboles, y después borrar parte de los árboles para dibujar las personas, animales y rocas.

Si algo les queda mal tendrían que borrar y dibujar todo (o casi todo) nuevamente, y con esto pierden tiempo y el papel puede dañarse; pero tendrían una segunda opción, dibujar el fondo en el papel blanco y luego dibujar los arboles en una hoja de papel calcante (O papel de calco, ese que es transparente para dibujar), y luego dibujan a las personas en otra hoja de papel calcante.

Así tendrían tres hojas; la hoja en blanco con el dibujo de fondo (Sería el suelo, el cielo y las montañas), una hoja transparente con los árboles y una hoja transparente con las personas; así si quieren cambiar algo, pueden hacerlo con una hoja sin dañar las demás.

De ese mismo modo funcionan las capas, en Construct 2 puedes crear las capas que necesites (Aunque la versión gratuita está limitada a 4 capas), e ir ubicando los elementos en la posición que quieras.


Personalmente dejo una capa para el fondo, una capa para el suelo (y plataformas), una capa para enemigos, una capa para objetos y una capa para el personaje, usualmente en el siguiente orden:


La ventana anterior es la "ventana de capas", que muestra las capas que tengamos "en ese mapa", es decir, si tienen varios mapas, deben crear capas para cada uno.

Si tienen varios mapas, recomiendo dejar en todos las mismas capas con los mismos nombres, es decir, si tienen una capa llamada "Enemigos", recomiendo crear en todos los mapas una capa llamada "Enemigos", esto por dos razones:

  • Evitan confundirse en mapas con muchos elementos
  • El nombre de cada capa puede usarse cuando trabajemos con variables, y créanme, facilitará mucho las cosas (Cuando hablemos de elementos /sprites y variables entenderán a que me refiero)


Propiedades de las capas:
Cada capa tiene propiedades, y con Construct 2 podemos personalizar algunas; de hecho siendo ingeniosos podemos crear efectos geniales, por ejemplo con el parallax.


Name: Es el nombre de la capa, como dije, recomiendo dejarle un nombre a todas las capas para identificarlas fácilmente.

Initial Visibility: Indica si queremos que la capa sea visible o no al iniciar ese mapa; con eventos es posible hacerla visible o invisible desde el juego.

Background Color: Permite elegir el color del fondo de esa capa, si van a usar una imagen de fondo recomiendo dejarlo en blanco y activar la siguiente opción:

Transparent: Indica si queremos que "Background color" sea transparente o no.

Opacity: Hace que la capa sea totalmente visible o semi-invisible. 100 es totalmente visible; un número cada vez menor hace toda la capa mas "invisible".

Force own textures: [La verdad no lo he usado, entonces no lo explicaré]

Use render cells: Sin entrar en detalles técnicos, permite optimizar capas de mapas grandes con muchos objetos estáticos; pero no debería usarse en mapas pequeños o de una sola pantalla. Para mas detalles ver este artículo: Enlace

Scale rate: [No lo he usado entonces no lo explicaré, pero influye en el "zoom" de la capa]

Parallax: Este es una maravilla, permite que la capa vaya a la misma velocidad del personaje, a una velocidad menor o sea totalmente estática. Seguramente han visto juegos en donde el fondo se mueve mas lento mientras ustedes se mueven, dando una sensación de profundidad; Parallax permite esto.

Son dos números separados por una coma: su estructura es x,y (horizontal, vertical)
Si es 100,100 se moverá igual que el personaje.
Si horizontal es menor a 100, entonces el movimiento horizontal será mas lento.
Si vertical es menor a 100, entonces el movimiento vertical (por ejemplo cuando salten o suban) será mas lento.
Si es 0,0 esa capa no se moverá; esto debe usarse en capas que sean HUD (Es decir, donde salga la vida, puntaje, etc. Si han jugado Super Mario Bros 3 verán que hay un menú que no se mueve)
Recuerden que esto es "por capa", si tiene varias capas y usan adecuadamente Parallax, tendrán efectos increibles.

  • Global: Determina si esa capa se verá en todos los mapas, puede usarse para HUD. Si en algún momento quieren que no se vea puede hacerse con eventos (Lo explicaré después)
  • Visible in editor: Permite ver u ocultar esa capa mientras estemos trabajando, es útil si trabajamos con arias capas y queremos ocultar alguna para que no bloquee la del fondo.
  • Locked: Permite bloquear la capa, útil cuando trabajamos con otra capa y no queremos mover lo que está en esta capa.
  • Parallax in editor: Permite ver como quedaría esa capa si hemos cambiado el Parallax.
  • Effects: Permite que le demos un efecto visual a esa capa; pero recomiendo no usarlo por ahora.


Bueno, con esto terminamos lo básico de los mapas; en el siguiente artículo hablaré de lo mas visible en los videojuegos: los Elementos.

Con elementos me refiero a los "objetos" que colocamos en cada juego, que pueden ser visuales, sonoros y, en este caso, objetos que aumentan las capacidades.

Objetos que aumentan las capacidades: (Son muchos, pero empezaré con los mas básicos)
  • Teclado
  • Mouse
  • Sonido
  • NW.js


Elementos visuales:
  • Sprites
  • Tilesets
  • Fondos
  • Texto
  • Partículas


Elementos sonoros:
  • Música
  • Sonidos


Eso sería todo por ahora

Suerte