マンガで使う!初めての Unreal Engine【UE4 Manga Anime Illustration Dive Online】

428.3K Views

February 21, 22

スライド概要

講演動画はこちら:
https://youtube.com/playlist?list=PLr_Cbd4sUDTwNRp41AqCEvoVmopnoUFXi

講演内容:
昨今のマンガ業界ではデジタル化が進み、多くの方がPCやタブレットでのマンガ制作を行われているかと思います。
そんな中、3Dをマンガで使ってみたい、もしくはちょっと使っているけどより活かしていきたい、という方に向けて、本講演ではマンガ制作における Unreal Engine の活用方法をご紹介させて頂けたらと思います。
週刊少年ジャンプの読み切りで「黒子のバスケ」の作者、藤巻忠俊先生が実際に活用した事例を元に、 Unreal Engine をマンガで使う美味しいところについてお話させて頂けたらと思います。
https://twitter.com/shiba_zushi/status/1472803697210327040

講演者:
斎藤 修 (Epic Games Japan)
https://twitter.com/shiba_zushi

イベントについてはこちら:
https://www.unrealengine.com/ja/blog/epicgamesjapan-manga-anime-illustration-dive-online-01

profile-image

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

マンガで使う! 初めてのUnreal Engine Epic Games Japan 斎藤 修 Technical Artist Developper Relations

2.

自己紹介 斎藤 修 Epic Games Japan Technical Artist Developer Relations https://twitter.com/shiba_zushi ●Unreal Engineのサポートをしています ●以前は家庭用ゲームの開発などしてました ●Unreal EngineとHoudiniとマンガが好物です

3.

自己紹介 ●最近の制作物

4.

自己紹介 斎藤 修 Epic Games Japan Technical Artist Developer Relations https://twitter.com/shiba_zushi ●Unreal Engineのサポートをしています ●以前はとある大型ゲームタイトルの開発してました ●Unreal EngineとHoudiniとマンガが好物です ●むかし漫画描いてました

5.

漫画

6.

漫画描くのって大変ですよね

7.

僕も 若かりし頃 少なからず漫画を描いてきたのですが……

8.

漫画って 描くの マジで大変

9.

漫画って 描くの マジで大変 何とか効率化 できないものか

10.

特に 最近流行りの3Dとか 簡単に使えたり しないかなー

11.

マンガで使う! 初めてのUnreal Engine Epic Games Japan 斎藤 修 Technical Artist Developper Relations

12.

https://twitter.com/shiba_zushi/status/1472803697210327040?s=20 黒子のバスケの藤巻先生が「キルアオハル」という 読み切りで導入したUnreal Engine

13.

そもそもゲームエンジンって?? Unreal Engineって何??

14.

ゲームエンジンとは ゲーム開発を推進するエンジン つまり ゲームを作る為のアプリの事です

15.

Unreal Engineには ゲーム制作に必要な様々な機能が集約されており このアプリ一つで あらゆるゲームを開発可能となっております

16.

https://www.epicgames.com/fortnite/ja/home フォートナイトもUnreal Engineで作られています

17.

Unreal Engineを使用して これまでに 様々なゲームが多数リリースされてきました

18.

漫画 Q. 何で漫画で"ゲーム"エンジン?

19.

https://youtu.be/lQXwvfqm1S8 最近 Unreal Engine 5による マトリックスのデモが公開されました

20.

最近のゲームって 本当にめちゃくちゃ進化しましたよね

21.

https://youtu.be/lQXwvfqm1S8 進化しすぎて ゲーム以外も作れちゃいそうですよね

22.

はい 実は実際に作られております 映像 アニメ 車 建築 etc…

23.

https://youtu.be/lQXwvfqm1S8 ゲームを作る技術は すでにゲームだけに留まらず 「リアルタイム技術」として様々に利用されています

24.

漫画 Q. 何で漫画で"ゲーム"エンジン?

25.

漫画 Q. 何で漫画で"ゲーム"エンジン? A. "ゲームの枠を超えた"技術だから

26.

Q. なぜ "Unreal Engine" がオススメなの?

27.

1. 導入しやすく 使いやすいツール

28.

1. 導入しやすく 使いやすいツール 2. 無料かつ豊富なアセット

29.

1. 導入しやすく 使いやすいツール 2. 無料かつ豊富なアセット 3. 覚えたスキルが無駄にならない

30.

1. 導入しやすく 使いやすいツール 2. 無料かつ豊富なアセット 3. 覚えたスキルが無駄にならない

31.

FREE FOR CREATORS 身も蓋もない一言で言いますと 無料だからです

32.

Unreal Engine は 2014年に一般公開 2015年に無料化 Epic Gamesアカウントを無料登録すれば 誰でもUEをダウンロード・利用可能 https://www.unrealengine.com/ja/unreal

33.

https://www.unrealengine.com/ja/faq 漫画やイラストで使う分には Unreal Engineは商用利用含めて完全に無料です!

34.

1. 導入しやすく 使いやすいツール 2. 無料かつ豊富なアセット 3. 覚えたスキルが無駄にならない

35.

プログラマー ゲームデザイナー 2Dアーティスト サウンド 3Dアーティスト デバッガー

36.

プログラマー ゲームデザイナー 2Dアーティスト サウンド 3Dアーティスト あらゆる人が触るツール! デバッガー

37.

あらゆる人がストレスなく触れるようにデザインされている為 非常に使いやすいです

38.

https://www.unrealengine.com/ja/developer-interviews/egj-interview-manga-tadatoshi-fujimaki-01 初3Dの藤巻先生がUnreal Engine導入までに かかった時間は約12時間

39.

Q. なぜ "Unreal Engine" がオススメなの? A. ①導入しやすく使いやすいから

40.

1. 導入しやすく 使いやすいツール 2. 無料かつ豊富なアセット 3. 覚えたスキルが無駄にならない

41.

3Dを始めるに当たって非常に大きな問題の一つが 「モデル制作コスト」です

42.

慣れないツールで 作り方がよくわからず 時間がかかった割にあまり使えないモノが出来あがったり (画像は僕の初スカルプト作品です)

43.

誰かに頼もうにも モデルを作れる人は中々捕まらないし オリジナルモデルはお金もかかる

44.

FREE https://quixel.com/megascans そこでUnreal Engineが提供する 驚愕の無料アセット群 Megascans

45.

FREE https://quixel.com/megascans/home ハリウッド映画などでも使用されている最高品質のアセットが Unreal Engineで使う限り無料

46.

https://www.youtube.com/watch?v=ParMLadMTaQ 使用例としては こんな感じで ハイスピードレイアウトして頂いたり

47.

FREE https://www.unrealengine.com/marketplace/ja/product/scarecrow 並べるのもめんどく… という方には すでにシーンになっているものも配布されております

48.

FREE https://www.unrealengine.com/marketplace/ja/product/megascans-goddess-temple 並べるのもめんどく… という方には すでにシーンになっているものも配布されております

49.

FREE https://www.unrealengine.com/marketplace/ja/product/c26355353df843289701d632508d4fb0 並べるのもめんどく… という方には すでにシーンになっているものも配布されております

50.

https://www.unrealengine.com/marketplace/ja/store そして それらのシーンがダウンロードできる UEマーケットプレイス こちらもすごい

51.

https://www.unrealengine.com/marketplace/ja/store こちらも非常に高品質なコンテンツ(無料含む)が それはもう大量にあります

52.

https://www.unrealengine.com/marketplace/ja/store こちらも非常に高品質なコンテンツ(無料含む)が それはもう大量にあります

53.

FREE https://www.unrealengine.com/marketplace/ja/store こちらも非常に高品質なコンテンツ(無料含む)が それはもう大量にあります

54.

FREE https://www.unrealengine.com/marketplace/ja/product/archvis-interior-rendering こちらも非常に高品質なコンテンツ(無料含む)が それはもう大量にあります

55.

FREE https://www.unrealengine.com/marketplace/ja/product/city-subway-train-modular こちらも非常に高品質なコンテンツ(無料含む)が それはもう大量にあります

56.

FREE https://www.unrealengine.com/marketplace/ja/product/factory-environment-collection こちらも非常に高品質なコンテンツ(無料含む)が それはもう大量にあります

57.

FREE https://www.unrealengine.com/marketplace/ja/product/soul-cave こちらも非常に高品質なコンテンツ(無料含む)が それはもう大量にあります

58.

FREE https://www.unrealengine.com/marketplace/ja/product/6bb93c7515e148a1a0a0ec263db67d5b こちらも非常に高品質なコンテンツ(無料含む)が それはもう大量にあります

59.

FREE https://www.unrealengine.com/marketplace/ja/product/soul-city こちらも非常に高品質なコンテンツ(無料含む)が それはもう大量にあります

60.

https://www.unrealengine.com/ja/developer-interviews/egj-interview-manga-tadatoshi-fujimaki-01 もちろん無料アセットのみならず 有料のアセットも非常に品質が高く 藤巻先生も見開きで使用された学校などのアセットを購入しています

61.

https://www.unrealengine.com/marketplace/ja/product/japanese-school-collection-5-asset-packs-over-200-assets もちろん無料アセットのみならず 有料のアセットも非常に品質が高く 藤巻先生も見開きで使用された学校などのアセットを購入しています

62.

https://youtu.be/lQXwvfqm1S8 将来的には こちらのマトリックスのサンプルも 無料配布される予定があります

63.

Q. なぜ "Unreal Engine" がオススメなの? A. ②無料かつ豊富なアセットがあるから

64.

1. 導入しやすく 使いやすいツール 2. 無料かつ豊富なアセット 3. 覚えたスキルが無駄にならない

65.

Unreal Engineはあらゆる業界で プロが使用しているツールです

66.

https://www.unrealengine.com/ja/ 実はゲームを作ってみたかった

67.

https://www.unrealengine.com/ja/ 映像制作してみたかった

68.

https://www.unrealengine.com/ja/ 建築デザインに興味があった

69.

https://www.unrealengine.com/ja/ 理想の車を走らせてみたかった

70.

https://www.unrealengine.com/ja/ ライブ演出やりたかった

71.

https://www.unrealengine.com/ja/ Unreal Engineを漫画で覚えれば ついでに色々な可能性も手に入ります

72.

https://twitter.com/shiba_zushi/status/1463448380944764931?s=20 私生活でもUnreal Engineの技術は活かすことができます

73.

少し生々しい話ですが 実際に様々な業界からUnreal Engineの技術が求められております

74.

https://www.unrealengine.com/marketplace/ja/store 漫画で使用したモデルをマーケットプレイスで販売する なんてのも良いかもしれません

75.

Q. なぜ "Unreal Engine" がオススメなの? A. ③覚えたスキルが無駄にならないから

76.

1. 導入しやすく 使いやすいツール 2. 無料かつ豊富なアセット 3. 覚えたスキルが無駄にならない

77.

前置きはいいよ 実際どう使うんだよ

78.

https://docs.unrealengine.com/4.27/ja/Basics/InstallingUnrealEngine/ ではまずはUnreal Engineのインストール方法から

79.

https://qiita.com/EGJ-Osamu_Saito/items/089d601a075f57e28ae1 より漫画家さんイラストレーターさん向けにわかりやすい手順を ブログ記事で書かせて頂きました

80.

ブログ記事に従い Unreal Engineのインストールと起動を行うと こちらの画面になっていることかと思います

81.

あとは カメラを動かして 画角を決めて ちょっと物を追加して スクショを撮って お気に入りのツールに持っていく……

82.

あとは カメラを動かして 画角を決めて ちょっと物を追加して スクショを撮って お気に入りのツールに持っていく……

83.

あとは カメラを動かして 画角を決めて ちょっと物を追加して スクショを撮って お気に入りのツールに持っていく……

84.

あとは カメラを動かして 画角を決めて ちょっと物を追加して スクショを撮って お気に入りのツールに持っていく……

85.

あとは カメラを動かして 画角を決めて ちょっと物を追加して スクショを撮って お気に入りのツールに持っていく……

86.

以上です

87.

「いやいやいや……」 と思われたかもしれませんが 適当な事を言っているわけではありません…!

88.

1. カメラ調整 4. スクショ 2. 画角調整 5. 各ツールへ 3. モノ追加 6. 嬉しい インストールして頂き 今の一連の操作だけ覚えて頂ければ 少なくとも好きなアングルで画像を撮って使うことが可能です

89.

FREE https://www.unrealengine.com/marketplace/ja/product/factory-environment-collection そうすると例えば 先程のこちらの無料アセットをダウンロードして…

90.

同様の手順で 3Dの一番美味しいところがすぐ使えます

91.

https://twitter.com/aizen76/status/1233623565225693185?s=20 https://twitter.com/ruyo_h/status/1437180470026911744?s=20 もちろん Unreal Engineをさらに習得することで アウトライン化したり嘘パースをかけたり ということも可能です

92.

1. カメラ調整 4. スクショ 2. 画角調整 5. 各ツールへ 3. モノ追加 6. 嬉しい しかしまずは こちらの手順 こちらだけを覚えて頂くだけで

93.

FREE この豊富な無料アセット群を活かすことが可能です

94.

https://www.youtube.com/watch?v=ParMLadMTaQ 並べる事さえできれば こちらのハイスピードレイアウトも可能です

95.

りんご適当に 並べといて 欲しいです 承知 これくらいであれば 例えばアシスタントさんの手が空いた時に 「ちょっと適当に3Dシーン作っといてくれない?」 みたいなお願いも しやすいですよね?

96.

https://www.unrealengine.com/ja/developer-interviews/egj-interview-manga-tadatoshi-fujimaki-01 まずはお手軽な導入 Unreal Engineはそれが可能です

97.

もうすこし 詳しく とはいえ…… もうちょっと丁寧な情報も知りたいですよね

98.

https://www.unrealengine.com/ja/developer-interviews/egj-interview-manga-tadatoshi-fujimaki-01 藤巻先生もおっしゃられている形で Unreal Engineは機能が多いので 漫画に役立つ機能だけざっと知りたい ということがあるかと思います

99.

それでは ここからは実際に「キルアオハル」で こちらのシーンをどのような手順で作画したかを ステップバイステップでご紹介させていただけたらと思います (画像使用の許可を藤巻先生 ジャンプ編集部より頂いております ありがとうございます!)

100.

https://www.unrealengine.com/marketplace/ja/product/japanese-school-collection-5-asset-packs-over-200-assets 使用したアセットは先程ご紹介した こちらの学校アセットです

101.

https://www.unrealengine.com/marketplace/ja/product/japanese-school-collection-5-asset-packs-over-200-assets マーケットプレイス製品は関連アセットが一通り入ってますので コスパで言うとめちゃくちゃに良いと思います

102.

https://www.unrealengine.com/marketplace/ja/event-sale また マーケットプレイスは頻繁にセールしてますので セールタイミングだとお得です

103.

製品を購入すると エピックゲームズランチャーから ダウンロードできるようになります

104.

今回の製品はなにかのプロジェクトにアセットを追加する形になりますので プロジェクトが一つもない場合は作っておく必要があります

105.

プロジェクトを開くと各シーンがあります これをレベルと言います

106.

レベルは ゲームでの1ステージみたいなものです 最初だけ開くのに少し時間がかかります (2回目以降は事前準備が済んで早くなります)

107.

レベルがフォルダのどこにあるかわからない場合は フィルタで見つけ出すことが出来ます

108.

教室のレベルを開いてカメラを動かし アングルを合わせます カメラ操作は"右クリック+矢印キー"がオススメです

109.

邪魔なものを選択して アウトライナで非表示にします

110.

画角はここで調整できます

111.

微調整したい場合は カメラスピードを調整しましょう

112.

いくつかアングルを見比べる為にショートカットに登録すると便利です 数字のキーでぴょんぴょん飛べます (これらの機能はalweiさんの講演でより詳しく解説されます!)

113.

また ウィンドウ透過ツールを使うと下書きに合わせるのに便利です (Winでは「NaiNai」 Macでは「Afloat」を使っています)

114.

アセットを動かしたり 追加したり 削除したり 下書きに合わせて教室の状況を調整します

115.

魚眼をかけます アウトプットログを表示して コマンドを打ちます

116.

https://qiita.com/EGJ-Osamu_Saito/items/ee5568ebd0c2c28fb90c 魚眼の詳細はこちらを御覧ください また あかざ様の講演でもっと簡単な方法も紹介されます

117.

モブを置きます 便利なモブパックがあるのでダウンロードして配置します

118.

FREE https://www.unrealengine.com/marketplace/ja/product/twinmotion-posed-humans モブはこちらを無料でダウンロード可能です

119.

フォリッジツールなど使うと 簡単に人混みが作成可能です

120.

シミュレーションを利用して モデルを配置することも可能です

121.

https://qiita.com/EGJ-Osamu_Saito/items/9119a343dde9c61e2ce0 詳細はこちらを御覧ください

122.

Unreal Engineはモデリングも可能です 形を自然に歪ませたり 一部切り取ったりなどが簡単にできます

123.

Unreal Engineはモデリングも可能です 形を自然に歪ませたり 一部切り取ったりなどが簡単にできます

124.

https://youtu.be/OEg_DNvTLJc?t=885 詳細はこちらを御覧ください

125.

3Dシーンが完成したのでスクショを撮ります 邪魔なアイコンは"ゲームビュー"で消えます

126.

スクショの解像度は設定で倍率が上げられます 原稿の解像度に合わせてご調整いただけたらと思います

127.

スクショは3回撮ります ライティングあり 詳細ライティング ワールドノーマル です

128.

ライティングあり ワールドノーマル 詳細ライティング 「ライティングあり」はトレス用に 「詳細ライティング」はトーン用に 「ワールドノーマル」はライン用に使います

129.

あとは作画作業です (今回はCLIP STUDIO PAINTで作業しました)

130.

下書きに合わせて

131.

ワールドノーマルを配置し

132.

ライン化

133.

ライン化はクリスタのレイヤー効果(ライン抽出)や LT変換を使っています

134.

https://twitter.com/aizen76/status/1233623565225693185?s=20 alweiさんのPPLineDrawingも非常によく使います (使い方の詳細はalweiさんの講演でご説明されます!)

135.

次に 詳細ライティングを配置して

136.

モノクロ2値にして トーン化

137.

トレス調整用にライティングありを配置して

138.

線画修正

139.

絵に馴染むように加筆

140.

仕上げにトーンを調整して……

141.

完成です!

142.

わーい!

143.

いかがでしたでしょうか? Unreal Engineを漫画で活かすイメージが湧いてきましたでしょうか?

144.

まとめ

145.

漫画 Unreal Engineは非常に高機能なゲームエンジンです

146.

今回ご紹介させていただいた機能以外にも 本当に便利な機能が多数ございます

147.

しかしまずは 「無料アセットを開いてスクショを撮る」 ここから3Dの第一歩目を始めてみるのはいかがでしょうか?

148.

https://www.unrealengine.com/ja/ そして もし さらに興味が湧けば 様々な機能へ挑戦していく事も可能です

149.

https://www.unrealengine.com/ja/blog/ue4-env ironment-art-dive https://www.unrealengine.com/ja/blog/epicgam esjapan-onlinelearning-13 https://www.unrealengine.com/ja/blog/epicgamesjapan-onlinele arning-06 手前味噌で恐縮ですが 先程の作例の詳細を知りたい方は 是非イベントアーカイブをご覧ください

150.

https://www.unrealengine.com/ja/onlinelearning-courses また Unreal Engineはオンラインで学べる様々な学習コンテンツも ご用意しておりますので こちらも是非見てみて下さい

151.

ぜひぜひ皆さま Unreal Engineをお楽しみいただけましたら幸いです

152.

ご視聴ありがとうございました