Show Posts
1
Pixel Art / Find the correct vanishing point(s) for pier planks in stage mockup?
« on: January 19, 2018, 08:15:49 pm »
I wasn't sure whether this or the 2D&3D forum was more appropriate, but I just have a quick question about the perspective in this stage mockup I'm trying to do.
I wanted to do a simple wooden pier of perfectly aligned planks a la Blanka's stage in Street Fighter 2, but got very confused very quickly about how to maintain perspective and keep the planks of reasonable width.
Here's a quick look at the crude method I picked to draw my planks:
1. Find the vanishing point. In this case, I started by picking a vanishing point at the horizon of the ocean background, vertically centered with the display width of 480px.
2. Pick a uniform length for the edges of the planks nearest to the viewer. Out of pure superstition, I picked a number by which the display dimensions were easily divisible (in this case, 12px), in case it made any difference. (I had neither mathematical nor artistic premises to base that on.) Copy and paste as desired. These were going to be the "anchors" for the seams between my planks.
3. Use a line tool to interpolate a 1x1 line between the vanishing point and the near edge of the plank. Repeat until as many planks as I can fit into the shot are defined.
Here's a quick drawing of my method applied, with one of the sprites I drew for scale:
As you can figure out both from the image and better common sense than mine, I quickly ran into a big problem with my perspective. The planks nearest the vertical center of the image look better, but farther towards the sides, their far edges start to look more and more pinched, and the planks start to look warped.
When I realized this, these are the first things I could think of to troubleshoot:
1. Re-evaluate the vanishing point. In the image above, I've marked two potential one-point vanishing points. I started by working with the one relative to the horizon, but I'm not sure whether it would have been more correct to use a vanishing point relative to the center of the display window. All I know is I'm still missing something for figuring out where my plank lines meet.
2. Refer back to my primary reference (SF2 Blanka stage), which either cleared something up for me or confused me further, I'm not sure which. I used the line tool to try and find what I thought was the single vanishing point in the stage, and I seemed to find that...there were multiple? (Two? Four, even?) Here's the result of my crude "study":
(sorry for the .jpg artifacts, I couldn't find a .png of the stage in native resolution)
I'm sort of confused here. On the one hand, the planks furthest on the outside definitely appear to converge on a horizon-relative vanishing point. But the ones closest to the center appear to converge on a vanishing point slightly off-center and decidedly below the horizon. And since the planks are perfectly mirrored (shape-wise, at least) along the stage's vertical center, it looks like there's a total of four vanishing points, two on each side of the vertical center. I can't quite articulate why this perspective works in-game beyond a suspicion that it has to do with the screen scrolling (you'll never see more than half the stage at a time in-game), but I'd sure like to learn the logic behind it.
Additional context:
What are some other things I should look for (besides immediate stuff like "one-point or two-point perspective? where are the vanishing points?") when I study other fighting game backgrounds?
I wanted to do a simple wooden pier of perfectly aligned planks a la Blanka's stage in Street Fighter 2, but got very confused very quickly about how to maintain perspective and keep the planks of reasonable width.
Here's a quick look at the crude method I picked to draw my planks:
1. Find the vanishing point. In this case, I started by picking a vanishing point at the horizon of the ocean background, vertically centered with the display width of 480px.
2. Pick a uniform length for the edges of the planks nearest to the viewer. Out of pure superstition, I picked a number by which the display dimensions were easily divisible (in this case, 12px), in case it made any difference. (I had neither mathematical nor artistic premises to base that on.) Copy and paste as desired. These were going to be the "anchors" for the seams between my planks.
3. Use a line tool to interpolate a 1x1 line between the vanishing point and the near edge of the plank. Repeat until as many planks as I can fit into the shot are defined.
Here's a quick drawing of my method applied, with one of the sprites I drew for scale:
As you can figure out both from the image and better common sense than mine, I quickly ran into a big problem with my perspective. The planks nearest the vertical center of the image look better, but farther towards the sides, their far edges start to look more and more pinched, and the planks start to look warped.
When I realized this, these are the first things I could think of to troubleshoot:
1. Re-evaluate the vanishing point. In the image above, I've marked two potential one-point vanishing points. I started by working with the one relative to the horizon, but I'm not sure whether it would have been more correct to use a vanishing point relative to the center of the display window. All I know is I'm still missing something for figuring out where my plank lines meet.
2. Refer back to my primary reference (SF2 Blanka stage), which either cleared something up for me or confused me further, I'm not sure which. I used the line tool to try and find what I thought was the single vanishing point in the stage, and I seemed to find that...there were multiple? (Two? Four, even?) Here's the result of my crude "study":
(sorry for the .jpg artifacts, I couldn't find a .png of the stage in native resolution)
I'm sort of confused here. On the one hand, the planks furthest on the outside definitely appear to converge on a horizon-relative vanishing point. But the ones closest to the center appear to converge on a vanishing point slightly off-center and decidedly below the horizon. And since the planks are perfectly mirrored (shape-wise, at least) along the stage's vertical center, it looks like there's a total of four vanishing points, two on each side of the vertical center. I can't quite articulate why this perspective works in-game beyond a suspicion that it has to do with the screen scrolling (you'll never see more than half the stage at a time in-game), but I'd sure like to learn the logic behind it.
Additional context:
- The full pier graphic is meant to be 720px wide.
- Everything in this image was drawn in MS Paint. ...Yes, I know. I usually use MS Paint to initially "sketch" stuff since it feels superficially simpler, and then move on to GIMP when the piece either gets too complex to manage without layers or is going to be animated.
What are some other things I should look for (besides immediate stuff like "one-point or two-point perspective? where are the vanishing points?") when I study other fighting game backgrounds?