我们都爱像素风

创建于:2016-04-20

创建人: craft

446 信息 2239 成员
与像素画,像素风格游戏有关的讨论都可以发表在这里
余羊@我们都爱像素风 的内容(查看所有内容
《新神》的像素风格和多图层渲染
余羊 2021-02-20

《新神》刚开始开发的时候,考虑到成本和能力限制,我决定做成 2D 像素风格游戏。不过,像素风格不代表容易或简陋,实际上可能比非像素还难做。现在的像素风格已经不是 FC 时代那种淳朴的像素风格了,比如 17 年 E3 上惊艳世界的《The Last Night》就用到了光照、反射、景深、体积光等现代 3D 游戏技术。虽然此游戏至今都没做完,但凭借优秀的美术已赚足了关注。

The Last Night

The Last Night

《The Last Night》给了我启发,我决定在像素风格基础上加入 PBR 光照,同时启用 HDR 渲染。渲染时使用原始分辨率,仅让物体像素化。这样一来,2D 物体就有了“厚度”感,简洁的像素配上光照也显得很精致。

Image title

但要实现这一点并不轻松。《新神》是双摇杆射击游戏,这意味着物体是可以旋转的。另外为了更好的相机控制,画面需要支持缩放。一般游戏实现旋转和缩放都不是问题,但像素游戏就麻烦了,因为像素图案可能变得边缘模糊、难以辨识。这与贴图的采样原理有关。

下左图是直接放大三倍的原始像素图,看起来没问题;将它旋转一定角度后就变成了下中图,这时我们发现它的像素轮廓变得杂乱;您可能发现这是因为 Point Filter Mode 的结果,于是换成了 Bilinear Filter Mode,结果就是下右图,虽然看不到杂乱的轮廓,但物体也变得模糊了,因为原图分辨率不足。

Image title

最直接的解决办法是,将原始图像放大几倍再渲染,但这会占用放大倍数的平方倍的显存,对工作流也会产生巨大影响。因此我没有这样做,我的做法是将像素图矢量化。在商店资源 Pixel Mesh Builder 的基础上,我加入了法线、自发光和平滑度的支持,并且将所有信息存储在一个 Mesh 上。在渲染时,开启 MSAA 即可产生既锐利又平滑的像素边缘,也可以不受限制地旋转和缩放了。

Image title

4 in 1

4 in 1

至此像素风格的技术问题基本解决了,但画面表现力仍然不足。对比《The Last Night》就可以发现,它的画面富有层次,并且还有虚化效果。于是,我决定加上更多的 2D 图层。

这方面很多 2D 游戏都做得不错,其中《Ori》系列给我留下了深刻的印象。之前看过一篇文章,《Ori》的开发者分享了他们的多图层实现方案。他们将不同的图层分别独立渲染然后混合起来,而不是放在一起渲染。

Ori and the Will of the Wisps

Ori and the Will of the Wisps

将不同图层分别独立渲染的好处是,可以分别设置每个图层的渲染质量、渲染缩放以及整体颜色系数,还可以将图层模糊以模拟镜头虚化。因为虚化的图层并不需要渲染的很清晰,因此分辨率不必太高。通过调节每一层相机的 Orthographic Size 即可控制渲染缩放,同时也让每个图层运动速度产生了差异,模拟出透视效果。整体颜色系数可以用来微调各层的亮度和颜色,甚至可以让前景半透明,以免挡住玩家视线。

Image title

在《新神》里,我通过改造Unity通用渲染管线实现了多图层渲染。这里有几个细节值得一提。

第一个是支持透明通道的模糊算法。比方说求两个颜色的平均色,正确结果应该是 (x.rgb*x.a+y.rgb*y.a)/(x.a+y.a)。细节不好解释,您可以自己推理一下看看。

然后是模糊半径。为了在不同分辨率的屏幕上保持镜头虚化程度一致,你需要实现一种分辨率无关的模糊。我做了一些近似处理,不同分辨率下看起来差异不大。

最后是半透明的渲染和混合。游戏的渲染机制决定,在透明 RT 图层上渲染,以及将 RT 图层混合起来都需要预乘 Alpha 通道,我肚子疼就不多作解释了。

Image title


如果您对《新神》感兴趣,请支持我们的众筹,谢谢:https://zhongchou.modian.com/item/104230.html

(转发自:原日志地址
《新神》的像素风格和多图层渲染
余羊 2021-02-20

《新神》刚开始开发的时候,考虑到成本和能力限制,我决定做成 2D 像素风格游戏。不过,像素风格不代表容易或简陋,实际上可能比非像素还难做。现在的像素风格已经不是 FC 时代那种淳朴的像素风格了,比如 17 年 E3 上惊艳世界的《The Last Night》就用到了光照、反射、景深、体积光等现代 3D 游戏技术。虽然此游戏至今都没做完,但凭借优秀的美术已赚足了关注。

The Last Night

The Last Night

《The Last Night》给了我启发,我决定在像素风格基础上加入 PBR 光照,同时启用 HDR 渲染。渲染时使用原始分辨率,仅让物体像素化。这样一来,2D 物体就有了“厚度”感,简洁的像素配上光照也显得很精致。

Image title

但要实现这一点并不轻松。《新神》是双摇杆射击游戏,这意味着物体是可以旋转的。另外为了更好的相机控制,画面需要支持缩放。一般游戏实现旋转和缩放都不是问题,但像素游戏就麻烦了,因为像素图案可能变得边缘模糊、难以辨识。这与贴图的采样原理有关。

下左图是直接放大三倍的原始像素图,看起来没问题;将它旋转一定角度后就变成了下中图,这时我们发现它的像素轮廓变得杂乱;您可能发现这是因为 Point Filter Mode 的结果,于是换成了 Bilinear Filter Mode,结果就是下右图,虽然看不到杂乱的轮廓,但物体也变得模糊了,因为原图分辨率不足。

Image title

最直接的解决办法是,将原始图像放大几倍再渲染,但这会占用放大倍数的平方倍的显存,对工作流也会产生巨大影响。因此我没有这样做,我的做法是将像素图矢量化。在商店资源 Pixel Mesh Builder 的基础上,我加入了法线、自发光和平滑度的支持,并且将所有信息存储在一个 Mesh 上。在渲染时,开启 MSAA 即可产生既锐利又平滑的像素边缘,也可以不受限制地旋转和缩放了。

Image title

4 in 1

4 in 1

至此像素风格的技术问题基本解决了,但画面表现力仍然不足。对比《The Last Night》就可以发现,它的画面富有层次,并且还有虚化效果。于是,我决定加上更多的 2D 图层。

这方面很多 2D 游戏都做得不错,其中《Ori》系列给我留下了深刻的印象。之前看过一篇文章,《Ori》的开发者分享了他们的多图层实现方案。他们将不同的图层分别独立渲染然后混合起来,而不是放在一起渲染。

Ori and the Will of the Wisps

Ori and the Will of the Wisps

将不同图层分别独立渲染的好处是,可以分别设置每个图层的渲染质量、渲染缩放以及整体颜色系数,还可以将图层模糊以模拟镜头虚化。因为虚化的图层并不需要渲染的很清晰,因此分辨率不必太高。通过调节每一层相机的 Orthographic Size 即可控制渲染缩放,同时也让每个图层运动速度产生了差异,模拟出透视效果。整体颜色系数可以用来微调各层的亮度和颜色,甚至可以让前景半透明,以免挡住玩家视线。

Image title

在《新神》里,我通过改造Unity通用渲染管线实现了多图层渲染。这里有几个细节值得一提。

第一个是支持透明通道的模糊算法。比方说求两个颜色的平均色,正确结果应该是 (x.rgb*x.a+y.rgb*y.a)/(x.a+y.a)。细节不好解释,您可以自己推理一下看看。

然后是模糊半径。为了在不同分辨率的屏幕上保持镜头虚化程度一致,你需要实现一种分辨率无关的模糊。我做了一些近似处理,不同分辨率下看起来差异不大。

最后是半透明的渲染和混合。游戏的渲染机制决定,在透明 RT 图层上渲染,以及将 RT 图层混合起来都需要预乘 Alpha 通道,我肚子疼就不多作解释了。

Image title


如果您对《新神》感兴趣,请支持我们的众筹,谢谢:https://zhongchou.modian.com/item/104230.html

(转发自:原日志地址
来看看程序员画的像素画
余羊 2021-01-15

羊,原地球轨道舰队舰长。

Image title


羊的座驾,原地球轨道舰队标配。

Image title

根据原著,21xx年,那时人类并未看重太空力量,轨道舰队大都搭载了成熟(便宜)的机炮和导弹。宽大的机翼让其也能在大气层中作战。


主武器,虽然装备一般,但子弹可以打偏敌人的导弹。

Image title


导弹,双发3连装,会自动追踪敌人,还挺实用的。

Image title


除此之外,还有特殊武器:闪爆,能够将大范围的敌方弹幕瞬间摧毁。

Image title

(转发自:原日志地址

加入 indienova

  • 建立个人/工作室档案
  • 建立开发中的游戏档案
  • 关注个人/工作室动态
  • 寻找合作伙伴共同开发
  • 寻求线上发行
  • 更多服务……
登录/注册