{"id":21060,"date":"2013-09-13T13:06:00","date_gmt":"2013-09-13T18:06:00","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=21060"},"modified":"2015-07-01T03:45:48","modified_gmt":"2015-07-01T08:45:48","slug":"project-good-robot-13-how-do-we-leg","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=21060","title":{"rendered":"Project Good Robot 13: How Do We Leg?"},"content":{"rendered":"

I’ve been reading back over this series, and I have to say I’m pretty happy at how far we’ve come in such a short time. But I have to admit the one thing we need more of in this write-up is crappy MS-Paint level illustrations. So let’s fix that. <\/p>\n

We start with our flying robot:<\/p>\n

gr13_leg1.jpg<\/td><\/tr><\/table><\/p>\n

Pfft. I have no idea why people waste money on artists making concept sketches. I think this looks awesome already! In fact, we could throw a little lens flare on that thing and we’d be ready to start taking pre-orders.<\/p>\n

As cool as this is, I think it would look even more amazing with a leg. Maybe even more than one leg. But we’ll start with one. The first step is to pick a horizontal offset from the body. Let’s say we draw a line that extends one unit to the left of the body. This creates a point which we will call the knee. The knee can move up and down, but it always has to stay the same distance from the body horizontally. (Yes, I could have the knee pivot instead of moving up and down, which would be more “correct”. But I’m going for an effect here.)<\/p>\n

gr13_leg2.jpg<\/td><\/tr><\/table><\/p>\n

Now we make a line straight down to the floor. This line must always be a certain length, keeping the knee a certain distance from the floor. We will call this bottom point the foot.<\/p>\n

gr13_leg3.jpg<\/td><\/tr><\/table><\/p>\n

As the robot moves, the knee will move horizontally to maintain its fixed distance. As it does so, it will run through a stupid-simple animation. The apparent location of the foot will actually orbit around the point that’s fixed to the floor. The knee will follow the same pattern, except that we cancel out the horizontal movement. This results in the knee just pumping up and down. <\/p>\n

gr13_leg4.jpg<\/td><\/tr><\/table><\/p>\n

With one point moving in a circle and the other moving in a line, it produces motion a bit like the piston rod<\/a> of an old locomotive.<\/p>\n

Except, we don’t want the foot to go underground, so we flatten out the bottom of the circle. <\/p>\n

gr13_leg5.jpg<\/td><\/tr><\/table><\/p>\n

Of course, having floating mathematical points is cool and all, but it doesn’t do us any good if the player can’t see this leg. So let’s construct a rectangle for the upper leg and have the lower leg consist of a single triangle.<\/p>\n

gr13_leg6.jpg<\/td><\/tr><\/table><\/p>\n

Whoopsie, I bungled making the rectangle. I connect the points wrong, which results in two overlapping triangles like so:<\/p>\n

gr13_leg7.jpg<\/td><\/tr><\/table><\/p>\n

But this actually looks a lot more interesting than just the rectangle leg. So, this has been promoted from bug to feature. Now we just slap a simple sprite over the knee to cover up the ugly point where the two polygons meet. <\/p>\n

gr13_leg8.jpg<\/td><\/tr><\/table><\/p>\n

Now let’s give it another leg on the other side.<\/p>\n

gr13_leg9.jpg<\/td><\/tr><\/table><\/p>\n

Now, I want the number of legs to be variable. And they all need to move through the same step animation, but at different points. Here is what I’ve figured out:<\/p>\n

On one side of the body, the legs will be evenly spaced around the circle. So if there are two legs on the left side of the body, then when one leg is at 0° then the other will be at 180°. If there are three, then they’ll be at 0°, 120°, and 240°. <\/p>\n

On the opposite side of the body, the legs will have the same spacing, but offset by a half-step. If the right legs are at 0° and 180°, then the other side will be at 90° and 270°. <\/p>\n

How does it look?<\/p>\n

gr13_walk.gif<\/td><\/tr><\/table><\/p>\n

You know, that’s kind of amusing. There are a LOT of parameters I could mess with: Move the knees up, move the legs out, make that step-circle animation wider or taller. I could adjust how much the head moves up and down. But this isn’t bad for a first try.<\/p>\n","protected":false},"excerpt":{"rendered":"

I’ve been reading back over this series, and I have to say I’m pretty happy at how far we’ve come in such a short time. But I have to admit the one thing we need more of in this write-up is crappy MS-Paint level illustrations. So let’s fix that. We start with our flying robot: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-21060","post","type-post","status-publish","format-standard","hentry","category-good-robot"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/21060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21060"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/21060\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=21060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=21060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}