- 程序:计算机图形技术(Computer Graphics)
- 策划:游戏体验 UX / 信息的呈现方式 / 信息的优先级 / 平台间UI 适配
- 美术:画风(Graphics style / Drawing style) / 声音设计(Sound Design)
- 国际化市场 / 本地化:不同语言间UI避坑
程序:计算机图形技术-我们的虚拟三维世界是什么?
构成关系为: 点 >> 线 >> 三角形 >> 面 >> 物体
左侧:紫色小点为端点Vertex 右侧:黄色为三角形Triangle
射击游戏中常见的摄像机摆放方法
- 好处是不容易出现 3D眩晕症,所以玩家控制的人物可以快速地大幅度地爬墙/跳跃/钩锁 移动,也可以有回旋斩这类大幅移动人物身体的技能。
- 缺点是沉浸感不那么好,且玩家胸前的空间是视野盲区,如使用钥匙、换弹等小幅动作较难体现。另外在狭小空间内【摄像机】很容易卡在墙上。
生化危机4 - 把第三人称射击发扬光大的作品 采用的是 激光指示线准星 + 右后方【摄像机】的组合
女神异闻录5 - 大部分时间人物在画面中心(摄像机在正后方)
- 好处是沉浸感强,使用钥匙、换弹等小幅动作可以很好体现,射击游戏的精美枪械皮肤的细节也可以很好地展示给玩家。在狭小空间内一般不会出现问题。
- 缺点是一但玩家出现大幅移动和视角转动,很容易出现3D眩晕。
可以看到随着玩家机甲的左右高速移动,玩家较准星(图中圆环)的相对位置发生了改变
战神3 - 赫拉迷宫关卡 利用了【视觉错觉】的谜题
摄像机和显示物体的关系 - 图中茶壶可以视为玩家人物
- 玩家屏幕上的UI元素:如准星 / 血条 / 水滴 / 泥迹等,这层UI元素不受任何其他元素遮挡。(直接显示在上图中的NearZ平面上)
- 玩家角色身上的UI元素:如第三人称中玩家被打晕时头上的星星/玩家身上背着的背包和道具,第一人称中玩家的手和枪械。这类UI元素偶尔会被雪花/雨水等环境有轻微遮挡。(假设上图中茶壶为玩家人物,这层UI元素就是茶壶上的各种装饰)
- 场景中的UI元素:如敌人头上的血条/状态栏等。这类UI元素有相当的概率会被墙体或者场景中高亮度光源干扰。(假设上图中茶壶为玩家人物,这层UI元素就是茶壶和FarZ中间的各种其他物体)
- Object Dithering
- Cut-Out View
荣誉战魂 for Honor 中,对墙面的部分(红框处)进行了切割处理
策划:游戏体验 UX-好的 UI 总是让人意识不到这个 UI 的好
- 写实 3D:UI 本身就是场景的一部分,如《全境封锁》/《生化危机6》/《死亡空间》等
- 扁平风格化 UI 的视觉元素和游戏世界观结合,如《女神异闻录5》、老《战神》、《怪物猎人》等
设定 - 橘色类似表盘的特殊显示设备
全境封锁 UI - 类似使用 全息投影/AR 的效果
生化危机6 艾达王 - 可翻转的透明方块状通讯设备
生化危机6 艾达王 - 右下角UI 采用和通讯设备相同的 【立体 淡蓝色方块】 作为设计元素
生化危机 6 身为政府雇员的里昂 - 【UI图标】则用的是基于智能手机的 【扁平 白色 圆角几何图形】作为设计元素
女神异闻录5 - 动漫画风UI的顶流 拥有个人见过最出色的场景转换动画
阿伊努族的传统服装
怪物猎人2G 的UI - 整体采用了给人原始部落感觉的比较简单的画风
怪物猎人XX 载入画面 - 右下角的 Now Loading 英文 采用了风格化字体
地铁2033 任务菜单 - 依靠 写字板+指南针 呈现任务目标和地点 左侧的4向的投掷物选择轮盘是在主机游戏中非常常见的UI设计
地铁2033 - 大部分废土的枪械都是手工制造的 子弹会暴露在外面,玩家虽然看不到弹匣内准确弹数,但是可以依靠直接观察手中的枪做一个大致的判断
英雄联盟 - 大量的 数字 文字 和 缩略图标
泰坦陨落 TitanFall 1代就有的在枪的后方加入小的显示屏,显示剩余弹数的功能。
韩国Nexon 的新TPS战术射击游戏 Veiled Experts (暂译 蒙面专家)
荒野大镖客2 Red Dead Redemption 2 - 道具选择转轮
添加了 光影Mod 和 小地图Mod 的 我的世界
个人总结的基于【方形按钮】可以派生出的 UI控件 UI Component 和 它们在各个平台的可用性。
美术:画风与颜色-终极目标超越《P5》?
- 赛璐璐画法:平涂 /Cel painting / Anime drawing style / アニメ塗り(A Ni Me Nu Ri)
- 油画画法:厚涂 / Oil painting / Thick painting (Impasto) / 厚塗り (A Tsu Nu Ri)
画风的分类 - 更像从一个点开始扩散的同心圆
地铁:离去 - 打开菜单时 人物也会同时打开背包
合金装备V幻痛 - 打开菜单时 BigBoss 会拿出手中通讯器 注意切换菜单时,人物手指也会有相应的动作。
合金装备V幻痛 - 玩家在 返回基地 和 执行任务 载入时 Bigboss 会在直升机中输液 补充能量。玩家这时也可以听录音磁带了解剧情。
怪物猎人世界 - 大剑蓄力的 “噌” - “噌” - “叮” - “咣” 的音效 想必很多玩家记忆深刻
Dota2 - Rampage!!!的音效场景
UI 国际化/本地化
顺带一提,因为英文字母只有26个、日文平片假名只有46个。所以相对好做风格化字体许多,中文要做风格化字体会累死人的。
明日方舟 Arknight 的英文 UI
明日方舟 Arknight 的中文 UI
最近一年开测的类《逃离塔克夫》手游 萤火突击LostLight 英文的可读性较差
茶杯头 Cuphead 的中文本地化 为很多汉字都设计了新的字体
推荐衍生阅读/参考文档
- 文献:第三人称视角技术梳理 Third Person Camera View in Games - a record of the most common problems in modern games, solutions taken from new and retro games
- 文献:计算机图形基础 World, View and Projection Transformation Matrices
- 文献:全境封锁 UI 设计书 Division UI Guide
- 文献:专访《茶杯头》制作组:结合文化的本地化是如何做出来的
- Youtube视频:音乐中的Leitmortif(直译为“主旨”这里更形象的说法为“曲调的锚点”) What Makes Mario Music So Catchy?