iT邦幫忙

2026 iThome 鐵人賽

DAY 13
0
Vibe Coding

從課堂半成品到完整發布:獨立遊戲的30天重生記系列 第 13

【DAY13】Unity 2D 敘事遊戲開發:跨場景玩家暱稱繼承與黑屏旁白打字機效果 (TypewriterEffect)

  • 分享至 

  • xImage
  •  

一 、前言:
昨天我們實裝了開局的 InputNameManager,成功讓玩家能自訂暱稱並存入 PlayerPrefs。今天我們要完成第二階段「核心對話與機制構建」的最終整合驗收!今天有兩大重點:
1. 一般對話場景: 測並驗證 PlayerPrefs 跨場景讀取,將 [NAME] 標籤無縫替換為玩家自訂暱稱。
2. 特殊黑屏旁白幕: 了打造舊報紙與歷史紀錄片般的復古沉浸感,我們將為特殊旁白幕實裝「打字機效果(TypewriterEffect)」,控制吐字節奏並完成第一章的整體關卡驗收!

二、 敘事節奏設計與功能需求
在 2D 敘事遊戲中,並非所有對話都需要打字機效果。若日常對話全部逐字繪製,容易拖慢玩家閱讀節奏;相反地,在黑屏旁白、舊報紙報導或章節交代時使用打字機效果,能大幅提升戲劇張力與沉浸感。
因此系統需要滿足以下機制:
1. 日常對話暱稱繼承: 劇情場景啟動時,讀取各幕存入的 PlayerPrefs("PlayerName"),將文字中的 [NAME] 動態替換為玩家名字(若無則預設「英雄」)。
2. 黑屏旁白打字機特效 (TypewriterEffect): 在特殊旁白幕中,透過 delayPerChar 控制逐字吐字節奏,模擬舊式打字機與報紙輸出的視覺感。
3. 輸入綁定與場景自動切換: 支援按鈕/鍵盤推進對話,並在旁白播放完畢後自動載入下一個劇情場景(nextSceneName)。

三、 核心程式實作:暱稱替換與旁白打字機協程
我們將 [NAME] 標籤替換與黑屏旁白打字機邏輯整合於 TypewriterEffect.cs 中:
1. 跨場景暱稱讀取與標籤替換 (ShowSegmentText)
字串印出前,優先進行 PlayerPrefs 讀取與字串替換:

IEnumerator ShowSegmentText(string segment) {
    textComponent.text = ""; 

    // 讀取 DAY 12 存入的 PlayerName,若空則給予預設值 ""
 string playerName = PlayerPrefs.GetString("PlayerName", "許維銘");

    // 將對話文字中的 [NAME] 動態替換為玩家暱稱
    string processedText = segment.Replace("[NAME]", playerName);

    // 旁白逐字吐字效果
    for (int i = 0; i < processedText.Length; i++)  {
        textComponent.text += processedText[i]; 
        yield return new WaitForSeconds(delayPerChar); 
    }
}

2. 旁白播放與自動跳轉協程 (PlayDialogue)
走完旁白陣列後,等待玩家最後一次點擊,自動切換至下一個 Scene:

IEnumerator PlayDialogue() {
    for (currentSegmentIndex = 0; currentSegmentIndex < dialogueSegments.Length; currentSegmentIndex++)  {
        yield return StartCoroutine(ShowSegmentText(dialogueSegments[currentSegmentIndex]));
        
        if (currentSegmentIndex < dialogueSegments.Length - 1) {
            isPaused = true;
            if (clickToContinueButton != null) clickToContinueButton.interactable = true;
            yield return new WaitUntil(() => !isPaused);
        }
    }
    // 旁白結束,等待點擊後切換場景
    dialogueFinished = true;
    isPaused = true; 
    if (clickToContinueButton != null) clickToContinueButton.interactable = true;
    yield return new WaitUntil(() => !isPaused);
    Debug.Log("旁白播放完畢,載入下一個場景: " + nextSceneName);
    SceneManager.LoadScene(nextSceneName);
}

四、Unity Inspector 設定與第一章整合驗收
在 Unity 介面中,我們將對話與旁白機制進行實際測試:
1. 一般對話場景:玩家暱稱繼承實測 (Game View)
在日常劇情幕中實測,對話框文字已成功將 [NAME] 替換為玩家在開局所輸入的暱稱,證實 PlayerPrefs 資料跨場景傳遞順利運作!
https://ithelp.ithome.com.tw/upload/images/20260920/20184073iZ7YTUce6M.png
圖一、下一幕對話成功顯示自定義名稱

2. 特殊黑屏旁白幕:舊報紙風格打字機實測 (Game View)
設定說明: 在黑屏旁白幕中掛載 TypewriterEffect 腳本,設定 Delay Per Char 為 0.05 秒。實測文字逐字吐出,營造出濃厚的復古紀錄片與報紙沉浸感,播完點擊後成功自動切換至下一關!
https://ithelp.ithome.com.tw/upload/images/20260920/20184073FioP4pQe9A.png
圖二、黑屏旁白 / 舊報紙風格打字機的 Game 視窗截圖

五、開發實戰經驗:敘事節奏(Pacing)與 UI 狀態控制
1. 對話與旁白的視覺分工: 日常對話採用全文字一次呈現,能確保劇情閱讀的流暢度與玩家體驗;而黑屏旁白採用打字機逐字呈現,能強制引導玩家停頓並聚焦於背景故事的傳遞。這種「日常流暢、旁白沉浸」的設計大幅提升了遊戲的敘事層次。
2. 按鈕互動狀態 (interactable) 保護: 在打字機字串未完全吐完前,保持 clickToContinueButton.interactable = false,可以避免玩家因為快速連點導致協程錯亂,確保旁白與轉場邏輯精準執行。

六、今日成果與小結

  • 跨場景暱稱繼承:驗證了 PlayerPrefs 讀取與 [NAME] 在一般對話中的動態替換。
  • 黑屏旁白打字機:完成了 TypewriterEffect 逐字吐字與舊報紙/復古風格氛圍的營造。
  • 第一章整體串接:實現了「開局輸入 ➔ 劇情暱稱繼承 ➔ 黑屏旁白轉場」的完整第一章關卡迴圈!
    範例影片:Yes

因為這一篇的核心依然圍繞在劇情呈現、UI 互動控制與核心系統整合,所以它依然是屬於同一個功能模組範疇,繼續沿用目前的 feature/story-flow 分支是最流暢也最省事的選擇:

1.檢查修改狀態
git status

2.加入暫存區並提交 Commit
git add .
git commit -m "feat: 完成第一章整合驗收,實裝 TypewriterEffect 打字機特效與 [NAME] 暱稱跨場景聯動"

3.推送到遠端開發分支
git push origin feature/story-flow


上一篇
【DAY12】Unity 2D 敘事遊戲開發:開局玩家自定義姓名系統與 PlayerPrefs 跨場景傳遞
下一篇
【DAY14】Unity 2D 敘事遊戲開發:辦公桌 UI 視窗置頂與陳情表單 (PaperManager) 決策機制
系列文
從課堂半成品到完整發布:獨立遊戲的30天重生記17
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言