<?xml version="1.0" encoding="UTF-8" standalone="yes"?><oembed><version><![CDATA[1.0]]></version><provider_name><![CDATA[Hanami Devlog]]></provider_name><provider_url><![CDATA[https://electromagneticproject.wordpress.com]]></provider_url><author_name><![CDATA[push start to begin]]></author_name><author_url><![CDATA[https://electromagneticproject.wordpress.com/author/pushstarttobegin/]]></author_url><title><![CDATA[A Day of Walk&nbsp;Cycles]]></title><type><![CDATA[link]]></type><html><![CDATA[<p><a href="https://electromagneticproject.files.wordpress.com/2012/01/hana-walk-cycle.jpg"><img loading="lazy" data-attachment-id="413" data-permalink="https://electromagneticproject.wordpress.com/2012/01/26/a-day-of-walk-cycles/hana-walk-cycle/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/01/hana-walk-cycle.jpg" data-orig-size="1482,1884" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Hana Walk Cycle" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/01/hana-walk-cycle.jpg?w=236" data-large-file="https://electromagneticproject.files.wordpress.com/2012/01/hana-walk-cycle.jpg?w=806" src="https://electromagneticproject.files.wordpress.com/2012/01/hana-walk-cycle.jpg?w=235&#038;h=300" alt="" title="Hana Walk Cycle" width="235" height="300" class="aligncenter size-medium wp-image-413" srcset="https://electromagneticproject.files.wordpress.com/2012/01/hana-walk-cycle.jpg?w=235&amp;h=300 235w, https://electromagneticproject.files.wordpress.com/2012/01/hana-walk-cycle.jpg?w=470&amp;h=597 470w, https://electromagneticproject.files.wordpress.com/2012/01/hana-walk-cycle.jpg?w=118&amp;h=150 118w" sizes="(max-width: 235px) 100vw, 235px" /></a><br />
In home-made games, I often find myself judging the quality of the game on the quality of the character animations, specifically on the walk cycle. To me, a game character without a natural-feeling walk animation is a character made with no real love or attention, and shows poor effort. Despite this, I would like to point out that games like <a href="http://www.indiegames.com/2010/12/browser_game_pick_one_chance_a.html" target="_blank">One Chance</a> can be redeemed by mind-blowing gameplay. This may look basic, but trust me it makes your brain work up a sweat.</p>
<p>MAJOR SPOILER ALERT.<br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe class='youtube-player' width='640' height='360' src='https://www.youtube.com/embed/ogBa_ZY-_CA?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent' allowfullscreen='true' style='border:0;' sandbox='allow-scripts allow-same-origin allow-popups allow-presentation'></iframe></span><br />
I have yet to memorise the standard human walk-cycle, or even find an example that I use every time I animated a human character. In this situation, I usually turn to Google for new examples to follow. I quite liked <a href="http://fletch-animation.blogspot.com/2010/11/2d-walk-cycle_29.html" target="_blank">this</a> example, provided by a digital animation student from Falmouth. It&#8217;s accompanied by a video of an <em>actual</em> human being walking, and the student&#8217;s drawn interpretation based on the key cycle points. In my opinion, this is alot more helpful than cartoon examples or stick-figure tutorials.<br />
<img src="https://electromagneticproject.files.wordpress.com/2012/01/walkcycleimage.png?w=300" class="aligncenter"><br />
I tried to adapt this into the little biro sketch above, which I tried to make to the same proportions as my pixel sprite. The inconsistency between drawn characters is exactly why I am not an animator! I used the frame-based animation tool in Photoshop to get a feel for my first-try walk-sequence:<br />
<a href="https://electromagneticproject.files.wordpress.com/2012/01/biro-animation2.gif"><img loading="lazy" data-attachment-id="419" data-permalink="https://electromagneticproject.wordpress.com/2012/01/26/a-day-of-walk-cycles/biro-animation2/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/01/biro-animation2.gif" data-orig-size="191,238" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Biro-Animation2" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/01/biro-animation2.gif?w=191" data-large-file="https://electromagneticproject.files.wordpress.com/2012/01/biro-animation2.gif?w=191" src="https://electromagneticproject.files.wordpress.com/2012/01/biro-animation2.gif?w=191&#038;h=238" alt="" title="Biro-Animation2" width="191" height="238" class="aligncenter size-full wp-image-419" /></a><br />
The arms are a little erratic at best, but I was surprised at how well the legs flowed! Normally in my first go, I forget which leg is which and they end up merging in the middle. The problem from here was translating this infinitely high dpi image into a tiny game sprite with legs 3 pixels high (as I reminded myself in the image just in case.) If you look back at the original sprite, the legs were going to be 2 pixel high, but I decided this probably wouldn&#8217;t help a natural walk cycle. Just to update you on the few changes I have already made to the design, here&#8217;s this morning&#8217;s sprite:<br />
<a href="https://electromagneticproject.files.wordpress.com/2012/01/new-hana-sprite.jpg"><img loading="lazy" data-attachment-id="421" data-permalink="https://electromagneticproject.wordpress.com/2012/01/26/a-day-of-walk-cycles/new-hana-sprite/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/01/new-hana-sprite.jpg" data-orig-size="90,102" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="New Hana Sprite" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/01/new-hana-sprite.jpg?w=90" data-large-file="https://electromagneticproject.files.wordpress.com/2012/01/new-hana-sprite.jpg?w=90" src="https://electromagneticproject.files.wordpress.com/2012/01/new-hana-sprite.jpg?w=90&#038;h=102" alt="" title="New Hana Sprite" width="90" height="102" class="aligncenter size-full wp-image-421" /></a><br />
I think the only noticeable differences are that I made the legs slightly longer and the head less wide, although I can&#8217;t say for sure without comparing the two for hours. I spent a lot of time today rearranging pixels until they looked right, rather than concentrating on little bits.<br />
To avoid getting Hana&#8217;s legs mixed up in the process of animating, I worked on each leg individually to begin with. I then placed the two images on top of each other to reveal the full Hana, although it was very difficult to predict the outcome this way! What I&#8217;ve ended up with is a sort of over-exaggerated run, partly due to the lack of pixels making very harsh shapes out of the legs:<br />
<div data-shortcode="caption" id="attachment_427" style="width: 445px" class="wp-caption aligncenter"><a href="https://electromagneticproject.files.wordpress.com/2012/01/hana-legs.jpg"><img loading="lazy" aria-describedby="caption-attachment-427" data-attachment-id="427" data-permalink="https://electromagneticproject.wordpress.com/2012/01/26/a-day-of-walk-cycles/hana-legs/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/01/hana-legs.jpg" data-orig-size="435,207" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Hana Legs" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/01/hana-legs.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/01/hana-legs.jpg?w=435" src="https://electromagneticproject.files.wordpress.com/2012/01/hana-legs.jpg?w=435&#038;h=207" alt="" title="Hana Legs" width="435" height="207" class="size-full wp-image-427" srcset="https://electromagneticproject.files.wordpress.com/2012/01/hana-legs.jpg 435w, https://electromagneticproject.files.wordpress.com/2012/01/hana-legs.jpg?w=150&amp;h=71 150w, https://electromagneticproject.files.wordpress.com/2012/01/hana-legs.jpg?w=300&amp;h=143 300w" sizes="(max-width: 435px) 100vw, 435px" /></a><p id="caption-attachment-427" class="wp-caption-text">Individual Leg Animations in Graphics Gale</p></div><br />
<a href="https://electromagneticproject.files.wordpress.com/2012/01/first-walk-cycle.gif"><img data-attachment-id="428" data-permalink="https://electromagneticproject.wordpress.com/2012/01/26/a-day-of-walk-cycles/first-walk-cycle/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/01/first-walk-cycle.gif" data-orig-size="120,128" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="First-Walk-Cycle" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/01/first-walk-cycle.gif?w=120" data-large-file="https://electromagneticproject.files.wordpress.com/2012/01/first-walk-cycle.gif?w=120" src="https://electromagneticproject.files.wordpress.com/2012/01/first-walk-cycle.gif" alt="" title="First-Walk-Cycle" class="aligncenter size-full wp-image-428" /></a><br />
I added the arms later, trying to avoid the flailing motions of the test animation. The result still doesn&#8217;t seem perfect, and definitely isn&#8217;t a <em>natural</em> motion! In an effort to improve this, I&#8217;ve been working on another sequence, which concentrates on the character twisting slightly to put emphasis on the particular leg which is taking the step. This seems to provide smoother arm movement, as the body twists as the arms move. It&#8217;s based on this little strip I quickly drew up (but don&#8217;t think I really finished):<br />
<a href="https://electromagneticproject.files.wordpress.com/2012/01/twisty.jpg"><img loading="lazy" data-attachment-id="429" data-permalink="https://electromagneticproject.wordpress.com/2012/01/26/a-day-of-walk-cycles/twisty/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/01/twisty.jpg" data-orig-size="1266,298" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Twisty" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/01/twisty.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/01/twisty.jpg?w=1024" src="https://electromagneticproject.files.wordpress.com/2012/01/twisty.jpg?w=300&#038;h=70" alt="" title="Twisty" width="300" height="70" class="aligncenter size-medium wp-image-429" srcset="https://electromagneticproject.files.wordpress.com/2012/01/twisty.jpg?w=297&amp;h=70 297w, https://electromagneticproject.files.wordpress.com/2012/01/twisty.jpg?w=595&amp;h=140 595w, https://electromagneticproject.files.wordpress.com/2012/01/twisty.jpg?w=150&amp;h=35 150w, https://electromagneticproject.files.wordpress.com/2012/01/twisty.jpg?w=300&amp;h=71 300w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
I haven&#8217;t managed to animate the legs for this sequence yet, but the rest seems to working. This can especially be said for the shifting eyes, which just give the whole animation a sense of direction!<a href="https://electromagneticproject.files.wordpress.com/2012/01/walking-hana.gif"><img loading="lazy" data-attachment-id="430" data-permalink="https://electromagneticproject.wordpress.com/2012/01/26/a-day-of-walk-cycles/walking-hana/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/01/walking-hana.gif" data-orig-size="90,102" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Walking-Hana" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/01/walking-hana.gif?w=90" data-large-file="https://electromagneticproject.files.wordpress.com/2012/01/walking-hana.gif?w=90" src="https://electromagneticproject.files.wordpress.com/2012/01/walking-hana.gif?w=90&#038;h=102" alt="" title="Walking-Hana" width="90" height="102" class="aligncenter size-full wp-image-430" /></a><br />
This was really easily applied to Za-chan, who is the exact same shape and size as Hana. I hope this second take is going somewhere, as it seems a lot neater than the previous attempt.<br />
<a href="https://electromagneticproject.files.wordpress.com/2012/01/walking-zachan1.gif"><img loading="lazy" data-attachment-id="432" data-permalink="https://electromagneticproject.wordpress.com/2012/01/26/a-day-of-walk-cycles/walking-zachan-2/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/01/walking-zachan1.gif" data-orig-size="75,85" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Walking-Zachan" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/01/walking-zachan1.gif?w=75" data-large-file="https://electromagneticproject.files.wordpress.com/2012/01/walking-zachan1.gif?w=75" src="https://electromagneticproject.files.wordpress.com/2012/01/walking-zachan1.gif?w=75&#038;h=85" alt="" title="Walking-Zachan" width="75" height="85" class="aligncenter size-full wp-image-432" /></a></p>
]]></html><thumbnail_url><![CDATA[https://electromagneticproject.files.wordpress.com/2012/01/hana-walk-cycle.jpg?w=235&fit=440%2C330]]></thumbnail_url><thumbnail_width><![CDATA[]]></thumbnail_width><thumbnail_height><![CDATA[]]></thumbnail_height></oembed>