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

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – 画像をタイル状に並べる

Tile TOPは、入力画像を指定数のタイルに反復し、反転や反射・端処理を加えて並べる TOPです。Repeat X / Y でタイル数、Flip / Reflect で各方向の反転、Extend で端の振る舞い、Crop で各辺の切り出しを制御します。

主な用途 🎯

パターン素材や背景テクスチャのタイル状反復生成 (Repeat X / Repeat Y)
シームレステクスチャ作成のための鏡像反射 (Reflect X / Reflect Y)
万華鏡風のシンメトリックなモーショングラフィックス生成
部分クロップ (Crop Left / Right / Bottom / Top) による画像の切り出し
端の処理方式 (Hold / Zero / Repeat / Mirror) の比較・選択

データフロー 🔄

入力: TOP テクスチャ
 ↓
Crop Left / Right / Bottom / Top で各辺を切り出し
 ↓
Repeat X / Y で反復数を指定
 ↓
Flip / Reflect で反転や反射を適用
 ↓
Overlap U / V で接合部をブレンド
 ↓
出力: タイル化された画像

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

リンク

まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

Crop Page ✂️

クロップ範囲 📐

各辺の切り出し位置 (Crop Left / Right / Bottom / Top)

Crop Left .cropleft ⬅️
Crop Left (左端の位置) — 画像の左端を切り出す位置を指定します。Crop Left Unit でピクセル単位か比率単位かを切替可能。

Crop Right .cropright ➡️
Crop Right (右端の位置) — 画像の右端を切り出す位置を指定します。Crop Right Unit で単位を切替可能。

Crop Bottom .cropbottom ⬇️
Crop Bottom (下端の位置) — 画像の下端を切り出す位置を指定します。Crop Bottom Unit で単位を切替可能。

Crop Top .croptop ⬆️
Crop Top (上端の位置) — 画像の上端を切り出す位置を指定します。Crop Top Unit で単位を切替可能。

端の処理 `.extend` 🔲

クロップ範囲を超えた領域の処理方式

項目	内部名	説明
Hold	`.hold`	端のピクセル値をそのまま外側に引き伸ばす (色帯が伸びる)
Zero	`.zero`	端より外側はゼロ (黒・透明) で埋める
Repeat	`.repeat`	画像を繰り返してタイル状に並べる
Mirror	`.mirror`	画像を鏡像反転しながら繰り返す (継ぎ目が目立たない)

Tile Page 🧩

反復数 🔢

X / Y 方向のタイル反復数

Repeat X .repeatx ↔️
Repeat X (横方向の反復数) — 横方向に何枚のタイルを並べるかの整数値。2 以上にすると Reflect Y も意味を持つようになります。

Repeat Y .repeaty ↕️
Repeat Y (縦方向の反復数) — 縦方向に何枚のタイルを並べるかの整数値。2 以上にすると Reflect X も意味を持つようになります。

反転・反射 🔁

タイルごとの反転 (Flip) と鏡像配置 (Reflect) と転置 (Transpose)

Transpose .flop 🔄
Transpose (転置) — Flip TOP の Flop に相当する転置で、解像度を変えずに右下と左上を入れ替えます。元のアスペクト比は維持されます。

Flip X .flipx ↔️
Flip X (X 方向の反転) — 画像を X 方向 (左右) に反転します。

Flip Y .flipy ↕️
Flip Y (Y 方向の反転) — 画像を Y 方向 (上下) に反転します。

Reflect X .reflectx 🪞
Reflect X (X 方向の鏡像配置) — 隣接するタイルを X 方向に鏡像反射しながら並べます。注意: Repeat Y が 2 以上である必要があります。

Reflect Y .reflecty 🪞
Reflect Y (Y 方向の鏡像配置) — 隣接するタイルを Y 方向に鏡像反射しながら並べます。注意: Repeat X が 2 以上である必要があります。

境界ブレンド 🌫️

タイル境界をブレンドして継ぎ目を目立たなくする (Overlap U / V)

Overlap U .overlapu ↔️
Overlap U (U 方向の境界ブレンド) — 左右に隣接するタイル境界をブレンドして滑らかにつなぎます。Overlap U Unit でピクセル単位か比率単位かを切替可能。

Overlap V .overlapv ↕️
Overlap V (V 方向の境界ブレンド) — 上下に隣接するタイル境界をブレンドして滑らかにつなぎます。Overlap V Unit で単位を切替可能。

Common Page 🔧

Output Resolution `.outputresolution` 🖼️

出力解像度の決定方式

項目	内部名	説明
Use Input	`.useinput`	入力 TOP の解像度をそのまま継承
Eighth	`.eighth`	入力解像度の 1/8
Quarter	`.quarter`	入力解像度の 1/4
Half	`.half`	入力解像度の 1/2
2X	`.2x`	入力解像度の 2 倍
4X	`.4x`	入力解像度の 4 倍
8X	`.8x`	入力解像度の 8 倍
Fit Resolution	`.fit`	指定解像度に縦横比を保持して収める
Limit Resolution	`.limit`	指定解像度を上限としてクランプ
Custom Resolution	`.custom`	`Resolution` パラメータで任意指定

Resolution `.resolution` 📐

カスタム解像度の幅・高さ指定 (Output Resolution = Custom 等の時のみ有効):

Resolution W: 出力幅 (ピクセル単位)。Output Resolution が Custom Resolution / Fit Resolution / Limit Resolution の時に有効
Resolution H: 出力高 (ピクセル単位)。同上

Resolution Menu `.resmenu` 📋

よく使う解像度プリセットのドロップダウン:

Resolution Menu: NTSC / PAL / HDTV 720 / HDTV 1080 / 4K UHD 等のプリセットから選択すると Resolution W / Resolution H が自動セットされる

Use Global Res Multiplier `.resmult` 🔢

プロジェクト全体の解像度倍率の適用:

Use Global Res Multiplier: Project Settings の Global Resolution Multiplier をこの TOP に適用するかどうか。プロトタイプを低解像度で動かしつつ最終出力で一括フル解像度化する運用に便利

Output Aspect `.outputaspect` 📏

出力アスペクト比の決定方式

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のアスペクトを継承
Resolution	`.resolution`	解像度から自動導出 (推奨デフォルト)
Custom Aspect	`.custom`	`Aspect1` / `Aspect2` で手動指定

Aspect `.aspect` 📐

カスタムアスペクト比の指定 (Output Aspect = Custom Aspect の時のみ有効):

Aspect1: 横方向アスペクト値 (Output Aspect = Custom Aspect の時のみ有効)
Aspect2: 縦方向アスペクト値 (同上)

Input Smoothness `.inputfiltertype` 🎚️

入力テクスチャのサンプリング方式

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセルサンプリング (ピクセルアート向け、ジャギーが残る)
Interpolate Pixels	`.linear`	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (縮小時のモアレ抑制、わずかにコスト高)

Fill Viewer `.fillmode` 🖥️

ビューア内でのテクスチャの収め方

項目	内部名	説明
Use Input	`.useinput`	入力 TOP の Fill Viewer 設定を継承
Fill	`.fill`	ビューアいっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal	`.width`	横幅に合わせて収める (上下に余白)
Fit Vertical	`.height`	縦幅に合わせて収める (左右に余白)
Fit Best	`.best`	アスペクト保持で内側に収まる最大サイズ
Fit Outside	`.outside`	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)
Native Resolution	`.nativeres`	テクスチャのネイティブ解像度のまま等倍表示

Viewer Smoothness `.filtertype` 🎛️

ビューア表示時のサンプリング方式

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセルサンプリング (ピクセル単位での確認向け)
Interpolate Pixels	`.linear`	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (縮小ビュー時のモアレ抑制)

Passes `.npasses` 🔁

オペレータの反復実行回数:

Passes: TOP の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。タイル化を多段にしたい場合に利用可能

Channel Mask `.chanmask` 🎨

処理対象のチャンネルマスク (R/G/B/A 個別トグル):

Channel Mask: R / G / B / A 各チャンネルのオン/オフトグル。オフのチャンネルは TOP の処理を受けず入力値がそのまま通過

Pixel Format `.format` 🎨

出力テクスチャのピクセルフォーマット (ビット深度・チャンネル構成)

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のフォーマットを継承
8-bit fixed (RGBA)	`.rgba8fixed`	標準 8 ビット固定小数 RGBA (デフォルト、軽量)
sRGB 8-bit fixed (RGBA)	`.srgba8fixed`	sRGB ガンマ補正済 8 ビット RGBA
16-bit float (RGBA)	`.rgba16float`	16 ビット浮動小数 RGBA (HDR・中間処理向け)
32-bit float (RGBA)	`.rgba32float`	32 ビット浮動小数 RGBA (最高精度、メモリ大)
10-bit RGB with 2-bit Alpha	`.rgb10a2fixed`	10-10-10-2 ビット固定小数 (バンディング抑制)
16-bit fixed (RGBA)	`.rgba16fixed`	16 ビット固定小数 RGBA
11-bit float (RGB)	`.rgb11float`	11-11-10 ビット浮動小数 RGB (アルファなし、HDR 軽量)
16-bit float (RGB)	`.rgb16float`	16 ビット浮動小数 RGB (アルファなし)
32-bit float (RGB)	`.rgb32float`	32 ビット浮動小数 RGB (アルファなし)
8-bit fixed (Mono)	`.mono8fixed`	8 ビット固定小数モノクロ
16-bit fixed (Mono)	`.mono16fixed`	16 ビット固定小数モノクロ
16-bit float (Mono)	`.mono16float`	16 ビット浮動小数モノクロ
32-bit float (Mono)	`.mono32float`	32 ビット浮動小数モノクロ
8-bit fixed (RG)	`.rg8fixed`	8 ビット固定小数 R+G 2 チャンネル
16-bit fixed (RG)	`.rg16fixed`	16 ビット固定小数 R+G
16-bit float (RG)	`.rg16float`	16 ビット浮動小数 R+G
32-bit float (RG)	`.rg32float`	32 ビット浮動小数 R+G
8-bit fixed (A)	`.a8fixed`	8 ビット固定小数アルファ単体
16-bit fixed (A)	`.a16fixed`	16 ビット固定小数アルファ単体
16-bit float (A)	`.a16float`	16 ビット浮動小数アルファ単体
32-bit float (A)	`.a32float`	32 ビット浮動小数アルファ単体
8-bit fixed (Mono+Alpha)	`.monoalpha8fixed`	8 ビット固定小数モノクロ+アルファ
16-bit fixed (Mono+Alpha)	`.monoalpha16fixed`	16 ビット固定小数モノクロ+アルファ
16-bit float (Mono+Alpha)	`.monoalpha16float`	16 ビット浮動小数モノクロ+アルファ
32-bit float (Mono+Alpha)	`.monoalpha32float`	32 ビット浮動小数モノクロ+アルファ

実践アイデア 💡

Example 1: シームレスパターン生成 🧩

Movie File In TOP → Tile TOP (Repeat X=4, Y=4, Reflect オン) → 出力

縦横にタイル化しつつ Reflect で鏡像反射を加えることで継ぎ目の目立たないシームレスパターンを 1 ノードで生成する基本フロー。背景素材やループ可能なテクスチャを作る用途で頻出します。

Movie File In TOP にパターン素材を読み込む
Tile TOP を後段に接続し Repeat X = 4 / Repeat Y = 4 に設定
Reflect X / Reflect Y をオンにして境界で鏡像反転 (継ぎ目軽減)
Overlap U / Overlap V でブレンド幅を微調整して継ぎ目を完全に消す

Example 2: 万華鏡風モーション 🪞

Noise TOP (アニメーション) → Tile TOP (Reflect X / Y) → 後段

アニメーションするノイズや映像に Reflect X / Y を組み合わせて、入力 1 枚から対称的でリッチな万華鏡風モーションを作り出す例。VJ 素材やライブ映像演出のバッキング画面として使われます。

アニメーションするノイズや映像を入力 TOP として接続
Tile TOP の Repeat X / Repeat Y を 2 以上に設定
Reflect X / Reflect Y を両方オンにして上下左右シンメトリックに反射
後段に Transform TOP を入れて全体を回転させると万華鏡感が増す

Example 3: 部分クロップと反復 ✂️

入力 TOP → Tile TOP (Crop で領域を絞る + Repeat X=3) → 後段

Crop Left / Right / Bottom / Top で素材の一部だけを切り出し、それを Repeat X / Y で並べてロゴパターンや帯状テクスチャを作る使い方。Crop と Tile を 1 ノードでまとめられるため、後段にクロップ専用 TOP を追加せずに済みます。

切り出したい領域に合わせて Crop Left / Crop Right / Crop Bottom / Crop Top を設定
Repeat X = 3 などで横方向にタイル化
Extend = Mirror に設定するとクロップ境界で鏡像反転して継ぎ目を軽減

Info CHOP情報 📊

Tile TOPは Info CHOP による詳細情報取得に対応しています。

TOP固有情報 🖼️

resx: TOP の出力解像度 X (ピクセル単位)
resy: TOP の出力解像度 Y (ピクセル単位)
aspectx: アスペクト比 X
aspecty: アスペクト比 Y
depth: 3D テクスチャ / テクスチャ配列の深度 (2D テクスチャでは 1)
gpu_memory_used: TOP が消費している GPU メモリ量 (MB 単位)

汎用オペレータ情報 🔄

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

TOP Info 情報 📊

resolution_w: 出力テクスチャの横ピクセル数 (タイル反復後の幅)
resolution_h: 出力テクスチャの縦ピクセル数 (タイル反復後の高さ)
aspect_x: 出力テクスチャの横アスペクト値
aspect_y: 出力テクスチャの縦アスペクト値
depth: テクスチャの色深度 (ピクセルフォーマットに依存)

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

よくある問題と解決策 🔧

❌ Problem: Reflect X / Y を入れても鏡像反射が出ない
✅ Solution:

Reflect X は Repeat Y = 2 以上、Reflect Y は Repeat X = 2 以上が必須 (公式仕様)
Repeat X / Repeat Y がいずれも 1 のままだとタイル境界が存在せず Reflect の効果は表れない
ビューアの Fill Viewer が Native Resolution 以外の場合、引き伸ばしで反射が見えにくくなることがあるので一度 Native Resolution で確認

❌ Problem: タイル境界の継ぎ目が目立つ
✅ Solution:

Overlap U / Overlap V を増やしてタイル境界をブレンド
Reflect X / Reflect Y を併用すると鏡像反射で境界の不連続性が緩和
前段で Extend = Mirror にしておくとクロップ境界も鏡像になり、Tile 境界と一貫した見た目になる

❌ Problem: Crop 範囲が期待した位置と違う
✅ Solution:

Crop Left Unit / Crop Right Unit / Crop Bottom Unit / Crop Top Unit の単位設定 (ピクセル / 比率) を確認
比率単位 (Fraction) で 0.0〜1.0 を期待しているのにピクセル値を入れていないか、またその逆を確認
クロップ専用に細かい範囲調整をしたい場合は前段の Crop TOP に責務を分けると見通しが良くなる

❌ Problem: 出力解像度が想定と違う
✅ Solution:

Common Page の Output Resolution が Use Input になっていると、入力解像度がそのまま反映される (タイル化しても解像度は変わらない)
出力サイズを固定したい場合は Output Resolution = Custom Resolution + Resolution W / Resolution H を明示指定
Transpose をオンにすると入力の幅と高さが入替わる点に注意

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎

まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング＆インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram：＠malmal0v0

概要 📖 – 画像をタイル状に並べる

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Crop Page ✂️

クロップ範囲 📐

端の処理 .extend 🔲

Tile Page 🧩

反復数 🔢

反転・反射 🔁

境界ブレンド 🌫️

Common Page 🔧

Output Resolution .outputresolution 🖼️

Resolution .resolution 📐

Resolution Menu .resmenu 📋

Use Global Res Multiplier .resmult 🔢

Output Aspect .outputaspect 📏

Aspect .aspect 📐

Input Smoothness .inputfiltertype 🎚️

Fill Viewer .fillmode 🖥️

Viewer Smoothness .filtertype 🎛️

Passes .npasses 🔁

Channel Mask .chanmask 🎨

Pixel Format .format 🎨