En esta serie de «tutos» Basics, tratamos de cero conceptos básicos de Love2d con idea de afianzar conocimientos para que en tutoriales avanzados no surjan dudas y avancemos rápido.

En la última entrada vimos cómo representar figuras geométricas. Ahora, vamos a darle un toque de color mientras repasamos los principios del color en informática.

El color es color, y sea el lenguaje que sea, siempre se representa como la combinación de los tres colores básicos: rojo, verde y azul. Los mismos que combinamos cuando pintamos con acuarelas.

En los lenguajes de programación se utiliza el acrónimo RGB para definir esa combinación de colores.

RGB viene de Red-Green-Blue o Rojo-Verde-Azul.

Vale, sabemos que para indicar un color hay que indicar la proporción de Rojo, Verde y Azul que lo componen. ¿Pero cómo se indica y donde?

Empecemos por algo de código.

function love.load()
	print("www.altaruru.com")
	print("altaruru lua+love2d - basics")
	print("usando el color")	
	print("pulsa ESCAPE TO QUIT ;-)")
end

function love.draw()
	love.graphics.rectangle("fill", 100, 100, 40, 40)
	love.graphics.rectangle("fill", 160, 100, 20, 20)
	love.graphics.rectangle("line", 80, 80, 200, 80)
	love.graphics.circle("fill", 360, 100, 20)
	love.graphics.circle("fill", 400, 100, 10)
	love.graphics.circle("line", 380, 100, 60)
end

function love.keypressed(key)
	if key == "escape" then
		love.event.quit()
	end
end

Ejecutamos y vemos esto

¿Te suena verdad? lo vimos al dibujar figuras geométricas.

Bien, vamos a la función de dibujo (draw()) y añadimos al principio la linea

love.graphics.setColor(255, 0, 0)
setColor(255,0,0)

Todo es rojo!!

La instrucción setColor(R,G,B) dice al programa que cambie el color con el que pinta. Pero… ¿Porqué es rojo?

Veamos otro ejemplo. Cambia esa línea por esta:

love.graphics.setColor(0, 255, 0)

Ahora todo es verde.

Fíjate que únicamente hemos cambiado de sitio un valor, el 255.

  • Para el Rojo escribimos setColor(255, 0, 0)
  • El verde setColor(0,255,0)
  • Si queremos Azul será setColor (0, 0, 255)

Al utilizar setColor() tenemos que indicar la proporción de cada uno de los colores básicos, Rojo, Azul y Verde.

El primer parámetro indica cuanto Rojo, el segundo parámetro cuanto Verde y el tercer parámetro la cantidad de Azul.

Si ponemos CERO significa que no hay nada de ese color.

Y… ¿Porque 255??

El rango de valores es de 0 a 255, siendo 0 el mínimo y 255 el máximo. De momento no entraremos en más detalles del porqué de esa elección de valores, quédate conque el color más intenso será un 255 mientras que un valor de 0 es ausencia total del color.

El rango 0-255 es el rango de valores posibles con un byte cuando estos eran de 8bits.

Así que si queremos el rojo más rojo, ponemos 255 al rojo y 0 a los otros dos: setColor(255,0,0)

Si queremos el Azul más intenso: setColor(0,0,255)

¿Y el blanco? ¿recuerdas que en el cole estudiaste que el blanco son todos los colores? pues eso mismo, blanco es setColor(255,255,255), tope de Rojo, tope de Verde y tope de Azul.

¿Y el Negro?, la ausencia de color claro: setColor(0,0,0)

Podemos seguir combinando colores hasta más de 16millones! si, la combinación de 256 en cada color da nada más y nada menos que 16.777.216 de colores posibles.

Los grises por ejemplo se consiguen con la misma proporción en los tres colores. Un gris claro será (200, 200, 200), un gris medio (128,128,128) y un gris oscuro por ejemplo (60,60,60).

Los valores de color suelen expresarse en hexadecimal, siendo negro (0,0,0) al igual que en binario, el blanco por ejemplo cambia, mientras que en binario decimos (255,255,255) en Hexadecimal es (FF,FF,FF)


Un software muy útil para trabajar con paletas de color es Gpick. En Ubuntu se instala simplemente con: sudo apt-get install gpick

¿Donde hacer el cambio de color?

La posición de una instrucción en código es tan importante como la instrucción en si. Veamos un ejemplo con el color.

Ahora mismo tenemos la siguiente función draw():

function love.draw()	
	love.graphics.setColor(0, 255, 0)
	love.graphics.rectangle("fill", 100, 100, 40, 40)
	love.graphics.rectangle("fill", 160, 100, 20, 20)
	love.graphics.rectangle("line", 80, 80, 200, 80)
	love.graphics.circle("fill", 360, 100, 20)
	love.graphics.circle("fill", 400, 100, 10)
	love.graphics.circle("line", 380, 100, 60)
end

Vamos a añadir dos lineas más para cambiar el color:

function love.draw()	
	love.graphics.setColor(0, 255, 0)
	love.graphics.rectangle("fill", 100, 100, 40, 40)
	love.graphics.rectangle("fill", 160, 100, 20, 20)
	love.graphics.setColor(0, 255, 255)
	love.graphics.rectangle("line", 80, 80, 200, 80)
	love.graphics.circle("fill", 360, 100, 20)
	love.graphics.setColor(0, 0, 255)
	love.graphics.circle("fill", 400, 100, 10)
	love.graphics.circle("line", 380, 100, 60)
end

Al insertar el cambio de color entre las instrucciones de dibujo, las figuras se colorean con el color seleccionado. Dicho color se mantiene hasta que volvemos a cambiarlo.

Dicho de otro modo, setColor() es como cambiar de rotulador, cuando cambiamos todo lo que pintemos lo haremos con el mismo, hasta que volvamos a cambiar con otro setColor().

Eso es todo por hoy!, creo que ha quedado más o menos entendible xD.

Cualquier duda en comentarios y estaré encantado como siempre de intentar resolverla.

Saludos.!

Deja tu comentario