当前位置: > 游戏模型设计 > 游戏场景模型 >

创建视差图像
栏目分类:游戏场景模型   发布日期:2019年07月06日 10:53:11   浏览次数:


介绍

如果您还不熟悉视差图像,那么了解它们的最佳方法是查看一个,看看本教程中JoséJuliánLondoñoCalle所提供的视差图像。

视差图像由最多6层组成。当用户将鼠标移动到图像上时,每个层沿着X,Y或Z轴以不同的速度移动,以便创建每个层与相机的距离不同的错觉。

在本教程中,我们将展示如何从现有艺术作品中生成视差图像,为其提供新的维度。

什么是一个好的视差图像?

根据我们的经验,几乎任何图像都可以制作成视差图像,但有些图像肯定比其他图像更好:

  • 具有距离相机2个或更多不同距离的特征的图像充分利用了视差效果
  • 除了背景层之外,视差图像中的所有其他层都需要一些透明像素以允许看到它们下面的层。已经展平的图像可能难以处理,因为每层都必须经过精心切割。选择您仍然可以操作(隐藏和显示)图层的图像或者您可以单独渲染每个图层的3D渲染图像是一个更容易的选项
  • 要允许图像中的图层移动,您需要图层的大小比您定义的视口大,所需的大小取决于移动量,因此请确保选择足够大的图像以适应视口和所需的移动

准备你的形象

准备图像的第一个任务是识别不同的图层。在本教程中,使用艺术家JoséJuliánLondoñoCalle的图像,查看下面的图像,我们已经确定并概述了我们想要使用的不同图层。
 

 
识别图像中将构成视差效果的图层

包括背景(由天空和遥远的海洋组成)共计5层; 每个都用不同的轮廓颜色表示。您可能会注意到,2个最前景的图层已被识别为单独的图层(蓝色和红色),即使它们在技术上距离相机的距离相同,将这些图层分开也可以让我们在它们处于更加灵活的状态时您稍后会看到视口的边缘。

切割层

现在需要将每个图层分离出来并保存为图像。除背景图像外,所有其他图层必须以支持透明度的格式保存。在大多数情况下,这意味着PNG作为这些支持alpha,另一种方法是使用GIF,它也支持透明但不支持alpha,这意味着它们倾向于产生看起来尖锐/锯齿状的边缘,并且当沿Z轴移动时会产生假象。与PNG不同,GIF支持动画,可以为您的图像添加另一个维度。

下面的幻灯片显示了从我们的图像中剪切出每个图层的结果:
 

背景图层

建筑图层

近建筑物图层

前景左层

前景右层

 

背景图层

提示:对于前景层,您会看到场景周围有一定量的羽化,这也是为什么使用尚未展平的图像更容易处理的原因之一。

创建视差图像

现在我们将每个图层保存在单独的图像中,我们可以创建视差图像。首先访问您的个人资料页面,点击上传按钮,然后从上传菜单中选择视差图像选项。

选择了视差图像选项后,您将看到(希望是现在)熟悉的上传界面。与上传单张照片或幻灯片不同,视差图像需要您上传将在卡片和弹出视图中显示的预览图像,为此我们建议您上传完整的图像合成(并记住使用裁剪工具选择理想的作物)。

上传和订购图层

页面底部是图层的图片上传小部件。将图层图像拖放到窗口小部件上,或单击窗口小部件并在显示的文件浏览器中选择它们。上传图层后,重要的是检查它们的顺序是否正确,背景是前景,如果需要更改顺序,请单击图层缩略图并将其拖动到其他图层中的新位置。

上传和订购图层

提示:您可能已经注意到图层预览拇指内的透明区域显示为黑色。没关系,这是拇指被保存为JPEG的副作用,它对最终图像没有影响。

配置视口,轴和图层

创建视差图像最重要的步骤(也许是最棘手的)是配置图像行为。请记住,视差图像是交互式的,当观察者在图像上移动时,图层会沿着X,Y和/或Z轴独立移动,从而产生深度幻觉。为了实现这种错觉,我们需要;

  • 配置视口的大小
  • 将鼠标移动链接到图像中的相关轴
  • 并定位和设置每层的移动量

要通过选择位于页面右下角的预览按钮来配置图像。

选择预览按钮后,将显示图像的完整视图预览。这些层可能看起来不合适; 视口大小将设置为背景图层的大小(因此可能会超大),当您将鼠标悬停在图像上时,不会发生任何事情 - 所有这些都是预期的,因为我们尚未设置任何配置选项。
 

 
使用预览窗口配置视差图像


在上图中,您可以在窗口底部看到一个工具栏,这个工具栏最初不可见,您需要向下滚动才能显示它使用工具栏中的工具,我们将能够配置视差图像的行为。我们将首先介绍每个工具的功能。

图层选择工具

层选择工具允许您指定要配置哪个层。某些配置选项适用于整个图像,而其他配置选项仅适用于当前选定的图层。最初选择第一层(我们的背景层)。单击任何其他数字以选择其他图层。

移动图层工具

举措层工具  允许您更改初始位置当前选择的层。当工具透明像素上时,当前选定的图层将被着色为红色,而所有其他图层将是静态的。要移动图层,请单击图像中的任意位置,然后将图层拖动到新位置。

当移动工具关闭时,图像将返回到预览状态并按照配置运行。

设置图层移动工具

集层的移动工具允许您定义多少当前选定的层将沿着轴线相对于鼠标移动的移动。X轴和Y轴的距离分别以视口宽度和高度的百分比给出。例如,给定一个1000像素宽的视口,如果我们将X的值设置为10%,那么当观察者的鼠标位于最左侧时,该层将显示距其初始位置-100px,当位于最右侧时,它将显示为+ 100px它的初始位置。

如果鼠标的X或Y移动链接到Z轴,则给定百分比作为比例应用,例如,如果Y鼠标移动链接到Z轴并且Y的值是10%,那么当观看者的鼠标位于视口的顶部,图层将以0.9(90%)的比例显示,当位于视口底部时,图层将以1.1(110%)的比例显示。

提示:从1-10%之间的距离值开始,然后以小增量调整。较高的值最初可能有点迷失方向。

提示:  确保在鼠标光标位于图像的每个边缘时检查每个图层的位置,如果图层具有裁剪边缘,并且当鼠标位于图像的一个边缘时这是可见的,这将在某种程度上破坏幻觉。

视口大小工具

视口大小工具允许您设置大小的视差图像的像素。在大多数情况下,视口的大小将小于图层本身,以允许它们在视口中移动而不会显示其边缘。

轴工具

所述工具允许您的视差图像,其中在用户的鼠标的移动链接到轴:

  • X轴水平移动图像中的图层
  • Y轴垂直移动图像中的图层
  • Z轴在图像内对图层进行缩放,给人的印象是它们离相机更近或更远

把它们放在一起

以下视频将贯穿本教程中视差图像的配置。请记住,没有一种方法可以配置视差图像,并且每个图像都不同,因此请您花一点时间来尝试不同的选项。


相关热词: 场景

     
游戏模型设计 3dmax模型制作 次世代模型 游戏模型百科 游戏模型贴图