Cocos教程｜如何制作像素游戏元件？



点击上方

“cocos”

可关注我们！

游戏戏从出现在屏幕上开始起，就是以像素风格呈现的，最初的像素游戏因为年代技术局限，可能出现低像素，一坨东西在品目上诡异的蠕动（比如贪食蛇），但在当时，那些风格的游戏已经算得上是高清的了（虽然flappy bird还是会把眼睛玩瞎）。

在技术发展日异月新的现在，网游画面的天花乱坠已经无法满足更多人的视觉需求，移动客户端上的游戏似乎也越来越多的走上繁琐复杂的道路，更多画面酷炫闪瞎眼的游戏横空出世。

于是返璞归真的现代像素游戏出现了。现在的像素游戏舍弃了华美的画面和绚丽的特效，而更注重自由度和游戏性。

但也不能说完全不注重外表，打游戏本来就是视觉性活动，首先吸引玩家的肯定是游戏外观。

回归到我们现在要讲得这款像素游戏的美术风格。由于市场因素选择的主色调以红黄蓝三原色为主调，看着丰富明快。游戏背景是星际之间的飞行器击打陨石。下图为游戏主界面——



游戏主界面是以深蓝色为主的太空，分布着零星的像素星星，飞行器穿插其间。我们定了蓝色为飞行器主调，飞行器外形相模仿的是一款热门游戏里面的战列巡航舰，大家一看就懂得~之前说过主色调是红黄蓝，所以在蓝色为主调的基础上做了红色和黄色的配色处理。

那么下面，就开始我们的像素风战列巡航舰的绘制吧。

1. 首先，像素游戏，不能要求美术像其他手游美术元素一样用画笔随心勾勒，像素游戏每一笔都很严谨，有规定的格数，那真的得是数着像素格来一步一步完成，看似简单却在制作上没有那么随心所欲。

要是你弄不准一个象素格在整个画面中有多大，可以打开PS里面的象素格显示选项。



在PS顶上的工具栏里的“视图”下拉菜单中，有个“显示”，在显示后面有个横向拉出的菜单，在里面选择“像素网格”。





然后整个画面就会出现象素网格，这样就便于初学者运用网格精确的绘制象素风游戏元件。但弊端也就是让人容易看着头晕……所以为了讲解方便我们还是用简洁的板块。

一个象素格在图上是这么大



按照战列巡航舰的外形提炼出初步的像素图像草稿图，根据草稿图来看需要分多少个层次多少个颜色，这些都是比较主观意象的东西，由美术自己来定夺。

比如该图像，我根据草稿的主观意象想把它分为八层，底板色一层，尾部火焰一层，然后战舰上各种颜色不一的零件分为好几层，高光一层，所以这些都是在绘制初期就要由美术自己根据不同的情况来定夺好。（由于像素太小，草稿就不放上来了）

因为像素是由一个个矩阵排列的正方形小块组成的，我们可以用PS最左边工具栏里的“矩形选框工具”来绘制所有游戏件。



选用了“矩形选择工具”后，在图层上新建一个空白图层，就可以在网格上进行绘制了。拖动“矩形选择工具”，可以框选不同的像素。


选择了之后用alt+Delete就可以填充颜色。

PS【也可以把像素做成图章笔刷形式，直接运用的，那个适用于层次更多更为复杂的像素游戏，以后我们再另说】

从底板层开始绘制。像这种绝对左右堆成的图像一般我们会运用先画一边然后镜像来处理。


我是从战舰的顶部开始绘制的，顶部边缘一共需要十五个像素

要是遇到有斜边的地方，采用的是锯齿状斜边，也就是由一定的象素格呈阶梯状排列来在视觉上形成斜边。其实在一般的图像上所有斜边放大了来看都是很多像素阶梯形成的，不过因为像素游戏很小，所以可以细分到个数为单位来绘制斜边。



根据形状绘制出飞船底部色块的一半



然后镜像该图像。操作方法是先ctrl+J复制一个该图层，然后在顶部菜单栏里面选择"编辑"--"变换"--"水平翻转"。


这样镜像后的完整底板色块就出现了~基本能看出战舰的初步形态~



然后绘制尾部的喷射火焰，需要注意的一点就是，火焰的外部线条是扭曲的，把握好阶梯状斜边的尺寸和火焰的流线弯曲美感。



把三只火焰按照两边小中间大的状态排列出来



接下来，按照计划好的图层和色块颜色，在底板上由下到上一层层绘制战舰上的颜色和零件分布。



零件的分布上，对称和不对称都可以，如果没有严格要求对称，有时候可以根据实际情况决定。



增加红色的灯饰或者武器系统进行点缀，颜色的深浅明暗从而决定它的显眼程度，一般情况下，越浅色越亮色是越能引起观众直觉上的集中。所以在配色上，素色中一定要有暖色调而且是明度纯度很高的暖色调来点缀。



加盖新的零件图层，越到上层，颜色越突出，零件越琐碎，现在要的就是耐住性子，揉揉眼睛，仔细看清楚每一个零件的分布是不是在视觉上合理。


最后，加白色高光点缀。



战列巡航舰的小元件就完成了，其中最需要注意的有几点：
1. 每一层有每一层的颜色和分布，千万不要画混了，时刻检查自己是不是画错了图层，有时候画错了图层想要返回却由于PS默认的只有几十步的返回，而再回回不去了……所谓一失足成千古恨，走错一步有时候可能就是前功尽弃。
2. 最好把图层名字都命名好，这样不容易犯错，而且归纳图层尤为重要。
3. 养成做一步保存一步的习惯，免得电脑突然死机或其他外力导致的文件损毁。

一个小小的战列巡航舰元件，看似简单，做起来考眼力费脑力，一共七八层但很容易弄混，所以游戏美术和艺术的区别就是，艺术可以随心所欲，游戏美术得精打细算。