[TouchDesigner 模板] 物件跟隨滑鼠移動

2024.09.20 / TouchDesigner 模板
本文介紹了一個常用的 TouchDesigner 模板,首先連接事先設計的「滑鼠移動座標輸入模板」,再透過 Transform 來讓物件的座標與滑鼠位置同步。本文將說明如何讓物件能夠即時跟隨滑鼠移動。

模板說明

這個模板依賴先前的 滑鼠移動座標輸入 模板,再根據取得的滑鼠座標來移動物件到對應螢幕位置。

模板包含的 OP 如下:

OP 類型 說明
Circle TOP 範例物件 (可替換為圖片)
Fit TOP 修正影像尺寸
Transform TOP 修改物件座標
Null TOP 影像輸出
Window COMP 透過視窗顯示輸出結果

連接方式

  • Circle TOP > Fit TOP > Transform TOP > Null TOP

TouchDesigner 物件跟隨滑鼠移動模板總覽

Circle 參數

當作範例物件的影像,調整半徑為合適的大小,可自由修改成 Movie File In 或 SOP 系列圖形。

  • Circle > Radius:(0.15, 0.15)

TouchDesigner 設定 Circle 的 Radius

Fit 參數

將影像調整為 1280x720 (根據螢幕解析度進行調整,該尺寸為免費版最大解析度),並讓物件保持原本的大小,不被一同縮放。

  • Fit > Fit:Native Resolution

TouchDesigner 設定 Fit 的 Fit

  • Common > Resolution:(1280, 720)

TouchDesigner 設定 Fit 的 Resolution

Transform 參數

滑鼠移動座標輸入 的 Null 輸出至 Translate 欄位來改變物件的座標。

TouchDesigner 拖曳 Null CHOP 的 tx 和 ty 到 Transform 的 Translate

Window 參數

將 Null 輸出的影像透過視窗來展示,透過將 Opening Size 設定為 Fill 可以讓免費版 (1280x720) 也能以全螢幕輸出 (1920x1080)。完成下列設定後點擊 Open as Perform Window 或 Open as Separate Window 皆可以全螢幕顯示。

  • Window > Window Operator:這個模板的 Null
  • Opening Size:Fill
  • Borders:Off

TouchDesigner 拖曳 Null Top 至 Window COMP 的 Window Operator 並點擊 Open as Perform Window

執行結果

最終 Circle 影像將持續地跟隨滑鼠移動。由於抓取的滑鼠座標是以整個螢幕為基準,所以輸出結果時必須以全螢幕顯示,否則實際顯示的位置會偏移。

TouchDesigner 白色圓形跟隨滑鼠

相關文章

Ted Liou

雲科碩士在讀中,專注於 Unity C#、TouchDesigner 技術,常把技術筆記分享到部落格,偶爾還直接挪用文章來當教材的研究生。

留言板

歡迎提問或分享觀點!