【游戏交互】游戏飘字（跳字）设计

“ 从信息传达、视觉、动效三个方面简单分析一下如何设计游戏飘字。”
* L$ i7 `. Z" d
1 J: {# x. o5 O) s4 X  i' ~游戏飘字是个啥？就是我一刀砍了怪物100血，怪物头上跳出来的100，随着游戏的不断发展，大部分游戏逐渐从无数字到有数字，到一堆复杂的数字加各种文字。
7 C1 ^( a+ n* Q1 s, e# T文章将从以下三个方面简单分析一下飘字设计

0 j3 Z0 R0 d: T# Q. A! i
• 信息传达
  
• 视觉
  
• 动效
    o4 O4 X: J8 u, x: B. X

（文章只覆盖常规情况，不同场景的不同表达差异会很大，欢迎讨论）
5 k( a; }6 x$ A( c4 L
5 E3 N; ~2 Z  |, Z01 信息传达
/ ?: w% l. n7 D
6 `& J+ g- B. c8 h+ ~& o    做一个设计首先要明确自己的目的是什么，飘字是为了把某些信息传达给玩家，不同游戏的表达重点不同，做设计前首先明确游戏类型和需求，玩家需要的数据是什么，提供什么信息对玩家是合适的。
    以怪物猎人为例，在早期的游戏版本，怪物没有血条，玩家也没有伤害数字，玩家只能通过经验算出自己到底造成了多少伤害，还有多久才能打死；但对于设计者来说，是为了还原真实的狩猎体验（卖官方攻略本），在十几年的发展中，没有数字和血条也成了mh系列独特的标签。
. w0 i0 T6 q8 S" T! x
$ F5 t- k- \. D! N4 G  T4 N
9 G2 o  ], j0 ^& Z& [4 h
mhxx，打了多少血全靠经验
5 s& I* Y+ ^4 R1 J6 `/ G8 K0 Q
1 Y- A/ q2 R0 }$ F; S2 i    但在最新的怪物猎人世界（mhw）和怪物猎人崛起（mh rise）中，游戏增加了飘字设计，虽然怪物仍没有血条，但是依旧保留了大部分狩猎的感觉，且适当降低了玩家的门槛；
* S/ u. d* X+ [3 |  F. W    MH的数字包含了多重的信息传达：伤害数值与肉质；橙色数字代表攻击到了弱点，灰色代表非弱点，直观的颜色与特效也能准确传达攻击的信息，玩家再也不用再去攻略网站一点一点研究了。数字虽然表现非常弱，也允许玩家关闭显示，但在保证游戏的特色下，提供了数据传达，能对自己的伤害大小和类型有了一个更直观的认识，降低门槛也是游戏模式随着玩家群体变化的一种演变吧。



5 P% `$ V1 Z9 d0 e: T/ N( Q0 amhw
2 {4 ^, w2 A' E* p7 Q2 v
    很多设计师说玩家不需要知道数字，数字会影响画面表现，玩家也也不会想要的，因此给了一个【关闭伤害数字】的选项，事实证明，玩家比起这种影响画面表现的数字，更需要信息的传递。下面是知乎一个朋友的段子
8 ?' x' |9 f/ U: k) _# m8 G6 K
! ]+ e, w: P" G
    再提一下《赞歌》，不仅设置了是否可以显示飘字，也可以设置飘字的透明度与大小，以适合不同的玩家。



( ?, f5 D8 G# W; k9 U: t    在传递信息的过程，要适配游戏类型，一些游戏会有特殊情况，以《幻书》（回合制游戏）举例，回合制游戏需要精准传递信息，若一个技能为多段攻击时，玩家想具体了解这个技能一共打了多少血，而不是一大串不同的数字，因此游戏会把同一个技能的多段伤害合并，并每次伤害重复进行一次跳字动效，既保留了打击感，也传达明确了信息。
! Q1 I* k* R5 I8 E, G' M) _* y2 N

6 [8 E1 s! ]# f! k
1 L$ Q9 e) R' N+ ~( O5 Q每次伤害时都会刷新一下伤害总值

    当游戏中后期，数值膨胀，要考虑好多位数的表达，例如下图的暗黑3,【5.33亿】【1.33兆】【5.73京】，不然就会是满屏幕的9999999999999，我到底打了多少？
" f- z( O1 o: C9 o7 i1 J3 X    数量级不大时，或者采用逗号这种世界通用的符号区分。如：【372,482】
. Y) N  a4 t# R% G
/ q( n0 X2 E2 w& G$ K# Q
: s; N0 R/ e: J& L( g) k. }    宝可梦也是回合制，但只显示了自己的生命值，攻击过后会提醒你攻击的描述，下图的效果拔群也属于一种特殊的飘字，以一种描述的样式说明玩家是否使用了正确的属性，最新作的剑盾仍保持了一贯的做法，所以也不一定回合制就采用数字的表达。
; k: `  N+ i4 J: L; `

8 s2 x% o& U- @% ^, m: T
9 J' V$ n6 v7 Z. O7 D( V. h  v: m宝可梦——效果拔群
6 R: Z& W4 P! p1 Y1 P: a+ s
    什么游戏不需要跳字呢？以ftg（格斗）游戏为例，例如拳皇，生命槽十分明显，且有二层血条的UI设计，数字会遮挡游戏画面，数字也不如直观的进度条信息传递直观。
    因此在数据表达清晰且主要画面表现优异下，可以不使用数字表现。

: y0 N% _. M& h* `4 F
举个例子：
    假如现在正在做一款写实类的act游戏，某天从战斗策划里接过游戏中所有不同的伤害类型：


* C4 H/ `3 C' g2 c. a) ~    上述的分类不可能去每种都画一种样式，首先按照游戏特点分出不同类别，区分后大致分为以下几类，假如这个游戏对护盾的要求不高，因此与策划讨论后，删除了护盾相关的提示，把不同种类的伤害整合了一下。
    经过简单的梳理，以下为游戏的信息传达点。
0 P, d; M  `, |0 Q' ]2 `, h' S

    合理的传达玩家需要的信息，把所有信息都一股脑的丢给玩家是一种偷懒的行为。
" Q4 Y) _2 i2 T$ ^
02 视觉


1、视觉重量

  {/ `, n  [) Q跳字在不同类型的游戏中重量不同，主要看想要突出什么，一般来说，游戏越偏向写实，数字风格化就会越弱。
) @7 q9 A7 |4 y

    举个极端例子，美国末日2这种，没有任何数字表现，比如下图一口蹦出来个-99，当场出戏。


5 N. [. b" {. x* T( x/ Z
美国末日2，强行P个-99

. A+ Y% A% v! P; Z6 P  \    相反，以女神异闻录5（P5）为例，回合制游戏需要大幅度强化数字表现以提升游戏的打击感，数字采用的锋利与透视的效果，颜色也采用了P5的亮红，与游戏UI风格保持一致；



女神异闻录5

2、字体可读性
% G  l! O; K/ v- F! z
( P2 N+ C: X( b$ {2 ~) f+ L字体需要描边或投影设计，以便在不同的场景中表达清晰，上文中的P5采用了特殊的描边，偏写实的就会采用轻微的外发光或阴影来表现。


! R0 T; G  Z3 H( v4 L' a' R5 x5 z1 L1 f
赞歌的阴影数字

, v& Z1 L* _  @$ L9 H' {' |再看下图暗黑破坏神3的飘字，此款游戏偏向写实风格，飘字就采用了最简单的字体与偏暗的颜色，也没有对字体进行变形设计。

0 R( A  ]4 B2 K( n
% w( F; z7 u- I+ A4 _) b
暗黑3

3、强风格化字体

2 T: o7 ~, E( T  A* C2 X    做风格化比较强的作品时，字体的动效也是重点，两者相辅相成，做的时候记得统一考虑，Q版字体或者艺术字体搭配出入动效会有更好的效果，如下图的P5，高透视的字体，与放射状的出现动效。动效和视觉相互配合，以表达游戏的风格。

+ T4 z' }- z# S$ ?8 j+ r' e
) N% D, h5 q5 Y9 V% Q# {; g$ e3 i03 动效

    动效大致包括以下几点：【时间】【方向】【样式】【挂点】，动效和上述的视角本是相辅相成的，为了方便分类，便分开说明。
+ ]" ^6 g+ r2 v* w( H6 Z, g* J# k9 X1、时间
# G+ h0 a9 T6 P1 ^7 C5 w; Y
    所有的数字一般采用统一的时间即可，时间从600-1200ms不等，一般回合制游戏（偏数值的游戏）数字时间会更长一些，
; O% u0 |, G, D8 v# U. X! \0 y
2、方向
. y# X3 h# j( M  i" K# j
    方向处理有很多种，先说最常见的的砸下式，这种也是很多游戏的处理方式，动画处理简单暴力，也能体现出打击的力量感

3 `+ W8 y7 @& h5 k# n$ B% H
" f& }: z! G& r6 K    王者荣耀使用的抛物线式，此处有不同的设计，玩家掉血的时候，数字呈抛物线消失，表达的一种【流失】的状态，而生命恢复使用了上升的数字，代表生命变高了，以方向与颜色两种视觉要素处理信息，能让玩家更容易识别。
& I9 k2 a/ a; y9 J
( V# o7 u" o# [1 ]  y1 Q8 s7 y( Z1 v

王者荣耀
: L7 ~1 K" |# F
% ]! x9 s8 |, G: Q3、样式
4 ]3 x7 E% r5 _. m; q! f) L: N
样式包含的颜色、大小、特效等，下图为冒险岛2暴击采用了更强的动态变化，还使用了特殊的背景强化视觉效果，弱化了玩家受到的伤害，使用了更小的字体，更弱的效果

2 J2 \* Y+ g* j
4、挂点

挂点为数字出现的位置，常见的一般会在人物的头顶出现，或者人物的附近，一般以不遮挡模型为原则。下图常规的头顶出现式

$ X2 e" m% P% g) t" S8 b/ A: i
% w2 V# n' F2 k6 j: l9 M4 H
剑侠情缘
; R8 U- T' [- o1 g% ?
怪物猎人的游戏特点为攻击不同位置伤害不同，因此数字出现在了攻击到的位置，通过数字颜色也能让玩家清楚自己是否攻击到了弱点。
& T4 ?" h8 W5 G* P
; u2 O8 e+ F7 J& G$ W
王者荣耀的受伤飘字的位置为人物两侧，上文也提到了数字的移动方向，表现了流失的感觉。
  Q- A9 p# G; K2 |
. L2 |$ ~6 s9 [1 Q) }

以上四点通过不同组合，设计师需要充分考虑什么是玩家需要的东西，把信息准确且美观地传递给用户。
& |  P) z( P$ V4 H) l- p04 结语

    游戏飘字本身属于HUD的一种，可进行的创意是无限的，虽然飘字只是一个小东西，但正是众多小东西的细节才拼凑成一个完整的作品。

9 Q' j7 d. x7 k9 B我的公众号：

: l! w7 ]5 w1 \我的微信：Lwanna7
8 p) R% N8 v& ?4 o5 C) ?1 N
感谢阅读与分享
6 V7 [- U: C9 M6 K+ ?觉得有帮助的话欢迎点一下【赞】
$ r4 E2 z+ O) V/ C. l1 n欢迎交流