<?xml version="1.0"?>
<rss version="2.0">
	<channel>
		<title>Draw rectangle with alpha</title>
		<link>http://www.allegro.cc/forums/view/608171</link>
		<description>Allegro.cc Forum Thread</description>
		<webMaster>matthew@allegro.cc (Matthew Leverton)</webMaster>
		<lastBuildDate>Wed, 24 Aug 2011 18:47:39 +0000</lastBuildDate>
	</channel>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>Hi<br />I&#39;m trying to draw simple rectgangle with alpha channel:</p><p>	  ALLEGRO_COLOR color = al_map_rgba(100 , 100, 200, 255);<br />	  </p><p>	  al_clear_to_color(al_map_rgb(0,0,0));<br />	  al_set_blender(ALLEGRO_ADD, ALLEGRO_ONE, ALLEGRO_ZERO);<br />	  al_draw_filled_rectangle(0, 0, 100, 200, color);</p><p>Rectangle is drawn but alpha channel is ignored.<br />What&#39;s wrong ?
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (mentalDisorder)</author>
		<pubDate>Wed, 24 Aug 2011 13:21:37 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>Did you set_color_depth(32) before setting video mode?
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Arthur Kalliokoski)</author>
		<pubDate>Wed, 24 Aug 2011 13:26:30 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>No, because I use allegro5 and there  isn&#39;t such a function.<br />Can&#39;t find substitute too <img src="http://www.allegro.cc/forums/smileys/wink.gif" alt=";)" />
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (mentalDisorder)</author>
		<pubDate>Wed, 24 Aug 2011 13:45:59 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>I really need to pay more attention <img src="http://www.allegro.cc/forums/smileys/undecided.gif" alt=":-/" />.</p><p>Maybe this will help.</p><p><a href="http://www.allegro.cc/forums/thread/606420">http://www.allegro.cc/forums/thread/606420</a></p><p>This manual has links to allegro.cc questions concerning the function in question</p><p><a href="http://www.allegro.cc/manual/5/index.html">http://www.allegro.cc/manual/5/index.html</a>
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Arthur Kalliokoski)</author>
		<pubDate>Wed, 24 Aug 2011 13:51:03 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>Have no idea what to do with al_set_new_display_option and al_set_blender functions.<br />What values should they reveive ?
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (mentalDisorder)</author>
		<pubDate>Wed, 24 Aug 2011 14:01:41 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>You need to multiply the color components with the alpha.<br />(128,128,128,128) means 50% transparent gray for example.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Elias)</author>
		<pubDate>Wed, 24 Aug 2011 14:38:55 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>yes I know how RGBA system works but I don&#39;t know how to tell allegro5 to use alpha channel !
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (mentalDisorder)</author>
		<pubDate>Wed, 24 Aug 2011 14:40:41 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>It always uses alpha. My point was that (255, 255, 255, 128) will not be transparent as you might have expected.</p><p>Edit: I.e. (128, 128, 128, 128) will be 50% transparent white, not gray as I said above. If you use floating point, then basically if you have a color (r, g, b) and want to add alpha, you need to use: (r * a, g * a, b * a, a). So if you want 50% transparent red, you would use (1, 0, 0, 1) * 0.5 = (0.5, 0, 0, 0.5).
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Elias)</author>
		<pubDate>Wed, 24 Aug 2011 15:32:24 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><div class="quote_container"><div class="title"><a href="http://www.allegro.cc/forums/thread/608171/929095#target">Elias</a> said:</div><div class="quote"><p>
I.e. (128, 128, 128, 128) will be 50% transparent white, not gray as I said above. If you use floating point, then basically if you have a color (r, g, b) and want to add alpha, you need to use: (r * a, g * a, b * a, a). So if you want 50% transparent red, you would use (1, 0, 0, 1) * 0.5 = (0.5, 0, 0, 0.5).
</p></div></div><p>
I don&#39;t think I&#39;ve used those routines before then. Could you explain why you have to multiply the color values by the alpha to be transparent?
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Chris Katko)</author>
		<pubDate>Wed, 24 Aug 2011 17:49:29 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>Well, if you look here <a href="http://www.liballeg.org/a5docs/refman/graphics.html#al_set_blender">http://www.liballeg.org/a5docs/refman/graphics.html#al_set_blender</a></p><div class="source-code snippet"><div class="inner"><pre> r <span class="k3">=</span> d.r <span class="k3">*</span> df.r <span class="k3">+</span> s.r <span class="k3">*</span> sf.r
 g <span class="k3">=</span> d.g <span class="k3">*</span> df.g <span class="k3">+</span> s.g <span class="k3">*</span> sf.g
 b <span class="k3">=</span> d.b <span class="k3">*</span> df.b <span class="k3">+</span> s.b <span class="k3">*</span> sf.b
 a <span class="k3">=</span> d.a <span class="k3">*</span> df.a <span class="k3">+</span> s.a <span class="k3">*</span> sf.a
</pre></div></div><p>

Then the default blend mode</p><div class="source-code snippet"><div class="inner"><pre><a href="http://www.allegro.cc/manual/al_set_blender"><span class="a">al_set_blender</span></a><span class="k2">(</span>ALLEGRO_ADD, ALLEGRO_ONE, ALLEGRO_INVERSE_ALPHA<span class="k2">)</span>
</pre></div></div><p>

means you get:</p><div class="source-code snippet"><div class="inner"><pre> r <span class="k3">=</span> d.r <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span>s.a<span class="k2">)</span> <span class="k3">+</span> s.r <span class="k3">*</span> <span class="n">1</span>
 g <span class="k3">=</span> d.g <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span>s.a<span class="k2">)</span> <span class="k3">+</span> s.g <span class="k3">*</span> <span class="n">1</span>
 b <span class="k3">=</span> d.b <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span>s.a<span class="k2">)</span> <span class="k3">+</span> s.b <span class="k3">*</span> <span class="n">1</span>
 a <span class="k3">=</span> d.a <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span>s.a<span class="k2">)</span> <span class="k3">+</span> s.a <span class="k3">*</span> <span class="n">1</span>
</pre></div></div><p>

So if the source color is (1,1,1,0.5) and the dest color is (0,0,0) you get:</p><div class="source-code snippet"><div class="inner"><pre> r <span class="k3">=</span> <span class="n">0</span> <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span><span class="n">0</span>.<span class="n">5</span><span class="k2">)</span> <span class="k3">+</span> <span class="n">1</span> <span class="k3">*</span> <span class="n">1</span> <span class="k3">=</span> <span class="n">1</span>
 g <span class="k3">=</span> <span class="n">0</span> <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span><span class="n">0</span>.<span class="n">5</span><span class="k2">)</span> <span class="k3">+</span> <span class="n">1</span> <span class="k3">*</span> <span class="n">1</span> <span class="k3">=</span> <span class="n">1</span>
 b <span class="k3">=</span> <span class="n">0</span> <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span><span class="n">0</span>.<span class="n">5</span><span class="k2">)</span> <span class="k3">+</span> <span class="n">1</span> <span class="k3">*</span> <span class="n">1</span> <span class="k3">=</span> <span class="n">1</span>
</pre></div></div><p>

So you are drawing fully opaque white. But what you want is to use (0.5,0.5,0.5,0.5) as source color:</p><div class="source-code snippet"><div class="inner"><pre> r <span class="k3">=</span> <span class="n">0</span> <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span><span class="n">0</span>.<span class="n">5</span><span class="k2">)</span> <span class="k3">+</span> <span class="n">0</span>.<span class="n">5</span> <span class="k3">*</span> <span class="n">1</span> <span class="k3">=</span> <span class="n">0</span>.<span class="n">5</span>
 g <span class="k3">=</span> <span class="n">0</span> <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span><span class="n">0</span>.<span class="n">5</span><span class="k2">)</span> <span class="k3">+</span> <span class="n">0</span>.<span class="n">5</span> <span class="k3">*</span> <span class="n">1</span> <span class="k3">=</span> <span class="n">0</span>.<span class="n">5</span>
 b <span class="k3">=</span> <span class="n">0</span> <span class="k3">*</span> <span class="k2">(</span><span class="n">1</span><span class="k3">-</span><span class="n">0</span>.<span class="n">5</span><span class="k2">)</span> <span class="k3">+</span> <span class="n">0</span>.<span class="n">5</span> <span class="k3">*</span> <span class="n">1</span> <span class="k3">=</span> <span class="n">0</span>.<span class="n">5</span>
</pre></div></div><p>

This time we were drawing a 50% transparent white pixel onto the black destination pixel correctly.</p><p>If you change the blend type to al_set_blender(ALLEGRO_ADD, ALLEGRO_ALPHA, ALLEGRO_INVERSE_ALPHA) then the blending itself will do that multiplication for you, but see ex_premul_alpha for why that is a very bad idea with OpenGL/DirectX.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Elias)</author>
		<pubDate>Wed, 24 Aug 2011 18:47:39 +0000</pubDate>
	</item>
</rss>
