げーむ開発徒然日記~怠惰のために勤勉~

Unreal Engineや3DCG制作について学んだことを記事にしていきます

第16回UE4ぷちコン振り返り その③~カーソルを筆に変更する(筆先の動きもつける)~

ぷちコンの審査結果発表会も終わりましたが、ありがたいことに賞をいただくことができたのでこのまま逃亡しようとしていた(嘘です)振り返り記事を再開します。

今回紹介するものはこちら↓

f:id:raksul_01:20211005011523g:plain

概要

前回の記事で紹介させていただいたペイントシステムでは、カーソルがそのままデフォルトのものなのでそれを自前の筆に置き換えよう!っていう内容です。

また、上の動画をご覧の通り、筆の移動に合わせて筆先も動いていますね。

単純にカーソルを画像に置き換えるだけなら

Set Mouse Cursorを使う方法

・UIに配置したimageをTickでマウス位置に追従させる方法

が一般的だと思いますが、これらの方法では筆先の動きをつけることができません。やっていることはかなり後者の方法に近いですが、少し工夫して実装することにしました。

要約

実装方法を簡単にまとめると

・筆スケルタルメッシュをシーンキャプチャーでテクスチャに描画(常に更新)し、そのテクスチャをUIのimageに設定

・筆スケルタルメッシュのアニメーションBPにマウスの移動量を与える

です。

他にも、筆スケルタルメッシュを直接カメラに映し出すといった方法もあるかもしれませんが個人的には上記の方法のほうが手っ取り早いと感じたのでこちらを採用しました(ほかにも理由はありますが後述します)。

実装方法

スケルタルメッシュを用意する(blender

今回は、グレイマン人体改造ロボット改造したものを筆としました。

※意外にも審査員の方たちは初見で気づかなかったようですが…。その①の記事でも述べた通り、当初作成予定だったウケ狙いゲームの名残ですw

blenderを使って、インポートしたグレイマンのデフォルトのスケルトンを削除し、引き延ばした頭に新しいスケルトンを作成した至極雑な作りです。

f:id:raksul_01:20211005001656p:plain

これにSubstance Painterでペペっとテクスチャを作りました。

アニメーションBPを用意する

筆スケルタルメッシュができたら、UE4にインポートします。

筆スケルタルメッシュのスケルトンをベースにアニメーションBPを新規に作成し、AnimGraph内でCCDIKを使用して筆先がいい感じに動くようにしました。

f:id:raksul_01:20211005004357g:plain

アニメーションBPは以下のように組んでいます。

f:id:raksul_01:20211005004534p:plain

後述するキャンバスウィジェット(前回記事のWB_TestCanvas)からTarget Effector Location X/Yに値が代入され、実際のCCDIKにはTarget Effector Location X/YにFInterp Toで徐々に値が近づいていくEffector Location X/Yが入力として与えられています。

※BPにいっさい処理を組まず、WB_TestCanvasから直接Effector Location X/Yに値を代入しても大丈夫ですが筆先の動きが固くなってしまいます。

筆アクターとシーンキャプチャーをレベルに配置する

Actorクラスを継承したBP_GrayBrushを新規作成し、Skeletal Mesh Component(筆スケルタルメッシュ)を追加し、上記で作成したアニメーションBPを設定しておきます。

このBP_GrayBrushをレベルに配置し、さらにScene Capture 2Dがうまい具合にBP_GrayBrushをテクスチャ内に収めるように配置します。

※応募作品ではサブレベルに配置しました。

f:id:raksul_01:20211005010135p:plain

Scene Capture 2Dの設定

ここで、投影方法は平行投影にしました。なぜ今回の実装方法を採用したのかという理由の2つ目(要約のところでほかの理由と述べたやつです)は、筆の投影を平行投影にしたかったためです。

→この記事を書いている途中で透視投影に変更してみたらそっちのほうがいい感じになりましたw

上手くできるとこんな感じでキャプチャしてくれます。テクスチャレンダーターゲットTRT2D_Brushのサイズは480*480にしました。

f:id:raksul_01:20211005010614p:plain

ここまでできたら、新規マテリアルM_TRT2D_Brushを作成します。

TRT2D_Brushのままでは筆の部分だけがアルファの値が0という情報を持っているので、反転させます。

f:id:raksul_01:20211005012716p:plain

キャンバスウィジェットに追加処理を組む

最後に、前回記事で作成したWB_TestCanvasを若干変更していきます。

まず、ウィジェットに新規のイメージ(BrushのImageにM_TRT2D_Brushを設定)を追加します。

f:id:raksul_01:20211005012136p:plain

上の画像のようにAlignmentなども調整しておきます。

また、テクスチャサイズが先ほど述べた通り480*480に対して、ウィジェット上では600*600となっていますが、解像度より負荷軽減を優先しました。

で、前回記事にてオーバーライド処理を施した関数On Mouse Moveの途中に以下の処理を追加します。

f:id:raksul_01:20211005175535p:plain

マウスの移動量を筆スケルタルメッシュのアニメーションBPに与える前にノーマライズして値をベクトルの大きさが1になるように抑えています。2.0を乗算しているのは調整用です。

あ、それとコンストラクトイベントなどで筆アクターのAnim Instanceを取得しておくこともお忘れなく

他にも細かい処理(例えば、描いてる時より描いてない時のほうが筆の位置が高くしたり、音を鳴らしたり)を色々追加してますが記事の本題から逸れるので説明は省略します。

→完成!

最後に

実装方法は簡単ですが、私は思いつくのにだいぶ時間がかかってしまいました…。

しかしペイント中に筆が現れるようにするだけで、クオリティや描き心地がずいぶん上がったように感じたのでやりがいがありました!

次回の記事その④(ラスト)では「描いた線にそって道を生成する方法」について紹介します。

→力尽きて断念しました。。