|
|
本帖最后由 hgg19870605 于 2017-9-2 16:33 编辑
斜角地图原理解释及斜角图形绘制实例细述(转)
所谓斜角地图即 Isometric, 确切的名称应该是<等距视角>, 和透视相对, 指视野内的物体, 无论远近都用同一大小来表现(而透视却是远小近大）. 而Tile 就是指放置于此类地图中的拼接图形元件, 我们平常所见的许多 2D 游戏, 都是 Tile 的，但也有方形区块拼接法，只是在视错觉上不如等距地图更容易形成立体的遮档关系。
这里原理及绘制方面转贴一篇非常细致的文章，详细描述了斜角图形的原理，以及从位图象素层面讲解了为什么不采用通用视角的30度视角，而是采用Tile的实际高度与宽度为1：2的比例。
更详细的图文并茂的描述了各类斜视角图形的画法，以及上色原理，变形原理，这篇文章恰好在我的地图编辑器完成之际找到，因为我正需要曾经看过的一篇E文的详细讲述原理的文章，记得有人在论坛里发过此文链接，但怎么也找不到，google了一下，却找到这篇文章，而且对如何绘制，如何突显高光和区分画面层次，非常的细致，感觉非常有用，所以在此重发出来，希望像我一样的需要了解这方面知识的新人，省点时间。
=========================================================
Credits：Version 2.0 (Last updated on 2/7/2003)
作者与版权：Zoggles
Written by and Copyright: Zoggles
Permission is granted to copy and distribute this document for non-commercial use, free of charge, as long as it's not altered in anyway without permission and that credit is given to the author.
=========================================================
注解：
本教程的目的是介绍什么是Isometric视角，它是如何被展示的和如何在这种视角下创建图形。
目录：
Isometrics的数学
两种创建方法
创建网格
基本形创建
2D图形到Isometric的转化
雕刻方法
上色和明暗渲染
其他例子
Isometrics的数学
Isometric视角是基于从高处俯视下水平面的网格产生扭曲而产生的视角。如下图所示，正方格在这个视角下变成菱形。 它产生一种“伪”3D感，是一种没有灭点的特殊透视（事实上没有灭点就不是透视了，但还是用这个词比较容易说明问题。－imick），在工程模型上经常使用。
传统的，Isometric视角是基于30° 角的，但是因为这个角度在电脑里显得很不规范且难看，看看下面的示意图就知道了。而取而代之的是一个大概等于26.565°的直线，在电脑显示里这种线条显得很干净整洁。
当然这些关于26.565的数学运算在像素作画时完全没用。你需要关心的只是一个原则：Isometric的线条的构成是横行2像素上提1像素，继续横行2像素，继续上提1像素，如此重复下去。如果你只是将图片转变为Isometric视角（经过扭曲变形）而不是全部像素化时，这个原则则变得更加重要。
两种创建方法
如下图所示，有两种构建Isometric图形的方法。类型A（红）在转角处用了3个像素，而类型B（绿）则用的是2个。
如果你仅仅是画单个物体，两个方法都适用，而且我倾向与类型A，因为它的高光看起来更清楚和整洁，也使每个面都保持一样的尺寸和形状。但是如果你是要制作tiles或者准备将他们放置在网格里，那么就一定要选用类型B，如果不是，你就会得到如下图所示一条齿轮化很严重的外边线。
3个箭头所指的地方就是造成毛病的地方。而如果用的是类型B，这个问题就可以解决了，你就会得到一条平滑的边线。
当然，上色，高光提亮和外边线修饰的选择也是多样的。下面的动画展示了一些基本的方法组合。决定采用哪种方法取决于你将要创建什么样的图形风格。
创建网格
如前所述，类型B是最适合用来构建以网格为基础或tile类Isometric图形的方法。现在大家都知道怎么用正确的角度画两条对角相连的线段，但关于怎么铺tiles还是需要解释一下。
为了正确的排列一个tile，黑线应只被用在每个方块（正确的是每个菱形）的两边。希望上面的动画可以说明一下网格的每个组成的tile的实际形状。下面的动画显示了这些形体怎么被组合起来的。非常重要的是要注意到tile的左边缘和右边缘是2像素高的。
这个极度放大的图应该可以让你了解到左右边缘的双像素高度的意义在哪。
下面是两个可能对你有帮助的图形。一个是基本的Isometric网格，另外一个是可以用来填充（PS的fill）完成一个Isometric网格的方形图案。
基本形创建
下面是一些多样的形体和方块的构建：
圆形是最考技术的Isometric图形。但是相对来说平行的或Isometric视角下的扁圆简单一些，那些轮子和中轴倾向右上的圆形就难多了。
顶上的圆形只要画一个正圆做为指导然后压扁就可。但侧面的圆形则需要先画好圆再扭曲变形，就好像上面的动画一样。
2D图形到Isometric的转化
有一点需要着重注意的是你不能单靠变形来将2D图像转换为isometric视角，因为一个2D的图像没有透视上的深度，单纯的靠将图形变形后向后拉伸并不能达到预期的效果。
以上两个图形都可作为旁边小一点的2D视角图形的代表。
单纯的将一个图形变形到26.565°不会给你一个真正的isometric效果。它会显得有点被拉长的感觉。
就像上面的图形所示，单纯的将一个图形变形会使形体显得被拉长。中间的图显示2D视角下和Isometric视角下图形底部的比较：x1 > x2。右边的例子是符合数学原理的正确版本。实际绘画时，图像在变形前先被水平地压扁，但其实通常只创建一些辅助线然后根据辅助线重新绘画会更容易些。变形通常也容易但来不必要的抗锯齿。
如果你仍想运用变形的方法，你需要首先知道需要将你的2D图像压扁到怎样的程度。要计算这个数量，“x”的长度（如下图所示）需要先被计算。
现在计算你需要水平压扁的百分率：将这个x的值除以原始宽度（2）然后再乘以100。
1.7889 ÷ 2 x 100 = 89.443%
雕刻方法
有一个方法，有时被认为是较简易的方法，就是将大的形体切割，像雕刻般把不要的部分切除。请看下面桌子的例子。
首先，标出桌子的四脚。
不要的部分抹掉。
现在的成图看起来很平板。桌脚没有厚度，看起来很薄的样子。这是因为实际上你还会看到每只脚的另外一边，这些面需要被加上。
最后，红色指示线被外边线取代，高光也被加上。
上色和明暗渲染
到现在为止，我只展示了Isometric的数学和基础型构建，而没有提到上色和明暗渲染。但以上的例子提供了形体如何被上色的一些提示。特别是上面桌子的例子。
对Isometric这种独特的“漫画”风格，在形体的最外一层有一条黑色或深色的外边线。（不是在形体的内边线上）
对于一个上色很棒的物体来说，需要有4重明度色彩（还需要有1重外边线色彩）。最浅的一重是高光色。第二重是作为被光照射到的底部色，其他的两重分别作为背光的另外两个面的颜色。在上面的桌子例子里，我还将第二重色彩作为桌脚的边缘的高光色。如果把最亮的颜色用在一个阴影的区域里会显得过亮了。
作为一个简单的例子，我弄好了一个有着奇怪形状的物体的线稿。
然后，我把大色块上好。
下一步，我将内部的黑线条移除并以高光色或暗色代替。这里需要注意的是我仅把高光上在凸角的边缘上。而关于凹角的边缘我则是在两个色部的任意一边上涂上比两色均暗的颜色。
接着我添加了一些窗户（只是色块而已），同样的，朝右的面颜色较暗。
然后在窗户的边缘上涂上了高光，把立体感塑造出来。
最后我在旁边加了些青草增加效果，给草也加了点阴影。
实际大小：
其他例子
下面的图像，来源于eboy，展示了一些高光和颜色渲染的技巧（有一点不一致）。注意到小货车的右手边是暗部，但人的暗部却是左手边。但是，货车的其余部分用了最少的颜色来达到最佳的高光和明暗效果。
下面的图像，来源于Habbo Hotel网站
将这副图的局部放大，我们可以更近的观察到细节部分。
以上展示了在内边线上运用细高光线。
这个展示了在不同的物体外部添加黑色外边线来强调他们的效果。注意在大多数情况下，黑色只用在外边线上。
下面这个例子，也是来源于 eboy，你可以看到运用其他角度的线条来建造不规则图形的技巧。
以上的内容为转载部分。
有了原理，我们就明白了为什么叫通常所说的斜角地图，更合适的名称应该叫Isometric（等距地图），也明白了为什么真正反映到计算机的二维图形上所做的小小和变化。
当然了，后面的isometric图形的绘制部分解说，对制作地图的程序人员来说基本没啥用处，但是如果你是一位打算从程序，到绘图，到服务端数据处理，甚至包括服务器架构一揽子到头的，嘿嘿，恐怕还是有非常大的用处的。
比如，不幸的我，地图编辑器出来了，再要图的时候，咳咳，告诉我给她一套图让她仿可以，让他创造一套做不到，我简直要泪奔了。或许我不得不再花点时间去摸摸3D建模和PS了，这篇文章的后半部分，现在竟然成了对我来说的意外了，10分钟前她绘制出来让我去看，我认为画出来的建筑物没有立体感，一句话说完，我明白绘图的事，想不亲自动手没指望了。
哎，这篇文章写得实在太好了，我根本不必再说啥了，只能跑点边脚料吧。下一篇，我会详细写一下斜角地图的逻辑处理，先说下逻辑处理的原理，再说下等距视图的制作吧，等我一点点码出来 |
评分
-
查看全部评分
|
发表于 2017-9-2 15:43
楼主
发表于 2017-9-4 09:08
发表于 2017-9-6 22:27