Author: PixelBear
游戏开发基础-场景Tile设计5步走
摘要:以Real Football项目为例讲解场景Tile设计步骤。pixel32 原创 | 教你画像素画 出品相信很多新手在第一次做游戏场景设计的时候都会拿着策划给的文档有些发愁。 但是经过几个项目的磨砺就可以从容应对了。万事都有规律,找到规律,按部就班就可以做出合格的游戏场景了。 Real Football是10多年前的老项目,存在很多不足,不过看自己以前做的东西还是挺亲切的。1、明确需求,收集素材Real Football这个游戏的场景是ISO透视角度。 脑子里如果一点东西都没有,肯定是没法设计足球游戏场景的,也不知道从何入手。为了使美术明白策划意图,策划文档会附上参考图。…
PixelLogic系列-抖动技巧不局限于像素画
摘要:简要介绍了其他艺术形式中的抖动。透明图层世嘉MD(Mega Drive)严重依赖线性抖动,在游戏输出到CRT电视机时会强制混合。 早期的超级任天堂游戏也使用抖动来表现透明图层。 抖动并不局限于像素画抖动可以在很多古老的艺术中找到踪迹,比如铅笔画,版画等。 点彩派用点来塑造形体。传统艺术不受网格限制,所以这种混合颜色的方式是自由的,有机的。 微软画图软件早期只支持黑白2色,抖动也被用来表现灰度颜色。 很多像素画家很少使用抖动,像素画的原则是少即是多。 抖动是一种奇妙的技巧,一定要适度使用,抖动不应该太过突出,与其他视觉效果冲突。 完。
PixelLogic系列-游戏透视基础和常用透视种类
摘要:简单介绍了什么是透视以及游戏常用透视的种类。游戏透视透视是以人类的视角观察到的不同世界。 基本的规则是离眼睛越近的东西,看起来越大。透视是绘画和设计的基础。 因此在画像素画的时候需要考虑以下几点:在大多数2D游戏中没有真正的消失点,很多游戏都是伪3D,它们没有深度,实际上只是2维图片;使用适合游戏的透视,确保场景和角色的视觉效果保持统一。透视术语下面是一些需要的了解的透视词汇。 平面2D平面显示了长度和宽度。坐标轴2D平面可以用x,y坐标轴来表示,3D则多了z轴。 消失点透视存在,会使无限延长多平行线最后相交于1点。投影3D的物体可以在平面上产生投影。 这也是人类眼睛观看世界的方式。物体的投影投射到视网膜上形成图像,人就看到了世界。 轴测图没有透视的工业制图,ISO像素画就是以这种透视来画的。在谈论尺寸或坐标轴时,x代表宽度,y代表长度,z代表深度。 以下是游戏常用的透视种类正投影视图TopView视图顶透视ISO轴测透视45度透视3/4侧面透视
游戏开发基础-游戏UI设计基本原则
摘要:讲解UI是什么东西,快速入门像素画游戏UI。pixel32 原创 | 教你画像素画 出品UI是什么? “一般来说,UI设计的目标是产生用户界面,使用户界面能够使人类以简单愉快高效的的方式操作机器。这通常意味着操作者需要提供最少的输入来实现期望的输出,并且该机器使错误的输出最小化。 随着个人电脑使用量的增加,用户界面通常被认为是指图形用户界面。”(维基百科)。 移动互联网崛起之后,UI设计师大受市场欢迎。其实在苹果和安卓手机诞生之前,UI设计(也叫用户界面设计)就已经存在了。 可以说计算机诞生的那一天起,UI设计就同时产生了。印象中操作系统界面以及按钮,icon等都属于UI设计。 下面是音乐播放器winmap的界面皮肤设计。以现在的要求看,无疑的这种复杂界面对新手用户来说太难了,但是对winmap的粉丝来说却是一种享受。 游戏UI人类需要和机器交互,所有和交互有关的界面设计都是UI设计。对游戏来说,玩家上手就可以玩的游戏,UI设计的就非常好,因为玩家可以简单愉快高效的操作设备玩游戏,不会因为太难操作而放弃。…
PixelLogic系列-游戏透视中的平面视图
摘要:简明扼要的介绍了常见的游戏透视平面视图。平面视图平面视图是2D游戏中最常见的,游戏中所有的物体都可以被放置在90度的网格内。 平面视图包含以下3类。平面视图缺乏深度,由于只能看到1-2个面,所以按照平面透视画出来的东西都像方格。 侧面视图侧面视图是最常见都游戏透视,大多用于横版过关游戏(2D卷轴游戏),游戏镜头可以在垂直和水平方向移动。横版过关游戏主要的视图如下所示。 这些视图都适合横版游戏,对于游戏中的角色,可行走的区域都是不变的。侧面视图的案例。 TopView视图的案例。Top-Down视图Top-Down的场景由瓷砖Tile组成,使用Tile可以很方便拼出游戏世界。 Top-Down会根据视角的高度而有细微的差别。某些地牢迷宫游戏,比如塞尔达会采用特殊的Top-Down视图。 塞尔达只有室内的房间使用1点透视,室外场景还有角色仍然是普通的Topview视图。这是因为如果角色也使用1点透视会出现可读性问题,玩家将无法辨认角色。 对于Top-Down透视的室内房间,可以将前面遮挡的墙去掉,入口的门也可以不画。TopView顶视图TopView顶视图也被成为鸟瞰图,大多数地图都会以这种视图形式出现。 待续。
横板游戏场景设计3大元素分析步骤
摘要:介绍了横板游戏场景设计的3大元素分析步骤。pixel32 原创 | 教你画像素画 出品场景设计的一般步骤是明确需求,收集资料,画草图,高保真假图,然后切图导出TileSet。 只有真正开发项目的时候,才会投入时间和精力做场景设计。那么不做项目是不是就无法学场景设计呢? 当然不是。收集市场上已有的游戏产品,然后分析场景设计,同样可以学到很多东西。 场景设计分析:底层元素作为横板游戏鼻祖的马里奥是游戏开发者绝对不能错过的经典。Doom启示录里面,编程大牛约翰卡马克编的第一个游戏就是复刻版马里奥。 类似马里奥这样的横板过关游戏也是很多编程引擎或游戏编程必备的案例学习项目。那么怎样分析场景设计呢? 下面这个原则适用于所有类型的游戏,首先分析底层元素。众所周知,游戏世界是一个虚拟的时空,游戏角色需要一个舞台,舞台的基础就是底层元素。 大地,草原,沙漠,海洋,天空等等都属于底层元素。底层元素可以由最少1个Tile组成。…
像素画初级教程-室内场景的画法
摘要:以实际案例讲解室内场景的画法。pixel32 原创 | 教你画像素画 出品室内场景室内场景可以简单的理解为给天空加一个盖子,再把天空替换为墙壁,室外场景就可以变成室内场景。 或者像马里奥这样干脆用砖块Tile围起来也可以。墙壁画法画室内场景,墙壁是必须的,简单的墙壁可以用纯色来画。 步骤如下:首先填充一块区域。然后画出地面,用矩形画框然后填充颜色。 这个示范的场景是横板Top-Down视图,为了表现房间的立体感,多加一个暗面。这是最简单的处理,复杂的可以加上纹理和做旧效果。 窗户和门窗户和门都可以从矩形开始画。矩形套矩形,画出窗框。 再套矩形,画出蓝天。画出窗格,加上投影。 门用一样的方法来画。其他装饰物使用相同的方法来画其他房间装饰物品。…
PixelLogic系列-ISO像素画透视介绍
摘要:介绍了俯视图的3种类型,详细介绍了ISO像素画透视。pixel32 编译 | 教你画像素画 出品俯视图俯视图是游戏广泛采用的视角,可以看到物体的3个面,立体感强。 可以细分为以下3种类型。 ISOISO意味着所有轴都相等,所有面都同样重要。 ISO像素艺术的网格是30°角的菱形。但是,像素艺术中不能有精确的30°线条,所以只都使用2个像素的阶梯。 这是与30°线最接近。用这个“2像素阶梯”的方法构建世界就容易多了。 需要说明以下,ISO像素画并不是eboy独占的风格,任何人都可以使用ISO风格来完成自己都作品。只不过eboy太有名了,很多人看到ISO风格就当成是eboy的风格,这非常可笑。 ISO的独特之处在于网格是菱形的,很难用方块来对齐它们。…
PixelLogic系列-ISO像素画绘画方法
摘要:比较详细的讲解了ISO像素画绘画方法ISO像素画绘画方法可以通过2种方法来画ISO像素画,一种是直接观察,然后将对象简化为几何形;另一种是立方体来构建对象。通过立方体,你可以画出任何其他形体。 一个圆筒可以变成一个树桩或一个桶。金字塔可以变成屋顶或帐篷。 一个锥体可以变成一棵树或一座塔。一个球体可以变成一个蘑菇或一个碗。 水平面ISO圆形的画法垂直面ISO圆形的画法锥体/金字塔的画法将角色从平面图转换为ISO透视首先准备平面的角色,可以画出水平参考线。然后将参考线改为30度斜线。 将角色也同样倾斜。调整并修改角色,增加角色的厚度。 填补空白,并修复不舒服的地方。完成。 注意不要将角色以反方向倾斜。ISO像素画的形状都是通过正方形的变换来获得的,具体关系看上图。
笨办法学像素画第二课:像素画明暗规律及示范
摘要:详细讲解像素画明暗规律以及实际例子展示。笨办法画明暗学会画线以后,该画明暗了。 明暗是表现物体立体感最重要的方法。一般的做法是先填充对象的固有色,然后根据对象的受光情况提亮或加深某些部位或区域。 以下图中的苹果为例,可以看到是通过从暗到亮层层叠加来画明暗的。因为像素画颜色数非常少,因此调整颜色非常方便,所以前期画的时候只需要关注线和形状以及基本的明暗关系准确就可以了。 1、首先徒手画圆,然后填充颜色。2、分出亮部和暗部。 3、继续提亮亮部或加深暗部。4、最后点上高光,画出反光效果更好。 明暗基本规律明暗基本规律特别简单,可以用家里的台灯作为单一光源,然后把要画的东西放在台灯下面。观察下面的苹果,你知道光源是在左边还是右边吗? 通过影子来推测光源的位置,上图中苹果的影子在左边,那么光源就在右边。影子和光源是相反方向的。 记住这一点,明暗就算入门了。常见的光源位置以及明暗以苹果为例,改变光源的位置,苹果上面的明暗就会跟着改变。 表现明暗一共有4个颜色,分别是苹果的固有色,亮部色,高光色,反光色。下面是是光源位置改变以后,苹果的明暗变化。 以下苹果的例图都没有参考图,是根据明暗规律推导出来的。光源在左上前方。…