<?xml version="1.0"?>
<rss version="2.0">
	<channel>
		<title>[A5] Fixed Aspect Ratio with Black Bars</title>
		<link>http://www.allegro.cc/forums/view/609395</link>
		<description>Allegro.cc Forum Thread</description>
		<webMaster>matthew@allegro.cc (Matthew Leverton)</webMaster>
		<lastBuildDate>Thu, 26 Jan 2012 14:42:11 +0000</lastBuildDate>
	</channel>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>I am currently reworking an SDL 1.2/OpenGL codebase to use Allegro 5. My artist and I like to keep things simple and easy (for us), so we typically design our games to use a fixed resolution. However, to prevent the display from being stretched to a different aspect ratio, I implemented a fixed aspect ratio with letter/column boxes. This would fit a box of the given aspect ratio inside the display, taking up as much space as possible, and then adding black bars to the top/bottom or left/right as necessary. I used glViewport, glScissor, and glOrtho to accomplish this effect, like so:
</p><div class="source-code snippet"><div class="inner"><pre><span class="k1">float</span> <span class="k1">const</span> aspectRatio <span class="k3">=</span> <span class="k2">(</span><span class="k1">float</span><span class="k2">)</span>VIEW_WIDTH <span class="k3">/</span> <span class="k2">(</span><span class="k1">float</span><span class="k2">)</span>VIEW_HEIGHT<span class="k2">;</span>
<span class="k1">int</span> clipWidth <span class="k3">=</span> width, clipHeight <span class="k3">=</span> width <span class="k3">/</span> aspectRatio<span class="k2">;</span>
<span class="k1">int</span> clipX <span class="k3">=</span> <span class="n">0</span>, clipY <span class="k3">=</span> <span class="k2">(</span>height <span class="k3">-</span> clipHeight<span class="k2">)</span> <span class="k3">/</span> <span class="n">2</span><span class="k2">;</span>
<span class="k1">if</span> <span class="k2">(</span>clipY <span class="k3">&lt;</span> <span class="n">0</span><span class="k2">)</span>
<span class="k2">{</span>
    clipHeight <span class="k3">=</span> height<span class="k2">;</span>
    clipWidth <span class="k3">=</span> height <span class="k3">*</span> aspectRatio<span class="k2">;</span>
    clipX <span class="k3">=</span> <span class="k2">(</span>width <span class="k3">-</span> clipWidth<span class="k2">)</span> <span class="k3">/</span> <span class="n">2</span><span class="k2">;</span>
    clipY <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span>
<span class="k2">}</span>
glViewport<span class="k2">(</span>clipX, clipY, clipWidth, clipHeight<span class="k2">)</span><span class="k2">;</span>
glScissor<span class="k2">(</span>clipX, clipY, clipWidth, clipHeight<span class="k2">)</span><span class="k2">;</span>
glMatrixMode<span class="k2">(</span>GL_PROJECTION<span class="k2">)</span><span class="k2">;</span>
glLoadIdentity<span class="k2">(</span><span class="k2">)</span><span class="k2">;</span>
glOrtho<span class="k2">(</span><span class="n">0</span>, clipWidth, clipHeight, <span class="n">0</span>, <span class="k3">-</span><span class="n">1</span>, <span class="n">1</span><span class="k2">)</span><span class="k2">;</span>
glMatrixMode<span class="k2">(</span>GL_MODELVIEW<span class="k2">)</span><span class="k2">;</span>
</pre></div></div><p>

And like this in Allegro 5:
</p><div class="source-code"><div class="toolbar"><span class="button numbers"><b>#</b></span><span class="button select">Select</span><span class="button expand">Expand</span></div><div class="inner"><span class="number">  1</span><span class="k1">float</span> <span class="k1">const</span> aspectRatio <span class="k3">=</span> <span class="k2">(</span><span class="k1">float</span><span class="k2">)</span>VIEW_WIDTH <span class="k3">/</span> <span class="k2">(</span><span class="k1">float</span><span class="k2">)</span>VIEW_HEIGHT<span class="k2">;</span>
<span class="number">  2</span><span class="k1">int</span> clipWidth <span class="k3">=</span> width, clipHeight <span class="k3">=</span> width <span class="k3">/</span> aspectRatio<span class="k2">;</span>
<span class="number">  3</span><span class="k1">int</span> clipX <span class="k3">=</span> <span class="n">0</span>, clipY <span class="k3">=</span> <span class="k2">(</span>height <span class="k3">-</span> clipHeight<span class="k2">)</span> <span class="k3">/</span> <span class="n">2</span><span class="k2">;</span>
<span class="number">  4</span><span class="k1">if</span> <span class="k2">(</span>clipY <span class="k3">&lt;</span> <span class="n">0</span><span class="k2">)</span>
<span class="number">  5</span><span class="k2">{</span>
<span class="number">  6</span>    clipHeight <span class="k3">=</span> height<span class="k2">;</span>
<span class="number">  7</span>    clipWidth <span class="k3">=</span> height <span class="k3">*</span> aspectRatio<span class="k2">;</span>
<span class="number">  8</span>    clipX <span class="k3">=</span> <span class="k2">(</span>width <span class="k3">-</span> clipWidth<span class="k2">)</span> <span class="k3">/</span> <span class="n">2</span><span class="k2">;</span>
<span class="number">  9</span>    clipY <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span>
<span class="number"> 10</span><span class="k2">}</span>
<span class="number"> 11</span><a href="http://www.allegro.cc/manual/al_set_clipping_rectangle"><span class="a">al_set_clipping_rectangle</span></a><span class="k2">(</span>clipX, clipY, clipWidth, clipHeight<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 12</span>
<span class="number"> 13</span><span class="k1">float</span> scaleX <span class="k3">=</span> <span class="k2">(</span><span class="k1">float</span><span class="k2">)</span>clipWidth  <span class="k3">/</span> <span class="k2">(</span><span class="k1">float</span><span class="k2">)</span>VIEW_WIDTH,
<span class="number"> 14</span>      scaleY <span class="k3">=</span> <span class="k2">(</span><span class="k1">float</span><span class="k2">)</span>clipHeight <span class="k3">/</span> <span class="k2">(</span><span class="k1">float</span><span class="k2">)</span>VIEW_HEIGHT<span class="k2">;</span>
<span class="number"> 15</span><a href="http://www.allegro.cc/manual/ALLEGRO_TRANSFORM"><span class="a">ALLEGRO_TRANSFORM</span></a> projection<span class="k2">;</span>
<span class="number"> 16</span><a href="http://www.allegro.cc/manual/al_build_transform"><span class="a">al_build_transform</span></a><span class="k2">(</span><span class="k3">&amp;</span>projection, clipX, clipY, scaleX, scaleY, <span class="n">0</span>.<span class="n">0f</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 17</span><a href="http://www.allegro.cc/manual/al_use_transform"><span class="a">al_use_transform</span></a><span class="k2">(</span><span class="k3">&amp;</span>projection<span class="k2">)</span><span class="k2">;</span>
</div></div><p>

Now, this works fine, until the size is drastically different from the &quot;view&quot; size (in this case, 736x768). Then my test function starts to fall apart. Literally.
</p><div class="source-code snippet"><div class="inner"><pre><span class="k1">for</span> <span class="k2">(</span><span class="k1">float</span> x <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span> x <span class="k3">&lt;</span> <span class="n">32</span><span class="k2">;</span> <span class="k3">+</span><span class="k3">+</span>x<span class="k2">)</span>
    <span class="k1">for</span> <span class="k2">(</span><span class="k1">float</span> y <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span> y <span class="k3">&lt;</span> <span class="n">32</span><span class="k2">;</span> <span class="k3">+</span><span class="k3">+</span>y<span class="k2">)</span>
        <a href="http://www.allegro.cc/manual/al_draw_pixel"><span class="a">al_draw_pixel</span></a><span class="k2">(</span>x, y, <a href="http://www.allegro.cc/manual/al_map_rgb"><span class="a">al_map_rgb</span></a><span class="k2">(</span><a href="http://www.delorie.com/djgpp/doc/libc/libc_637.html" target="_blank">rand</a><span class="k2">(</span><span class="k2">)</span> % <span class="n">255</span>, <a href="http://www.delorie.com/djgpp/doc/libc/libc_637.html" target="_blank">rand</a><span class="k2">(</span><span class="k2">)</span> % <span class="n">255</span>, <a href="http://www.delorie.com/djgpp/doc/libc/libc_637.html" target="_blank">rand</a><span class="k2">(</span><span class="k2">)</span> % <span class="n">255</span><span class="k2">)</span><span class="k2">)</span><span class="k2">;</span>
</pre></div></div><p>

When the scale gets too big, the pixels start to move away from each other. I&#39;ve attached 2 pictures demonstrating this problem (beware: one of them is rather large). I&#39;m assuming this is due to the way Allegro transforms each individual pixel, and that the issue would go away when using bitmaps--however, I&#39;d like to find a way to do this that works as expected with pixel-level drawing.</p><p>P.S. I am new to Allegro as a whole, this being my first time using it, so if anyone knows an all around better way of accomplishing this, I&#39;d love to hear it.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Jeremiah Griffin)</author>
		<pubDate>Thu, 26 Jan 2012 06:46:19 +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/609395/945623#target">Jeremiah Griffin</a> said:</div><div class="quote"><p> that the issue would go away when using bitmaps
</p></div></div><p>It does.</p><div class="quote_container"><div class="title">Quote:</div><div class="quote"><p> I&#39;d like to find a way to do this that works as expected with pixel-level drawing.
</p></div></div><p>It depends on what you want to happen when you zoom in. If you want to get big blocky pixels, you should draw pixels with <span class="source-code"><a href="http://www.allegro.cc/manual/al_draw_rectangle"><span class="a">al_draw_rectangle</span></a></span>:</p><div class="source-code snippet"><div class="inner"><pre><span class="k1">void</span> draw_scalable_pixel<span class="k2">(</span><span class="k1">float</span> x, <span class="k1">float</span> y, <a href="http://www.allegro.cc/manual/ALLEGRO_COLOR"><span class="a">ALLEGRO_COLOR</span></a> col<span class="k2">)</span>
<span class="k2">{</span>
    <a href="http://www.allegro.cc/manual/al_draw_filled_rectangle"><span class="a">al_draw_filled_rectangle</span></a><span class="k2">(</span>x, y, x <span class="k3">+</span> <span class="n">1</span>, y <span class="k3">+</span> <span class="n">1</span>, col<span class="k2">)</span><span class="k2">;</span>
<span class="k2">}</span>
</pre></div></div><p>

If not, you&#39;ll want to transform the vector representation of your pixel primitve. In this case you&#39;d multiply the <span class="source-code"><span class="n">32</span></span> in your loops by <span class="source-code">scaleX</span> and <span class="source-code">scaleY</span> for <span class="source-code">x</span> and <span class="source-code">y</span> respectively and then scale the coordinates you pass to <span class="source-code"><a href="http://www.allegro.cc/manual/al_draw_pixel"><span class="a">al_draw_pixel</span></a></span>:</p><div class="source-code snippet"><div class="inner"><pre><span class="k1">for</span> <span class="k2">(</span><span class="k1">float</span> x <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span> x <span class="k3">&lt;</span> <span class="n">32</span> <span class="k3">*</span> scaleX<span class="k2">;</span> <span class="k3">+</span><span class="k3">+</span>x<span class="k2">)</span>
    <span class="k1">for</span> <span class="k2">(</span><span class="k1">float</span> y <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span> y <span class="k3">&lt;</span> <span class="n">32</span> <span class="k3">*</span> scaleY<span class="k2">;</span> <span class="k3">+</span><span class="k3">+</span>y<span class="k2">)</span>
        <a href="http://www.allegro.cc/manual/al_draw_pixel"><span class="a">al_draw_pixel</span></a><span class="k2">(</span>x <span class="k3">/</span> scaleX, y <span class="k3">/</span> scaleY, <a href="http://www.allegro.cc/manual/al_map_rgb"><span class="a">al_map_rgb</span></a><span class="k2">(</span><a href="http://www.delorie.com/djgpp/doc/libc/libc_637.html" target="_blank">rand</a><span class="k2">(</span><span class="k2">)</span> % <span class="n">255</span>, <a href="http://www.delorie.com/djgpp/doc/libc/libc_637.html" target="_blank">rand</a><span class="k2">(</span><span class="k2">)</span> % <span class="n">255</span>, <a href="http://www.delorie.com/djgpp/doc/libc/libc_637.html" target="_blank">rand</a><span class="k2">(</span><span class="k2">)</span> % <span class="n">255</span><span class="k2">)</span><span class="k2">)</span><span class="k2">;</span>
</pre></div></div><p>
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (SiegeLord)</author>
		<pubDate>Thu, 26 Jan 2012 08:52:30 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>It never occurred to me to emulate pixels using vertices. Thanks!
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Jeremiah Griffin)</author>
		<pubDate>Thu, 26 Jan 2012 14:42:11 +0000</pubDate>
	</item>
</rss>
