图块设计-垂直角与圆角

===概述===

示意图

该文档介绍图块中 垂直角与圆角 的设计差异。

注意，该文档需要会ps修图，需要画像素点。

灵感来源

2024年12月21日，作者我逛知乎，偶然看见了一个介绍游戏设计规范的文章。

这使我突然意识到我的管理层图块，能感觉到非常“廉价”是因为缺少圆角设计。

如何才能让自己的游戏画面摆脱浓烈的“引擎味”? - 目小心机文的回答 - 知乎https://www.zhihu.com/question/5108732766/answer/60054658582

然后作者我打算改进一些图块。

===垂直角与圆角 - 实现===

圆角绘制

之前版本的管理层，使用的都是直角板，如下图。

直角最大的问题就是看起来很“廉价”，缺少设计感。

那么，这里我们把直角换成圆角。

先在描边的时候，把直角改成圆角，用像素笔来画。

添加透明背景时，镂空1个像素点，旁边2个像素点设为20%的透明色（左图）。

再然后，突出一点点圆角的感觉，在闭合处的2个像素点，再叠加透明色（右图）。

对所有边角进行上述的相同绘制后，对比如下图。

在游戏中，也能感觉到之前的硬角，全部都磨圆了。

圆角的岩石矮墙

使用上述相同的方法，

使用圆角的堆砌的岩石墙，也突然变得可爱了。

===垂直角与圆角 - 注意事项===

圆角镂空的部分

作者我在设计试过几次，最后决定了边角的1像素还是使用全透明镂空的形式比较好。

因为如下图，按照圆角的感受，镂空才合适。

如果不镂空，给边角被涂上了半透明色，

那么在不同颜色的图块组合使用时，容易看出来绿色的边角。

镂空就不容易看出来。

贡献者

暂无相关贡献者

页面历史

暂无最近变更历史