FNS Service
473 lines
40 KiB
HTML
473 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>《范式：起源》立体交互体验拆解</title>
|
||
<style>
|
||
:root {
|
||
--paper: #ffffff;
|
||
--ink: #161616;
|
||
--muted: #6f6f6f;
|
||
--line: #d7d0c1;
|
||
--accent: #ad8d4b;
|
||
--bg: #e9e6df;
|
||
--shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background:
|
||
radial-gradient(circle at top left, rgba(255,255,255,0.8), transparent 28%),
|
||
linear-gradient(180deg, #f2efe8 0%, var(--bg) 100%);
|
||
color: var(--ink);
|
||
font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
|
||
line-height: 1.85;
|
||
}
|
||
|
||
.document {
|
||
padding: 32px 16px 72px;
|
||
}
|
||
|
||
.page {
|
||
width: min(210mm, calc(100vw - 32px));
|
||
min-height: 297mm;
|
||
margin: 0 auto 24px;
|
||
background: var(--paper);
|
||
box-shadow: var(--shadow);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.page::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.page-inner {
|
||
padding: 24mm 21mm 24mm;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.cover {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background:
|
||
linear-gradient(135deg, rgba(173,141,75,0.09), transparent 30%),
|
||
linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02));
|
||
}
|
||
|
||
.cover .page-inner {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding-top: 30%;
|
||
}
|
||
|
||
.report-title {
|
||
font-size: clamp(28px, 3.4vw, 34px);
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
margin: 0 0 20px;
|
||
}
|
||
|
||
.report-meta {
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
letter-spacing: 0.08em;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.toc-title {
|
||
font-size: 24px;
|
||
margin: 0 0 24px;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.toc-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.toc-list li + li {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.toc-list a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 10px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.toc-label {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.toc-leader {
|
||
flex: 1;
|
||
border-bottom: 1px dotted rgba(0, 0, 0, 0.35);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.toc-page {
|
||
width: 24px;
|
||
text-align: right;
|
||
color: var(--muted);
|
||
}
|
||
|
||
h2 {
|
||
font-size: 28px;
|
||
margin: 0 0 24px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid var(--line);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 21px;
|
||
margin: 32px 0 14px;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 17px;
|
||
margin: 24px 0 10px;
|
||
color: #3b3429;
|
||
}
|
||
|
||
p {
|
||
margin: 12px 0;
|
||
text-align: justify;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.list-block ul,
|
||
.list-block ol {
|
||
margin: 10px 0 14px 24px;
|
||
padding-left: 16px;
|
||
}
|
||
|
||
.list-block li {
|
||
margin: 6px 0;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.figure-block {
|
||
margin: 18px 0 20px;
|
||
}
|
||
|
||
.gallery {
|
||
display: grid;
|
||
gap: 12px;
|
||
align-items: start;
|
||
}
|
||
|
||
.gallery-1 {
|
||
grid-template-columns: 1fr;
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.gallery-2,
|
||
.gallery-3,
|
||
.gallery-4 {
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
}
|
||
|
||
.gallery-item {
|
||
background: #f8f7f4;
|
||
padding: 10px;
|
||
border: 1px solid rgba(0, 0, 0, 0.07);
|
||
box-shadow: 0 8px 16px rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.gallery-item.single {
|
||
padding: 12px;
|
||
}
|
||
|
||
.gallery img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.figure-caption {
|
||
margin-top: 10px;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
text-align: center;
|
||
}
|
||
|
||
.figure-caption.split {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
gap: 12px;
|
||
}
|
||
|
||
.todo {
|
||
margin: 14px 0;
|
||
padding: 10px 14px;
|
||
border-left: 4px solid var(--accent);
|
||
background: rgba(173, 141, 75, 0.08);
|
||
color: #5d4b22;
|
||
font-size: 14px;
|
||
}
|
||
|
||
a {
|
||
color: #275d9c;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.page-number {
|
||
position: absolute;
|
||
right: 21mm;
|
||
bottom: 12mm;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
@media print {
|
||
body {
|
||
background: #fff;
|
||
}
|
||
|
||
.document {
|
||
padding: 0;
|
||
}
|
||
|
||
.page {
|
||
width: 210mm;
|
||
min-height: 297mm;
|
||
margin: 0;
|
||
box-shadow: none;
|
||
break-after: page;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="document">
|
||
<section class="page cover">
|
||
<div class="page-inner">
|
||
<h1 class="report-title">《范式：起源》立体交互体验拆解</h1>
|
||
<p class="report-meta">作者：孙玉杰</p>
|
||
<p class="report-meta">文档版本：26/1/30</p>
|
||
</div>
|
||
<div class="page-number">01</div>
|
||
</section>
|
||
|
||
<section class="page toc-page">
|
||
<div class="page-inner">
|
||
<h2 class="toc-title">目录</h2>
|
||
<ol class="toc-list">
|
||
<li><a href="#前言"><span class="toc-label">前言</span><span class="toc-leader"></span><span class="toc-page">3</span></a></li>
|
||
<li><a href="#游戏玩法机制简述"><span class="toc-label">游戏玩法机制简述</span><span class="toc-leader"></span><span class="toc-page">3</span></a></li>
|
||
<li><a href="#操作交互设计"><span class="toc-label">操作交互设计</span><span class="toc-leader"></span><span class="toc-page">3</span></a></li>
|
||
<li><a href="#物件交互设计"><span class="toc-label">物件交互设计</span><span class="toc-leader"></span><span class="toc-page">4</span></a></li>
|
||
<li><a href="#交互模式优势与代价与解决方案"><span class="toc-label">交互模式优势与代价与解决方案</span><span class="toc-leader"></span><span class="toc-page">4</span></a></li>
|
||
<li><a href="#视听反馈设计拆解"><span class="toc-label">视听反馈设计拆解</span><span class="toc-leader"></span><span class="toc-page">7</span></a></li>
|
||
<li><a href="#瞬间响应"><span class="toc-label">瞬间响应</span><span class="toc-leader"></span><span class="toc-page">7</span></a></li>
|
||
<li><a href="#确认与引导"><span class="toc-label">确认与引导</span><span class="toc-leader"></span><span class="toc-page">7</span></a></li>
|
||
<li><a href="#视觉避让"><span class="toc-label">视觉避让</span><span class="toc-leader"></span><span class="toc-page">8</span></a></li>
|
||
<li><a href="#深度感知的视觉补偿"><span class="toc-label">深度感知的视觉补偿</span><span class="toc-leader"></span><span class="toc-page">9</span></a></li>
|
||
<li><a href="#动画编排"><span class="toc-label">动画编排</span><span class="toc-leader"></span><span class="toc-page">9</span></a></li>
|
||
<li><a href="#音效设计"><span class="toc-label">音效设计</span><span class="toc-leader"></span><span class="toc-page">10</span></a></li>
|
||
<li><a href="#判定逻辑设计拆解"><span class="toc-label">判定逻辑设计拆解</span><span class="toc-leader"></span><span class="toc-page">11</span></a></li>
|
||
<li><a href="#判定窗口"><span class="toc-label">判定窗口</span><span class="toc-leader"></span><span class="toc-page">11</span></a></li>
|
||
<li><a href="#判定容错"><span class="toc-label">判定容错</span><span class="toc-leader"></span><span class="toc-page">11</span></a></li>
|
||
<li><a href="#生存压力"><span class="toc-label">生存压力</span><span class="toc-leader"></span><span class="toc-page">12</span></a></li>
|
||
<li><a href="#谱面设计拆解"><span class="toc-label">谱面设计拆解</span><span class="toc-leader"></span><span class="toc-page">12</span></a></li>
|
||
<li><a href="#手序引导"><span class="toc-label">手序引导</span><span class="toc-leader"></span><span class="toc-page">12</span></a></li>
|
||
<li><a href="#键型设计"><span class="toc-label">键型设计</span><span class="toc-leader"></span><span class="toc-page">14</span></a></li>
|
||
<li><a href="#总结"><span class="toc-label">总结</span><span class="toc-leader"></span><span class="toc-page">15</span></a></li>
|
||
<li><a href="#引用"><span class="toc-label">引用</span><span class="toc-leader"></span><span class="toc-page">16</span></a></li>
|
||
</ol>
|
||
</div>
|
||
<div class="page-number">02</div>
|
||
</section>
|
||
|
||
|
||
<section class="page content-page">
|
||
<div class="page-inner">
|
||
<h2 id="前言">前言</h2>
|
||
<p>本文档旨在探讨《范式：起源》的立体交互机制。通过分析其设计逻辑、感官反馈、优势与代价，解析这套设计如何塑造了空间立体感，以及如何以对视听、判定以及内容进行设计在立体交互基础上实现了对手感体验的调优。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page content-page">
|
||
<div class="page-inner">
|
||
<h2 id="游戏玩法机制简述">游戏玩法机制简述</h2>
|
||
<h3 id="操作交互设计">操作交互设计</h3>
|
||
<p>传统下落式音游的空间映射常常被限制在 X 轴（轨道）与 Y 轴（时间）构成的二维平面中进行演出和判定。</p>
|
||
<aside class="todo">TODO: a to b 表述更新</aside>
|
||
<p>然而，范式选择打破这一限制，扩展出 Z 轴表示深度，将玩家控制区域变化为 “四边 + 中心 + 深度” 的立体结构。</p>
|
||
<aside class="todo">TODO: 具象形容 伪3d效果 不要默认觉得读者了解音游</aside>
|
||
<p>范式的核心玩法要求玩家处理从屏幕中心向四周（上、下、左、右）发散的地键（Ground Note），同时也需要处理直接作用于屏幕中心的空键（Air Note）。</p>
|
||
<figure class="figure-block"><div class="gallery gallery-1"><div class="gallery-item single"><img src="附件/范式：起源 立体交互体验拆解/image1.png" alt="image1.png" loading="lazy"></div></div><figcaption class="figure-caption">上图蓝色区域为玩家四周判定区域</figcaption></figure>
|
||
<figure class="figure-block"><div class="gallery gallery-1"><div class="gallery-item single"><img src="附件/范式：起源 立体交互体验拆解/image2.png" alt="image2.png" loading="lazy"></div></div><figcaption class="figure-caption">上图橙色区域为玩家屏幕中心判定区域</figcaption></figure>
|
||
<h3 id="物件交互设计">物件交互设计</h3>
|
||
<p>游戏通过两类交互物件为玩家构建了游玩的立体感，并为二者在设计上担任不同的手感职能。</p>
|
||
<div class="list-block"><ul><li>地键（Ground Note）<ul><li>形态与手感：判定锚定在平面边缘，提供明确的上、下、左、右方位反馈。</li></ul><ul><li>设计意图：交互上对标传统下落式X/Y轴判定，手感类似于传统下落式音游，但地键分布在四周会带来更大的玩家手部位移。</li></ul></li></ul><ul><li>空键（Air Note）<ul><li>形态与手感：悬浮在轨道中空间的正方形物件，判定更多得体现在何时而不是何处，需要结合音乐节奏预判时机。</li></ul><ul><li>设计意图：引入了Z轴，建立纵深空间，与地键一起出现时一定程度上会增加读谱难度为玩家带来紧张感。手感从传统的点击转化到迎击。</li></ul></li></ul></div>
|
||
<aside class="todo">TODO: 手感差异在视觉上的表现 将主观体验转化为客观描述</aside>
|
||
<h3 id="交互模式优势与代价与解决方案">交互模式优势与代价与解决方案</h3>
|
||
<h4 id="优势">优势</h4>
|
||
<p>内容设计空间升维：</p>
|
||
<div class="list-block"><ul><li>相对于传统下落式音游，引入Z轴深度概念能够为游戏谱面设计新增维度，使设计者能够借这套机制设计一些特有的或者模拟街机音游的键型。</li></ul></div>
|
||
<p>大开大合的交互体感：</p>
|
||
<div class="list-block"><ul><li>四边判定会迫使玩家的手腕和小臂参与到位移中来，带来大出张与大位移能够让手感从手指操作转化为肢体运动。</li></ul></div>
|
||
<aside class="todo">TODO: 出张概念 以及 详细解释 越过判定中线</aside>
|
||
<h4 id="代价">代价</h4>
|
||
<p>手部遮挡：</p>
|
||
<div class="list-block"><ul><li>在手序设计不佳的情况下手指点击空键或上边缘时会遮挡一部分读谱区，人类的手不能调透明度也不能穿模。体现在极端情况下将右手引导至左区，将左手引导至右区时必然会遮挡住一部分音符，同时也可能发生双手打架的情况，这是大部分移动端音游都会产生的问题，对手机玩家手感影响更甚。</li></ul></div>
|
||
<aside class="todo">TODO: 出张的优势与代价 下部补充</aside>
|
||
<p>变速错觉：</p>
|
||
<div class="list-block"><ul><li>透视原理使音符在视觉上呈现非线性加速，导致越近越快，破坏了平面音游中距离等于时间的直观读谱逻辑。玩家必然更依赖音押而非目押，设备音频延迟的影响会被放大。</li></ul></div>
|
||
<aside class="todo">TODO: 玩家适应成本 判定确认极端 加速度下落式玩家比普通情况下更依赖音押或目押</aside>
|
||
<p>判定面的视觉模糊：</p>
|
||
<div class="list-block"><ul><li>Z轴上的判定是一个面而非一条线。尤其在玩家处理Slider时，手指在纵深方向上是否偏离轨道难以直观感知，容易产生莫名其妙的失误。</li></ul></div>
|
||
<aside class="todo">TODO: 学习成本</aside>
|
||
<h4 id="解决方案">解决方案</h4>
|
||
<p>针对变速错觉问题，范式除提供了音频延迟以及画面延迟的调整外，还提供了音符出现距离的调整，将音符出现距离拉近能够有效地缓解变速错觉问题。</p>
|
||
<p>但降低音符出现距离会缩减音符出现时长，导致影响玩家的信息接收量。降低音符出现距离的同时想要保持音符显示时长又需要提高谱面流速，会使不熟练的玩家难以反应。但其他轨道存在透视变速的音游也存在一样的问题，除提供的原理类似的上隐，只能靠玩家自己手动往轨道上方放纸条挡住变速区域，也牺牲了信息接收量。范式的降低音符出现距离帮助玩家省去了贴纸条的操作，作为系统功能来说，这是对变速错觉问题难以解决的妥协处理，业界也没有针对此问题的其他解决方案。信息接收量降低不完全是一件坏事，当同一时间大量音符出现在屏幕中时玩家会难以集中注意力去处理该点击哪个音符，信息接收量的降低能够提供一定的信息节食效果，帮助玩家集中注意力到该处理的音符上。</p>
|
||
<aside class="todo">TODO: 上隐下隐目的 信息量 思考速度与时间</aside>
|
||
<p><a href="<a href="https://www.bilibili.com/video/BV1N1NPe4E5R"" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV1N1NPe4E5R"</a> target="_blank" rel="noreferrer"><a href="https://www.bilibili.com/video/BV1N1NPe4E5R" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV1N1NPe4E5R</a></a></p>
|
||
<figure class="figure-block"><div class="gallery gallery-1"><div class="gallery-item single"><img src="附件/范式：起源 立体交互体验拆解/image3.png" alt="image3.png" loading="lazy"></div></div><figcaption class="figure-caption">音符出现距离设置项</figcaption></figure>
|
||
<p>手部遮挡问题的解决其一可以通过谱面的手序设计来绕过见后文手序引导分析，其二是为玩家提供物件大小调整项。足够大的物件能够为手机端玩家提供足够高的辨识度。同时游戏还提供了游戏区域比例来单独适配平板以及手机的显示区域。</p>
|
||
<figure class="figure-block"><div class="gallery gallery-1"><div class="gallery-item single"><img src="附件/范式：起源 立体交互体验拆解/image4.png" alt="image4.png" loading="lazy"></div></div><figcaption class="figure-caption">游戏区域比例设置项</figcaption></figure>
|
||
<figure class="figure-block"><div class="gallery gallery-2"><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image5.png" alt="image5.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image6.png" alt="image6.png" loading="lazy"></div></div><figcaption class="figure-caption split"><span>手机显示比例</span><span>平板显示比例</span></figcaption></figure>
|
||
<p>判定面的视觉模糊可以通过调整判定缓解，见后文判定容错。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page content-page">
|
||
<div class="page-inner">
|
||
<h2 id="视听反馈设计拆解">视听反馈设计拆解</h2>
|
||
<p>范式在立体交互的基础上通过视觉欺骗、音效播放延迟优化以及触控延迟的可控调整的实现，制作了干脆不粘手的反馈效果。</p>
|
||
<h3 id="瞬间响应">瞬间响应</h3>
|
||
<div class="list-block"><ul><li>表现：当玩家触发判定时，Note会在第一帧立刻消失，立刻播放判定音效，并在目标位置触发火花特效、判定线高亮特效以及判定结果文字特效。</li></ul><ul><li>设计意图：在缺乏音游设计知识的情况下可能会出现制作Note溶解动画的情况，</li></ul></div>
|
||
<aside class="todo">TODO: 游戏类型与动画解释 原因与影响 音效设计组合</aside>
|
||
<p>这会带来视觉残留导致手感拖泥带水。范式中Note触发即消失，并同时在判定目标位置生成触发特效，瞬间完成的视觉反馈以及音效的瞬间播放极大提高了操作的即时感。</p>
|
||
<figure class="figure-block"><div class="gallery gallery-2"><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image7.png" alt="image7.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image8.png" alt="image8.png" loading="lazy"></div></div><figcaption class="figure-caption split"><span>判定开始</span><span>特效响应</span></figcaption></figure>
|
||
<h3 id="确认与引导">确认与引导</h3>
|
||
<div class="list-block"><ul><li>表现：判定触发后，一条光流沿Z轴轨道向屏幕深处运动，同时火花向外爆开判定线高亮逐渐变暗，其中光流的颜色因玩家点击的Note的判定准度而变化。</li></ul><ul><li>设计意图：<ul><li>打击延伸：为Note点击带来向内方向释放感，光流颜色加上火花特效能够同时增强玩家的“点到了”以及“唉爆了个绿”的确认感。</li></ul><ul><li>视线重置：光流运动由近及远能够巧妙地将玩家视线从操作区重新引导回读谱区，为处理下一个Note做好准备。</li></ul></li></ul></div>
|
||
<figure class="figure-block"><div class="gallery gallery-3"><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image9.png" alt="image9.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image10.png" alt="image10.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image11.png" alt="image11.png" loading="lazy"></div></div><figcaption class="figure-caption split"><span>特效起始</span><span>光流前进</span><span>特效消失</span></figcaption></figure>
|
||
<figure class="figure-block"><div class="gallery gallery-1"><div class="gallery-item single"><img src="附件/范式：起源 立体交互体验拆解/image12.png" alt="image12.png" loading="lazy"></div></div><figcaption class="figure-caption">非“完全解密”光流颜色以及评价文本</figcaption></figure>
|
||
<div class="list-block"><ul><li>特殊情况<ul><li>表现：当玩家在短时间内连续触发多个Note判定时，判定线会前一个Note判定结束亮度降低后但未完全恢复到不高亮接受下一个Note时重新将高亮重置到最高亮度。</li></ul></li></ul></div>
|
||
<aside class="todo">TODO: </aside>
|
||
<div class="list-block"><ul><li><ul><li>设计意图：能够隐性地在高密度环境下的近乎闪烁的高亮提示能为玩家保持快节奏状态下的火热手感。</li></ul></li></ul></div>
|
||
<figure class="figure-block"><div class="gallery gallery-3"><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image13.png" alt="image13.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image14.png" alt="image14.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image15.png" alt="image15.png" loading="lazy"></div></div><figcaption class="figure-caption split"><span>第一个Note触发时高亮</span><span>第一个Note触发后高亮变暗</span><span>第二个Note触发后</span></figcaption></figure>
|
||
<h3 id="视觉避让">视觉避让</h3>
|
||
<div class="list-block"><ul><li>表现：评价文字在出现后并非静止消失，而是垂直轨道缓慢上移，并逐渐溶解。按住Hold时评价文字会一直叠加生成并重复上述生命周期。</li></ul><ul><li>设计意图：文字垂直轨道上移是一种抗干扰设计，为了不使文字挡住后方飞来的Note，防止文字遮挡谱面导致读谱失误。按住Hold时叠加出现的判定文字以及其特有的蓝色火花会给玩家一种“我正一直接着”的感觉。</li></ul></div>
|
||
<figure class="figure-block"><div class="gallery gallery-3"><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image16.png" alt="image16.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image17.png" alt="image17.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image18.png" alt="image18.png" loading="lazy"></div></div><figcaption class="figure-caption split"><span>文字出现</span><span>文字上移</span><span>文字溶解</span></figcaption></figure>
|
||
<h3 id="深度感知的视觉补偿">深度感知的视觉补偿</h3>
|
||
<p>在平面上表现Z轴的会带来距离感缺失导致玩家不能够准确判断判定时机，范式除上文提到的出现距离调整项，还提供了一个巧妙的解决方案。</p>
|
||
<div class="list-block"><ul><li>表现：空键在平面目标点上映射方框，其中映射目标点内部方块随着空键靠近平面而逐渐填满外框时，即为最佳击打时机。</li></ul><ul><li>设计意图：将模糊的依赖于透视经验以及音乐节奏时机的判断转化为浮现式音游的图形重合判断。这为玩家提供了显性的、可训练的时机信号，能够极大地稳定Z轴交互的手感预期，使高密度情况下精确操作成为可能。</li></ul></div>
|
||
<aside class="todo">TODO: 回头拆一下cy2</aside>
|
||
<figure class="figure-block"><div class="gallery gallery-3"><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image19.png" alt="image19.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image20.png" alt="image20.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image21.png" alt="image21.png" loading="lazy"></div></div><figcaption class="figure-caption split"><span>补偿图形出现</span><span>补偿图形重合</span><span>完成判定</span></figcaption></figure>
|
||
<h3 id="动画编排">动画编排</h3>
|
||
<p>经过对实机画面的逐帧逆向观测后，我发现游戏通过对判定动画设置了三条曲线构建了富有层次感的反馈体验。基于玩家视角的观测数据中光流、火花与评价文字在约27帧的生命周期内呈现出明显的能量分布差异，明显可以观察到动画节奏已经过仔细编排。</p>
|
||
<div class="list-block"><ul><li>光流<ul><li>表现：光流动画响应最快，在前4帧左右迅速到达峰值，随后立刻线性衰减。</li></ul><ul><li>设计意图：光流负责提供第一时间的触控确认。它负责快速反馈，同时快速的衰减和向Z轴深处的位移，起到将玩家视线从判定区引导回屏幕中心的作用。</li></ul></li></ul><ul><li>火花<ul><li>表现：火花动画起步爆发较快，但直到第9-10帧才达到峰值，比光流晚5帧。</li></ul><ul><li>设计意图：火花动画与光流动画峰值的时间错层除了体现游戏主题的信号的时序错位，更多的在视觉上能够提供一定的重量感。若火花和光流峰值完全同步则会使效果显得单薄，相对滞后的峰值能够为整体提供视觉上的厚度。</li></ul></li></ul><ul><li>评价文字<ul><li>表现：峰值最持久，在第7-13帧保持了长达数帧的峰值平台期，随后才开始衰减。</li></ul><ul><li>设计意图：评价文字的首要人物是传递信息，使玩家除观察光流颜色还能够在余光中凭判定文字确认判定结果。</li></ul></li></ul></div>
|
||
<h3 id="音效设计">音效设计</h3>
|
||
<div class="list-block"><ul><li>表现：范式的Note音效种类并不像其他移动端音游那么奢侈，反而所有Note全部使用一种音效，相当地克制。主观听感上音效和按动笔发出的声音一样清脆，音调又不像铃铛一样高，有一定厚度感，听感节奏也以快速爆发到线性衰减为主。</li></ul></div>
|
||
<aside class="todo">TODO: 音效音色设计意图以及视觉与音效联动 视听效果搭配会产生差异 &瞬间相应</aside>
|
||
<div class="list-block"><ul><li>设计意图：统一的音效除节省成本外还能够为玩家带来统一的确认感，同时音色不强求大高频，存在一定低频成分不会使玩家一直听到这一种音效感到枯燥。</li></ul><ul><li>缺陷：虽然音色设计使单音效足够耐听，但可以考虑学习《舞萌DX》或其他音游，为不同的判定制作不同的音效。使玩家在恰当的时机击打音符时获得更强烈的正反馈。</li></ul></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page content-page">
|
||
<div class="page-inner">
|
||
<h2 id="判定逻辑设计拆解">判定逻辑设计拆解</h2>
|
||
<h3 id="判定窗口">判定窗口</h3>
|
||
<p>游戏内，物件有四级判定：</p>
|
||
<div class="list-block"><ul><li>Precisely Decrypted（±30ms，俗称“大D”）</li></ul><ul><li>Imprecisely Decrypted（±60ms，俗称“小D”）</li></ul><ul><li>Received（±120ms，俗称“绿”）</li></ul><ul><li>Lost（+120ms后未响应）</li></ul></div>
|
||
<p>其中最佳判定Precisely Decrypted的判定窗口为±30ms。这为游戏添加了一种硬核准度要求，需要玩家达成极高的准确率，同时区分开的判定的视觉效果上也能给出硬核的手感体验。</p>
|
||
<p><a href="<a href="https://zhuanlan.zhihu.com/p/517535819"" target="_blank" rel="noreferrer">https://zhuanlan.zhihu.com/p/517535819"</a> target="_blank" rel="noreferrer"><a href="https://zhuanlan.zhihu.com/p/517535819" target="_blank" rel="noreferrer">https://zhuanlan.zhihu.com/p/517535819</a></a></p>
|
||
<p><a href="<a href="http://www.gugu.fun/iidxsp/"" target="_blank" rel="noreferrer">http://www.gugu.fun/iidxsp/"</a> target="_blank" rel="noreferrer"><a href="http://www.gugu.fun/iidxsp/" target="_blank" rel="noreferrer">http://www.gugu.fun/iidxsp/</a></a></p>
|
||
<p>但手感上的硬核容易劝退音游水平不高以及完全没有接触过音游的玩家，不过范式的产品定位为硬核音游，此问题属于制作团队的取舍方向问题。</p>
|
||
<p>或可借鉴《舞萌DX》的保护套设计，被设置有保护套的音符只要在判定窗口内被点击即判定大D。将此设计应用在普通模式下，为副歌重复的配置组合的第一次重复设置保护套供玩家学习试错，或在谱面高潮结束后为低密度冷却段设置一些保护套防止玩家在情绪降温以及操作压力下降期间出现失误。同时为保留挑战性，在段位模式则不启用保护套。</p>
|
||
<h3 id="判定容错">判定容错</h3>
|
||
<p>范式中Slider无尾判设计，不需要计算松手时机。同时，按住采用的是以密度为基础的判定，判定区域可达三分之一判定线宽度，这可以让玩家不时刻关注Slider的动向，且密度判定支持玩家进行换手操作。</p>
|
||
<figure class="figure-block"><div class="gallery gallery-1"><div class="gallery-item single"><img src="附件/范式：起源 立体交互体验拆解/image23.png" alt="image23.png" loading="lazy"></div></div><figcaption class="figure-caption">判定宽容度展示</figcaption></figure>
|
||
<p>无Early Lost设计也能够让玩家过早点击时不会判错。</p>
|
||
<p>这些设计都是为立体玩法服务的减负机制，在玩家需要同时处理Z轴深度、四边位置和复杂键型时，能够减少次要细节失误带来的挫败感，让注意力集中在迎面生成的音符的打击判断上。</p>
|
||
<h3 id="生存压力">生存压力</h3>
|
||
<p>玩家每次游玩时共有100点血量可用，在普通模式下玩家最大每次失误扣血5点，最多每次回血0.5点，比例高达10:1。这创造了一定的生存压力，放大了每一次失误的负面反馈。这种如履薄冰的紧张感本身就是手感的一部分，能够让玩家保持全程高压下的专注，通关本身也能够带来强烈过后如释重负的成就手感。同时能够让技术能力不匹配当前难度谱面的玩家认识到自身水平不足，在其积累足够的能力时成功通关能够带来巨大的挑战胜利成就感。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page content-page">
|
||
<div class="page-inner">
|
||
<h2 id="谱面设计拆解">谱面设计拆解</h2>
|
||
<h3 id="手序引导">手序引导</h3>
|
||
<p>在传统平面音游中玩家看到音符的决策链是：看到音符->判断落点->手指移动点击，而范式中由于立体机制的存在，玩家的决策链变为：看到音符->判断类型(空/地)->判断立体位置->规划手指移动->点击。</p>
|
||
<p>手序引导直接干预了规划手指移动这一环节，它通过谱面的音符摆放位置以及视觉提示预先告诉玩家“你应该用哪根手指放哪里，另一根手指再放哪里”，能够极大地降低玩家在短时间内需要处理的信息计算量。</p>
|
||
<figure class="figure-block"><div class="gallery gallery-1"><div class="gallery-item single"><img src="附件/范式：起源 立体交互体验拆解/image24.png" alt="image24.png" loading="lazy"></div></div><figcaption class="figure-caption">手序引导其一</figcaption></figure>
|
||
<figure class="figure-block"><div class="gallery gallery-1"><div class="gallery-item single"><img src="附件/范式：起源 立体交互体验拆解/image25.png" alt="image25.png" loading="lazy"></div></div><figcaption class="figure-caption">手序引导其二</figcaption></figure>
|
||
<p>如上两图所示，绿色表示左手手指设计上的移动路径，红色表示右手手指设计上的移动路径，玩家在观察到此Slider时可以立刻识别到自己的手指应该如何摆放。图1和图2是同一谱面的连续过程，可以观察到当左右手按照预期设计摆放到图1所示位置后，在图2中可以立刻让玩家以最小的位移幅度迎接下一音符。</p>
|
||
<p>同时若没有手序引导，高难度谱面可能会变成手指在屏幕上乱打。清晰的手序引导能够教会玩家如何有章法地使用手法去游玩一段复杂的谱面，同时范式追求的模拟街机的手感也需要手序引导这种教学和体验强化手段。但谱师若在谱面上过于激进地塞穿手、反手以及跨手引导等会导致玩家学习成本提升，容易制作出褒贬不一的谱面。如《Arcaea》就有非常类似的手序引导设计，对玩不来这套的玩家来说难以适应，但这也是《Arcaea》的知名标签之一。</p>
|
||
<h3 id="键型设计">键型设计</h3>
|
||
<h4 id="节奏把控">节奏把控</h4>
|
||
<aside class="todo">TODO: 与音乐节奏关联的谱面节奏把控以及印象点设计 采音与配置（采音为骨架 键型为血肉） 虚空采音</aside>
|
||
<p>游戏可以通过将基础的物件通过手序引导摆放等手段进行编排来控制谱面游玩节奏。</p>
|
||
<p>对节奏的把控除用于服务音乐情绪，也要服务玩家对谱面的认知。范式的大部分谱面设计都遵循着“教学——展开——爆发——冷却”的节奏循环。</p>
|
||
<p>其中教学性段落用于在副歌到来前预先以副歌高潮处可能出现的键型组合的低密度版展示副歌处手序和键型动机。让玩家在低压力情况下预演复杂操作，积累信心以及认知，避免高潮到来时手足无措，同时这也是对立体机制高学习成本的直接补偿。</p>
|
||
<p>在展开段落时在已预演的操作基础上叠加空键维度或提高密度来提升挑战性，同时使玩家的注意力稳步进入到活跃状态，为高潮部分做好准备。</p>
|
||
<p>高潮段落将视觉、听觉、操作与情绪完全同步，制造心流状态。全部设计在这里集中爆发，让玩家在极限压力下成功内化整套空键映射，产生人机一体的沉浸感，失误的痛苦以及成功的狂喜在此段被最大化。</p>
|
||
<p>冷却段即休息段，给玩家降温，降低密度以及位移量，并完成音乐情感的收尾，防止玩家因为持续的高压产生疲惫以及厌倦感。</p>
|
||
<p>谱面节奏失控会严重影响玩家游玩过程中的节奏期望，进而影响手感体验。</p>
|
||
<h4 id="配置组合">配置组合</h4>
|
||
<p>除节奏外，键型配置组合本身也会给玩家带来操作上的乐趣，范式的立体交互还带来了更多的设计空间。</p>
|
||
<aside class="todo">TODO: 玩家io改变带来的设计内容空间变化</aside>
|
||
<figure class="figure-block"><div class="gallery gallery-3"><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image26.png" alt="image26.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image27.png" alt="image27.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image28.png" alt="image28.png" loading="lazy"></div></div><figcaption class="figure-caption split"><span>滑动型</span><span>肘击型</span><span>转圈型</span></figcaption></figure>
|
||
<p>如上图中玩家在游玩这三种键型时，手部会产生大位移。同时音乐在此为Bass Drop时玩家手部位移以及心理期待会与音乐同步，提供巨大且明确的情绪释放窗口为玩家带来极大的操作爽感。</p>
|
||
<figure class="figure-block"><div class="gallery gallery-3"><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image29.png" alt="image29.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image30.png" alt="image30.png" loading="lazy"></div><div class="gallery-item"><img src="附件/范式：起源 立体交互体验拆解/image31.png" alt="image31.png" loading="lazy"></div></div><figcaption class="figure-caption split"><span>天地交互</span><span>交互</span><span>子弹叠</span></figcaption></figure>
|
||
<p>上图中玩家在游玩这三种键型时，通常是在音乐的Kick段。电音中Kick是一种高密度高能量的底鼓段落，游戏中将其转化为一种高速的音符交互，要求玩家的注意力以及手指在平面上的移动速度必须跟上音乐的节奏。在这种高压段落下玩家会停止思考，</p>
|
||
<p>//停止思考分情况，底力与复杂谱面解析</p>
|
||
<p>完全依靠肌肉记忆以及节奏本能进入心流状态。此时玩家不只是听见密集的鼓点，在心理上这更是自己去亲手敲出来的底鼓声，使玩家自身成为节奏的一部分。</p>
|
||
<p>交互中特殊的一点是高BPM音乐中的32分节奏不会直接转化为32分交互，而是会转化为16分或更低切分的交互。此时追求节奏的保真会影响到谱面的可玩性，甚至影响手感。</p>
|
||
<p>总的来说键型配置对玩家意味着对音乐的演绎，游玩过程中将玩家的心理期待、操作节奏以及音乐节奏相统一，随着音乐释放情绪，这成为手感的一部分，使玩家沉浸其中。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page content-page">
|
||
<div class="page-inner">
|
||
<h2 id="总结">总结</h2>
|
||
<p>《范式：起源》通过结合polytone以及dynamix的玩法成功构建了一套极具特色的立体交互系统。这套设计的核心价值不止在于视觉上的空间延伸，更在于其通过一系列的视觉补偿与判定优化，解决了立体空间下读谱逻辑非线性带来的手感体验难点。</p>
|
||
<p>同时在内容设计上通过手序引导、谱面节奏把控以及配置组合，给予玩家一切尽在掌控的手感体验。</p>
|
||
<p>综上，《范式：起源》的成功不仅在于交互上的创新尝试，更在于用极致的细节调优去解决潜在问题，最后给玩家交出了一套逻辑自洽、极其顺手的立体交互体验设计。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page content-page">
|
||
<div class="page-inner">
|
||
<h2 id="引用">引用</h2>
|
||
<p><a href="<a href="https://paradigmrebootzh.miraheze.org/wiki/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3#%E5%88%86%E6%95%B0%E8%AE%A1%E7%AE%97"" target="_blank" rel="noreferrer">https://paradigmrebootzh.miraheze.org/wiki/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3#%E5%88%86%E6%95%B0%E8%AE%A1%E7%AE%97"</a> target="_blank" rel="noreferrer"><a href="https://paradigmrebootzh.miraheze.org/wiki/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3#%E5%88%86%E6%95%B0%E8%AE%A1%E7%AE%97" target="_blank" rel="noreferrer">https://paradigmrebootzh.miraheze.org/wiki/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3#%E5%88%86%E6%95%B0%E8%AE%A1%E7%AE%97</a></a></p>
|
||
<p><a href="<a href="https://www.bilibili.com/video/BV1bN6JYkEUw"" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV1bN6JYkEUw"</a> target="_blank" rel="noreferrer"><a href="https://www.bilibili.com/video/BV1bN6JYkEUw" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV1bN6JYkEUw</a></a></p>
|
||
<p><a href="<a href="https://www.bilibili.com/video/BV1UD421g7Zi"" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV1UD421g7Zi"</a> target="_blank" rel="noreferrer"><a href="https://www.bilibili.com/video/BV1UD421g7Zi" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV1UD421g7Zi</a></a></p>
|
||
<p><a href="<a href="https://gugu.fun/yinyoutonglun/"" target="_blank" rel="noreferrer">https://gugu.fun/yinyoutonglun/"</a> target="_blank" rel="noreferrer"><a href="https://gugu.fun/yinyoutonglun/" target="_blank" rel="noreferrer">https://gugu.fun/yinyoutonglun/</a></a></p>
|
||
<p><a href="<a href="https://zhuanlan.zhihu.com/p/453517424"" target="_blank" rel="noreferrer">https://zhuanlan.zhihu.com/p/453517424"</a> target="_blank" rel="noreferrer"><a href="https://zhuanlan.zhihu.com/p/453517424" target="_blank" rel="noreferrer">https://zhuanlan.zhihu.com/p/453517424</a></a></p>
|
||
<p><a href="<a href="https://www.bilibili.com/video/BV15j411o7rA"" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV15j411o7rA"</a> target="_blank" rel="noreferrer"><a href="https://www.bilibili.com/video/BV15j411o7rA" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV15j411o7rA</a></a></p>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</body>
|
||
</html>
|