像素游戏Unity工程设置 2D Pixel Perfect:如何为复古的8位游戏设置Unity项目

来源:https://blogs.unity3d.com/cn/2019/03/13/2d-pixel-perfect-how-to-set-up-your-unity-project-for-retro-8-bits-games/

 

具有简单机制和像素化图形的怀旧游戏可以唤起资深游戏玩家的美好回忆,同时也让年轻的受众群体趋之若approach。如今,许多游戏都被标记为“复古”,但是要花费大量精力并计划创建一个真正具有怀旧外观的游戏。这就是为什么我们邀请Mega Cat Studios的人们来帮助我们谈论这个话题。在此博客文章中,我们将介绍为NES风格的游戏创建真实艺术品所需的一切,包括重要的Unity设置,图形结构和调色板。

获取我们的示例项目,然后继续!

位于宾夕法尼亚州匹兹堡的Mega Cat Studios已将高度精确的复古游戏的创作转变为一种艺术形式。如此之多,实际上,它们的几个标题也可以盒装形式获得,并可以在Sega Genesis等复古游戏机上播放。

小美杜莎和咖啡危机

Unity工作流程可最大程度地提高复古性

Unity工作流程的最新添加使其成为创建复古游戏的理想环境。2D tilemap的系统 已经取得了更好的,现在支持网格,六角和等距tilemaps!此外,您可以使用新的Pixel Perfect Camera组件来实现一致的基于像素的运动和视觉效果。您甚至可以使用后期处理堆栈添加各种很酷的复古屏幕效果。但是,在进行任何此项工作之前,都需要正确导入和设置您的资产。

准备精灵资产

我们的资产首先需要正确的配置才能清晰明了。对于您正在使用的每个资产,在“项目”视图中选择资产,然后在检查器中更改以下设置:

  • 筛选器模式已更改为“点”
  • 压缩更改为“无”

其他滤镜模式会导致图像稍微模糊,从而破坏了我们正在寻找的清晰像素艺术风格。如果使用压缩,则图像的数据将被压缩,这会导致原始图像准确性下降。注意这一点很重要,因为它可能导致某些像素发生颜色变化,从而可能导致整个调色板本身发生变化。 颜色越少,子画面越小,压缩引起的视觉差异就越大。这是普通压缩(默认)和无压缩之间的比较。

普通压缩/没有压缩看起来像原始照片一样准确

要注意的另一件事是检查器中图像的“最大尺寸”设置。如果您的子画面图片在任何轴上的尺寸都大于“最大尺寸”属性(默认为2048),它将自动调整为最大尺寸。这通常会导致质量下降,并使图像变得模糊。由于某些硬件将无法在任一轴上正确支持超过2048个的纹理,因此最好将其限制在此范围内。

最大大小设置为2048 /现在最大大小设置为4096

上面是一个Spritesheet中的Sprite,它在一个轴上为2208,最大大小设置为2048。如您所见,将Max Size属性增加到4096可以适当调整图像大小并避免质量损失。

最后,在准备精灵或精灵表时,请确保将枢轴单元模式设置为“像素”,而不是“标准化”。

这样一来,精灵的枢轴点将基于像素,而不是基于图像每个轴的从0到1的平滑范围。如果子画面不能精确地从像素旋转,则我们将失去像素完美性。可以在Sprite Editor中为Sprite设置轴,如果选择了Sprite资产,则可以从Inspector中打开它。

安装2D Pixel Perfect软件包

准备好资产后,我们可以将相机设置为“完美像素”。像素完美的结果看起来干净利落。不能显示为像素完美的像素艺术的迹象包括模糊(混叠),并且某些像素在应为正方形时显示为矩形。

可以通过Unity中的“程序包管理器”导入2D Pixel Perfect程序包。单击工具栏中的“窗口”菜单,然后单击“包管理器”。在新窗口中,单击“高级”,并确保已启用“显示预览包”。从左侧列表中选择2D Pixel Perfect,然后在窗口右上方选择install。

就是这样。现在,您可以开始使用像素完美的相机组件了。

高水平的像素完美度

Pixel Perfect Camera组件已添加到Unity的Camera组件中,并得到了增强。要添加它,请转到主相机,然后向其添加Pixel Perfect Camera组件。如果没有“ Pixel Perfect Camera”组件选项,请按照前述说明将其首先导入到项目中。

现在,让我们看一下可用的设置。

首先,我建议选中“在编辑模式下运行”并将“游戏”视图中的显示纵横比设置为“自由纵横比”,以便您可以自由调整游戏视图的大小。该组件将在游戏视图中显示有用的消息,解释在任何给定分辨率下显示是否不是像素完美。

现在,您可以浏览每种设置,以了解它们的作用以及它们如何影响您的游戏外观!

  • 每单位资产像素数–此字段参考您可以在检查器中为每种资产选择的设置。作为一般经验法则,将在游戏世界空间中使用的每种资产都应使用相同的每单位像素(PPU),并且您也要在此处输入该值。如果您的游戏世界是由图块和精灵组成的网格(每个像素为16像素乘16像素),则PPU为16才有意义-网格的每个图块在世界空间坐标中将为1个单位。确保将您选择的PPU放在这里。
  • 参考分辨率–将此分辨率设置为您希望查看所有资产的分辨率。如果您想要复古的外观,这通常意味着非常小的分辨率。例如,Sega Genesis的原始分辨率为320×224。从世嘉创世纪移植游戏时,我们将使用320×224的参考分辨率。对于一般的16:9用法,320×180和398×224(如果要保留垂直分辨率)应该可以正常工作。
  • 高档渲染纹理–这会导致场景以尽可能接近参考分辨率的方式渲染,然后放大到适合实际显示尺寸的大小。由于此设置会导致屏幕变满,因此,如果您希望获得全屏像素完美的体验而没有空白,则建议使用此设置。“高档渲染纹理”还将显着影响旋转时精灵的外观。

1.原始(不旋转)2.不使用“高级渲染纹理”(旋转45度,由于对角线边缘上像素大小的变化,像素完美度会丢失)3.使用“高级渲染纹理”(旋转45度),所有像素均保持像素完美度大小相同,但与原始图片相比,小精灵的外观不太准确。)

  • 像素捕捉(仅在禁用“高级渲染纹理”的情况下可用)–启用此选项后,子画面渲染器将自动捕捉到世界空间网格,其中网格的大小取决于您选择的PPU。请注意,这实际上并不影响任何对象的变换位置。结果,您仍然可以在位置之间平滑地插补对象,但是视觉移动将保持像素级完美和活泼。
    • 例子:

禁用像素捕捉。在背景位于位置(0,0)和字符精灵在(1.075,0)的情况下,我们得到了一些像素未正确对齐的情况。请注意,有一些像素仅被阴影覆盖了一半。启用像素捕捉。位置相同–背景(0,0)和角色精灵(1.075,0)。像素完美地对齐在一起。

  • 裁剪框(X和Y) –裁剪世界空间的观看区域以与参考分辨率完全匹配,并在显示屏上添加黑色边距以填充屏幕边缘的空白。
  • 拉伸填充–如果同时为“裁剪框”启用了x和y,则变为可用。这会导致相机缩放到游戏视图以适合屏幕,并保持宽高比。因为这种缩放不会仅发生在参考分辨率的整数倍处,所以它将导致像素精度在任何不是参考分辨率的整数倍的分辨率下丧失。这样做的好处是,即使您在许多分辨率下都失去了像素完美性,您也不会出现黑边空白,而是拥有完全填满的屏幕。请注意,尽管拉伸填充通常会导致模糊,但通常不会显示警报显示消息。

从拉伸填充模糊的字符和背景

关于使用Pixel Perfect Camera的建议

如果您想要一个像素完美且活泼的显示器,可以在各种用例中使用,我建议:

  • 使用永远不会大于播放器窗口分辨率的参考分辨率(例如320×180)。
  • 启用或禁用高档渲染纹理
    • 如果您要使用90、180和270以外的旋转,并且希望使用它对旋转的精灵具有视觉效果,请启用它。
    • 放大的渲染纹理可能会导致某些分辨率下的非像素完美图像,具体取决于您的参考分辨率。使用Pixel上启用的“在编辑模式下运行”,尝试使用此分辨率和不同的屏幕分辨率。完美的相机组件,以确定这是否是您的分辨率问题。如果您能够在所有目标分辨率下生成完美像素的图像,则将获得最佳的全屏像素完美体验。
  • 根据需要启用或禁用像素捕捉
    • 这比什么都更是个人喜好。如果没有捕捉,则移动会更加顺畅,但是像素可能会不对齐。
  • 如果不使用“高级渲染纹理”,则启用“裁剪框X”和/或“ Y”
    • 如果无法始终获得高质量渲染效果的像素完美效果,则裁剪X和/或Y将确保任何分辨率高于参考分辨率的像素完美图像,但会在屏幕边缘产生较大的空白一些决议。
  • 禁用拉伸填充

我们建议将相机设置为针对16:9的宽高比观看进行优化,包括参考分辨率(如果可能)。在撰写本文时,大多数游戏者都在1920:1080分辨率的16:9显示器上玩游戏。例如,320×180的参考分辨率为16:9,因此在以1920×1080或任何分辨率为320×180的偶数倍的分辨率(例如1280×720)播放时,它不会有黑边空白。

在Unity的工具栏中,您可以进入“编辑”>“项目设置”>“播放器”,并限制游戏将支持的纵横比。如果您发现特定的配置在目标比例中可以正常工作,但在某些特定的纵横比中看起来很差,则可以在此处防止窗口处于这些比例。但是,请记住,并非所有用户都可以使用适合您的限制的显示设置,因此不建议这样做。而是启用裁剪,以便这些用户有余量,而不必以不适合其屏幕的分辨率播放。

创建真实的NES风格的艺术品

现在,我们已经介绍了如何为像素完美的艺术设置Unity,下面让我们看一下为经典的Nintendo Entertainment System限制的游戏创建艺术作品的基础。此控制台生成对试图创建真实图像的艺术家有很多限制。这些限制包括诸如所使用的调色板以及屏幕上对象的大小和数量之类的东西。另外,重要的是要牢记“定位”此控制台时的参考分辨率为256×240。

调色板

在创建NES真正的艺术品时,艺术家必须遵循许多限制。无论艺术家试图模仿哪种复古控制台,其中一些都是一致的,而其他许多则是NES本身特有的。这些限制中的第一个(也是最重要的)限制涉及在图像中使用调色板的方式。NES在其调色板方面是相当独特的,因为控制台的全色调色板已硬编码到控制台中。NES通过向NES上的图形处理器发送一系列值来选择要在图像中使用的颜色,然后图形处理器返回与这些值关联的颜色。以下是NES调色板的图像:

由于它们本身是控制台的一部分,因此无法更改这些颜色。您在该控制台上看到的每个游戏都使用这些颜色的组合来制作图像。

子面板

为了创建游戏中使用的组合,将创建子选板并将其分配给游戏中的精灵或背景元素。NES将其调色板分成多个子调色板,这些子调色板可分配给精灵和背景。每个子调色板包括一种用于所有子调色板的通用颜色和三种唯一颜色。它能够为背景加载四个子调色板,为子画面加载四个子调色板。对于子画面,每个子调色板开始处的共同颜色被视为透明。

这是游戏中使用的一系列子选板的示例。第一行代表背景子选项板,第二行代表子画面子选项板。在此示例中,黑色被用作在所有子调色板之间共享的通用颜色。因为公共颜色被视为精灵上的透明,所以需要为精灵子调色板创建第二个黑色调色板条目,以便将其用作可见颜色。

子面板分配

随着美术师继续在游戏中使用调色板,对调色板使用的限制变得更加严格。为了解释这一点,需要进一步讨论复古控制台如何存储,使用和显示艺术品。任何复古控制台中的插图都以8×8像素的图块形式存储在游戏中。使用这种基于图块的方法,艺术家可以通过将图块用于不同的事物来节省空间。(例如,人行道的各个部分可以重新利用,并用于在建筑物上制作壁架)。关于基于图块的存储要注意的另一重要事项是颜色信息通常不随图形一起保存。所有图块均使用单色调色板保存。这样,每当在游戏中显示图块时,便可以为其分配一个子选项板,

NES将调色板分配给精灵和背景的方式有所不同。它以图块为单位为子画面分配子面板。这意味着子画面中的每个8×8磁贴都可以分配有四个子画面子调色板之一。

该忍者角色利用两个子调色板为其提供了更大的色彩深度。在右侧,您可以看到它分成了每个单独的8×8精灵图块。通过这种拆分视图,可以更加明显地看到,剑和头带中使用的浅青色和最暗红色是这些瓷砖所独有的,而其余三个瓷砖中则使用了深紫色和黑色轮廓块。

另一方面,背景要严格得多。背景按16×16块分配其调色板。整个屏幕背景值的子选项板分配称为“属性表”。这些属性表是大多数复古艺术品都大量使用重复的平铺片段的原因。这些段通常由16×16的图块组成,因此它们整齐地适合属性表。尽管响应于硬件限制,但是这种基于16×16瓦片的背景处理方法最终还是复古艺术品的定义特征,并且在尝试重新制作时绝对必要。

这是在限制范围内制作好的RPG风格城镇背景的一个示例。右图显示了如何将其整齐地分解为16×16 px的块,并为每个块选择了调色板。诸如屋顶瓦,草和桥上的砖之类的东西由这些块的重复部分组成,以节省空间。较小建筑物上的屋顶瓦都使用相同的瓦,但是为它们分配了不同的子调色板,使它们都具有独特的外观。

精灵分层

即使艺术家可以为子画面的每个8×8磁贴随意使用不同的子调色板,但他们可能会发现自己想要在子画面中具有比现有颜色更大的色深。这就是可以进行子画面分层的地方。子画面分层只是将子画面分成两个单独的子画面,然后将它们放置在彼此的顶部。这允许美术师每8×8格限制避开一个子调色板。这样做基本上可以使艺术家将在单个8×8区域中可以使用的颜色数量加倍。这样做的唯一主要缺点是图片渲染限制。NES一次只能在屏幕上显示64个8×8子画面图块,并且在同一水平线上只能显示8个子画面图块。一旦达到这些数字,屏幕上将不会再显示任何其他精灵图块。这就是为什么许多NES游戏一次出现在屏幕上时会闪烁精灵的原因。这样,它仅在交替的帧上显示某些子画面。这些限制是艺术家在将精灵彼此叠加时需要注意的一些限制,因为虽然它使颜色数量加倍,但在同一水平线上的精灵图块数量也加倍。

这是Sprite Layering实际应用的一个示例。从左侧开始,是Ghost Pirate Sprite的原始三色版本。艺术家从那里将其分成两部分,身体/帽子和脸部/手,并为其分配不同的调色板。最后,您可以看到将两块叠放在一起的结果。

子画面分层也可以在背景中完成,以绕过属性表限制。此技巧通常用于静态图像,例如故事屏幕和人物肖像,以使它们具有更大的色彩深度。为了做到这一点,艺术家将绘制图像的一部分作为背景,然后在其顶部分层精灵以填充其余部分。

幽灵海盗的画像还使用了精灵图层,以使其更深。他的绿色头骨被渲染为精灵,而他的衣领和帽子则被渲染为背景的一部分。这允许艺术家在16×16区域内使用更多颜色来完全规避“属性表”限制。

图形库

为了解释NES的下一个主要限制,首先,我们需要转回一个事实,即图形存储在图块中。图形图块存储在256个图块页面中,并且这些页面中的图块无法在不同位置加载到VRAM中,因此,很难即时混合和匹配来自不同页面的图块。NES的VRAM一次只能显示512个这些图块。除了该限制之外,它还将图块一分为二,以获取精灵和背景。这意味着它在任何给定时刻只能显示256个精灵图块和256个背景图块。如果艺术家想显示各种各样的精灵和背景元素,这可能会变得非常严格。

这是加载到VRAM中的游戏背景和精灵图块的直观表示。控制台干净利落地将背景和精灵加载在单独的页面上。

为了克服此限制,NES具有一项功能,该功能使美术师可以将每一页分成称为bank的部分页面。因此,虽然NES不能从图形数据的各个点加载单个图块,但它可以在不同时间加载页面的不同部分。对于大多数游戏,这些银行将是1K或2K银行。1K库等于一页的四分之一或64个图块,而2K库等于一页的一半或128个图块。艺术家必须决定是否要保留对Sprites或Background元素使用每种类型的库,因为两种类型的库都需要使用。这意味着您不能同时为精灵和背景设置1000个库。一页需要使用1K银行,另一页需要使用2K。一般来说,

这显示了上面的同一图像如何被分解为银行。左侧的背景窗格使用2K库,这意味着它在中间被拆分,而右侧的子画面窗格使用1K库。每个银行都可以随时自由兑换。

1K库对于子画面的有用性非常重要。如果播放器精灵的动画种类繁多,并且无法加载需要加载的所有其他精灵,那么单个动作可以保存在1K库中,然后根据发生的动作在它们之间进行切换屏幕。它还允许在游戏的单个区域中使用更多种类的精灵。例如,如果玩家要在游戏区域中遇到六种不同类型的敌人,但精灵页面仅允许玩家和其他三类精灵,则当从屏幕上清除一种敌人类型时,游戏可以将敌方银行之一换成新的敌方类型。

将1K库用作子画面和2K库作为背景的唯一主要缺点之一是NES如何处理背景动画。为了给NES游戏的背景元素设置动画,艺术家必须创建动画背景元素的重复库。每个新的重复库将包含每个动画元素的下一帧动画。然后像翻书一样一次将这些库换入和换出,以创建动画。如果艺术家使用半页存储库作为背景,则存储所有这些重复的存储库会占用大量空间。避免这种情况的一种方法是将整个游戏的所有动画背景元素放到一个库中。但,这也限制了艺术家只能为每个背景保留128个图块作为静态元素。在决定他们将为艺术使用哪种类型的银行时,应由艺术家决定最佳行动方案。

分层技巧

那个时代的许多游戏都将使用技巧来在背景中创建效果,例如视差滚动,但这些也给艺术家和设计师带来了挑战。虽然后来的16位控制台允许多个背景层,但是NES上不是一个选项。所有背景都是单个拼合的图像。为了营造深度感和层次感,使用了不同的编程技巧。例如,为了创建视差背景,开发人员可以设置一个寄存器,该寄存器可以告知何时在屏幕上呈现某个水平线(称为栅格线)。然后,他们可以使用该寄存器来控制屏幕滚动的速度和方向。通过使用它们,可以创建背景的水平行,并以与其他背景不同的速度滚动。在这一点上,对于艺术家和设计师而言,技巧是要注意背景仍然是一个平面图像。如果将平台或任何其他元素(假定应该位于该移动较慢的背景“之前”)放置在该区域中,则其滚动速度也将比图像的其余部分慢。这意味着设计师需要注意在场景中放置背景元素的位置,艺术家需要以无缝的效果来创建背景。

在此示例屏幕中,可以将以红色突出显示的区域设置为比背景的其余部分慢滚动,以模拟深度。上方的平视显示将被设置为即使它也是展平的背景图像的一部分,也不会滚动。

对于想要让其背景元素之一出现在前景中的艺术家来说,还有另一个技巧。在NES上,开发人员可以将Sprite的优先级设置为小于零。完成此操作后,它将使子画面显示在任何非透明背景像素的后面。Sprite优先级也可以即时修改和触发,允许某些元素根据需要更改Sprite的优先级。

结论

当某人试图创建一个对复古控制台真实的项目时,他们需要牢记许多技术上的考虑,而这可能并不是现代开发所要担心的。由于较旧的机器会渲染图像并处理少量的空间以便通过CPU和GPU进行操作,因此设计人员必须创造性地考虑硬件的局限性。在现代,重要的是要了解这些限制和技术,以便真正重现那个时代的游戏外观和设计。在下一篇文章中,我们将研究16位时代带来的设计局限性以及获得真正“旧电视”感觉所需的Unity工作。此处提供16位复古视觉效果的2D像素完美指南

第一次使用Tilemap设计关卡?在Unity Learn的这个初学者教程中以2D探索世界构建

posted @ 2021-04-16 15:58  三页菌  阅读(577)  评论(0编辑  收藏  举报