La tierra de las luces y las sombras (Parte II)

1

Tagged

Attached Files

The following files have been attached to this tutorial:

.capx
.capx

torchlight-01.capx

Download now 260.2 KB
.png

torchlight-with-beam.png

Download now 30.81 KB
.png

Stats

2,830 visits, 3,090 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 24 Mar, 2014. Last updated 25 Feb, 2019

Link to Part 3

Link to part 1

Introducción

En la parte uno del tutorial vimos los básicos del uso de capas y los modos de mezclas para ser capaces de ver a través de una capa las capas de debajo.

En esta parte dos quiero continuar con esas ideas y dar unos pasos más allá.

No va a haber nada muy complicado y creo que es válido para todos los niveles de experiencia.

Por favor pregunta si hay algo que no esté claro y por favor notificame si encuentras un error.

"Anteriormente en la Parte I del tutorial..."

Recuerda que necesitas dos (o más) capas.

La capa superior no debe ser transparente.

Los sprites que usamos para borrar esta capa superior necesitan tener el modo de mezcla en "Destination out".

"Destination out" usa los canales alpha y la opacidad.

Sigamos adelante...

Echemos un ojo a los canales alpha.

Los graficos por ordenador pueden contener información de color y transparencia. Creo que los alpha, la transparencia y la opacidad puede ser más o menos lo mismo (podríamos discutir que no son lo mismo pero por el momento vamos a asumir que si lo son).

Un (mapa) alpha hace que trozos de la imagen sprite sean más o menos "transparentes", así que se puede ver a través de ellos lo que hay debajo. Esto puede ser toda la imagen o solo parte de la misma.

Echale un vistado al archivo "opacity.capx" (155)

Este nos muestra la opacidad en acción - mueve tu ratón sobre uno de los rectángulos de colores y su opacidad se mostrará a la derecha. Los botones izquierdo y derecho del ratón alterarán la opacidad. Date cuenta de que si rebajas la opacidad a 0 ya no podrás ver el sprite - pero sigue estando ahí.

(la hoja de eventos es un poco escueta.. OTT - pero debe ser muy sencilla de leer. Podría ser mucho más sucia ordenada usando funciones, variables de instancia o familias. Sin mencinar las veces que he reescrito el texto!)

Si usamos un sprite con transparencia alpha podemos imitar cosas como el resplandor de una antorcha en una pared o un haz de luz donde las luces se van apagando poco a poco....

Algo como

o

Cuanto más opaco es el gráfico más se le quitará a la capa superior así pues más se verá de la capa que hay debajo.

Pongamos esto en un .capx sencillo y veamos como funciona (mira el archivo adjunto torchlight01.capx(155))

Casi lo tenemos pero nos falta proyectar sombras.

En el siguiente tutorial mostraré un par de maneras para crear falsas sombras. Están muy lejos de ser perfectas pero se verá algo como esto.

torchlight with shadows

.CAPX
.CAPX

torchlight-01.capx

Download now 260.2 KB
.PNG

torchlight-with-beam.png

Download now 30.81 KB
.PNG

torchlight.png

Download now 13.98 KB
  • 0 Comments

Want to leave a comment? Login or Register an account!