Button COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

概要 📖 – クリック入力 UI

Button COMPは、ラベル付きクリック UI として 11 種類の Button Type (Momentary / Toggle / Radio / Exclusive) を提供する Panel COMPです。Button Group Label / Button Group DAT でラジオグループを構成でき、Panel CHOP や Panel Execute DAT と組み合わせて UI イベントを扱えます。

主な用途 🎯

• Momentary / Toggle / Radio / Exclusive 全 11 タイプから挙動を選べるクリック UI
• Button Group Label による排他的ラジオ選択 UI の構築
• Panel CHOP で state / radio / value0 チャンネルを取得し信号として活用
• Panel Execute DAT でクリック・ロールオーバー等のイベントを Python 処理
• Container COMP 内に配置したダッシュボード・コントロールパネルの基本部品

データフロー 🔄

入力: マウス/タッチクリック + Button Type 設定
 ↓
状態遷移 (Value / state / radio 更新)
 ↓
出力: Panel Values (Panel CHOP / Panel Execute DAT 経由)

---

パラメータ解説 ⚙️

Button Page 🎚️

Label / Value 🏷️

表示ラベルと状態値:

• Label: label — ボタン上に表示する文字列
• Value: value0 — ボタンの状態 (押下/解放の論理値、Button Type の挙動に応じて変化)

Button Type .buttontype 🎛️

ボタンの状態遷移パターン

項目	内部名	説明
Momentary	.momentary	押下中のみ on、離すと off (デフォルト)
Momentary Up	.momentaryup	離した瞬間のみ on になる momentary
Toggle Down	.toggledown	押下のたびに on/off をトグル
Toggle Up	.toggleup	ボタン上で離した瞬間にトグル (カーソルが外れていたら無効)
Toggle Up Anywhere	.toggleupany	離した瞬間にトグル (カーソル位置を問わない)
Radio Down	.radiodown	グループ内で押下した瞬間に排他的に on
Radio Up	.radioup	ボタン上で離した瞬間に排他的に on
Radio Up Anywhere	.radionupany	離した瞬間に排他的に on (位置問わず)
Exclusive Down	.exclusivedown	Radio Down + 全 off も許可
Exclusive Up	.exclusiveup	Radio Up + 全 off も許可
Exclusive Up Anywhere	.exclusivenupany	Radio Up Anywhere + 全 off も許可

Button Group 🔘

ラジオボタングループ化:

• Button Group Label: buttongroup — 同一コンポーネント内のボタンで同じラベルを共有することで Radio グループを構成
• Button Group DAT: buttongroupdat — Table DAT でラジオグループのメンバーを列挙 (異なる COMP に散在するボタンもグループ化可能)

Scale Text to Fit .scaletofit 🎛️

テキストサイズをパネルに合わせて自動調整する方式

項目	内部名	説明
Never	.never	Font Size を尊重し自動スケーリングしない
Always	.always	縦横にフィットするよう常にスケーリング
Only when Too Large	.onlyshrink	パネルからはみ出るときだけ縮小

Font / Padding / Color 🎨

フォント・パディング・色:

• Font Size: fontsize — 解像度非依存のパネル単位フォントサイズ (DPI で物理ピクセル数が変化)
• Line Spacing: linespacing — マルチラインモード時の行間倍率 (デフォルトの 1.2 × Font Size に対する係数)
• Text Padding (L / R / B / T): textpadding (textpaddingl / textpaddingr / textpaddingb / textpaddingt) — テキストとパネル境界の間隔
• Color (R / G / B): color (colorr / colorg / colorb) — ボタン要素 (テキスト等) の色

---

Panel Page 📁

Display / Enable 👁️

パネルの表示・有効化:

• Display: display — パネルの表示/非表示。シンプルな overlay 切替なら opacity の方が高速
• Enable: enable — パネルへの一切のインタラクションを禁止
• Help DAT: helpdat — マウスホバー時にポップアップ表示する Text DAT のパス

Cursor .cursor 🎛️

パネル上にカーソルが乗ったときの表示形状

項目	内部名	説明
Normal Select	.pointer	標準矢印カーソル
Text Select	.ibeam	テキスト編集用 I ビーム
Precision Select	.cross	十字 (精密選択)
Busy	.busy	処理中表示 (砂時計 / スピナー)
Activate	.activate	クリック可能表示 (指マーク等)
Invisible	.invisible	カーソル非表示

Mouse / Touch / Wheel 🖱️

マウス・タッチ・ホイール入力:

• Multi-Touch: multitouch — マウスクリック相当の初回タッチを処理 (以降のタッチは無視)。Multi Touch In DAT で独自処理する場合は無効化推奨
• Constrain Cursor: constraincursor — カーソルがパネル内に入った瞬間ロック
• Click Through: clickthrough — マウスクリックを下のパネルにパススルー
• Use Mouse Wheel: mousewheel — マウスホイールイベントを取得
• Mouse UV Buttons: uvbuttons (left / middle / right) — どのマウスボタンで uv Panel Values を更新するか
• Relative UV: mouserel — uv 値を絶対座標ではなく相対移動量で更新

Resize / Reposition 📐

リサイズ・リポジション:

• Drag Edges to Resize: resize (resizel / resizer / resizeb / resizet) — 左 / 右 / 下 / 上のどの辺からリサイズを許可するか
• W Range / H Range: resizew / resizeh — リサイズ可能な幅・高さの範囲
• Drag to Reposition: reposition — ドラッグでパネルまたはウィンドウを移動
• Component (Reposition 対象): repocomp — Reposition が Component のとき移動対象とする Panel COMP のパス
• X / Y Range: repositionx / repositiony — 移動可能範囲
• Anchor Drag: anchordrag — Anchors 値または Offsets 値どちらを書き換えるか

Scroll Overlay .scrolloverlay 🎛️

スクロールバー操作に対するパネルの追従動作

項目	内部名	説明
Off	.off	スクロールに通常通り追従
Ignore	.ignore	スクロールしてもパネルは動かない (深度は Depth Layer に従う)
Ignore and Draw Over	.ignoreover	スクロール無視 + 兄弟パネル・スクロールバーの上に描画

---

Look Page 📁

Background 🎨

背景色・背景テクスチャ:

• Background Color (R / G / B / Alpha): bgcolor (bgcolorr / bgcolorg / bgcolorb) + bgalpha — 背景色とアルファ
• Background TOP: top — 背景に貼り付ける TOP のパス

TOP Fill .topfill 🎛️

Background TOP をパネルに収める方式

項目	内部名	説明
Stretch	.off	アスペクト比を無視して引き伸ばし
Fill Width	.horizontal	横幅に合わせる (上下は切詰めまたは余白)
Fill Height	.vertical	縦幅に合わせる
Fill Best	.best	アスペクト比を保ち中に収まる方を選択
Fill Outside	.outside	アスペクト比を保ちパネル全体を覆う

TOP Smoothness .topsmoothness 🎛️

Background TOP の拡縮時のフィルタリング方式

項目	内部名	説明
Nearest Pixel	.nearest	最近傍 (ピクセルアートに最適、ぼけない)
Interpolate Pixels	.linear	線形補間 (新規 Panel COMP のデフォルト)
Mipmap Pixels	.mipmap	ミップマップフィルタ (動画や高精細素材で sparkling 抑制)

Borders 🖼️

Border A / B 色 + 4 辺の選択:

• Border A / B 色 + Alpha: bordera (borderar / borderag / borderab) + borderaalpha / borderb + borderbalpha
• Left / Right / Bottom / Top Border: leftborder / rightborder / bottomborder / topborder — それぞれ 0 / Border A / Border B から選択
• Left / Right / Bottom / Top Border Inside: leftborderi / rightborderi / bottomborderi / topborderi — 内側 2 ピクセル目の色
• Border Over Children: borderover — 枠線を子パネルの上に描画

Composite .composite 🎛️

兄弟パネルとの合成方法

項目	内部名	説明
Over	.over	標準のアルファ合成 (上に重ねる)
Under	.under	下に重ねる
Inside	.inside	Inside 合成
Outside	.outside	Outside 合成
Add	.add	加算合成
Subtract	.subtract	減算合成
Multiply	.multiply	乗算合成

---

Children Page 📁

Align .align 🎛️

子パネルの配置レイアウト

項目	内部名	説明
None	.none	自動配置なし (Anchor / Offset で個別配置)
Left to Right	.horizlr	左→右に並べる
Right to Left	.horizrl	右→左に並べる
Top to Bottom	.verttb	上→下に並べる
Bottom to Top	.vertbt	下→上に並べる
Grid Rows	.gridrows	行単位のグリッド
Grid Columns	.gridcols	列単位のグリッド
Match Network Nodes	.nodes	Network エディタ上のノード配置を踏襲

Spacing / Margin / Max 📏

子パネルの間隔・マージン:

• Spacing: spacing — Align が None / Match Network Nodes 以外で有効、子パネル間の空き
• Max per Line: alignmax — 1 行/列に並べる最大子パネル数
• Margin (L / R / B / T): margin (marginl / marginr / marginb / margint) — パネル境界からの外側マージン (絶対ピクセル指定、ウィンドウ拡縮しても固定)

Justify (横 / 縦) ↔️

子パネルの揃え方:

• Justify Method: justifymethod — individual (子ごとに個別整列)
• Justify Horizontal: justifyh — Off / Left / Center / Right
• Justify Vertical: justifyv — Off / Top / Center / Bottom

Fit / Scale / Offset / Crop 🔍

Fit / Scale / Offset / Crop:

• Fit: fit — Off / Fit Width / Fit Height / Fit Best。Justify を上書き
• Scale (X / Y): scale (scalex / scaley) — 子パネルの一様スケール
• Offset (X / Y): offset (offsetx / offsety) — 子パネルのオフセット (Align / Justify で上書きされる)
• Crop: crop — On (はみ出し部分をクリップ) または Never

Scrollbar 🧭

スクロールバー設定:

• Horizontal Scrollbar: phscrollbar — Off / On / Automatic (子の幅がパネル幅を超えた時のみ)
• Vertical Scrollbar: pvscrollbar — Off / On / Automatic

---

Common Page 🔧

Parent Shortcut .parentshortcut 🔗

コンポーネント内部からこの COMP へのパスとして使えるショートカット名:

• Parent Shortcut: コンポーネント内部の任意の場所からこの COMP を参照する際のショートカット名 (parent.<name> 形式で利用可能)

Global OP Shortcut .opshortcut 🌐

プロジェクト全体からこの COMP を参照するグローバル名:

• Global OP Shortcut: プロジェクト内のあらゆる場所からこの COMP へのパスとして使えるグローバル名 (op.<name> 形式で利用可能)

Internal OP .iop 📎

Internal OP シーケンス (コンポーネント内部 OP への名前付き参照):

• Shortcut: iop0shortcut — コンポーネント内部の OP に対するショートカット名
• OP: iop0op — このコンポーネント内部の対象 OP へのパス

Node View .nodeview 👁️

ノードビューア (Network エディタ上のサムネイル) に表示する内容を決定

項目	内部名	説明
Default Viewer	.default	コンポーネントタイプ標準のビューアを表示
Operator Viewer	.opviewer	指定した任意 OP のノードビューアを表示

Operator Viewer .opviewer 🖼️

Operator Viewer モード時に表示する対象 OP:

• Operator Viewer パス: Node View が opviewer モードのとき、そのビューア内容として表示する OP のパス

Cloning .cloning 🧬

マスター COMP の内容を複製する Cloning 設定:

• Enable Cloning: enablecloning — Clone Master の内容を継続的に複製するかを切替
• Enable Cloning Pulse: enablecloningpulse — その瞬間だけ Clone Master の内容を瞬時に複製
• Clone Master: clone — 複製元となるマスターコンポーネントへのパス

Load on Demand .loadondemand ⏳

必要時のみメモリにロードする遅延ロード設定:

• Load on Demand: オンの場合、このコンポーネントは実際に必要となるまでメモリにロードされない (起動時間・メモリ消費の最適化)

External .tox .externaltox 💾

外部 .tox ファイルとの連携設定:

• Enable External .tox: enableexternaltox — 起動時に外部 .tox ファイルからロード
• Enable External .tox Pulse: enableexternaltoxpulse — 外部 .tox ファイルから即時リロード
• External .tox Path: externaltox — ディスク上の .tox ファイルへのパス
• Reload Custom Parameters: reloadcustom — コンポーネントのカスタムパラメータ値を再読み込み
• Reload Built-In Parameters: reloadbuiltin — コンポーネントの組み込みパラメータ値を再読み込み
• Save Backup of External: savebackup — .toe ファイル内に外部 .tox のバックアップコピーを保存
• Sub-Component to Load: subcompname — .tox 内部の特定 COMP のみを取り出してロード

Relative File Path Behavior .relpath 📁

このコンポーネント内部での相対ファイルパスの解決基準

項目	内部名	説明
Use Parent’s Behavior	.inherit	親コンポーネントの設定を継承
Relative to Project File (.toe)	.project	.toe プロジェクトファイルからの相対パスとして解決
Relative to External COMP File (.tox)	.externaltox	外部 .tox ファイルからの相対パスとして解決

Parameter Color Space .parmcolorspace 🎨

このコンポーネント内の色パラメータをどの色空間として解釈するか

項目	内部名	説明
sRGB	.srgb	標準的な sRGB ガンマ空間
sRGB – Linear	.srgblinear	sRGB プライマリでガンマ線形 (1.0)
Rec.601 (NTSC)	.rec601ntsc	Rec.601 NTSC 規格の色空間
Rec.709	.rec709	HDTV 用 Rec.709 色空間
Rec.2020	.rec2020	UHDTV / HDR 向け Rec.2020 広色域
DCI-P3	.dcip3	デジタルシネマ DCI-P3 色空間
DCI-P3 (D60)	.dcip3d60	D60 白点 DCI-P3
Display-P3 (D65)	.displayp3d65	D65 白点 Display-P3 (Apple ディスプレイ等)
ACES2065-1	.aces2065-1	ACES アーカイブ用色空間 (AP0 プライマリ)
ACEScg	.acescg	ACES CG 作業用色空間 (AP1 プライマリ)
Passthrough	.passthrough	色変換を行わず値をそのまま扱う

Parameter Reference White .parmreferencewhite ⚪

色パラメータの基準白色の扱い

項目	内部名	説明
Default For Color Space	.default	選択した色空間のデフォルト基準白を使用
Use Parent Panel	.useparent	親パネルの基準白設定を継承
Standard (SDR)	.sdr	標準ダイナミックレンジ (SDR) 基準白
High (HDR)	.hdr	ハイダイナミックレンジ (HDR) 基準白
UI	.ui	UI 表示用の基準白

---

実践アイデア 💡

Example 1: Momentary ボタンで Pulse 信号を発火 ⚡

Button COMP (Momentary) → Panel CHOP (state channel) → Trigger / Pulse

Button Type を Momentary にして押下中のみ on になるようにし、Panel CHOP で state チャンネルを取得して Pulse 信号として活用する最小構成。1 回押す毎に 1 フレーム分の 1 パルスが出力される。

1. Button COMP を作成し Button Type = Momentary、Label = SHOOT に設定
2. Panel CHOP で Button COMP の state チャンネルを取得
3. Trigger CHOP の入力に接続し、押下のたびに ADSR エンベロープを発火

Example 2: Radio ボタングループでモード切替 🔘

Button COMP × N (Button Group Label = mode) → Panel CHOP → Switch TOP

3 個の Button COMP に共通の Button Group Label を設定し、Button Type を Radio Down にすることで排他的に 1 個だけ on になるラジオ選択 UI を実現。Panel CHOP の radio チャンネルを Switch TOP の Index に渡せば即座に画面切替が可能。

1. Button COMP を 3 個作成し、すべてに Button Group Label = mode を設定
2. Button Type を Radio Down に統一
3. Panel CHOP で radio チャンネルを取得 (0 / 1 / 2)
4. Switch TOP の Index に接続して画面を切替

Example 3: Toggle ボタンで Constant CHOP 値を切替 🔁

Button COMP (Toggle Down) → Panel CHOP → CHOP Execute DAT → 別 OP のパラメータ

Toggle Down にして 1 押下ごとに on/off を維持し、Panel CHOP + CHOP Execute DAT で値変化時に Python コールバックを実行。スライダー表示の有効化や録画のオン/オフ切替等に活用できる。

• Button COMP の Button Type を Toggle Down に設定
• Panel CHOP で state を取得
• CHOP Execute DAT を作成し、Value Change イベントで Python コールバックを記述

---

関連オペレータ 🔗

類似機能OP 🔍

• Slider COMP — 範囲値を持つ連続入力 UI
• Field COMP — テキスト入力用の UI コンポーネント
• Container COMP — Button を内包する親レイアウトコンテナ

組み合わせ推奨OP 🔄

• Panel CHOP — ボタンの state / radio チャンネルを取得
• Panel Execute DAT — クリック / ロールオーバー等のイベントを Python で処理
• Trigger CHOP — Momentary ボタンから ADSR エンベロープを発火
• Switch TOP — Radio グループの状態に応じて画面を切替
• Container COMP — 複数 Button のレイアウト管理

前処理・後処理COMP 🎯

• 前処理: Base COMP、Container COMP
• 後処理: Container COMP、Slider COMP、Window COMP

---

Info COMP情報 📊

この COMP は Info CHOP / Info DAT による詳細情報取得に対応しています。

COMP 固有情報 🧩

• num_children: コンポーネント内部の子 OP の総数
• num_dats: 内部 DAT の数
• num_chops: 内部 CHOP の数
• num_tops: 内部 TOP の数
• num_sops: 内部 SOP の数

汎用オペレータ情報 🔄

• total_cooks: プロセス開始からのクック回数
• cook_time: 最後のクック時間 (ミリ秒)
• cook_frame: 最後にクックされたフレーム番号
• warnings: 警告数
• errors: エラー数

---

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: ラジオグループで複数同時に on になる
✅ Solution:

• Button Group Label が全ボタンで 完全一致 しているか確認 (大文字小文字含む)
• Button Type が全ボタンで Radio Down / Radio Up / Radio Up Anywhere のいずれかに統一されているか確認
• 異なる COMP にまたがるグループは Button Group DAT でテーブル指定すること

❌ Problem: ボタンを押しても Panel CHOP の値が変わらない
✅ Solution:

• Panel COMP 階層で Enable がオンになっているか確認
• 親 Container COMP の Click Through がオンになっていないか確認
• Panel CHOP で参照しているチャンネル名が state / radio / value0 等と一致しているか確認

❌ Problem: テキストがボタン枠からはみ出る
✅ Solution:

• Scale Text to Fit を Only when Too Large または Always に変更
• Font Size を小さくする
• Text Padding を増やしてマージンを確保

---

参考資料 📚

公式リソース 📖

• TouchDesigner公式ドキュメント – Button COMP
• COMP概要ページ
• TouchDesigner Category – Components

コミュニティ 💬

• TouchDesigner Forum – General Discussion
• Facebook – TouchDesigner Help Group

その他の記事はこちら

---