<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Zach Archer Blog &#187; nintendo</title>
	<atom:link href="http://blog.zacharcher.com/tag/nintendo/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.zacharcher.com</link>
	<description>This blog is GO!</description>
	<lastBuildDate>Fri, 09 Jul 2010 23:02:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>NES Pixel Art</title>
		<link>http://blog.zacharcher.com/2008/11/04/nes-pixel-art/</link>
		<comments>http://blog.zacharcher.com/2008/11/04/nes-pixel-art/#comments</comments>
		<pubDate>Tue, 04 Nov 2008 10:43:48 +0000</pubDate>
		<dc:creator>Zach</dc:creator>
				<category><![CDATA[Games]]></category>
		<category><![CDATA[color]]></category>
		<category><![CDATA[nes]]></category>
		<category><![CDATA[nintendo]]></category>
		<category><![CDATA[pixel art]]></category>

		<guid isPermaLink="false">http://blog.zacharcher.com/?p=70</guid>
		<description><![CDATA[My tile engine is getting a facelift, I'm scrapping the Atari 2600 palette, and switching to the glorious 56 colors of the Nintendo Entertainment System. Eventually I want to add NTSC artifacts using Pixel Bender. For now, I have to produce a small miracle of art assets, and use the tiny palette effectively. I never [...]]]></description>
			<content:encoded><![CDATA[<p>My <a href="http://blog.zacharcher.com/2008/07/12/tile-engine-is-go/">tile engine</a> is getting a facelift, I'm scrapping the <a href="http://en.wikipedia.org/wiki/List_of_videogame_consoles_palettes#Atari_2600">Atari 2600 palette</a>, and switching to the glorious <a href="http://en.wikipedia.org/wiki/List_of_videogame_consoles_palettes#NES">56 colors of the Nintendo Entertainment System</a>.</p>
<p>Eventually I want to add <a href="http://blargg.fileave.com/ntsc-vs-palette/">NTSC artifacts</a> using Pixel Bender. For now, I have to produce a small miracle of art assets, and use the tiny palette effectively. I never thought I'd <em>study</em> old Nintendo games, but that's exactly how I spent my evening.</p>
<p>According to <a href="http://www.zoggles.co.uk/asp/tutorials.asp?tut=17">Tsugomo</a>, the eye perceives brighter colors as being closer. Most games with decent art have solid blocks brighter than the background.</p>
<div class="wp-caption aligncenter" style="width: 436px"><img title="Mega Man 3 - Needle Man" src="http://zacharcher.com/blog_pics/2008/nes_art/mm3_needle_2.png" alt="" width="426" height="281" /><p class="wp-caption-text">Mega Man 3 - Needle Man</p></div>
<p><span id="more-70"></span></p>
<div class="wp-caption aligncenter" style="width: 504px"><img title="Mega Man 3 - Shadow Man" src="http://zacharcher.com/blog_pics/2008/nes_art/mm3_shadow.png" alt="Mega Man 3 - Shadow Man" width="494" height="454" /><p class="wp-caption-text">Mega Man 3 - Shadow Man</p></div>
<p>Obviously, you can see what's solid, and what's not. But, there are other ways to make this distinction.</p>
<div class="wp-caption aligncenter" style="width: 492px"><img title="Mega Man 2 - Air Man" src="http://zacharcher.com/blog_pics/2008/nes_art/mm2_air.png" alt="Mega Man 2 - Air Man" width="482" height="455" /><p class="wp-caption-text">Mega Man 2 - Air Man</p></div>
<p>In this example, the noisy texture of the glass tiles sets them apart from the solid background.</p>
<div class="wp-caption aligncenter" style="width: 342px"><img title="Mega Man 2 - Bubble Man" src="http://zacharcher.com/blog_pics/2008/nes_art/mm2_bubble.png" alt="Mega Man 2 - Bubble Man" width="332" height="393" /><p class="wp-caption-text">Mega Man 2 - Bubble Man</p></div>
<p>The waterfall is a torrent of bright colors, so the solid platform has to be even brighter, mostly pure white. Mega Man is almost the same blue as the background, but stands out because in this case, he is darker.</p>
<div class="wp-caption aligncenter" style="width: 421px"><img title="Mega Man 2 - Flash Man" src="http://zacharcher.com/blog_pics/2008/nes_art/mm2_flash.png" alt="Mega Man 2 - Flash Man" width="411" height="423" /><p class="wp-caption-text">Mega Man 2 - Flash Man</p></div>
<p>Kinda pushing it here... Everything is blue. The platforms are bright enough to stand out, but Mega Man is almost lost in the background.</p>
<div class="wp-caption aligncenter" style="width: 504px"><img title="Mega Man 3 - Magnet Man" src="http://zacharcher.com/blog_pics/2008/nes_art/mm3_magnet.png" alt="Mega Man 3 - Magnet Man" width="494" height="464" /><p class="wp-caption-text">Mega Man 3 - Magnet Man</p></div>
<p>Interesting use of color. Lots of black pixels in this image, but the platforms have the brightest colors, and stand out.</p>
<div class="wp-caption aligncenter" style="width: 494px"><img title="Mega Man 3 - Needle Man" src="http://zacharcher.com/blog_pics/2008/nes_art/mm3_needle.png" alt="Mega Man 3 - Needle Man" width="484" height="332" /><p class="wp-caption-text">Mega Man 3 - Needle Man</p></div>
<div class="wp-caption aligncenter" style="width: 502px"><img title="Mega Man 3 - Needle Man" src="http://zacharcher.com/blog_pics/2008/nes_art/mm3_needle_3.png" alt="Mega Man 3 - Needle Man" width="492" height="450" /><p class="wp-caption-text">Mega Man 3 - Needle Man</p></div>
<p>These are tricky -- orange blocks are solid (they have bright highlights), green are background. They introduce this concept earlier in the level, too.</p>
<p>My game uses an overhead perspective, so I'm hunting for similar games with nice art. This screenshot is from the "Mission Impossible" Nintendo cartridge:</p>
<div class="wp-caption aligncenter" style="width: 491px"><img title="Mission Impossible - Stage 1" src="http://zacharcher.com/blog_pics/2008/nes_art/mi_1.png" alt="Mission Impossible - Stage 1" width="481" height="379" /><p class="wp-caption-text">Mission Impossible - Stage 1</p></div>
<p>I love the geometry and the crafty use of shadows. Almost every tile uses 4 shades of one particular hue, and the effect is striking. And again, the most significant objects have the brightest highlights (your character, the solid crates, the medical kit).</p>
<div class="wp-caption aligncenter" style="width: 499px"><img title="Mission Impossible - Stage 3" src="http://zacharcher.com/blog_pics/2008/nes_art/mi_2.png" alt="Mission Impossible - Stage 3" width="489" height="371" /><p class="wp-caption-text">Mission Impossible - Stage 3</p></div>
<p>More shadows, with varying lengths (compare the bench to the statue). This image uses a mere 14 colors, which surprises me.</p>
<p>One more from Mission Impossible, then it's bedtime:</p>
<div class="wp-caption aligncenter" style="width: 497px"><img title="Mission Impossible - Stage 3" src="http://zacharcher.com/blog_pics/2008/nes_art/mi_3.png" alt="Mission Impossible - Stage 3" width="487" height="453" /><p class="wp-caption-text">Mission Impossible - Stage 3</p></div>
<div class='bookmarkify'><a name='bookmarkify'></a><div class='linkbuttons'><a href='http://del.icio.us/post?url=http://blog.zacharcher.com/2008/11/04/nes-pixel-art/&amp;title=NES Pixel Art' title='Save to del.icio.us' onclick='target="_blank";' rel='nofollow'><img src='http://blog.zacharcher.com/wp-content/plugins/bookmarkify/delicious.png' style='width:16px; height:16px;' alt='[del.icio.us] ' /></a> <a href='http://digg.com/submit?phase=2&amp;url=http://blog.zacharcher.com/2008/11/04/nes-pixel-art/&amp;title=NES Pixel Art' title='Digg It!' onclick='target="_blank";' rel='nofollow'><img src='http://blog.zacharcher.com/wp-content/plugins/bookmarkify/digg.png' style='width:16px; height:16px;' alt='[Digg] ' /></a> <a href='http://reddit.com/submit?url=http://blog.zacharcher.com/2008/11/04/nes-pixel-art/&amp;title=NES Pixel Art' title='Reddit' onclick='target="_blank";' rel='nofollow'><img src='http://blog.zacharcher.com/wp-content/plugins/bookmarkify/reddit.png' style='width:16px; height:16px;' alt='[Reddit] ' /></a> <a href='http://twitter.com/home/?status=NES Pixel Art+http://blog.zacharcher.com/2008/11/04/nes-pixel-art/' title='Save to Twitter' onclick='target="_blank";' rel='nofollow'><img src='http://blog.zacharcher.com/wp-content/plugins/bookmarkify/twitter.png' style='width:16px; height:16px;' alt='[Twitter] ' /></a> <a href='http://www.feedburner.com/fb/a/emailFlare?itemTitle=NES Pixel Art&amp;uri=http://blog.zacharcher.com/2008/11/04/nes-pixel-art/&amp;loc=en_US' title='Email this to a friend' onclick='target="_blank";' rel='nofollow'><img src='http://blog.zacharcher.com/wp-content/plugins/bookmarkify/email.png' style='width:16px; height:16px;' alt='[Email] ' /></a>  <a title='See more bookmark and sharing options...' href='http://blog.zacharcher.com/2008/11/04/nes-pixel-art/#bookmarkify' rel='nofollow'><small>More&nbsp;&raquo;</small></a></div></div>]]></content:encoded>
			<wfw:commentRss>http://blog.zacharcher.com/2008/11/04/nes-pixel-art/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
