Unreal Engineでイケてるイラストを描くためのノウハウ大放出!

10.5K Views

May 12, 22

スライド概要

UE4 Manga Anime Illustration Dive Onlineで講演した際のスライドです。

講演アーカイブ
https://www.youtube.com/watch?v=QuYIkSozV6w

profile-image

関西を拠点にUnreal Engineを専門とするゲームスタジオ、Indie-us Games代表&クリエイター。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Unreal Engineでイケてるイラストを 描くためのノウハウ大放出! 株式会社Indie-us Games 代表クリエイター alwei

2.

alweiについて Indie-us Games代表。Unreal Engine専門家。 Twitterによくいます。→ @aizen76 イラストレーターじゃありません。 絵は完全に趣味です! あまり上手くないので生温かく見守ってください。

3.

今回制作したイラスト

5.

どの部分がUnreal Engine だと思いますか??

6.

実際のUE4画面

7.

実は9割以上Unreal Engine でのレンダリングです!!

8.

解説の前に… 今回解説した方法が正解というわけではありません! イラストを描く方ならわかると思いますが、 そもそもイラストの描き方に正解はありません。 『Unreal Engineを使うとこんな凄いことができるんだ!』 という気持ちで見ていただけると幸いです。

9.

お品書き 1. 2. 3. 4. 5. 6. イラストにUnreal Engineを使うメリット カメラと構図を設定する方法 解像度とポストプロセスについて コントロールリグでポージング スクリーンショットの撮り方 CLIP STUDIO PAINTで仕上げ

10.

イラストにUnreal Engine を使うメリット

11.

レンダリングがめっちゃ綺麗! 特になにもしなくてもアセットを配置するだけで綺麗! 基本操作だけ覚えればすぐに使える!

12.

クオリティの高いマケプレアセット ↓ Soul: City ↑ Infinity Blade: Grass Lands

13.

超ハイクオリティ Megascansアセット

14.

Epic Games製の アセットは全て無料!

15.

現代日本の背景アセットなら… Nimikoさんという方が 大量の現代日本を扱う背景アセット を販売中!特に学校関連が多し。 学校、教室、トイレ、体育館、職員 室、保健室、食堂、コンビニ、ゲー セン、銭湯、住宅街、商店街、公園、 オフィス、居酒屋、回転寿司屋… 大体なんでもある!!

16.

もちろん自分でレベルデザイン してもオッケー!!

17.

レベルデザイン(背景設計) 基本操作だけでも覚えれば十分に可能。 YouTubeで『Speed Level Design UE4』などで 検索すると即興でレベルを作る動画が沢山あります。 ゲームではないので、ある程度雑に組んでも 後々問題になることは少ないので気軽に!

18.

今回はこちらの有料アセットを活用

19.

イラストレーターさん視点で考える 1. 2. 3. 4. 5. 6. 最小限のことだけを覚えればOK! アセットの権利は全てクリア済み! モデリングはできなくても大丈夫! カメラでの構図作成がとても楽チン! 人物のポージングもUE4でつけられる! 何よりもUE4自体が完全無料!

20.

カメラと構図を設定する方法

21.

カメラ = ビューポート ここで言うカメラとはUE4のCameraActorや CineCameraActorのことではなく、 ビューポートという3D描画領域のこと。 用語としてややこしくなりますので、 ここではあえて『カメラ』と統一します。

22.

まずはカメラを動かして構図探り レベルがある程度出来ている場合は、 カメラを動かして構図を探ります。 構図を探る際にアクターのアイコンなど 邪魔になりそうな情報は『Gキー』で ゲームビューにしておくと見やすい。

23.

パースを変える 画角を変えることで広角レンズや 望遠レンズのような絵も可能です。 奥行きのある絵を作りたいのなら 画角を100以上に設定してみることをオススメ! パース感をなくしたいのであれば 画角を30以下にします。

24.

三分割法を活用する イラストの構図を作る時に三分割線があると非常に便利。 シネマティック ビューポートにしてからグリッド(3x3)を選択

25.

カメラブックマーク 構図が決まったらカメラをブックマークしましょう。 ブックマークはいつでもす ぐに元のカメラ位置に戻せ るので作業しやすい。 複数の構図を探る時にも構 図比較しながら、一番いい 構図を探る時にも便利!

26.

解像度とポストプロセスについて

27.

ポストプロセスとは? わかりやすく言えばPhotoshopのフィルターのようなもの。 一度レンダリングした画像を更に加工して 魅力的な絵を作るために便利なツール。 ポストプロセスボリューム を配置することで簡単に利用可能。 Infinite Extent(unbound)を チェックすることでどの位置にカ メラがあっても効果が発生します。

28.

解像度について ポストプロセスはレンダリング解像度による 影響をモロに受けてしまいます。 基本的には高解像度の方が当然綺麗ですが、重い! GPU(できればGeforce)の良いモノがあるのがベスト。 4K解像度のモニターが理想ですが、ちょっとクセあり。 詳しくは後ほど解説。

29.

スクリーン比率 手軽にレンダリング解像度を上げる方法。 設定は『50~200』の間で設定可能。 『1920x1080』の解像度であれば、 『200』を設定すると『3840x2160』相当に アップスケーリングされます。 作業中は『200』にしておくことをオススメ!

30.

リアルタイム無効化 静止画を作りたい場合、 画面変化してほしくない時もあります。 『リアルタイムのオーバーライドを無効化』 にしてから『リアルタイム』のチェックを外す。 相乗効果としてGPUの負荷も落ちます。 数値を動かしたりカメラを動かすと更新されます。

31.

ネイティブポストプロセス 1. 2. 3. 4. ブルーム(ディフュージョン) フィルムグレイン 色収差 PPLineDrawing(線画フィルター)

32.

ブルーム(ディフュージョン)

33.

フィルムグレイン

34.

色収差

35.

PPLineDrawing(線画フィルター)

36.

簡単な導入方法 GitHubの下記URLからダウンロード https://github.com/alwei/PPLineDrawing

37.

簡単な導入方法 DLしたプロジェクトから導入したいプロジェクトの Content以下の場所へファイルをコピー

38.

簡単な導入方法 追加したポストプロセスボリュームに選択し、 ポストプロセスマテリアルのカテゴリーを開いて、 Arrayの中に配列を追加して、アセットリファレンスを選択。 マテリアル一覧から、 PPI_LineDrawing を選択すると追加完了!

39.

Chameleon ポストプロセス 有料アセットですが、超高性能なポストプロセスエフェクト集。 イラストに活用するならこれだけは買ってほしい一品。

40.

簡単な導入方法 アセットをプロジェクトへ追加後、 中に入っているChameleonという BPアクターを適当な位置へと D&Dで追加するだけ!

41.

Chameleon ポストプロセス 1. 2. 3. 4. Blur(ぼかし) Kuwahara(絵画調フィルター) Look Color Grading(色調補正) Sharpen(シャープ化)

42.

Blur(ぼかし)

43.

Kuwahara(絵画調フィルター)

44.

Look Color Grading(色調補正)

45.

Sharpen(シャープ化)

46.

コントロールリグでポージング

47.

コントロールリグとは UE4標準のアニメーションを効率よく作るための仕組み。 自力でリグを作らなくても Epic Gamesが提供している サンプルを使うだけで、 簡単にポーズを作成して キャラのアタリに使えます!

48.

簡単な導入方法 マーケットプレイスからコントロールリグマネキンで検索 ダウンロード完了後にプロジェクトを作成。

49.

簡単な導入方法 プロジェクトを作成後、導入したいプロジェクトの Content以下の場所へファイルをコピー

50.

簡単な導入方法 プロジェクトを起動後にメニューから編集→プラグイン Control Rigで検索して、有効にチェックして再起動

51.

簡単な導入方法 /Content/ControlRig/Mannequin/Character/ControlRig/ Mannequin_ControlRig Mannequin_Female_ControlRig どちらかをレベル上に配置 自動的にレベルシーケンスが作成

52.

Kawaiiキャラでポーズをつけたい!! VRM4Uがお手軽。 VRM4U自体が独自の コントロールリグを 持っているので比較的 簡単に導入が可能! https://ruyo.github.io/VRM4U/06_controlrig/

53.

リアル調ならMetaHuman 少しハードルは高い。 が、多種多様な人間を 作成可能なので応用が 非常に効きやすい。 あえて挑戦したい人は やってみる価値あり。 https://www.youtube.com/watch?v=2k2gNc_7CT0

54.

スクリーンショットの撮り方

55.

F9キーで撮影 F9を押すとビューポートを直接撮影。 現在開いているビューポート(カメラ)のサイズを そのまま撮影し、保存してくれる。 右下に保存した場所が表示されるので、クリックすると フォルダーを直接開く。

56.

高解像度スクリーンショットで撮影 名前の通り解像度の高いスクリーンショットを撮影可能。

57.

マスク機能 高解像度SSはマスク機能が使えます。 マスクしたいアクターを選択後、 Render Custom Depth Passに チェックを入れておく。

58.

DPI設定 エディタの環境設定でビューポートスケーリングを変更 するとモニター側の解像度によりスクリーンショットの サイズも変化するので注意しておく必要あり。 4Kモニター等でWindowsの スケーリング設定を変えている 場合には特に注意。

59.

F9キー ■メリット • 見えてるものがそのまま撮影できる • ポストプロセスの結果が変化しない ■デメリット • 高い解像度の撮影が難しい • マスク機能が使えない

60.

高解像度スクリーンショット ■メリット • 高い解像度で撮影ができる • マスク機能が使える ■デメリット • ビューポートの結果がそのまま撮影できない • ポストプロセスの結果が大きく変化する

61.

CLIP STUDIO PAINTで仕上げ

62.

CLIP STUDIO PAINT 通称クリスタ。 イラストレーターさんにはお馴染みのペイントソフト。 UE4で撮ったスクショを元に加工する。 キャラなどはこっちで描く。 やっていることは単純なので、 Photoshopやそれ以外のペイントソフトでも 全く問題ありません。

63.

まとめ Unreal Engineでイラストを描くの難しくない! 特に背景クオリティは一気に上がります。 モデリングはしなくていいので配置だけやりましょう。 有料無料含めて非常に沢山のアセットがあります。 権利的に全てクリアされてるので安心して使えます。 撮影したものをフォトバッシュにするのも多いにアリ。

64.

まとめ ポストプロセスによる加工は非常に便利。 ペイントソフトだけでは出来ないような加工も可能。 Chameleon ポストプロセスが超優秀! コントロールリグでキャラのポージングも自由自在。 マスクしてペイントソフトでアタリとして使える! スクショはコツさえわかればすぐに使いこなせます。

65.

ご清聴ありがとうございました! 質問あればお答えします!