{"id":"a08","course":"beginners-class","section":"basics","order":8,"code":"A08","title":"表演介面 UI 製作基礎","kind":"video","durationSec":2252,"duration":"37:32","freePreview":false,"families":["COMP","CHOP"],"loopwiseLectureId":"b47d1551","hasNotes":true,"notes":{"toc":[{"id":"s-1","text":"這個單元在做什麼","level":2},{"id":"s-2","text":"表演介面長什麼樣子","level":2},{"id":"s-3","text":"UI 元件與 Container","level":2},{"id":"s-4","text":"取得數據：先命名，再 Merge","level":2},{"id":"s-5","text":"排版：左邊預覽、右邊控制","level":2},{"id":"s-6","text":"放入作品與滑桿","level":2},{"id":"s-7","text":"用節點在網路裡的位置排順序","level":2},{"id":"s-8","text":"命名、Merge，以及兩種按鈕","level":2},{"id":"s-9","text":"表演模式與控制視覺","level":2},{"id":"s-10","text":"Parameter COMP：把屬性面板放進介面","level":2},{"id":"s-11","text":"OP Viewer：把任何節點放進介面","level":2},{"id":"s-12","text":"改造自己的作品：Base 裝視覺","level":2},{"id":"s-13","text":"哲宇實際表演的介面","level":2},{"id":"s-14","text":"常見問題","level":2},{"id":"s-15","text":"卡住的時候","level":2}],"segments":[{"html":"<h2 id=\"s-1\">這個單元在做什麼</h2>\n<p class=\"has-ts\"><span class=\"tsg\"><a class=\"ts\" href=\"#t=18\" data-t=\"18\" title=\"播放錄影 00:18\">00:18</a></span>哲宇表演的時候，常常有一台電腦專門控制所有的視覺。幫忙控場的人不一定知道 TD 怎麼用、線要怎麼接，「所以這時候我們會希望做一個特製的介面，就把所有表演相關可以調的參數都整合起來」。</p>\n<p class=\"has-ts\"><span class=\"tsg\"><a class=\"ts\" href=\"#t=49\" data-t=\"49\" title=\"播放錄影 00:49\">00:49</a></span>這樣的介面可以控制畫面發散的中心點和程度、裡面的形狀，還能選聲音要輸出到哪個裝置、音量多大。有了它，表演的同時，你「只去控制那些我們預計想要控制拿來表演的東西，而不會動到一些其他的組件」。</p>\n<p>這個單元從 Palette 裡現成的按鈕和滑桿開始，用 <code class=\"op\" data-family=\"COMP\">Container COMP</code> 把它們排成左邊是作品預覽、右邊是控制面板的表單。中間會學一個哲宇在網路上看到、覺得非常好用的技巧：用節點在網路裡的位置決定按鈕的順序。再把原生的屬性面板、頻譜分析的畫面也放進介面，最後把整個介面切成表演模式。</p>\n<aside class=\"callout callout-key\" aria-label=\"這個單元帶走\"><p class=\"callout-title\">這個單元帶走</p><ol>\n<li>Palette 的 UI → Basic Widgets 有現成的按鈕、滑桿和標題。每個元件右邊有 CHOP 的輸出，先把名字改成看得懂的，再用 <code class=\"op\" data-family=\"CHOP\">Merge CHOP</code> 收成一包。</li>\n<li>用 <code class=\"op\" data-family=\"COMP\">Container COMP</code> 排版：元件上面的接頭接到哪個 container，就從屬於它。Children Align 決定排列方向，Horizontal Mode、Vertical Mode 選 fill 就自動填滿。</li>\n<li>每個元件的 Align Order 都寫 <code>-me.nodeY</code>，介面上的順序就跟著節點在網路裡的上下位置走，表演中也能直接拖動重排。</li>\n<li><code class=\"op\" data-family=\"COMP\">Parameter COMP</code> 把任何節點的屬性面板放進介面，<code>OP Viewer <span class=\"tok-v\">TOP</span></code> 把任何節點的畫面變成一張圖，當 container 的背景。</li>\n<li>把 container 拖到 <code>perform</code> 的 Window Operator，按 Perform Mode 就只剩這個介面，按 Esc 跳出來。</li>\n</ol>\n</aside>"},{"locked":true,"id":"s-2","title":"表演介面長什麼樣子"},{"locked":true,"id":"s-3","title":"UI 元件與 Container"},{"locked":true,"id":"s-4","title":"取得數據：先命名，再 Merge"},{"locked":true,"id":"s-5","title":"排版：左邊預覽、右邊控制"},{"locked":true,"id":"s-6","title":"放入作品與滑桿"},{"locked":true,"id":"s-7","title":"用節點在網路裡的位置排順序"},{"locked":true,"id":"s-8","title":"命名、Merge，以及兩種按鈕"},{"locked":true,"id":"s-9","title":"表演模式與控制視覺"},{"locked":true,"id":"s-10","title":"Parameter COMP：把屬性面板放進介面"},{"locked":true,"id":"s-11","title":"OP Viewer：把任何節點放進介面"},{"locked":true,"id":"s-12","title":"改造自己的作品：Base 裝視覺"},{"locked":true,"id":"s-13","title":"哲宇實際表演的介面"},{"locked":true,"id":"s-14","title":"常見問題"},{"locked":true,"id":"s-15","title":"卡住的時候"}],"sections":15},"courseName":"TouchDesigner 入門必修課","buyUrl":"https://education.monolab.world/courses/beginners-class","sectionTitle":"基礎知識","prev":{"id":"a07","course":"beginners-class","section":"basics","order":7,"code":"A07","title":"進階 3D 渲染與材質","kind":"video","durationSec":2316,"duration":"38:36","freePreview":false,"families":["MAT","SOP","TOP"]},"next":{"id":"a09","course":"beginners-class","section":"basics","order":9,"code":"A09","title":"作品輸出與影片錄製","kind":"video","durationSec":1544,"duration":"25:44","freePreview":false,"families":["TOP"]}}