一位土生土長的程式設計師在面對一個只有視覺化腳本的環境時學到了什麼

純正的程式設計師在「只能使用視覺化腳本環境」中真心面對後的感想

我是一名純正的程式設計師。
在大學時期學習了 C / C++ / C#，進入社會後則學習了 Java、JavaScript、PHP、Python、Go、TypeScript 等當時所需的語言。

然而，因為在 2020 年左右轉職進入 VR 產業，我的程式設計人生發生了很大的變化。
在那裡，我遇到了 視覺化腳本。

與視覺化腳本的邂逅

在 VRChat（用戶可以公開自製世界的社交型 VR 平台）中使用 Udon [^1]，
在 STYLY（無代碼 XR 創作工具）中則使用 PlayMaker。

這兩者都是基於 Unity 的 AssetBundle 平台，並且有無法直接撰寫 C# 的限制。
因此，補足這一限制的方式就是發展出將節點用線相連的「視覺化腳本」。

最初的第一年真的非常痛苦。

例如，假設我想求取兩個位置之間的方向向量。
在 C# 中只需要以下兩行程式碼即可完成。

Vector3 CalcDirection(Vector3 A, Vector3 B)
{
    var direction = B - A;
    return direction.magnitude < 0.0001f ? Vector3.forward : direction.normalized;
}

如果在 PlayMaker 中組成相同的處理，則會變成這樣。

若強行以 C# 表現，則如下。

Vector3 CalcDirection(Vector3 A, Vector3 B)
{
    var direction = B - A;
    var length = direction.magnitude;
    if (length < 0.0001f)
    {
        direction = Vector3.forward; // (0,0,1)
    }
    else
    {
        direction = direction.normalized;
    }
    return direction;
}

行數大約是三倍多。此外，還出現了名為 length 的一次性變數。
從程式設計師的角度來看，這非常冗長，若不整理節點，稍後自己也難以閱讀。

程式碼審查也持續面臨困難

痛苦的不僅僅是編寫程式碼。
在視覺化腳本中，閱讀他人的處理極其困難。

例如，若仔細命名節點，就可以理解他在做什麼。

然而，如果標題被省略，就會變成這樣。

光看這個，根本無法了解他在做什麼。
因此，在審查時，我通常會要求他先為節點命名。

當時我常常想到「這太低效了」「我希望能直接編寫文本」。

不過，周圍的人卻看起來很享受

另一方面，某些同事則表示「視覺化腳本更容易理解」。
他們中的大多數是 3D 建模師或影像創作者，並不是以程式設計為職業的人。

我感到疑惑。
為什麼他們會覺得這樣反而「更容易使用」呢？

領悟：認知風格不同

在進行一對一會談和了解後，我發現了一些趨勢。

「擅長層級型條列的人」對文本程式編寫較為擅長。
「不擅長這種形式的人」則在視覺化腳本中表現較佳。

<details><summary>層級型條列是這樣的。（點擊可以查看）</summary>
<ul>
<li>
文本型程式設計
<ul>
<li>
Unity
<ul>
<li>邏輯 / 腳本
<ul>
<li>C#</li>
</ul>
</li>
<li>著色器
<ul>
<li>HLSL / ShaderLab（.shader 檔案）</li>
</ul>
</li>
</ul>
</li>
<li>
虛幻引擎
<ul>
<li>邏輯 / 腳本
<ul>
<li>C++</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
視覺化腳本
<ul>
<li>
Unity
<ul>
<li>邏輯 / 腳本
<ul>
<li>Unity 視覺化腳本（原 Bolt）</li>
<li>PlayMaker</li>
</ul>
</li>
<li>著色器
<ul>
<li>著色器圖（Shader Graph）</li>
<li>Amplify 著色器編輯器</li>
</ul>
</li>
<li>視覺效果
<ul>
<li>視覺效果圖（VFX Graph）</li>
</ul>
</li>
</ul>
</li>
<li>
虛幻引擎
<ul>
<li>邏輯 / 腳本
<ul>
<li>藍圖（事件圖 / 函數圖等）</li>
</ul>
</li>
<li>視覺效果
<ul>
<li>Niagara</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</details>