Posted in animation 独立游戏

Pedro Medeiros系列:独立游戏像素画角色跳跃动画教程

作者:Pedro Medeiros翻译:教你画像素画像素画游戏角色简单的跳跃动作有2种。1种是原地垂直跳跃;1种是向前跳跃。 向前跳跃加速度需要大于0。为跳跃动画增加烟雾特效,效果会更好。 现在来完整到分析跳跃动画。1、角色在起跳之前需要蓄力,具体动作可以是角色下蹲,适当夸张一些(即角色下蹲时会拉宽)效果会更好。 2、蓄力结束就可以起跳了。起跳到时候角色可以拉长一些,这也是夸张。 3、跳跃动作可以拆分为2部分,第1部分起跳上升到最高点;第2部分力尽开始下落到地面。这里需要注意,角色下落到时候,双手会举高。 通过手臂到不同姿势来区分跳起和下落。4、下落阶段,手臂举高,眼睛看下面;头发,衣服等较轻的物体可以随风晃动。 5、接触地面,角色会受到地面的反作用力,因此在恢复为站姿之前需要先下蹲泄力。现实中如果你从高处往下跳,身体也会不自觉下蹲弯曲膝盖,不然腿可能会断。 完。 像素画也是设计和开发乐高玩具图纸的必备技术。像素画制作简单,上手容易,任何人都可以在短时间内学会。…

Continue Reading... Pedro Medeiros系列:独立游戏像素画角色跳跃动画教程
Posted in animation

笨办法学像素画:角色侧面行走/跑步动画指南

教你画像素画原创教程摘要:角色侧面行走/跑步动画可以作为动画新手的第一个练习。行走和跑步动画可以作为一切动画的一个模型,它比小球动画更适合入门,而且完成以后会很有成就感。 找到合适的素材直接模仿从马里奥时代的4帧行走开始学习。看效果挺不错的,身体和脑袋有上下起伏,手臂和腿也有前后摆动。 将动画分解之后,可以用Photoshop或aseprite打开,就可以看到所有帧,有1帧重复了2次,所以一共是3帧,见下图。这样的3帧图像,可以作为4帧行走的一个模版,角色的高低,以及四肢的摆放,依此为模版可以套用到其他角色上,比如下面这个乌龟小怪。 每一帧的姿势都和马里奥保持相似,就可以获得类似的行走动画。使用这种直接模仿的方法,不需要了解动画规律,也不要额外的学习知识,只需要有合适的动画参考,照猫画虎就可以做出八九不离十的动画效果。 动画参考也可以不局限于像素画序列帧。其他游戏的动画序列帧,动画片或视频里的片段均可作为参考素材。 了解行走动画的原理另一种较为复杂,但是一劳永逸的方法是学会行走动画的原理,这样不论什么角色,只要是人形生物都可以适用。下面是人类行走和跑步的动画规律分解帧。 行走规律:单腿站立时位置最高,双腿着地时位置最低。手臂和双腿循环交替摆动。 跑步规律:双腿离地时位置最高,双腿着地时位置最低。手臂和双腿循环交替摆动。 了解规律之后,就可以很方便的做出行走 /…

Continue Reading... 笨办法学像素画:角色侧面行走/跑步动画指南
Posted in 特效动画

Luke像素画教程:冰冻特效

Luke像素画教程:冰冻特效作者:Luke[1]题图:alexeytronov[2]用像素画实现简单的冰冻特效。制作思路将冰冻特效拆分为2部分动画来考虑。 触发效果的飞行道具(冰锥)和冰冻过程。冰锥只需要画1帧,然后由程序控制冰锥飞行轨迹;冰冻过程则需要根据不同怪物的体形来设计。 具体思路有2种:1、针对每一种体形设计一种冰冻效果; 2、设计通用的冰冻效果,可以叠加在所有怪物上。制作步骤1、冻住怪物的一部分;2、扩大冰冻的面积;3、完全冻住;4、挂下冰柱。 效果预览 参考资料[1]Luke: https://www.patreon.com/sadface_RL[2]题图:alexeytronov: http://pixeljoint.com/pixelart/128837.htm完。

Continue Reading... Luke像素画教程:冰冻特效
Posted in animation 道具、图标与UI

像素画游戏UI:按钮动画教程

摘要:像素画游戏UI:按钮动画教程 关键词:像素画,游戏,UI,按钮,动画 本文共353个字,阅读大约需要1分钟。 1、形状首先确定按钮的大小,16X16像素,然后画出形状。 从正方形开始。通过切角变成圆角。 2、明暗对于像素画来说,明暗和颜色就是细节,明暗层次越多,颜色越多,细节也越多。填充按钮基本颜色。 使用深褐色在按钮中间“制造”视觉凹陷。假设光源在左上方,画出按钮边缘的高光区域。 3、立体感通过增加观众能看到的面来增强立体感。将按钮向上移动几个像素,然后补全缺失的部分,填充一个更暗的褐色。 现在是不是更有立体感了?以这个按钮底板为模版,在上面添加文本或图案,就可以变成游戏中可以使用的按钮了! 4、动画只需要简单的上下移动按钮,然后修改按钮的颜色,就可以做出2帧按钮被按下的动画。完。

Continue Reading... 像素画游戏UI:按钮动画教程
Posted in animation

Nick N像素画动画教程:怎样制作角色快速奔跑动画?

作者:Nick N编译 | 三二 (转载请注明出处)。方法1:倾斜角色身体第一种方法是倾斜角色身体。 正常跑的时候角色身体和地面是90度夹角。要制造出快速奔跑的感觉,可以将身体向前倾斜。 这样在视觉上就会给观众一种角色跑很快的感觉。方法2:减少帧数第二种方法是减少动画的帧数,上面的奔跑动画一共14帧,每帧50毫秒。 减少迈腿腾空关键帧之间的的中间帧,就会产生极速奔跑的感觉。Tips:配合第一种方法使用效果更佳。 下面是10帧的效果。第二种方法也适用于给普通的奔跑加速,前提是普通奔跑帧足够多,对于目前的像素画游戏行走和奔跑动画建议不低于6帧。 下面是10帧效果。完。

Continue Reading... Nick N像素画动画教程:怎样制作角色快速奔跑动画?
Posted in animation

PixelLogic像素画教程次级像素动画介绍

作者:PixelLogic教你画像素画编译出品1、次级像素是什么?你可能听说过像素画,那什么是次级像素? 次级像素经常出现在游戏角色待机动画和微妙的角色动画中。许多8bit游戏使用了次级像素技术,这些作品激发了像素画家的灵感。 像素是计算机显示分辨率的最小单位。1个像素不能变的更小,也不能在两个方格之间分割像素。 所以必须并找到一种模拟1/2像素的方法。这是1个方格,代表1像素这是1/2个方格,代表次级像素,是不可能的这也是不可能的,1个像素不能被分割。 次级像素就是制造出小于1像素的错觉。次级像素就是表示“在1像素以下”或“小于1像素”。 次级像素是一种先进和复杂技巧。如果你遇到麻烦,请不要担心。 它并不是必需的,但这是一个有趣的挑战,可以磨练和提高你的像素画动画水平。下面的蘑菇人,左边是次级像素版本,右边是普通版本,仔细观察两者之间的区别。 2、次级像素何时使用?怎样使用? 对于静态像素画,次级像素就是AA抗锯齿和像素线条的粗细。对于动画,它被称为次级像素动画。 两者都依赖相同的技术创造视错觉:抗锯齿。通常,次级像素Sub…

Continue Reading... PixelLogic像素画教程次级像素动画介绍
Posted in animation

笨办法学像素画:像素画游戏动画解决方案

摘要:像素画游戏动画解决方案游戏中的绝大多数东西都是可动和可交互的,这些东西实际上都是小动画(为了方便理解,可以将小动画想像成可以无限循环的gif动画)。一个游戏中动画工作量最大的一般都是主角。 洛克人4帧奔跑像素画游戏动画解决方案一:序列帧早期的电脑游戏动画资源大多为序列帧,这是由早期计算机性能受限,游戏的分辨率很低且颜色数受限制,作为游戏美术资源的像素画同样尺寸小,颜色少。因此当时不管是电脑游戏还是家用机游戏,游戏动画都采用序列帧的形式。 冒险岛4主角动画序列帧随着计算机性能的不断提升,游戏的画面分辨率不断提升,市场主流游戏开始使用高清位图代替像素画。位图序列帧会导致图片资源巨大无敌,占用内存过高等问题,最主要的是序列帧修改麻烦,无法处理复杂的动画,开发成本高。 仙剑奇侠传98柔情版,dos游戏。大尺寸的像素画电脑游戏。 传奇怪物序列帧像素画游戏动画解决方案二:动画编辑器简单的游戏无法获得玩家的青睐,游戏开发商开始制作和开发复杂的游戏,自研引擎和编辑器开始增加,但是自研的成本不是小厂商可以承受的。因此大多数游戏开发商都会使用成熟的免费引擎和编辑器。 目前市场上最流行的编辑器是Spine。可以说如果你想成为游戏美术开发游戏,就必须学会使用Spine。 Spine可以处理位图动画也可以处理像素图动画。动画编辑器的原理将原本的序列帧相通的部分都拆出来,相同的部分可以重复使用,可以大大减少图片的容量和大小。 比如下面Spine自带的范例,将小男孩的每一个部分都拆出来,就可以拼搭出各种动画。类似这样侧面的角色,做出站立,行走,奔跑,攻击,挨打,死亡等游戏常用的动作完全没问题。 将帧拆碎之后,怎样将分散的块重组成角色?已经有PS的Spine插件,支持一键导出,美术只需要在PS中分层画好角色即可。 这样Spine打开导出的文件之后就和在PS中看到的一样,美术只要继续做动画即可。Spine的初级使用和Flash类似,是基于元件的补间动画。…

Continue Reading... 笨办法学像素画:像素画游戏动画解决方案
Posted in 特效动画

Nick N像素画动画教程:武器攻击特效画法

作者:Nick N编译 | 三二 (转载请注明出处)。直线特效角色使用武器攻击时会产生运动轨迹线,武器特效应当和运动轨迹保持一致。 比如挥动武器时是抛物线型的曲线轨迹特效,画成直线就会很奇怪。曲线特效符合武器运动轨迹的曲线特效。 折线特效如果一定要使用直线也不是不可以,你可以试试折线特效。渐变消失在正确画出运动轨迹的基础上,加上特效形状渐变消失的动画。 完。

Continue Reading... Nick N像素画动画教程:武器攻击特效画法
Posted in animation

【手机游戏像素画美术教程】跟Tsugumo学像素画系列–让角色呼吸起来1

这个页面有大量的动画GIF文件(豆瓣不支持gif)…在网页上加载时可能会因为数量的原因而播放显得缓慢。你应该可以在你的浏览器里点右键选查看图片(在 Netscape是这样,我并不知道其他的如IE或Opera这些浏览器的选项是否一样)单独观看某张图片,这样的话播放速度就会正常。 读到这章你已经可以自主制作角色(sprite)了。你现在有了一个包括别人和你自己都说酷的角色,但似乎缺少了一点什么:你的人物还不会动。 那现在就让我们给角色添加一些简单的动作让角色鲜活起来,让我们先看看怎么让角色呼吸起来。不过在那之前,我们还是来参考学习一下Capcom公司的例子,这是我们想要达到的效果: 首先让我们来看看这些呼吸动作的动画帧数。 最左边的图是很活跃地跳着的拳王,他看起来就好像要对对手吼着“小子,尽管放马过来吧!! ”。他的动作幅度和弹性都很大。 而处于最右下角的Guy则是另外一个典型,几乎没有动作,他很轻松的呼吸着,很冷静,似乎在说着“如果你靠近我,你会后悔的…”。这些你赋予人物的动作应该用来表现这些人物的性格和格斗风格。 当然这也并不只限于格斗游戏。任何游戏里只要你需要用到待机动作,这个原则就可以用得上。 这里我用格斗游戏做例子和用格斗游戏的术语来做解释是因为他们是学习角色动画的好例子。从中学到的技巧可以举一反三,运用在其他方面上。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列–让角色呼吸起来1
Posted in animation

【手机游戏像素画美术教程】跟Tsugumo学像素画系列–让角色呼吸起来2

好,下面就让我们看看怎么一步一步给这个我刚画好的角色加上呼吸动作: 这个人物有110像素高,而且做好准备开架的姿势。接下来我要展示的是如何在像素级上制作呼吸的动画。 如果我制作的是像狮王Blanka那样的动作幅度很大的人物(因为动作幅度大的原因可以保证动作间的区别),我也许会考虑给每一桢单独画一张手稿。但因为这章是讨论另外一个方法的,所以接下来我们说的是剪切加粘贴的方法。 我给他设计的形象是他的上半身会上下晃动,两个拳头则是一上一下的交替运动(当一只手在上面时,另外一只在下面),而他的两条腿也会随着身体的动作稍做弯曲,给整体一点小弹跳的感觉。又或许我会让他的脚踝也稍微的弯曲一下来表现他的动态。 不过这些都仅是我脑海里的计划而已,现在我们来看如何实现它们。第一步要完成的是幅度最大的那个动作…我要将他的上半身往上移2个像素。 在设计中,他的呼吸是很重的,吸气吸得快且深,当吸气逐渐达到最深时(也就是上半身达到最高高度的时候),胸部的动作会逐渐缓慢下来(就好像你跳起来,越达到最高点,速度越慢),然后呼气,再次在另外一个端点逐渐缓慢下来。在像素上来说,这代表着在呼吸的快速部分移动数量比较多的像素,而在慢速的部分移动比较少的像素。 下面来看一下做好呼吸动作的样子: 好了,在一个四桢的动作序列里我们可以看出他的呼吸动作了。我做的步骤仅有将胸部上下移动和稍微整理一下多余像素而已,成图是上面的左边那个图。 用Photoshop来做这种剪切和粘贴的操作再适合不过了,用方形选择工具来选择所要的像素非常简单(配合Shift键做出不规则选区)。这样操作之后,左边的动画看起来已经挺不错了,看起来已经有呼吸的感觉,但看起来还是有点单调。 每一桢的延迟都是一样的,看起来他就像是上半身在上下下上的滑动。我决定要改进他,所以接下来我们要在桢的延迟上做文章,在他达到呼吸的最高点和最低点时,这两桢的延迟是其他过渡桢的两倍。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列–让角色呼吸起来2