<?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>Final Form Games &#187; 2D</title>
	<atom:link href="http://www.finalformgames.com/tag/2d/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.finalformgames.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Wed, 18 Jan 2012 18:11:31 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.3</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Style Study: Motion Blur in Street Fighter 3</title>
		<link>http://www.finalformgames.com/uncategorized/style-study-motion-blur-in-street-fighter-3/</link>
		<comments>http://www.finalformgames.com/uncategorized/style-study-motion-blur-in-street-fighter-3/#comments</comments>
		<pubDate>Wed, 23 Sep 2009 17:04:31 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[2D]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[sprites]]></category>
		<category><![CDATA[style study]]></category>

		<guid isPermaLink="false">http://finalformgames.com/?p=361</guid>
		<description><![CDATA[One of the classic problems of 2D animation is the tug-of-war between frame economy (each drawing takes lots of work/time) and high-speed movements (the faster the move, the more likely it is to &#8220;strobe&#8221; if you skimp on frames).  There&#8217;s also the issue that, even with a lot of frames, some movements are so fast [...]]]></description>
			<content:encoded><![CDATA[<p>One of the classic problems of 2D animation is the tug-of-war between frame economy (each drawing takes lots of work/time) and high-speed movements (the faster the move, the more likely it is to &#8220;strobe&#8221; if you skimp on frames).  There&#8217;s also the issue that, even with a lot of frames, some movements are so fast that they would usually become little more than a blur on film.</p>
<p>As you might imagine, developing a 2D fighting videogame really brings this problem front-and-center. Most of the gameplay in a typical fighting game centers around two large characters executing high-speed attacks, continuously, for minutes at a time. Because traditional sprite-art games typically eschew the use of any semi-transparent pixels, they often have to get pretty creative to emulate the effects of motion blur.</p>
<p>Today I went through my Street Fighter 3 sprite collection* to pick out some good example frames, and was surprised to discover a different fast-motion solution for almost every character.  As I went through them frame-by-frame, it became more and more clear that the lead animator of each character was essentially allowed to use whatever technique they preferred to achieve the effects they were after.  What follows is a grab-bag of these tricks in action.</p>
<p><img class="size-full wp-image-372 alignnone" style="background-color: grey;" title="22035" src="http://finalformgames.com/wp-content/uploads/2009/09/22035.png" alt="22035" width="406" height="215" /></p>
<p>This first one is the character Makoto.  This is what I think of as a pretty typical <a href="http://en.wikipedia.org/wiki/12_basic_principles_of_animation#Squash_and_stretch">post-Disney stretch</a>, being used to sell one hell of a jump-kick.  Notice that the contour line around the foot is consistent with the contour treatment on the rest of the character.</p>
<p><img class="size-full wp-image-373 alignnone" style="background-color: grey;" title="22117" src="http://finalformgames.com/wp-content/uploads/2009/09/22117.png" alt="22117" width="406" height="215" /></p>
<p>They&#8217;re also pretty fearless about stretching the physical length of the attacking limb, to further accentuate the speed and force of the hit. Again: classic Disney.  Makoto in particular is an absolute masterclass of physical animation, with her oversized gi and super-long headband flying every which-way.  The fact that these animators are doing it all within 120-odd pixels square just makes it more impressive.</p>
<p><img class="alignnone size-full wp-image-365" style="background-color: grey;" title="12444" src="http://finalformgames.com/wp-content/uploads/2009/09/12444.png" alt="12444" width="288" height="240" /></p>
<p>With Oro, they really loosen up and go nuts with the squash-and-stretch.  In addition, there are more subtle differences: notice that the contour treatment is lighter on the fast-moving limb than on the rest of the body.</p>
<p><img class="alignnone size-full wp-image-364" style="background-color: grey;" title="12225" src="http://finalformgames.com/wp-content/uploads/2009/09/12225.png" alt="12225" width="288" height="240" /></p>
<p>Here you can see the contour change even more clearly.</p>
<p><img class="alignnone size-full wp-image-363" style="background-color: grey;" title="12105" src="http://finalformgames.com/wp-content/uploads/2009/09/12105.png" alt="12105" width="288" height="240" /></p>
<p>And check out this transparency hack, eh?  You wacky Capcom animators!</p>
<p><img class="alignnone size-full wp-image-366" style="background-color: grey;" title="18808" src="http://finalformgames.com/wp-content/uploads/2009/09/18808.png" alt="18808" width="290" height="265" /></p>
<p>&#8230;and now for something completely different.  Akuma&#8217;s movements are very stiff and staccato in comparison to Makoto&#8217;s and Oro&#8217;s, though it&#8217;s not clear if that&#8217;s a deliberate stylistic choice to differentiate their martial arts or just a quality-control breakdown.  However, this motion-lines technique is how all his fast movements are treated.  Like all the techniques used in this game, it works very well, but what an odd contrast!</p>
<p>Finally, we have Chun-Li. As the original Fastest Character In Street Fighter, this character is all about speed! Strangely, her animators seem to be doing everything they can to avoid squash-and-stretch. When it <em>is</em> used, it&#8217;s used&#8230; weirdly. In general, the character almost feels like it was filmed using a higher shutter speed.  Check it out:</p>
<p><img class="alignnone size-full wp-image-367" style="background-color: grey;" title="19962" src="http://finalformgames.com/wp-content/uploads/2009/09/19962.png" alt="19962" width="300" height="230" /></p>
<p>The frame above is the closest I could find to the sort of treatment we saw on Oro, but the foot is clipped to a point. I wonder if that&#8217;s to emphasize the contrast between her exaggerated thighs and small feet?</p>
<p><img class="alignnone size-full wp-image-368" style="background-color: grey;" title="19963" src="http://finalformgames.com/wp-content/uploads/2009/09/19963.png" alt="19963" width="300" height="230" /></p>
<p>The stretch/motion-blur is pretty dramatic here, but&#8230; it&#8217;s sitting behind a proportionately normal and fully rendered limb? Plus, the motion trail is actually lit, or at least gets darker in an effort to achieve some sort of fading effect.</p>
<p><img class="alignnone size-full wp-image-370" style="background-color: grey;" title="20562" src="http://finalformgames.com/wp-content/uploads/2009/09/20562.png" alt="20562" width="300" height="230" /></p>
<p>Now they&#8217;re completely disconnecting the blur element from the limb, and introducing some of that semi-transparent-looking stuff we saw with Oro.</p>
<p><img class="alignnone size-full wp-image-369" style="background-color: grey;" title="20371" src="http://finalformgames.com/wp-content/uploads/2009/09/20371.png" alt="20371" width="300" height="230" /></p>
<p>Same deal, but even more obviously out-of-step with the stuff we saw before.</p>
<p><img class="alignnone size-full wp-image-371" style="background-color: grey;" title="20808" src="http://finalformgames.com/wp-content/uploads/2009/09/20808.png" alt="20808" width="300" height="230" /></p>
<p>Finally, here&#8217;s a frame from her famous lightning kick attack.  This was probably the official Fastest Fighting Game Move Of All Time when it debuted in Street Fighter 2 (possibly tied with E. Honda&#8217;s hundred-hand-slap), and yet its execution in part 3 is extremely underwhelming.  After seeing all the juicy speed effects on the previous characters, this ghost-limb trick really feels like a missed opportunity to me.  Again with the high-shutter-speed gag.</p>
<p>Fun as it was to pick apart the monolithic game art achievements of yore, this style study left me with more respect for the Capcom art team, not less. I&#8217;ve logged more hours than I&#8217;d like to admit on this game, and never once noticed these discrepancies. I&#8217;m sure some of that comes from the fact that only two characters can fight on-screen at a time, so the visual hodge-podge will only ever get so ridiculous. However, I suspect the bulk of said hodge-podge skates by because, at these framerates, your brain is only subconsciously able to process what it&#8217;s seeing (let alone register that Chun-Li has three legs). &#8220;Persistence of vision&#8221; is all about our brain wanting to believe in continuity between frames, and these animations have all been ruthlessly tested and refined towards accomplishing that mental sleight-of-hand. The fact that they went about it in different ways turns out not to matter very much, because they all ultimately achieved their goal: the illusion of speed.</p>
<p>Once again, I am amazed by the users&#8217; tolerance for inconsistency in the final product.  Take heart, game artists!  Your players will forgive you for far more trespasses than you&#8217;ll forgive yourself!</p>
<p><small>*I got all the frames for this post from <a href="http://www.zweifuss.com/">this excellent website</a> and, by extension, from the seminal Capcom fighter Street Fighter 3.  Go check it out if you want to see these animations in motion, and pick up a hefty dose of inspiration while you&#8217;re there!</small></p>
]]></content:encoded>
			<wfw:commentRss>http://www.finalformgames.com/uncategorized/style-study-motion-blur-in-street-fighter-3/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

