使您的Pixel Art游戏看起来像Unity3D中的Pixel Perfect

前段时间,我提到我们花了一些时间使游戏像素完美。 为了使我们漂亮的2D像素美术游戏在任何分辨率下看起来都不错,我们必须这样做。 我们也不希望物体移动或降落在半像素上。

默认情况下,Unity不能完美地显示像素艺术,因此我们需要在此处和此处进行一些更改并实施一个小的修补程序。 但是不用担心,这并不难。

免责声明 :本教程的所有内容均基于多个来源,但主要基于此很棒的Twitter线程 。 我也知道还有其他方法可能会做得更好和更好,但这是经过大量研究后我正在使用的方法。

让我们看看实现此像素完美外观的步骤。

从模糊(默认)到像素完美

关闭反锯齿

电子游戏中使用了抗锯齿来平滑纹理边框。 通常,您希望启用该功能,以使纹理看起来不会“太像素化”,而可以在屏幕上平滑显示。 这是反锯齿功能的一个示例:

抗锯齿示例

底线平滑且模糊。 如果我们看到的分辨率小于此分辨率,这将使其看起来不错。 如果不激活抗锯齿功能,我们会注意到像素化边框。

在我们的情况下,我们恰好想要对面,因此我们需要停用抗锯齿。 默认情况下,它在Unity中被激活。

转到“ 编辑”->“项目设置”->“质量”并将“ 抗锯齿”设置为“禁用”

质量设置

请注意,可能存在多个质量级别。 在我的图片中有非常低,低,中,高,非常高和超。 您需要点击他们每个人而改变自己的抗锯齿设置为Disabled 在所有这些

精灵导入设置

导入图像/纹理时,默认情况下,Unity会设置一些过滤器以使其在屏幕上显示时变得平滑。 同样,对于其他类型的游戏,这可能是个好主意,但对于像素艺术游戏则不是。

您需要转到项目中具有的每个精灵,然后在检查器中更改以下设置:

精灵导入设置更改

将“ 滤镜模式”更改为“指向”(无滤镜),然后关闭“ 压缩” (如图中将其更改为“无”)。 同样,需要对游戏中的每个精灵进行此操作。

单位像素数(PPU)

您也可以在“精灵导入设置”中找到此设置。 默认为100。 将其更改为以像素单位的瓦片大小 (例如,在我们的示例中,我们有19x19瓦片)。

单位像素

这也与我们需要更改的下一件事相关。

相机外形尺寸

现在我们已经设置好PPU,我们需要告诉相机我们希望它基于该PPU多大,以便屏幕上的一个像素与游戏中的一个像素相对应。

要获得该大小,我们只需要做一个简单的公式:

相机外形尺寸=垂直分辨率/ PPU / 2

有了该大小后,单击“ 主摄像机”对象,然后将该值放入“大小”设置中:

相机外形尺寸

在我们的例子中,垂直分辨率为180px,PPU为19px,因此:

180/19/2 = 4.73684

值得一提的是,在我们的案例中,我们以微小的分辨率渲染所有内容,然后再进行缩放。 不要放置所需的垂直分辨率(在我们的示例中为720p),而是放置您要渲染的分辨率。

对齐网格脚本

这是使其看起来完美的最后一步。 到目前为止,它不应再显得模糊,但由于分辨率提高,我们仍然存在可以将对象放置在“一半”像素中的问题。

有多种方法可以避免这种情况,例如使用特定的2D相机插件或着色器。 它们可能比我正在使用的效率更高,但是我发现它们比这种方法更复杂。

这个想法是,您在LastUpdate()中放置了一个将对象调整为“平铺网格”的脚本

为此,您需要将Sprite渲染器移动到子对象,并在该对象中添加该脚本。

这是我正在使用的脚本:

它检查父级位置并将其四舍五入到网格上。 因此不再有半像素移动!

通过所有这些设置,您的游戏现在应该看起来还不错。 我希望这可以帮助其他人调整Unity for Pixel Art游戏。

From: https://hackernoon.com/making-your-pixel-art-game-look-pixel-perfect-in-unity3d-3534963cad1d

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenGL可以用于创建像素艺术。下面是一个使用OpenGL加载纹理并设置wrap参数的示例代码: ```cpp #include <GL/glut.h> #include <SOIL/SOIL.h> GLuint texture; void init() { glClearColor(0.0,0.0, 0.0, 0.0); glEnable(GL_TEXTURE_2D); glShadeModel(GL_FLAT); // 加载纹理 int picWidth, picHeight; GLubyte *imageData = SOIL_load_image("pixel_art.png", &picWidth, &picHeight, 0, SOIL_LOAD_RGB); // 创建纹理对象 glGenTextures(1, &texture); glBindTexture(GL_TEXTURE_2D, texture); // 设置纹理参数 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); // 定义纹理图像 glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, picWidth, picHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, imageData); SOIL_free_image_data(imageData); } void display() { glClear(GL_COLOR_BUFFER_BIT); glBindTexture(GL_TEXTURE_2D, texture); glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0); glVertex2f(-0.5, -0.5); glTexCoord2f(1.0, 0.0); glVertex2f(0.5, -0.5); glTexCoord2f(1.0, 1.0); glVertex2f(0.5, 0.5); glTexCoord2f(0.0, 1.0); glVertex2f(-0.5, 0.5); glEnd(); glFlush(); } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(500, 500); glutCreateWindow("Pixel Art"); init(); glutDisplayFunc(display); glutMainLoop(); return 0; } ``` 这段代码使用了SOIL库来加载纹理图像,并使用OpenGL的纹理对象来渲染图像。在`init()`函数,我们加载了纹理图像并设置了纹理参数。在`display()`函数,我们绘制了一个正方形,并将纹理映射到正方形上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值