https://wiki.wesnoth.org/index.php?title=How_to_Anti-Alias_Sprite_Art&feed=atom&action=historyHow to Anti-Alias Sprite Art - Revision history2024-03-28T08:14:55ZRevision history for this page on the wikiMediaWiki 1.31.16https://wiki.wesnoth.org/index.php?title=How_to_Anti-Alias_Sprite_Art&diff=68474&oldid=prevEgallager: /* See Also */ add link from Discord2021-09-02T23:02:41Z<p><span dir="auto"><span class="autocomment">See Also: </span> add link from Discord</span></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revision as of 23:02, 2 September 2021</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l34" >Line 34:</td>
<td colspan="2" class="diff-lineno">Line 34:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[Create]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[Create]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[Create Art]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[Create Art]]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* [https://pixelparmesan.com/anti-aliasing-fundamentals-for-pixel-artists/ https://pixelparmesan.com/anti-aliasing-fundamentals-for-pixel-artists/]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category: Art Tutorials]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category: Art Tutorials]]</div></td></tr>
</table>Egallagerhttps://wiki.wesnoth.org/index.php?title=How_to_Anti-Alias_Sprite_Art&diff=68472&oldid=prevEgallager: word a bit more neutrally2021-09-02T22:58:19Z<p>word a bit more neutrally</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revision as of 22:58, 2 September 2021</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Anti-aliasing is a technique designed to counter the inherent "grain" of computer displays, a grain that results from their cartesian nature.  Despite early experiments with radically different display technologies, the computing industry settled on this display system of rectangularly arrayed pixels, and to effectively use it, <del class="diffchange diffchange-inline">you must </del>overcome one of <del class="diffchange diffchange-inline">it's </del>greatest inherent limits.  Anti-aliasing is designed to do just that.</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Anti-aliasing is a technique designed to counter the inherent "grain" of computer displays, a grain that results from their cartesian nature.  Despite early experiments with radically different display technologies, the computing industry settled on this display system of rectangularly arrayed pixels, and to effectively use it, <ins class="diffchange diffchange-inline">some artists attempt </ins>overcome one of <ins class="diffchange diffchange-inline">its </ins>greatest inherent limits.  Anti-aliasing is designed to do just that.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The problem is this, when rendering a line, distances between drawn elements on a screen are not infinitesimal.  You can only make a change to your image at fixed distances, specifically the true dpi resolution of your current display setting.  As an aside, this is not to be confused with the display setting recognized by the operating system - macintosh screens were only 72dpi (dots per inch, lengthwise) on the original macintosh computers, though they have inherited that setting in name, it became meaningless with the advent of the first color screens.  Likewise, though they pretend that they do, computers running windows very rarely have a monitor set to exactly 96dpi.  Something near or above those is not uncommon these days, though.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The problem is this, when rendering a line, distances between drawn elements on a screen are not infinitesimal.  You can only make a change to your image at fixed distances, specifically the true dpi resolution of your current display setting.  As an aside, this is not to be confused with the display setting recognized by the operating system - macintosh screens were only 72dpi (dots per inch, lengthwise) on the original macintosh computers, though they have inherited that setting in name, it became meaningless with the advent of the first color screens.  Likewise, though they pretend that they do, computers running windows very rarely have a monitor set to exactly 96dpi.  Something near or above those is not uncommon these days, though.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l7" >Line 7:</td>
<td colspan="2" class="diff-lineno">Line 7:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>http://wesnoth.org/wiki-images/exong-backup/aliased_line_144.png</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>http://wesnoth.org/wiki-images/exong-backup/aliased_line_144.png</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Notice the rather garish and sudden shifts between pixel rows?  These have many names, including the "jaggies", and <del class="diffchange diffchange-inline">are </del>an unnecessary evil.</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Notice the rather garish and sudden shifts between pixel rows?  These have many names, including the "jaggies", and <ins class="diffchange diffchange-inline">many artists consider them to be </ins>an unnecessary evil.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>This is how much smoother the line looks if you anti-alias it:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>This is how much smoother the line looks if you anti-alias it:</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l24" >Line 24:</td>
<td colspan="2" class="diff-lineno">Line 24:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===Applications to sprite art:===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===Applications to sprite art:===</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Anti-aliasing is how you make anything that is not a vertical or horizontal edge look good.  You can get away with not doing anti-aliasing on many parts of your images, but if you do it some of the time, on the parts where it is most needed, it <del class="diffchange diffchange-inline">will </del>make the image look much better.  Anti-aliasing is often used on things like staves, or swords, when they hang at a slight angle rather than straight up or straight down.</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Anti-aliasing is how you make anything that is not a vertical or horizontal edge look good.  You can get away with not doing anti-aliasing on many parts of your images, but if you do it some of the time, on the parts where it is most needed, it <ins class="diffchange diffchange-inline">can </ins>make the image look much better.  Anti-aliasing is often used on things like staves, or swords, when they hang at a slight angle rather than straight up or straight down.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* One really nice trick is that mixing colors by transparency works exactly the same way as the color mixing I described above - in fact, it's the exact same thing.  If you anti-alias the edges of your units, where they interface with the terrain, they will look to have edges that follow the actual shape you intended, rather than being forced into a cartesian grid.  You can create pixels along the edges of your units that are the same color as the edge, but with variable transparency.  We can do this because, though we don't know what it's going to be mixed with, we do know how much of the unit's color to mix with the background, whatever that background is.  It follows the same rules as those for the line I showed above.  That "how much of the line's color" is the level of opacity.  To do this, you will need a program which can actually work with transparency values, like Adobe Photoshop, or the free Gnu Image Manipulation Program (GIMP).</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* One really nice trick is that mixing colors by transparency works exactly the same way as the color mixing I described above - in fact, it's the exact same thing.  If you anti-alias the edges of your units, where they interface with the terrain, they will look to have edges that follow the actual shape you intended, rather than being forced into a cartesian grid.  You can create pixels along the edges of your units that are the same color as the edge, but with variable transparency.  We can do this because, though we don't know what it's going to be mixed with, we do know how much of the unit's color to mix with the background, whatever that background is.  It follows the same rules as those for the line I showed above.  That "how much of the line's color" is the level of opacity.  To do this, you will need a program which can actually work with transparency values, like Adobe Photoshop, or the free Gnu Image Manipulation Program (GIMP).</div></td></tr>
</table>Egallagerhttps://wiki.wesnoth.org/index.php?title=How_to_Anti-Alias_Sprite_Art&diff=54319&oldid=prevMax2008 at 13:20, 1 April 20142014-04-01T13:20:19Z<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revision as of 13:20, 1 April 2014</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l5" >Line 5:</td>
<td colspan="2" class="diff-lineno">Line 5:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>To render a solid line, you cannot simply place pixels (picture elements) in the target color, as you might when drawing with a pen on paper, because the granularity of them on the screen is so big that you can see the breaks between the rows.  The result of drawing a solid black line on a white background, without antialiasing, will look like this:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>To render a solid line, you cannot simply place pixels (picture elements) in the target color, as you might when drawing with a pen on paper, because the granularity of them on the screen is so big that you can see the breaks between the rows.  The result of drawing a solid black line on a white background, without antialiasing, will look like this:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>http://<del class="diffchange diffchange-inline">exong</del>.<del class="diffchange diffchange-inline">net</del>/<del class="diffchange diffchange-inline">wesnoth</del>-<del class="diffchange diffchange-inline">attach</del>/<del class="diffchange diffchange-inline">files</del>/aliased_line_144.png</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>http://<ins class="diffchange diffchange-inline">wesnoth</ins>.<ins class="diffchange diffchange-inline">org</ins>/<ins class="diffchange diffchange-inline">wiki</ins>-<ins class="diffchange diffchange-inline">images</ins>/<ins class="diffchange diffchange-inline">exong-backup</ins>/aliased_line_144.png</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Notice the rather garish and sudden shifts between pixel rows?  These have many names, including the "jaggies", and are an unnecessary evil.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Notice the rather garish and sudden shifts between pixel rows?  These have many names, including the "jaggies", and are an unnecessary evil.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l11" >Line 11:</td>
<td colspan="2" class="diff-lineno">Line 11:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>This is how much smoother the line looks if you anti-alias it:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>This is how much smoother the line looks if you anti-alias it:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>http://<del class="diffchange diffchange-inline">exong</del>.<del class="diffchange diffchange-inline">net</del>/<del class="diffchange diffchange-inline">wesnoth</del>-<del class="diffchange diffchange-inline">attach</del>/<del class="diffchange diffchange-inline">files</del>/anti_aliased_line_634.png</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>http://<ins class="diffchange diffchange-inline">wesnoth</ins>.<ins class="diffchange diffchange-inline">org</ins>/<ins class="diffchange diffchange-inline">wiki</ins>-<ins class="diffchange diffchange-inline">images</ins>/<ins class="diffchange diffchange-inline">exong-backup</ins>/anti_aliased_line_634.png</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Anti-aliasing copes with this by doing what any digital camera would do, in trying to decide what color a target pixel would be.  Imagine the target pixel as a rectangular area of different colors that you have to represent by a single color.  Imagine doing the same thing to a photograph.  How would you go about this?  By taking an average, that's how.  If you were doing this to a photograph of the empty sky, you might pick a light blue color.  When you are dealing with a line, you are dealing with a geometric object with width.  You're not really drawing a line, you're drawing a solid rectangle.  It's only in math that lines exist with no width - the lines you draw exist to pretend they are the "edges", the infinitely small exact points at which one thing starts and another ends.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Anti-aliasing copes with this by doing what any digital camera would do, in trying to decide what color a target pixel would be.  Imagine the target pixel as a rectangular area of different colors that you have to represent by a single color.  Imagine doing the same thing to a photograph.  How would you go about this?  By taking an average, that's how.  If you were doing this to a photograph of the empty sky, you might pick a light blue color.  When you are dealing with a line, you are dealing with a geometric object with width.  You're not really drawing a line, you're drawing a solid rectangle.  It's only in math that lines exist with no width - the lines you draw exist to pretend they are the "edges", the infinitely small exact points at which one thing starts and another ends.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l17" >Line 17:</td>
<td colspan="2" class="diff-lineno">Line 17:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>In doing pixel and sprite art, you assume that your lines are usually 1 pixel in width.  To anti-alias, you, in your imagination, superimpose the line on a grid representing the real pixels you're drawing on to.  If the real, geometric line that you are trying to represent covers up a pixel completely, that pixel is the color of the line.  If the real, geometric line doesn't touch the pixel, the pixel gets no color from the line.  If the line covers it up partly, which is most common, the final color gets mixed towards the color of the line by exact fraction of how much the line covers the pixel.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>In doing pixel and sprite art, you assume that your lines are usually 1 pixel in width.  To anti-alias, you, in your imagination, superimpose the line on a grid representing the real pixels you're drawing on to.  If the real, geometric line that you are trying to represent covers up a pixel completely, that pixel is the color of the line.  If the real, geometric line doesn't touch the pixel, the pixel gets no color from the line.  If the line covers it up partly, which is most common, the final color gets mixed towards the color of the line by exact fraction of how much the line covers the pixel.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>http://<del class="diffchange diffchange-inline">exong</del>.<del class="diffchange diffchange-inline">net</del>/<del class="diffchange diffchange-inline">wesnoth</del>-<del class="diffchange diffchange-inline">attach</del>/<del class="diffchange diffchange-inline">files</del>/anti_aliasing_212.png</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>http://<ins class="diffchange diffchange-inline">wesnoth</ins>.<ins class="diffchange diffchange-inline">org</ins>/<ins class="diffchange diffchange-inline">wiki</ins>-<ins class="diffchange diffchange-inline">images</ins>/<ins class="diffchange diffchange-inline">exong-backup</ins>/anti_aliasing_212.png</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Covering it all the way gives a full 1/1, and it goes all the way to the line's color.  Covering 1/2 of the way moves it half of the way to the color - if we have a black line on a white background, halfway between those two colors is a medium gray.  Covering just a tiny corner of the pixel with the line will mix in just a little bit of the line's color into the pixel - for the example we've been using this whole time, it'd end up a very light grey.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Covering it all the way gives a full 1/1, and it goes all the way to the line's color.  Covering 1/2 of the way moves it half of the way to the color - if we have a black line on a white background, halfway between those two colors is a medium gray.  Covering just a tiny corner of the pixel with the line will mix in just a little bit of the line's color into the pixel - for the example we've been using this whole time, it'd end up a very light grey.</div></td></tr>
</table>Max2008https://wiki.wesnoth.org/index.php?title=How_to_Anti-Alias_Sprite_Art&diff=22001&oldid=prevSgt. Groovy at 19:30, 21 February 20082008-02-21T19:30:27Z<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revision as of 19:30, 21 February 2008</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l34" >Line 34:</td>
<td colspan="2" class="diff-lineno">Line 34:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[Create]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[Create]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[Create Art]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[Create Art]]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Category: Art Tutorials]]</ins></div></td></tr>
</table>Sgt. Groovyhttps://wiki.wesnoth.org/index.php?title=How_to_Anti-Alias_Sprite_Art&diff=6696&oldid=prevJetryl: /* Art */2006-01-27T08:50:52Z<p><span dir="auto"><span class="autocomment">Art</span></span></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revision as of 08:50, 27 January 2006</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l20" >Line 20:</td>
<td colspan="2" class="diff-lineno">Line 20:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Covering it all the way gives a full 1/1, and it goes all the way to the line's color.  Covering 1/2 of the way moves it half of the way to the color - if we have a black line on a white background, halfway between those two colors is a medium gray.  Covering just a tiny corner of the pixel with the line will mix in just a little bit of the line's color into the pixel - for the example we've been using this whole time, it'd end up a very light grey.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Covering it all the way gives a full 1/1, and it goes all the way to the line's color.  Covering 1/2 of the way moves it half of the way to the color - if we have a black line on a white background, halfway between those two colors is a medium gray.  Covering just a tiny corner of the pixel with the line will mix in just a little bit of the line's color into the pixel - for the example we've been using this whole time, it'd end up a very light grey.</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===Applications to sprite art:===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===Applications to sprite art:===</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">This </del>is how you make anything that is not a vertical or horizontal <del class="diffchange diffchange-inline">line </del>look good.  You can get away with not doing anti-aliasing on many parts of your images, but if you do it some of the time, on the parts where it is most needed, it will make the image look much better.  Anti-aliasing is often used on things like staves, or swords, when they hang at a slight angle rather than straight up or straight down.</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">Anti-aliasing </ins>is how you make anything that is not a vertical or horizontal <ins class="diffchange diffchange-inline">edge </ins>look good.  You can get away with not doing anti-aliasing on many parts of your images, but if you do it some of the time, on the parts where it is most needed, it will make the image look much better.  Anti-aliasing is often used on things like staves, or swords, when they hang at a slight angle rather than straight up or straight down.</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* One really nice trick is that mixing colors by transparency works exactly the same way as the color mixing I described above - in fact, it's the exact same thing.  If you anti-alias the edges of your units, where they interface with the terrain, they will look to have edges that follow the actual shape you intended, rather than being forced into a cartesian grid.  You can create pixels along the edges of your units that are the same color as the edge, but with variable transparency.  We can do this because, though we don't know what it's going to be mixed with, we do know how much of the unit's color to mix with the background, whatever that background is.  It follows the same rules as those for the line I showed above.  That "how much of the line's color" is the level of opacity.  To do this, you will need a program which can actually work with transparency values, like Adobe Photoshop, or the free Gnu Image Manipulation Program (GIMP).</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* One advanced way to have naturally anti-aliased lines is to draw your sprites with a paintbrush instead of the pencil tool.  This is, however, a very difficult technique, and not something to be attempted unless you are a master at sprite art.</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">== See Also ==</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">One really nice trick is that mixing colors by transparency works exactly the same way as the color mixing I described above - in fact, it's the exact same thing.  If you anti-alias the edges of your units, where they interface with the terrain, they will look to have edges that follow the actual shape you intended, rather than being forced into a cartesian grid.  You can create pixels along the edges of your units that are the same color as the edge, but with variable transparency.  We can do this because, though we don't know what it's going to be mixed with, we do know how much of the unit's color to mix with the background, whatever that background is.  It follows the same rules as those for the line I showed above.  That "how much of the line's color" is the level of opacity.  To do this, you will need a program which can actually work with transparency values, like Adobe Photoshop, or the free Gnu Image Manipulation Program (GIMP).</del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* [[Create]]</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* [[Create Art]]</ins></div></td></tr>
</table>Jetrylhttps://wiki.wesnoth.org/index.php?title=How_to_Anti-Alias_Sprite_Art&diff=6692&oldid=prevJetryl at 08:42, 27 January 20062006-01-27T08:42:39Z<p></p>
<p><b>New page</b></p><div>Anti-aliasing is a technique designed to counter the inherent "grain" of computer displays, a grain that results from their cartesian nature. Despite early experiments with radically different display technologies, the computing industry settled on this display system of rectangularly arrayed pixels, and to effectively use it, you must overcome one of it's greatest inherent limits. Anti-aliasing is designed to do just that.<br />
<br />
The problem is this, when rendering a line, distances between drawn elements on a screen are not infinitesimal. You can only make a change to your image at fixed distances, specifically the true dpi resolution of your current display setting. As an aside, this is not to be confused with the display setting recognized by the operating system - macintosh screens were only 72dpi (dots per inch, lengthwise) on the original macintosh computers, though they have inherited that setting in name, it became meaningless with the advent of the first color screens. Likewise, though they pretend that they do, computers running windows very rarely have a monitor set to exactly 96dpi. Something near or above those is not uncommon these days, though.<br />
<br />
To render a solid line, you cannot simply place pixels (picture elements) in the target color, as you might when drawing with a pen on paper, because the granularity of them on the screen is so big that you can see the breaks between the rows. The result of drawing a solid black line on a white background, without antialiasing, will look like this:<br />
<br />
http://exong.net/wesnoth-attach/files/aliased_line_144.png<br />
<br />
Notice the rather garish and sudden shifts between pixel rows? These have many names, including the "jaggies", and are an unnecessary evil.<br />
<br />
This is how much smoother the line looks if you anti-alias it:<br />
<br />
http://exong.net/wesnoth-attach/files/anti_aliased_line_634.png<br />
<br />
Anti-aliasing copes with this by doing what any digital camera would do, in trying to decide what color a target pixel would be. Imagine the target pixel as a rectangular area of different colors that you have to represent by a single color. Imagine doing the same thing to a photograph. How would you go about this? By taking an average, that's how. If you were doing this to a photograph of the empty sky, you might pick a light blue color. When you are dealing with a line, you are dealing with a geometric object with width. You're not really drawing a line, you're drawing a solid rectangle. It's only in math that lines exist with no width - the lines you draw exist to pretend they are the "edges", the infinitely small exact points at which one thing starts and another ends.<br />
<br />
In doing pixel and sprite art, you assume that your lines are usually 1 pixel in width. To anti-alias, you, in your imagination, superimpose the line on a grid representing the real pixels you're drawing on to. If the real, geometric line that you are trying to represent covers up a pixel completely, that pixel is the color of the line. If the real, geometric line doesn't touch the pixel, the pixel gets no color from the line. If the line covers it up partly, which is most common, the final color gets mixed towards the color of the line by exact fraction of how much the line covers the pixel.<br />
<br />
http://exong.net/wesnoth-attach/files/anti_aliasing_212.png<br />
<br />
Covering it all the way gives a full 1/1, and it goes all the way to the line's color. Covering 1/2 of the way moves it half of the way to the color - if we have a black line on a white background, halfway between those two colors is a medium gray. Covering just a tiny corner of the pixel with the line will mix in just a little bit of the line's color into the pixel - for the example we've been using this whole time, it'd end up a very light grey.<br />
<br />
===Applications to sprite art:===<br />
<br />
This is how you make anything that is not a vertical or horizontal line look good. You can get away with not doing anti-aliasing on many parts of your images, but if you do it some of the time, on the parts where it is most needed, it will make the image look much better. Anti-aliasing is often used on things like staves, or swords, when they hang at a slight angle rather than straight up or straight down.<br />
<br />
One really nice trick is that mixing colors by transparency works exactly the same way as the color mixing I described above - in fact, it's the exact same thing. If you anti-alias the edges of your units, where they interface with the terrain, they will look to have edges that follow the actual shape you intended, rather than being forced into a cartesian grid. You can create pixels along the edges of your units that are the same color as the edge, but with variable transparency. We can do this because, though we don't know what it's going to be mixed with, we do know how much of the unit's color to mix with the background, whatever that background is. It follows the same rules as those for the line I showed above. That "how much of the line's color" is the level of opacity. To do this, you will need a program which can actually work with transparency values, like Adobe Photoshop, or the free Gnu Image Manipulation Program (GIMP).</div>Jetryl