Let's Enjoy Unreal Engine

Unreal Engineを使って遊んでみましょう

UE4を使ってお絵描きを試みる

この記事はUnreal Engine 4 (UE4) Advent Calendar 2016への参加1日目の記事です。

qiita.com

まず最初にアドベントカレンダー初日から申し訳ありませんが、この記事に実用性は皆無です。

それをご理解の上でお楽しみください。UE4のバージョンは4.14.0を使用。

UE4を使って絵を描く方法の選択

今回のテーマは『UE4を使って絵を描く』ということです。もちろんUE4に絵を描く機能などありません。ではどうやって絵を描くのか?それは複数の選択肢があります。


1. メッシュペイント機能を使って描く
2. ランドスケープのペイント機能を使って描く
3. UE4.13で追加されたブループリント レンダーターゲット機能を使って描く


という3つの選択肢があります。メッシュペイントはその名前の通り、メッシュ上にペイントすることが可能な機能です。ランドスケープのペイント機能はランドスケープの地形上に直接ペイント可能な機能です。これらはランタイムではなく、エディター上から利用します。最後のレンダーターゲットを用いた機能はゲーム中にランタイムで自由に絵を描くことが可能です。

どの機能でも自由に絵を描くことが可能ですが、今回はこの中から『ランドスケープのペイント機能を使って描く』というものを選択しました。

その理由としては、


1. レイヤー機能がある
2. ペンタブの筆圧に対応している
3. とても広いキャンバスを作ることができる
4. 3D空間に平面的に絵を描くことができる


などが理由です。まぁぶっちゃけこれくらい機能がないと、絵を描くのが辛いというのは恐らく多くの方が感じることかと。というわけで早速ランドスケープを作るところから始めてみましょう。

ランドスケープとマテリアルの作成

まずは普通にランドスケープの作成です。

f:id:alwei:20161129164643p:plain

ランドスケープの作成で必ず"Fill World"を行っておきます。これで最初から作成できる最大サイズのランドスケープを作成できます。この段階ではまだマテリアルは適用していません。

では次にマテリアルを新規作成しておきます。ランドスケープ用マテリアルは少しだけ特殊なところがありますが、難しいところは特にありません。まずはランドスケープ上で利用するレイヤーを作成しておきます。レイヤーを作成するためには"Landscapel Layer Blend"ノードを利用します。

docs.unrealengine.com

このノードはランドスケープにレイヤーを追加します。今回は色の確認用に一番上から"Canvas"レイヤー、"Red"レイヤー、"Black"レイヤーと作成しました。

f:id:alwei:20161129202248p:plain

ここで最も重要なのが"Blend Type"です。このブレンドの種類により、レイヤーの価値が決まるといっても過言ではないです。一番上のキャンバス用レイヤー"Canvas"では白で塗り潰し、"LB Height Blend"を選択します。これにより高さの値を見て色を塗ることができます。とはいっても今回は高さを見て何かを塗るというわけではないので、単純に独立した白キャンバスレイヤーとして利用します。

残りのふたつのレイヤーには"LB Alpha Blend"を選択します。これはレイヤー順を正しく制御して塗る際に必要になります。つまり塗り色の優先順位を決めることができます。ここで最も下にあるレイヤーが表示上優先されるので、ここでは黒のレイヤーを下にもってきています。さて、あとはこのランドスケープマテリアルをランドスケープへ適用します。

f:id:alwei:20161129210854p:plain

ランドスケープのレイヤー情報を作成

ここでランドスケープのモードをPaintに切り替えてから、レイヤー情報を作成しましょう。

f:id:alwei:20161129211158p:plain

ここで、"Weight-Blend Layer(normal)"と"Non Weight-Blend Layer"が選択できますが、一番上のCanvasのみを"Weight-Blend Layer(normal)"にして、残りは全て"Non Weight-Blend Layer"を選択するようにします。これにより、"Non Weight-Blend Layer"は互いのウェイト値に影響されず、互いの優先順位を保ったまま塗ることができます。

f:id:alwei:20161129211826p:plain

これでキャンバスには直接上書きするように塗ることができ、それ以外のレイヤーは互いのウェイト値の影響を受けなくなります。あとはキャンバスを白で塗り潰します。ターゲットレイヤー上で右クリックすると"Fill Layer"でレイヤーをその色で塗り潰すことができます。

f:id:alwei:20161129212151p:plain

これでレイヤーが真っ白に塗り潰されたはずです。あとはこの巨大ランドスケープキャンバスに絵を描いていくだけですが、見易さのために視点とライティングを切り替えておきましょう。

f:id:alwei:20161129212926p:plain

これで描きやすくなりましたね。では何か適当に描いてみましょう。

f:id:alwei:20161129213328p:plain

バッチリと描けますね!

ちなみにその色を消したい場合にはターゲットレイヤーを選択して、Shiftキーを押しながら塗り潰すと、その部分を消すことが可能です。消しゴム的に活用できます。"Brush Size"や"Brush Falloff"や"Tool Strength"を変更すると描き心地も変わります。"Brush Falloff"はペンタブの筆圧もしっかり見てくれるのである程度入れておくといいです。ただし一般的なお絵描きソフトのような描き心地を期待してはいけません。

そこから時間をかけて描いてみた

ここから更に時間をかけて描いてみました。お題は『Grayちゃん』です。

Grayちゃんモデルデータ | rarilog


f:id:alwei:20161130022144p:plain

まずはラフと下書き。一番始めに描いたレイヤーはグレーに変更して最終的には白にしてしまいます。

f:id:alwei:20161130022248p:plain

ベースカラーの塗り。ひとまずこの段階で完成が見えてきました。

f:id:alwei:20161130022402p:plain

影やハイライトをつけてこれでついに完成。ここまで約5時間。

f:id:alwei:20161130022503p:plain

もちろん平面に描いていますが、中身はランドスケープなので3Dです。カメラをパースペクティブにしてライティングを戻すとどうなっているのかよくわかります。

f:id:alwei:20161130022642p:plain

更にPhotoshopっぽくポストエフェクトで加工してみるといい感じに!いやー、ここまで長かった…

描き終わって…

というわけで実際にUE4上でお絵描きを試してみましたが、案外なんとかなるものです。しかし途中かなり辛い場面もありました。

f:id:alwei:20161130023104p:plain

一番辛いのはマテリアルにカラーレイヤーを追加すると倍々にシェーダーコンパイル時間が長くなっていったことです。ラストの方はひとつ色を追加するだけで7000近くのシェーダーコンパイルポイントに…

最終的には描く部分よりも塗る時の色追加で行われるシェーダーコンパイルで限界を感じます。今回は最低限の色数で抑えましたが、これ以上は厳しいです。

が、しかしレイヤーが使える分、Windows標準のペイントよりは全然いけるかなーと。アンドゥリドゥも普通に使えますし。

まぁUE4で絵を描くメリットは何もないんですけどねっ!!

良い子はちゃんとしたお絵かきソフトを使って絵を描きましょう。

f:id:alwei:20161130023647p:plain

というわけで最終的に出来た絵はこんな感じに。Grayちゃんあまり似てなくてすいません…

明日はYuukiOginoさんの『初めてVRハッカソンに参加しても大丈夫、「初心者向け・UE4でHTC Viveアプリ開発に必要な最低限』とのことで、楽しみにしております~。