下が完成動画です。
今回は、ゲーム制作や背景演出には絶対に欠かせない「UVスクロール」というテクニックを解説していきます。
パーティクルを大量に使う表現とは違って、1枚の板ポリゴンに貼ったテクスチャを動かすだけなので、処理がめちゃくちゃ軽い「激カル」な炎を作ることができます。多くのゲーム会社が愛用している表現方法です。それではさっそく作っていきましょう!
1.下地となる板ポリゴンの準備
下が、説明動画となります。
まずは、テクスチャを貼り付けるための板を作っていきます。
- 画面上の初期オブジェクトを一度すべて削除します。
- [Shift + A] ➔ 「メッシュ」 ➔ 「平面(Plane)」 を追加します。
- [Sキー] ➔ [Xキー] を押して、横長(長方形)になるように少し伸ばします。
- 横に伸ばしたら、必ず [Ctrl + A] ➔ 「全トランスフォーム」 をクリックして、スケール値をリセット(1に初期化)しておきます。これを忘れると後でテクスチャが歪む原因になります。
2.スクロール用の画像テクスチャを作る
下が、説明動画となります。
次に、左右が綺麗に繋がる「ループテクスチャ」をBlender内で直接描いていきます。
- 画面上部のタブから 「UV Editing」 ワークスペースに切り替えます。
- 左側のUVエディター上部にある 「新規(New)」 ボタンを押します。
- 設定メニューが出るので、以下のように入力してOKを押します。
- 名前:
uvs(管理しやすい名前でOK) - 幅:
1024 - 高さ:
512(横の半分のサイズにしておきます)
- 名前:
- 画像が生成されたら、左上の 「画像(Image)」 ➔ 「名前を付けて保存(Save As)」 をクリックし、パソコン内の任意の場所に「uvs.png」として保存しておきます。アルファ(透明度)は使わないので、カラー設定は「RGB」のままで大丈夫です。
4.マテリアルの設定と透過処理
下が、説明動画となります。
作った画像をオブジェクトに貼り付け、透けるように設定します。
- 画面上部のタブから 「Shading」 ワークスペースに移動します。
- 下のシェーダーエディターで、板ポリゴンを選択した状態で 「新規」 をクリックします。
- [Shift + A] ➔ 「テクスチャ」 ➔ 「画像テクスチャ」 を追加します。
- 追加した画像テクスチャノード内にある「写真マーク(画像選択)」のアイコンをクリックし、先ほど作成した 「uvs」 を指定します。
- ツヤ(光沢)は一切必要ないので、念のためマテリアル設定の粗さ(Roughness)を最大に、スペキュラー(Specular)を0にしておきます。
- 画像テクスチャの [カラー(Color)] 端子から、マテリアル出力の 「サーフェス」 と 「アルファ」 の両方に線を繋ぎます。(真っ黒な部分が透明になり、描いた場所だけが浮かび上がるようになります)
5.ループするテクスチャをペイントする
下が、説明動画となります。
ここから、左右が無限に繋がるように絵を描いていきます。
- 画面上部タブから 「Texture Paint」 ワークスペースに移動します。
- 画面の表示モードを「マテリアルプレビュー」に変更し、さらにメッシュの形が分かりやすいように「ワイヤーフレーム」表示をオンにしておきます。
- 画面右側(または上部)にあるブラシの設定をスクロールしていき、「タイリング(Tiling)」 の項目を見つけます。
- 「X」のチェックボックスをオン にします。これで、右端からはみ出して描いた線が、自動的に左端から繋がって出てくるようになります。
- ブラシの色を「白」にして、適当に波のような、うねった模様を殴り書きでいいので描いていきます。左右に線を繋げるように意識して描いてみてください。
6.【核心】UVスクロールのアニメーションを設定する
下が、説明動画となります。
描いた模様を、ノードを使って一定の速度で無限に動かします。
ステップA:ノードの自動追加(Node Wranglerの活用)
- 「編集(Edit)」➔「プリファレンス」➔「アドオン」を開き、「Node」と検索して 「Node Wrangler」 にチェックを入れて有効化しておきます。
- 再び 「Shading」 ワークスペース(またはAnimationワークスペース)に戻り、画像テクスチャのノードを選択します。
- キーボードの [Ctrl + T] を押します。すると、画像テクスチャの左側に 「マッピング」 と 「テクスチャ座標」 の2つのノードが自動でドッキングされます。
- このマッピングノード内にある 「位置(Location)のX」 の数値をマウスで左右にドラッグしてみてください。テクスチャが横にスーッとスライドすれば成功です。
ステップB:タイムラインへのキーフレーム登録
下が、説明動画となります。
- 画面を 「Animation」 ワークスペースに切り替えます。
- 画面の一部を「グラフエディター(Graph Editor)」に、もう半分をマッピングノードが見える「シェーダーエディター」にしておくと作業がしやすいです。
- 下のタイムラインのバーを 「1フレーム目」 に合わせます。
- マッピングノードの 「位置 X」 の入力欄(数値は0.0)の上で右クリックし、「シングルキーフレームを挿入(Insert Single Keyframe)」 を選択します。入力欄が黄色に変わればキーが打たれています。
- タイムラインを 「30フレーム目」 に移動させます。
- 「位置 X」の数値を
1.0(またはお好みの移動量)に変更し、再度右クリックして 「シングルキーフレームを挿入」 を押します。入力欄が緑色に変わります。 - これで [スペースキー] を押して再生すると、1〜30フレームの間でテクスチャが動くようになります。
下が、説明動画となります。
ステップC:一定速度で「無限ループ」させる
デフォルトのままだと、動き始めに加速し、終わりに減速する「緩急」がついてしまっています。これを一定速度の無限ループに変えます。
- 画面の 「グラフエディター」 内をクリックして全選択([Aキー])します。
- キーボードの [Tキー] を押し、補間モードのメニューから 「線形(Linear)」 を選択します。これでグラフが直線になり、一定のスピードで動くようになります。
- 続いて、グラフを選択した状態でキーボードの [Shift + E] を押します。
- 出てきたメニューから 「線形外挿(Linear Extrapolation)」(上から2番目の項目)を選択します。
- これにより、30フレーム以降も、キーフレームを打っていない遥か先まで、ずーーーっと同じスピードでテクスチャが無限にスクロールし続けるようになります!
7.アイデア次第で大化け!炎への応用
下が、説明動画となります。
今作った仕組みをそのまま使って、縦に昇っていく立体的な煙に変形させます。
- オブジェクトを [Rキー] ➔ [Yキー] ➔
90と入力して、縦型に回転させます。 - [Tabキー] を押して「編集モード」に入ります。
- [Ctrl + R](ループカット)を使い、縦方向に数本のスライス(輪切り)を入れて、メッシュを細かく分割します。
- プロポーショナル編集([Oキー])をオンにします。
- 一番上の頂点(または辺)を選択し、[Sキー] でグッと横に広げます。 マウスホイールを転がして影響範囲を調整し、「上に行くほど末広がりになるスカートのような形」 に変形させます。
- 本来、UV展開は歪ませないのが基本ですが、今回はあえて「UVをわざと歪ませる」ことで、テクスチャが下から上へ登るにつれて、煙がフワッとモコモコ広がっていくドラマチックな表現に化けさせることができます。
- あとはマテリアルで煙に「赤色」や「黒色」などの色をつけ、形状の異なる板を2〜3枚少し角度を変えて重ねるだけで、驚くほど立体感のある、ゲーム画面のようなカッコいい煙エフェクトが完成します!
【Blender 4.0以降対応】プリンシプルBSDFを使った頂点ペイントの反映手順
Blender 4.0の大改良により、標準の「プリンシプルBSDF」は使っていない項目が自動的に計算から除外される、超軽量な万能ノードへと進化しました。
これにより、かつてのように「軽さを求めてディフューズBSDFにわざわざ差し替える」必要はなくなり、プリンシプルBSDFのまま、重さを気にせず頂点ペイントの色を反映させることができます。その最新のノード接続手順を解説します。
下の動画で、属性カラ-の追加方法と「火」をコピ-して「煙」を作り管理しています。
下の動画で、コンポジティング設定の仕方にブル-ム設定をして光らせる準備を解説しています。
下の動画で、カラ-属性ノードの呼び出しと接続にペイントモードに移行しての塗りによる変化を再現しています。
下の動画で、火から煙にメッシュを変えての属性カラ-の切り替えと塗りの変え方に変化が見れます。
下の動画で、マテリアルを追加して「火」と「煙」に割り振りして切替え可能にしています。
仕組みさえ覚えてしまえば、スピードやメッシュの形を変えるだけで「滝」「噴水」「斬撃の光エフェクト」など、何にでも応用できる万能テクニックです。ぜひ皆さんの作品作りにも役立ててみてください!
頂点ペイントの色情報が「属性」として記憶される仕組み
Blenderでは、頂点ペイントでモデルに塗った色情報は、メッシュ自体が持つ「カラー属性(Color Attributes)」というデータとして記憶されます。
テクスチャ画像(PNGなど)のように外部ファイルを作って表面に貼り付けるのではなく、「メッシュの頂点一つひとつに、RGBの色数値を直接記録する」という仕組みです。
- 最大のメリット: 画像ファイルが一切不要なため、どれだけ色を塗ってもデータ容量が非常に軽く、ゲーム用エフェクトや背景オブジェクトの最適化に最強の威力を発揮します。
【実践】属性を「使い分け」して別メッシュへ振り分ける方法
例えば、「ベースの肌色を塗ったデータ」と「ダメージ表現(血のりや汚れ)のデータ」のように、1つのキャラクターに対して複数のカラーを使い分けたいときや、別のメッシュ(パーツ)にその色情報をきれいに振り分けたい(転送したい)ときがあります。
Blender 4.0以降で最もスマートにこれを実現する、具体的な操作手順を2つのアプローチで解説します。
アプローチA:同じメッシュ内で「複数の属性」を使い分ける
- 画面右側のプロパティから、緑色の逆三角形アイコン「オブジェクトデータプロパティ」を開きます。
- 「カラー属性(Color Attributes)」 項目を開き、右側にある 「+」 ボタンを押します。
- ポップアップが出るので、分かりやすい名前(例:
Base_ColorやDamage_Color)をつけて「OK」を押します。 - あとは、使いたい属性をリスト内で選択してから頂点ペイントモードで塗るだけです。
- シェーダー側での使い分け: シェーダーエディター側で「カラー属性ノード」を2つ出し、それぞれに
Base_ColorとDamage_Colorを指定すれば、「ミックス(Mix Color)ノード」などを使って、ゲームの進行に合わせて色を滑らかに切り替える演出(ダメージを受けると徐々に赤くなる、など)が簡単に作れます。
アプローチB:別メッシュ(他のパーツ)へ色情報を振り分ける(転送する)
「衣装メッシュに塗った頂点カラーを、後から追加した別の装飾品メッシュにもきれいに馴染ませたい!」というように、別のオブジェクトへ色情報を振り分ける(コピーする)技です。
Blender 4.0以降では、「データ転送(Data Transfer)」モディファイアを使うことで、頂点数が全く違う別メッシュへも、位置情報を元に色を綺麗に振り分けることができます。
- 色を受け取りたいメッシュ(別メッシュ)を選択します。
- モディファイアプロパティから 「データ転送(Data Transfer)」 モディファイアを追加します。
- 設定手順:
- ソース(Source): 色情報のコピー元(すでに頂点ペイントが塗ってある元のメッシュ)をスポイトで指定します。
- 「顔コーナーデータ(Face Corner Data)」 にチェックを入れ、項目を展開します。
- その中にある 「カラー(Colors)」 にチェックを入れます。
- 「マッピング(Mapping)」 の項目を 「最近接面の補間(Nearest Face Interpolated)」 に設定します。これで、形状が違っても最も近い位置の色を自動できれいに馴染ませてくれます。
- 見た目がきれいに振り分けられたのを確認したら、モディファイアの矢印メニューから 「適用(Apply)」 を押します。
これで、別メッシュの「カラー属性」にも、元データと完全に一致した色情報が新しく記憶されます!
💡 まとめ
頂点ペイントは、ただモデルに絵を描くだけの機能ではありません。 「属性(データ)」として複数管理し、モディファイアで他のメッシュへ振り分けるテクニックを覚えることで、パーツ数の多い複雑なキャラクターや、軽量化が求められるゲーム用マップのエフェクト制作が圧倒的に効率化されます。
私が初心者でBlenderを始めた時に一番目の壁が「シェーディング」でした。
この「ノード」というもの接続に多くの種類の使い分けに使い方が解らないでした。
ほとんどの解説者は、万能と言うプリンシプルBSDFを消してから別のノードを使うから尚更意味不明でした・・
AIに聞いた答えがこれです「Blenderの解説動画や記事で「プリンシプルBSDF」を使わずに、他の単純なノードを使う理由は「初心者への分かりやすさ」と「計算の軽さ(処理速度)」を優先しているためです。. 仕組みを基礎から教えるため
プリンシプルBSDFは、最初から多くの機能(金属感、粗さ、透明感など)が1つに詰まった「全部入り」のノードです。
- 理由: 初心者が「光の反射」や「色」の基本を学ぶには、多機能すぎて迷子になりやすいです。
- 対策: 解説では、あえて「ディフューズ(基本の色)」や「光沢(反射)」といった単機能のノードを組み合わせて見せることで、シェーダーの仕組みを根本から理解させようとしています。
2. パソコンの動作を軽くするため
プリンシプルBSDFは万能ですが、その分データが重いです。
- 理由: 使っていない機能(例:ガラスの屈折や、肌の質感を出すサブサーフェスなど)の計算プログラムも裏で待機しています。
- 対策: 画面内に大量のオブジェクトがある場合、すべてをプリンシプルBSDFにするとレンダリング(画像出力)に時間がかかります。単純な色だけのオブジェクトには、軽い専用ノードを使う方が効率的です。
3. アニメ調(トゥーンシェーダー)を作るため
フィギュアやアニメのような、リアルではない表現を作りたい場合です。
- 理由: プリンシプルBSDFは「現実世界の物理法則」に基づいたリアルな質感を出すのが得意です。
- 対策: 影の境界線をクッキリさせたいアニメ調の表現では、リアルな計算が邪魔になります。そのため、解説では専用のノード構成をイチから組むことが多いです。
4. 古い解説記事・動画であるため
Blenderの歴史的な背景も関係しています。
- 理由: プリンシプルBSDFが導入されたのはBlender 2.79(2017年頃)からです。
- 対策: それ以前に作られた古い解説や、その頃の知識をベースに書かれた記事では、必然的に古いノードの組み合わせ方が紹介されています。
Blender 5.0では「プリンシプルBSDF」を使うべきか?問うと、使うべきでまた、他のノードと接続することで全て軽く簡単に表現できますの回答でした。
この「ノード」の基本理解が無いと、Blenderは使いこなせないのでこの方面の初心者が理解できる記事をシリーズ化して作成したいと思っています。今回の炎シリーズは、これでいったん終了です。
