更多

像素独立游戏美术开发指南 推荐作品

系统分类: 首页 开发 干货分享

本项目由 独立游戏 上传发表,如其侵犯了您的合法权益请联系我们!

北京市 / 管理员
2016-10-19 13:27:52

马上注册,结交更多的独立开发者,享用更多功能,让你轻松玩转INDIECN

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
准备


1、思想准备

在你下决心学习像素画之前,请静下来问自己,是否真正喜欢像素画?是否愿意为了学习像素画付出时间和精力?是否有足够的耐心?作为人类,我们最宝贵的财富就是我们的时间,时间一去不复返。时间经常是被我们忽视的沉默成本。如果以上答案你的回答都是肯定的,恭喜你,请接着往下看。

独立游戏通常由个人或者小团队(通常1-3人左右)开发制作完成。开发者青睐像素画的原因在于,当前游戏市场仍然以80-90后为主,像素画的复古风格在国内外都有较好的玩家基础。另外像素画的制作成本也较为低廉。像素画作为一种试错成本较低的美术风格,一直是低成本创意游戏开发团队的首选。像素画仍然属于CG数码绘画的范畴,有一定的美术知识要求。独立游戏通常采用极简风格的像素画,所以对没有美术基础的初学者是个好消息。可能唯一有难度在短期内掌握的是动画。

本系列教程会从简到繁,循序渐进的讲解,帮助初学者掌握像素画基础技法,动画制作等像素独立游戏美术开发必备的基础知识。


2、工具准备:电脑;软件;可选外设。

首先你需要准备一台电脑,台式机或笔记本都可以。
640.jpg
画像素画的软件,我推荐photoshop和GIMP。photoshop无疑是昂贵的,虽然我购买了正版的photoshop,但是本系列教程还是以GIMP为例子。GIMP是一款免费开源的绘画软件,同时支持windows和mac系统。

640 (1).png

绘图板是可选外设。最后你还需要一块绘图板,为什么要买绘图板?可以大大节约你的时间,学像素画的同时你也学习了手绘!因为在本质上在纸上绘画和在电脑上绘画是极其相似的。推荐目前性价比最高的板子:和冠 (Wacom) 手写板Bamboo CTL-671。

640 (2).png

我用惯了绘图板,所有例子也都是用绘图板绘制的。用过笔之后,鼠标真的不想再用了……
注:《像素独立游戏美术开发指南》获授权转自微信公众号:教你画像素画,ID:pixelart


点评

非常棒的教程,希望网站能多多整理帮助独立游戏开发人员。  发表于 2016-11-15 15:14
热度
2727
浏览:2727次 收藏:0次 评论:8次
喜欢:0

北京市 / 管理员
2016-10-19 13:27:52 发布

您需要登录后才可以回复 登录 | 立即注册

本版积分规则

全部评论(5)
  • 独立游戏

    来自 2楼

    独立游戏 2016-10-19 13:39:00:
    基础中的基础


    我写了很多教程,估计只有极少数对新人有帮助。因为我在写的时候,是默认新人有基础的,因为有基础,所以文章里对一些专有词汇没有解释,对一些步骤过于简化。可是事实是很多新人是没基础的……而且很多人不敢问问题。所以这次我默认看文章的人是完全没有基础的。如果你觉得已经掌握了我说的内容,可以跳过不看,谢谢。


    1、电脑操作基础

    有了电脑,我相信很多人第一时间学会的3件事:上网聊天,看电影,打游戏……那么画像素画之前,你需要掌握哪些电脑操作基础呢?

    a、会新建、重命名、删除、查找文件和文件夹;
    b、会使用搜索引擎搜索、下载和安装软件(比如下载和安装photoshp,GIMP)
    c、会使用键盘执行正确的命令。
    d、会打字

    2、像素画常识

    为什么早期游戏要采用像素画来开发?
    (1)早期的电脑与现在相比配置特别差……游戏主要由个人嗜好而开发,在大学里的大型电脑中运作。第一代电子游戏的画面都很简单,下图为在街机上运作的《Pong》的游戏画面。

    Pong.png


    为什么现在还有人开发像素游戏?
    1996年像素画团体eboy(2)成立,将像素画作为一种艺术品来售卖。eboy早期主要制作略带色情的像素画卡片出售,当他们开始绘制像素城市并制作城市招贴出售的时候,引起了广泛的关注。他们的风格也影响了很多其他像素画爱好者和画家。20年后的现在全世界玩家对像素画依然情有独钟,好的像素画作品也可以在画廊展出并出售。

    KAI.gif


    像素画是一个点一个点点出来的吗?
    不是。现在有压感笔,用笔画可以画点,线,面。软件还支持粘贴复制。

    3、最快的学习方法

    模仿是最快的学习方法。如果有一个老师天天在你面前画像素画,你每天看,看的多了就会画了。学任何东西都是如此,模仿是最快的。所以学画画自学总是艰难的,跟老师学比较快,老师走过的歪路你不用走,老师知道的窍门你可以直接拿来用。

    好,对于像素画,因为有它的特殊性。像素点是方块,所以只要是像素画,每个人都可以看的一清二楚,什么颜色?怎么摆放?都是方块嘛。只要你摆的和老师的画一样,你也画出一模一样的像素画!对,就是这么简单。

    当然如果每一次都是一模一样,我估计画不了几张画,你就腻味了。所以模仿是为了创作,是为了学习方法,等方法学到手了,你就可以自己创造,想画什么画什么。


  • 独立游戏

    来自 3楼

    独立游戏 2016-10-22 22:59:30:
    绘画基础


    需要掌握的:
    1、熟悉GIMP,会设置1像素铅笔,会设置网格,会放大缩小画布,会排列两个窗口
    2、画画之前先观察
    3、训练眼睛和心灵,比较要画对象不同部分之间的比例大小关系

    现在我们进入实战,要动笔了。你准备好了吗?

    学习绘画不需要天赋,学画画和学自行车是一样的。学任何东西,第一要有兴趣,第二要坚持不懈。如果你是小猫钓鱼故事里的小猫,那不管做什么事情都很难成功。所以在正式开始学像素画之前,我再问一遍:你对像素画有兴趣吗?能坚持不懈的学习吗?

    我尽量将每次学习控制在1个小时左右,因为成年人的注意力最多集中30分钟。好,现在开始吧!

    首先打开已经安装好的GIMP,软件界面如下图:

    640.jpeg

    先熟悉下每个区域的功能,然后我会在画的时候具体讲解每一个要用到的功能。这是菜单栏,任何一个软件都有这个区域,几乎所有的软件功能都可以在这找到。菜单是抽屉式的,点开以后还有下层。

    640 (1).jpeg

    然后是工具栏,这里有各种绘画工具,工具选项是每一个工具的属性设置。

    640 (2).jpeg

    这里是图层和笔刷设置。

    640 (3).jpeg

    最快的学习是模仿,我们来画一个马里奥吧。这是8位机游戏的经典角色,当年约翰卡马克和约翰罗梅洛第一次开发游戏的时候就是模仿了超级马里奥!所以画像素画也一样,先模仿经典,在模仿中学习。动笔之前首先观察这个角色,可以看到头部和身体的比例是1:1,这种手法是卡通动画惯用的,头身比例是1:1时会使人觉得很可爱。迪斯尼经典角色米老鼠早期的时候也接近于1:1。

    20161022224632.png

    因此在画任何东西之前,先确定所画对象的比例是应当的。如果画的东西没有比例,其他人就不能识别,别人看不懂画画就失去了意义。(当然现代艺术故意让人看不懂,不在本文讨论范围)。继续观察,角色是平涂的,没有明暗变化。没有明暗变化的像素画是通过色相,就是颜色的本来面目区分不同的部分。比如帽子和背带裤是红色的,那么与之相邻的头发眼睛皮肤衣服就不能也是红色,不然眼睛就无法区分它们。用颜色来区别不同的东西,在像素画里面是很重要的技术。

    640 (4).jpeg

    再继续观察,可以发现这个角色的脸是侧面的,身体则是正面的。大家看过埃及壁画吗?对了,这个马里奥用的绘画手法就是埃及壁画的手法。这种表现人物的方法非常取巧。即使没有明暗也显得有立体感。

    好,观察完了,我们对像素画也有了一个简单的印象。那么试试用铅笔工具画一画吧。新建文件,大小为16X16像素。

    640 (5).jpeg

    点击左下角的画布放大倍率,选择3200(也可以选择工具栏的放大镜放大画布到合适大小。)

    640.png

    选择铅笔工具,大小设置为1像素。

    640 (6).jpeg

    然后打开马里奥图片,也放大到合适大小。因为GIMP不支持同屏显示2个图,所以我们可以将画布的窗口缩小后排列在一起,这样就可以边看边画啦。

    对照着马里奥,临摹一个吧!临摹有两种方法,第一种就是边看边画,用眼睛和心灵当尺子,来比较颜色块的长短大小;第二种可以将马里奥放大,可以清楚的看到每一颗像素是如何排列的,只要照猫画虎排列就可以画出马里奥了!!

    附录:如何打开GIMP网格视图(如果你希望打开的每个文件网格配置都是1像素,需要打开编辑--首选项,将默认网格的间距设置为1像素即可)

    640 (7).jpeg

    选择图像--配置网格

    640 (8).jpeg

    间距设为1像素即可

    640 (1).png

    设置完成后确定。点击查看,显示网格就可以啦。

    640 (9).jpeg
  • 独立游戏

    来自 4楼

    独立游戏 2016-11-6 19:56:04:
    动画基础


    需要了解的知识和方法
    1、了解什么是动画,了解帧速
    2、了解制作动画的原理
    3、了解制作位移动画的方法



    1、什么是动画?帧速是什么?

    640.png
    画一个马里奥,感觉如何?是简单还是困难?

    如果你有wacom压感笔(1:绘图用的数码压力感应笔,简称压感笔,一般配合数位板一起使用。比较出名的是wacom品牌的压感笔。)的话,可能画起来比较轻松,如果只有鼠标,点啊点的确实枯燥和麻烦,可能画不了几张像素画,你就放弃了。

    所以工具的好坏不仅仅影响效率,还会影响我们的心情和状态。

    0.gif
    每秒10帧的动画 图片:维基百科

    0 (1).gif
    每秒2帧的动画 图片:维基百科

    一张画是静止的,很多张画连起来播放就是动画。最少多少张画才可以欺骗大脑呢?最少需要每秒16张画(2:动画是指由许多帧静止的画面,以一定的速度(如每秒16张)连续播放时,肉眼因视觉残象产生错觉,而误以为画面活动的作品。)。这个就是最基础的动画原理了。一般来说帧速越高(3:指电子绘图或游戏每秒播放多少帧)动画越流畅。

    0 (2).gif
    作者:Phil Giarrusso

    2、动画原理是什么?

    我的理解,动画的原理就是变化,没有变化就没有动画。比如上文中跳动的小球,它是不断变化的。最简单的动画就好像美剧生活大爆炸的片头,快速播放很多很多不同的图片。有变化,就不枯燥和无聊。

    0 (3).gif
    Teenage Mutant Ninja Turtles IV: Turtles in Time, SNES.

    游戏受欢迎也因为游戏画面是不断刷新的,每一秒展示的内容都是有变化的。

    变化的种类有很多,比如大小长短形状颜色透明度位置等等。

    3、如何制作位移动画?

    0 (4).gif
    Super Mario Bros. 3, NES.

    位移,简单的说就是位置的移动。如上图的小怪物从底部往上爬,然后掉下去,就是小怪物的位置发生了移动和变化。不过在游戏中所有位移动画都是程序和玩家来控制的。怪物由程序AI控制,而主角则由玩家通过按键来控制。

    0 (5).gif
    作者:kirokaze

    所以游戏中的行走,跳跃,攻击等动作一般都不需要加上位移。

    那么复杂的说呢?复杂的说……再看上图的小怪物,有没有发现腿在动?对,怪物或者角色自身某个部分发生位置的变化,也属于位移动画。位移动画的好处在于,可以节约很多绘制帧的时间。早期的诺基亚智能手机游戏开发就是这样制作的。将怪物或角色的身体元件拆散,然后在动画编辑器里制作动画。

    虽然编辑器换了一茬又一茬,这种核心思想目前看还没有变。

    640 (1).png

    我找了一个马里奥的动作分解图。(和我们画的马里奥略微不同)我们可以看到以下动作的关键帧。站立(1帧);行走(3帧);滑步(1帧);跳跃(1帧);死亡(1帧)。

    以跳跃为例子吧。因为跳跃的位移是由程序控制的,所以只要画出跳跃的姿势就可以了。另外马里奥有顶砖块的设计,所以跳跃的时候要把一只手握拳举起来。在画之前先设计好怎么画。看下我的绘画步骤吧。

    首先打开上次画好的马里奥,然后选择图像-画布大小
    640.jpeg

    把画布尺寸改大一些。
    640 (2).png

    然后使用工具箱里的矩形选框工具选择马里奥的四肢,头,身体等。Photoshop的选择工具更好用。选完一次后,需要追加选区可以按住shift。
    640 (1).jpeg

    选好后点击图层工具面板的新建图层按钮。然后按键盘Ctrl+X,Ctrl+V,这是剪切和粘贴的快捷键。Photoshop支持粘贴的时候自动增加图层。GIMP必须手动添加。
    640 (3).png

    好啦,使用同样的方法,将四肢分开。
    640 (4).png


    身体各个部件的位置移动涉及到旋转和位移两部分。位移好办,分开后按M键鼠标拖动就可以了,旋转的话就需要用到软件的命令。使用图层-变换,逆时针旋转90度,就可以把腿旋转到跳跃的姿势上。Photoshop的旋转命令更强大,支持所见即所得。GIMP是命令窗口式的。
    640 (2).jpeg

    640 (5).png

    如果想旋转任意角度,除了可以使用上面的命令(旋转的是整个图层)。还可以使用工具-变换工具-旋转。这个命令可以旋转选区内的东西。注意旋转之前,在工具面板属性栏区域选择插值为无。
    640 (3).jpeg

    640 (4).jpeg

    使用同样的方法切分完后,就可以重新组合。然后将图层合并后,略作修改就可以了!这样比重新画一个新的马里奥更方便快捷。最后看看效果吧!
    0 (6).gif
  • KiraYamato

    5

    KiraYamato 2017-1-28 16:34:11:
    从GIMP如何转成动态的精灵,没有详细说明,看了相当于没看
  • xaloc625

    6

    xaloc625 2017-2-13 09:26:30:
    KiraYamato 发表于 2017-1-28 16:34
    从GIMP如何转成动态的精灵,没有详细说明,看了相当于没看

    如果能用ps就用ps吧

快速回复 返回顶部 返回干货分享