我和一位開發者朋友是如何將兩個虛擬形象栩栩如生地呈現在世人的面前的。

我在 DEV 社群認識了 @webdeveloperhyper，和大多數優秀的網路合作一樣，我們的合作也是從偶然開始的。

幾個訊息，一些回饋，一些寶貴的指導。

然後，不知何時，談話內容從「這看起來很酷」轉變為「讓我們一起做點有趣的事情吧」。

我們沒有做太多規劃，直接就開始動工了。

他們在日本，我在印度。這意味著這個專案大部分時間都是在零碎的空閒時間完成的。深夜，白天零星的二十分鐘，還有隔了幾個小時才發的訊息。進展看起來並不顯著，但卻悄無聲息地累積。

不知怎麼的，竟然奏效了。

從基本形狀到實際的頭像

這個專案並非一開始就擁有精美的角色模型。它最初只是場景中的一些簡單形狀，只是用來測試位置、鏡頭和基本互動的佔位符。

想法很簡單：兩個角色，一段簡短的對話，一些動畫。

簡單的想法往往隱藏著有趣的問題。

我的第一個真正任務是用VRoid Studio建立虛擬形象本身。光是這一點就需要學習。導入之後，虛擬形象的行為不像角色，而是像靜態物體。

預設姿勢是T字形，雙臂伸展，毫無生氣。解決這個問題是第一個小小的勝利。讓虛擬形象擺出自然的站姿，雙手自然下垂，姿態中立。

這聽起來似乎微不足道。但正是那一刻，它不再像個模型，而像個角色了。

從那以後，我們開始疊加手勢。

問候動畫。告別動畫。對話中的細微動作。甚至還有一個嘆息動畫，它成了我最喜歡的細節之一。

我還嘗試直接覆蓋預設手勢，但失敗了。這讓我很快就明白，動畫系統有自己的規則。

撰寫這段對話比預想的還要難。

出乎意料的是，最困難的部分並非技術層面，而是撰寫對話本身。

簡短。自然。略帶幽默。不機械。

對話太長會顯得生硬，太短會顯得空洞，太嚴肅會失去魅力，太滑稽會失去可信度。

meme1-海綿寶寶內部尖叫

找到這種平衡點所花費的迭代次數比預期的要多。

我仍然覺得結尾可以更好。不過也許這樣也好，留有進步的空間。

當渲染頭像成為系統問題時

透過現代工具渲染虛擬形象非常簡單。真正的挑戰在於如何控制虛擬形象的行為。

我們需要管理現場：

• 誰在說話

• 播放什麼動畫

• 當它開始時

• 當它結束時

• 當下一個角色接手時

因此，我們沒有對行為進行硬編碼，而是將對話定義為結構化資料：

const DIALOGUE = [
  {
    speaker: "A",
    text: "I'm Web Developer Hyper. I like to make fun things.",
    animation: "VRMA_03_peace_sign.vrma",
  },
  {
    speaker: "B",
    text: "Hello! I'm Itsugo. And I like turning ideas into something real.",
    animation: "VRMA_04_shoot.vrma",
  }
];

場景只是對這序列進行詮釋。這種分離使得系統更容易控制、擴展和理解。

我們沒有強迫人們做出某種行為，而是精心策劃了這種行為。