游戏中45度角地图使用的Isometric Projection就是对等轴投影,为了更深入的了解,下面是翻译的原理的文章。

下面的图引用了国内某文章的图片(后面有链接)

上面的这些游戏都是45度角度的游戏,还有传奇类游戏等都是这类游戏,这类游戏的特点就是用2D绘制3D的效果,使得游戏华丽。

先来谈谈投影的基础知识,一般就是用光线照射物体,在某个平面(地面、墙壁等)上得到的影子叫做物体的投影(Projection)。为了把三维世界的东西呈现在二维平面上,有两种投影方式:

  • 透视投影(perspective projection)
  • 平行投影(parallel projection)

简单地说,前者假设光来自一个点,而后者假设光线是平行的。在这里只关注平行投影。平行投影又可以分成两种情况:

  • 正投影(orthographic projection)
  • 轴测投影(axonometric projection)

正投影,顾名思义,就是光线与物体表面以及投影平面垂直,而且物体的其中两个轴和某一个平面与投影平面平行。上一节中那个零件的俯视图、侧视图和正视图,就是用正投影法画出来的。

轴测投影稍微复杂一点,即投影时,物体要围绕它在3D空间中的一个或多个坐标轴,相对于投影平面旋转一定的角度。所谓“轴测”,意思就是“沿着轴来测量”,凡是与坐标轴平行的线段,都可以沿轴向进行作图和测量。

轴测投影下形成的物体影像,就好像从某个斜角观察物体一样,能让人在一个画面(投影平面)中看到物体的不止一个侧面。在轴测投影中,绘制出来的物体的轴或平面与投影平面并不是平行关系。刚才说了,上一节中那个零件图中的“辅助图样”就是按照轴测投影画出来的。

轴测投影

轴测投影可以分为以下三种基本的情况:

  • 对等轴测投影(isometric projection)
  • 正二测投影(两等角投影,dimetirc projection)
  • 正三测投影(trimetric projection)

等轴测投影,即按照透视法缩短的三个坐标轴的缩放系数是相等的,而且任意两个坐标轴之间的角度都是120度。

正二测投影(两等角投影),即物体坐标轴中有两个坐标轴与投影平面的角度相等(或坐标轴构成的三个角中有两个角相等)。

正三测投影,即物体坐标轴与投影平面的角度各不相同(或坐标轴构成的三个角的角度各不相等)。

接下来重点来了,对等轴投影(Isometric Projection),也就是45度角游戏所使用的。就是基于等轴测投影原理,把所有游戏界面元素沿坐标轴旋转一定角度制作并绘制到平面(屏幕)上,让玩家能够看到物体的多个侧面,从而产成3D效果的一种游戏。业内人士常常也把这种游戏称为“斜45度视角(或3/4视角)”、“2.5D”或“伪3D”游戏。

图1中立方体的所有边长都相等,此外,由于任意两边所组成的角度都是120°,都是对称的菱形,这意味着每一个表面积都是相等的。边线的另一侧测量的角度是180°- 120°=60°,通过这个角度可以得到另一个角度,a=90°- 60°=30°。

三角形的角度被定义为 a=arctan(h/w)=30°(正确的本例中的三角函数公式应该是如下的公式 a=arctan((h/2)/(w/2))=30°)

h和w之间的联系,h/w=sin(30°)/cos(30°)=0.57735,或者说,h/w=1/sqrt(3)。

Dimetric Projection 正二测投影(两等角投影)

图2是一个放大在x/z 平面的呈30°的线条,看起来并不是那么平滑。30°角度的线会出现块状以及不平滑。主要原因是计算机图形学中不是使用的真正的对等轴投影,要使线条看起来平滑(如图3),意味着角度不止30度。

这个线条在水平方向上比垂直方向上提高两倍。因此,它的角度则变为 a=arctan(1/2)=26.565°。

因为这个,原始立方体120°角也需要被调整,他们变为90°+26.565°=116.565° 以及 360°-2×26.565°=126.87°(图4)。

从技术角度上来说,这样的三个角度就不再是120°的对等轴投影:实际上应该是正二测投影。然而,为了方便起见,在本文章中继续饮用“对等轴投影”。因为角度的改变,h的值也变化了。H和w之间的关系则变成了新的:h/w=sin(26.565°)/cos(26.565°)=tan(26.565°)=0.5。 还有一个更重要的原因在光学显示的处理上应用宽高比为2:1的比率,这就是它能够使得结构在平铺的时候衔接得更紧密。

看看另一种解释:

为什么大多数游戏开发人员都选择以2:1的比例来显示切片呢?这是由于光栅图形的一个独有的问题决定的,如果你懂得计算机显示器的工作原理,就可以理解这个问题。显示器,无论它是CRT、TFT/LCD、LED还是OLED的,都以类似我们游戏中的网格显示像素,能够非常完美地显示垂直和水平的线条。然而,如果想要显示一条角度介于0°和90°之间的线,麻烦就来了。下图展示了这个问题。

(图注:绘制某个角度(如30°)的直线会产生缺口)

虽然90°、45°和0°的直线都能呈现正规的图样,而且两条平行线能够“严丝合缝”,但30°的直线就不行——两条线中间有缺口。但是,如果我们使用2:1的宽高比,换算成角度就是1/2的反正切(arctan)等于26.5650°,能得到如下图所示的结果。

(图注:绘制角度为26.5650°的直线能得到整洁的结果)

简单地说,如果是等轴测投影——三个轴两两之间的夹角都为120°——的话,那么就要按照30°角来绘制菱形,可这样会导致像素线条出现缺口。而绘制角度为26.5650°的直线恰好没有瑕疵,但此时三个轴之间的角度分别为:116.565°、116.565°、126.87°。根据前面“轴测投影”一节中的介绍,两个角相等那就是正二测投影(两等角投影)了。

或许大家先入为主地认为正二测投影可以看成等轴投影的一个变体,或许是因为等轴测投影的应用最为广泛(本文最后还会给出另外一些等轴测投影的应用示例),游戏业内仍然把在2:1的菱形切片基础上构建的游戏称为 Isomentric Game。从下面这幅电视机的像素艺术图可以看出近似等轴视图与真正等轴视图的差别:

使用瓦片图片创建地图时,也就是在使用tiled软件来创建地图时,瓦片的大小设置比实际图片中的瓦片大小要在宽度上比原始图片少2像素,高少1像素,这是因为要将斜角瓦片设计成相互有一点重叠,这样才不会导致背景从瓦片衔接的缝隙中露出来。

本文引用文章的链接:

http://www.gandraxa.com/isometric_projection.xml
http://www.cnblogs.com/turingbooks/archive/2011/12/26/2301890.html

转载于:https://www.cnblogs.com/kingime/p/3681690.html

【游戏】对等轴测投影 Isometric Projection相关推荐

  1. Isometric Game 及译法漫谈

    原文地址:点击打开链接 作者按:本文探讨了 Isometric Game 相关的背景知识.为了避免读者感觉枯燥(除了游戏之外的有些概念确实枯燥),作者尽量采取"用图说话"的方式,文 ...

  2. 3D Game Creation - Isometric Game

    主要内容 Isometric,意为等角投影的. 设置正交(Orthographic)相机. 编写相机脚本. 初步了解Raycast(光线投射). 利用Quad(平面)处理游戏场景. Isometric ...

  3. Unity 3D 中的专业“术语表”。

    这是unity手册中的内容.具体可以参考此链接:Unity 用户手册 (2019.4 LTS) - Unity 手册 目录 2D 术语 2D 物理术语 AI 术语 Analytics 术语 动画术语 ...

  4. 3D 可视化入门:渲染管线原理与实践

    前端技术深度复盘, 今天也要博学一下~ 一.引子 玩 3D 游戏的时候,有没有想过这些 3D 物体是怎么渲染出来的?其中的动画是怎么做的?为什么会出现穿模.阴影不对.镜子照不出主角的情况?要想解答这些 ...

  5. 绝对干货,直接收藏 | 3D 可视化入门:渲染管线原理与实践

    来自某不愿具名同学的投稿,文章较长建议 PC 端观看~ 一.引子 玩 3D 游戏的时候,有没有想过这些 3D 物体是怎么渲染出来的?其中的动画是怎么做的?为什么会出现穿模.阴影不对.镜子照不出主角的情 ...

  6. AI绘图体验:想象力无限,创作无穷!(文生图)

    基础模型:3D二次元 PIXEL ART (1)16-bit pixel art, outside of café on rainy day, light coming from windows, c ...

  7. Midjouney prompt优化

    Midjouney prompt优化 总述 1. Midjouney 1.1 常见出图方式 1.2 图片参数 2. prompt 2.1 prompt关键词框架逻辑 2.2 关键词技巧 2.3 分类关 ...

  8. OpenGL ES 2.0 for Android教程(五):调整屏幕的宽高比

    OpenGL ES 2 第五章:调整屏幕的宽高比 文章传送门 OpenGL ES 2.0 for Android教程(一) OpenGL ES 2.0 for Android教程(二) OpenGL ...

  9. 5 Transforms 转移 笔记

    5 Transforms 转移 笔记 Transforms Unfortunately, no one can be told what the Matrix is. You have to see ...

最新文章

  1. [RHEL5企业级Linux服务攻略]--第6季 Vsftpd服务全攻略之高级配置
  2. ionic3学习之Android平台打包方式
  3. oracle erp 报表开发手册,处置OracleERP导出的报表文件
  4. 阿里巴巴叔同谈云原生和云计算
  5. python的def语句_【零基础学Python】def语句,参数和None值
  6. 如何识别一个人是web前端程序员
  7. Exchange修改单封邮件大小命令
  8. wscript运行js文件
  9. QT.pro工程文件中判断宏定义是否存在
  10. MDK代码格式化工具
  11. Microsoft store下载速度缓慢
  12. 通向大规模医疗知识图谱:万字详解天衍实验室知识图谱对齐技术
  13. 分享基于SpringBoot2+MybatiPlus+LayUI+Snaker+Mysql技术前后端分离开源后台管理系统脚手架
  14. SQL练习题(一) 附答案
  15. python程序的循环结构_四、python程序结构之循环结构
  16. mac+微信打开连接到服务器,MAC OS系统 ,微信接收到的文件,打开wo… - Apple 社区...
  17. G4560和G4600买哪个好?
  18. 微擎上传图片失败——加密版本不能使用__DIR__或者__FILE__
  19. 基于JAVA的校园论坛系统设计与实现
  20. H - Unloaded Die

热门文章

  1. Python处理图片灰度已经透明度
  2. mysql里字典是什么意思_解析MySQL数据字典中的一些疑问
  3. java中accept什么意思_文件输入'accept'属性 - 有用吗?
  4. excel中如何对筛选后的单元格进行复制粘贴
  5. DMIPS DMIPS/MHZ
  6. 【转贴】微软面试100题的答案
  7. C语言strlen函数详解
  8. “知己知彼,百战不殆”,网络安全漏洞早知道
  9. IO - 同步,异步,阻塞,非阻塞 (亡羊补牢篇)
  10. 服装行业视频制作有哪些注意事项?商家开发小程序有哪些优势?