游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

分享为等角资产设置摄像机的方法

发布时间:2014-04-29 15:36:27 Tags:,,,,

作者:Junxue Li

曾有位朋友在Twitter上问我如何在正确的地方布置摄像机,因为Twitter篇幅有限,我只能回答他:只要简单地进行三角法计算,绘图然后你就知道了。现在我认为有必要在此分享更多详情。

问题:

如果你已经为自己的游戏做好等角网格了,如下图:

A value(from gamasutra)

A value(from gamasutra)

你已经算出了∠A的值,那么如何在3D场景中布置摄像机,以便准确渲染这个网格背景呢?

准确的解决方法:

针对这两个例子的统一网格设置:

A & B value(from gamasutra)

A & B value(from gamasutra)

首先,你必须将摄像机布置在东南水平方向,这样就可以从俯视图来看网格。这个例子是用Maya所制作,我认为在Max中也一样。

top view(from gamasutra)

top view(from gamasutra)

我们将摄像机至World Origin的距离称为“m”值。实际上的“m”值由你来指定,只要确保它的大小足够避免摄像机剪切建筑即可。

m value(from gamasutra)

m value(from gamasutra)

所以在Y轴坐标系统中,摄像机的位置值就是:

position value of the camera(from gamasutra)

position value of the camera(from gamasutra)

现在让我们看看Y轴的高度值。从上往下看,该单位网格线实际上是一个完美的方形,在正角投射后,它会变成一个菱形。如下图所示:

rhombus(from gamsutra)

rhombus(from gamsutra)

∠A 的值是由摄像机的高度所决定的,反之亦然:

Y(from gamasutra)

Y(from gamasutra)

这是一个相当简单的三角法计算,所以我不会讨论其中的过程,你可以直接使用。

那么摄像机的位置就是:

the position of camera 2(from gamasutra)

the position of camera 2(from gamasutra)

你无需担心摄像机的旋转角度。在正确设置这个位置值后,只要将摄像机对准World Origin。

target to the World Origin(from gamasutra)

target to the World Origin(from gamasutra)

完美的统一对角布景应该如下图所示:

perfect isometric setting(from gamasutra)

perfect isometric setting(from gamasutra)

摄像机的位置为:

X=Y=Z

你可以为XYX指定任何一个值,只要摄像机与建筑之间隔开一定距离即可。

不太准确的解决方法:

如果我需要完美统一的对角布景,我可能就会遵从以上的法则来设置值。但在90%的情况下,我并不想做这些讨厌的计算,而是使用并不太准确,但仍然可行的解决方法。

首先,如下图所示,绘制你的游戏所需的网格线,然后令其呈现方形图,将菱形的中央置到图片正中。

square image(from gamasutra)

square image(from gamasutra)

然后创造一个摄像机,将这个图像映射到摄像机背景(在Maya中称为Image Panel)。

现在用Maya创造一个方形网格,不可以太小,因为你之后要将一个建筑置于其顶端,其区域应该能够容纳建筑的底座。例如,每个边缘的长度要有30米。类似下图:

contain the base of building(from gamasutra)

contain the base of building(from gamasutra)

在水平方向,像这样布置摄像机。令摄像机瞄准World Origin。

target to the World Origin 2(from gamasutra)

target to the World Origin 2(from gamasutra)

现在将摄像机沿Y轴提升,使用这个工具

B-1(from gamasutra)

B-1(from gamasutra)

而非这一工具

B-2(from gamasutra)

B-2(from gamasutra)

raise the camera along Y axis(from gamasutra)

raise the camera along Y axis(from gamasutra)

观察摄像机视角。当方形网络能够匹配你的背景图线段方向时,那就完工了!

square mesh matches the line direction(from gamasutra)

square mesh matches the line direction(from gamasutra)

而如果你的网格布景像这样并不统一时:

non uniform(from gamasutra)

non uniform(from gamasutra)

这个技巧仍然适用。制作一个像这样的图:

make an image(from gamasutra)

make an image(from gamasutra)

执行同样的操作,用这个工具

B-1(from gamasutra)

B-1(from gamasutra)

移动摄像机(不仅仅是沿Y轴),找到与线段匹配的点:

move the camera(from gamasutra)

move the camera(from gamasutra)

现在为渲染找到一个良好的构图:

在你完成上述操作后,摄像机实际上就已瞄准了正确的方向。但渲染构图并不是很好。因为摄像机瞄准的是World Origin。如果你令其合并在一个建筑中,在渲染视图中可能就会出现以下的情况:

example 1(from gamasutra)

example 1(from gamasutra)

现在就要将一个容器盒置到方形网格上方,

container box(from gamasutra)

container box(from gamasutra)

令盒子占据摄像渲染视图的相当比例,用这一工具移动摄像机,以免在移动过程中改变摄像机方向。当你找到一个完美的点时,就可以点击渲染查看结果:

example 2(from gamasutra)

example 2(from gamasutra)

如果你觉得这个效果很好,那么你就得到了摄像机的最终固定位置。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

How to position the camera for isometric assets

by Junxue Li

Last time after I’ve posted the article about how to prepare isometric assets, a friend asked me on twitter: Then how to position the camera in the right place? For the text space on twitter is small, I can only answer him: It’s simple trigonometric calculation, draw and you will find out. Now I feel that I should give more details here.

The question is:

If you have worked out the isometric grid for your game, for example like the image below:

The value of ∠A is worked out by you, then how to position the camera in the 3D scene, that the resulting render would be in this exact grid setting?

Precise solution:

For the uniform grid setup of these two examples,

First you need to position the camera in the south east,on ground level, here is how it looks from the top view. This example is made in Maya, I think in Max it’s the same.

The distance of the camera to the World Origin, we call it value “m”. The actual value of “m” is specified by you, that you make sure it’s big enough that the camera may not clip the building.

So in a Y-up coordination system, the position value of the camera:

Now let’s go for the height value Y. Seen from the top, the unit grid line is essentially a perfect square, after the isometric projection, it becomes a rhombus. Like below.

The value of ∠A is determined by the height of the camera, and vise visa:

This is really simple trigonometric calculation, so I don’t post the detail of how to get it, you can use it straight forward.

So, the position of the camera:

You don’t need to worry about the rotation angle of the camera. After set this position value correct, just snap the camera target to the World Origin.

For a perfect uniform isometric setting like this:

The position of the camera:

You can specify any value for the XYZ, as long as the camera has some distance from the building.

Not so precise solution:

If I need perfect uniform isometric setting, I would set the values following the above formula. But in 90% of the cases, I don’t do the lousy calculation, instead, I would use a solution which is not that precise, but it works.

First, like the picture below, draw the grid line you need for your game, and make it a square image, put the center of the rhombus at the center of the image.

Then create a camera, map this image to the background of the camera (It’s called Image Panel in Maya).

Now create a square mesh in maya, let it big enough, think about that you would place a building on top of it later, and its area should contain the base of the building. For example, 30 meters in length for each edge. It looks like this:

At ground level, place the camera like this. Snap the camera target to the World Origin.

And Now raise the camera along the height axis (Y by default), use this tool , not this one .(That the camera target stays at the World Origin)

and observe the camera view. When the square mesh matches the line direction of of your background image, it’s done!

And if your grid setting is non uniform, like this.

This trick also applies. Make an image like this,

do the same, move the camera around with this tool  (not just along Y axis), to find a point where the lines match:

Now to get a good composition for render:

After you’ve done with the above, essentially the camera is shooting at the correct direction.But the composition for render is not so good. Because the camera is shooting at the World Origin. If you merge in a building, it would be like this in the render view.

Now as my last article said, put a container box upon the above square mesh,

to let the box occupy a good portion of the camera render view, move the camera around by this tool , which would not change the camera direction while moving it. When you find a sweat point, hit render to see the result:

If you feel it’s good, that you’ve got the final resting place of the camera.(source:gamasutra


上一篇:

下一篇: