ISOMETRIC PROJECTION
等轴测投影(Isometric projection)是技术制图和工程制图中,一种在二维平面呈现三维物体的方法,属于轴测投影的一种,三条坐标轴的投影缩放比例相同,并且任意两条坐标轴投影之间的角度都是120度。1
近来留意了一下早前流行的2.5D插画,
其实嘛~本质上就是以前学工程制图时 三维投影2 – 等轴测投影 的内容。
网络上当然已经有相当多的教程,画法、表现等等。
So, 本宅只在此琢磨一下软件上的一些基础制图方法思路。
DRAW BY ILLUSTRATOR
等轴测投影图可通过使各坐标轴的投影之间角度相等(120°)的视角来获得。
用人话说就是,以 正方形 举例,投影后则会变成两组对角分别为 120° 和 60° 的 菱形 ,如下图示:
在使用平面软件绘制的时候,如何将对应的 TOP / FRONT / SIDE 视图投影到空间平面则有好几种方法。
Photoshop基于位图,之前曾经做过一个动作处理文件,但未能很好适应不同size的图形,会出现不同情况的偏差。
所以以下基于Illustrator总结了一下相关的方法(虽然AI也只支持到小数点3位置-.-)。
Freestyle @grid
有一定空间基础的可以直接建立等轴测参考网格,然后在上面进行绘制。
参考网格可参照下图绘制:
具体绘制方式就随意了,方法太多。
轴测网格建立好后,就自己Freestyle啦。
譬如用 实时上色工具(K) 或者直接用 钢笔(P) 等。
Transform
对于木有空间基础or相对复杂的图形可以通过变形转换的方式,将正视图转换成投影图,辅助绘制。
在此小结了三种转换方式:
三角函数(附 .aia)
通过三角函数计算出转换比例
思路
以TOP-VIEW为例,图形为正方形。
可以知道 正方形 -> 等轴测投影 -> 60°/120°菱形,
具体投影后的长度变化在此先忽略,
所以我们可以粗略地先想一下如何将 正方形 -> 60°/120°菱形。
- 压缩单轴比例 | 比例缩放工具(S);
- 倾斜角度形成60°/120°对角 | 倾斜工具;
- 旋转至对应角度 | 旋转工具(R)。
此法难点在于单轴的缩放比例,我们先猥琐地保留边长吧!
(这样就可以只算长宽比变化就好了)
方法
如上图,设正方形边长为a,菱形高为h,正方形、菱形边长相等,
则:
\dfrac{a}{2} : h = tan30^{\circ}
∴
h = \frac{a}{2} / tan30^{\circ} = \frac{3a}{2\sqrt{3}}
h \approx 86.603\%a
以TOP投影面为例,图形随便:
- 选取需转换的图形;
- 比例缩放工具(S),🔘不等比,垂直:86.603%;
- 倾斜工具,倾斜角度-30°,轴:🔘水平;
- 旋转工具(R),角度30°。
// FRONT投影面缩放 水平,倾斜 🔘垂直-30°;
// SIDE投影面缩放 水平,倾斜 🔘垂直30°;
// 无需旋转。
由于√3为无理数,且Illustrator最多只支持小数点3位,故缩放比例为近似值,所以生成图形非完全准确。
但实践证明,经此法生成图形的图形锚点能重合,
so~可以接受啦,不极端强迫还是没什么的,
毕竟这个差别肉眼也分不出来了。
小结
- 可动作化;
- 兼容性较高;
- 转换步骤快;
- 准确度尚可。
附:
Illustrator动作文件「📥 to2.5D.aia」下载。
几何绘图
此法基本同上,主要压缩单轴比例的方式不采用缩放工具,而采用绘制参考线的方式
思路
如上述,前一方法缩放比例为近似值 86.603%,看着有点别扭。
由于投影面结果为60°/120°菱形,连接120°对角线,可拆分为2个等边三角形。
如上图,设正方形边长为a,菱形边长为a’,菱形对角线为b,
则可得:
a = a’ = b
故只需将正方形顺时针旋转30°,可令 a ≌ a’,
得出图形可作为缩放参考。
- 旋转复制出参考图形;
- 拉伸图形高度 | 选择工具(V);
- 倾斜角度形成60°/120°对角 | 倾斜工具;
- 旋转至对应角度 | 旋转工具(R)。
方法
同样以TOP投影面为例:
- 以左下角为基准点对辅助正方形进行旋转复制,角度 -30°,得出参考图形;
- 一同选取图形及辅助正方形;
- 拉伸上缘与参考图形顶点相交;
- 倾斜、旋转什么的参考前一方法;
小结
- 准确度相对高;
- 图形需作辅助框参考;
- 难以动作化;
- 操作步骤相对多。
三维转换
三维都出来了就不说什么了
思路
没什么思路,纯粹应用生成…
出来了自取所需即可。
方法
Illustrator方法
- 选取需要转换的图形;
- 菜单栏 > 效果 > 3D > 凸出和斜角…;
- [位置] 选取 [等角 – xx];
- 根据自己需要调整 [凸出厚度];
- 表面可选 [线框] or [扩散底纹] 之类,随意;
- 完成后将效果扩展成拆分的图形,菜单栏 > 对象 > 扩展外观,删除掉不需要的面。
此方法对于绘制复杂图形的其余投影面比较省事。
这里本质上是构建「拉伸体」,对于其他三维形态可考虑结合「绕转」「旋转」效果制作。
当然咯,更复杂的话可尝试运用三维软件进行创作。
小结
- 速度快;
- 适应性广;
- 可动作化;
- 后续处理步骤多。
FINALLY
其实内容谈得很浅,
既不会出现设计师欢喜的表现手法教学(要看自己找网上的大小咖教程啊!),
也没有在原理上谈得有多深(在下谈不上啊!反正读工设、机械什么的大学肯定教过)。
主要旨在浅析一下后寻求一种 合适、效率化 的方式。
另外有兴趣的可以再去了解一下 Isometric Game 的绘制相关,也是有点意思的。
文章转载:「Isometric Game 及译法漫谈」by 李松峰
What an excellent guy you are!!!