ゲーム内で写真撮影ができる機能「フォトモード」を、自分のゲームに実装してみましょう！本記事では、フォトモードをゲームに導入するUnreal Engine用アセット『Advanced Photo Mode』の使い方を紹介します。加えて、フォトモードと組み合わせるためのポーズ機能の実装方法も解説します。
フォトモードを追加するUEアセット「Advanced Photo Mode」でハイクオリティなスクショが撮り放題！導入方法やポーズ機能の作り方を解説
TEXT / wvigler
EDIT / 神谷 優斗
目次
この記事はUnreal Engine バージョン5.2.0を利用して書かれています。
今回使用するアセットを紹介
『Advanced Photo Mode』
『Advanced Photo Mode』は、ゲームを一時停止してスクリーンショットを撮影する機能「フォトモード」をゲームに追加するアセットです。
実装されているフォトモードでは、移動や回転での細かい撮影範囲の調整のほか、カメラ設定の調整、ポストプロセスの適用、キャラクターメッシュの表示・非表示などが可能です。
Advanced Photo Modeを使用して撮影したスクリーンショット（画像はマーケットプレイスページより引用）
また、アセットには撮影・保存した写真の閲覧ができるギャラリーモードも搭載されています。
「Advanced Photo Mode」公式デモ動画
『SICKA MANSION』
また、今回は撮影用の背景素材として、環境アセット『SICKA MANSION』を使用します。アセットには、デモマップとして『MAP_Mansion』『MAP_Cellar』の2つのデモマップが用意されています。
（画像はマーケットプレイスページより引用）
『MAP_Mansion』（画像はマーケットプレイスページより引用）
『MAP_Cellar』（画像はマーケットプレイスページより引用）
環境素材を中心としたアセットでありながら、サンプルゲームも用意されています。ただし、今回は背景素材としてのみ利用します。
『SICKA MANSION』ダウンロードページもちろん、SICKA MANSIONではないほかの環境アセットを利用しても構いません。今回はあくまでフォトモードの背景として使用します。
アセットを使う前の事前準備
SICKA MANSIONは、独立したプロジェクト形式のアセットです。そのため、今回は1から新しくプロジェクトを作ることはせず、SICKA MANSIONのプロジェクトを使用します。
まずは、SICKA MANSIONのプロジェクトを作成しましょう。Epic Games Launcherからマーケットプレイスページにアクセスし、「プロジェクトを作成する」をクリックすると、アセットのダウンロードからプロジェクトの作成までが自動的に行われます。
プロジェクトのバージョンは最新版の5.2、プロジェクト名はデフォルトのものを選択した
作成したプロジェクトにAdvanced Photo Modeを追加します。同じくマーケットプレイスページから「プロジェクトに追加」ボタンをクリックし、追加先として先ほど作成したプロジェクトを選択しましょう。
追加が完了したら、Unreal Engineを起動してプロジェクトを開きましょう。コンテンツドロワーを開き、「コンテンツ」フォルダの下に「AdvancedPhotoMode」と「SICKA_mansion」の2つのフォルダがあれば成功です。
本来であれば、この段階で入力設定をAdvanced Photo Modeのデモマップに対応するよう変更します。ただ、今回はSICKA MANSIONのプロジェクトのデフォルト設定とAdvanced Photo Modeのデモマップで使用する入力設定がほとんど一致しています。そのため、特に変更を行う必要はありません。
wvigler
プロジェクトが『SICKA MANSION』由来のものでない場合、入力設定を変更しないとグレイマンを動かすことができません。
下の画像を参考に「プロジェクト設定」から入力設定を行いましょう。
Advanced Photo Modeに対応した入力設定
まずは、Advanced Photo Modeのデモマップでフォトモード機能を使ってみましょう。「コンテンツ > AdvancedPhotoMode > Demo > Map」の中にある「L_ThirdPersonExampleMap」をダブルクリックし、デモマップを開きます。
「L_ThirdPersonExampleMap」には、撮影のための小道具がいくつか置いてある
プレイを開始すると、グレイマンを操作することができます。さらに「P」キーを押すと、ゲーム内の時間が停止しフォトモードに移行します。
フォトモードでは、UIを使用して撮影位置やカメラ画角の調整、視覚効果の適用などが可能です。「X」キーでスクリーンショットを撮影、Escキーでフォトモードをキャンセルします。
カメラの動きはUIのクリックのほか、UEエディタとほぼ同じ操作で制御することもできる
ポストプロセスや被写界深度など、かなり広い項目にわたって設定することが可能だ
プレイ中に「G」キーを押すと、ギャラリーモードに移行します。ギャラリーモードでは、これまでに撮影した写真を閲覧することができます。
なお、写真はゲームを終了しても保存されたまま残る
基本的な機能を把握したら、次はSICKA MANSIONのマップでAdvanced Photo Modeを使ってみましょう。
『Advanced Photo Mode』を好きなマップで使ってみよう
フォトモード機能をほかのプロジェクトへ移植するのが簡単である点も、Advanced Photo Modeの長所です。
「コンテンツ > SICKA_mansion > Maps」にある、SICKA MANSIONのメインマップ「MAP_Mansion」で、Advanced Photo Modeを使用してみましょう。「MAP_Mansion」をダブルクリックして開きます。
マップを開いたら、右下の「ワールドセッティング」タブから一番上にある「Game Mode→ゲームモードオーバーライド」の項目を「ThirdPersonGameMode」に変更します。これで機能の移植は完了です。
「ワールドセッティング」タブが見つからない場合、左上の「ウィンドウ」から「ワールドセッティング」をクリックして表示できる
プレイを開始し、先ほどと同じようにフォトモードが使えれば、機能の移植が成功しています。
「P」キーを押してフォトモードに、「G」キーを押してギャラリーモードに移行できていれば問題ない
Advanced Photo Modeに簡単なポーズ機能を組み込んでみよう
現状のプレイヤーキャラクターは、フォトモード中にアニメーションを一時停止しているだけであり、少し物足りません。そこで、フォトモードでも一般的な、キャラクターがポーズをとる機能を追加してみましょう。
まずは、グレイマンのポーズにあたるアニメーションを作成します。グレイマンのアニメーションは「コンテンツ > AdvancedPhotoMode > Demo > ThirdPersonTemplate > Mannequin > Animations」に格納されています。
元々あるアニメーションを複製し、それを基にポーズのアニメーションを作成しましょう。「ThirdPersonIdle」を右クリックし、メニューから「複製」をクリックして複製します。そして、複製したアニメーションをダブルクリックし、エディタ画面を開きます。
名前は自由に付けてよい。ここでは「Anim_VSign」という名前にした
エディタ画面上で、左下の画像で示した位置にマウスカーソルを合わせて右クリックしましょう。現れたメニューから「フレーム1からフレーム79を削除」を選択します。これで、1フレーム目以外のアニメーションが削除され、長さ1フレームのアニメーション（つまりポーズ）ができます。
かなり正確にマウスカーソルを合わせないと1フレーム目を選択できないため、注意しよう
続けて、ポーズを付けていきましょう。ビューポート上側の「キャラクター→ボーン→すべての階層」をクリックすると、グレイマンの動きを制御する「ボーン」がすべて表示されます。
エディタ画面からポーズを作成する場合は、ボーンをすべて表示させた方がやりやすいだろう
ボーンをクリックして選択すると、3Dギズモを使ってボーンを動かすことができます。
ボーンを動かすことでポーズを作成できますが、このままでは保存されないので注意してください。画面上部にある「+キー」ボタンを押すことで、ポーズを付けたボーンの情報をキーフレームとして保存できます。
「+キー」を押さずにエディタを閉じると、せっかく付けたポーズが元の状態に戻ってしまう。こまめに記録しておこう
Ctrl+Zによるやり直しもできるので、あまり恐がらずにポーズを付けていこう。もし失敗してもアニメーションの複製からやり直せば問題ない
ポーズの作成例
ポーズが完成したら、保存してアニメーションのエディタを閉じましょう。そして、「コンテンツ > AdvancedPhotoMode > Demo > ThirdPersonTemplate > ThirdPersonBP > Blueprints」にある、グレイマンのブループリント「ThirdPersonCharacter」をダブルクリックで開きます。
コンパイルの警告が出ていますが、これは入力設定に起因するものであるため、今は放置しても問題はありません。
今回実装するポーズ機能は、「Tabキーでポーズを取り、Escキーでポーズ状態を解除する」仕組みにします。TabキーとEscキーの入力が必要なので、まずはイベントグラフ上で右クリックし、ノード一覧から「Tab」「Esc」のノードを追加します。
続いて、左上のコンポーネントタブから「Mesh(CharacterMesh0)」をドラッグし、先ほど追加した2つのノードの近くにドロップします。これで「Mesh」と書かれたノードが出現するはずです。
続けて、下の画像の通りノードを繋ぎましょう。
赤く囲った部分は正確に指定しないと正しく動作しないため、気を付けよう
ノードを繋ぎ終えたら、ポーズ機能の実装は完了です。プレイしてTabキーでポーズが取れること、そしてEscキーで元の状態に戻れることを確認しましょう。
フォトモード中はウィジェットの入力が優先されるため、Tabキーでポーズを変更できなくなる。フォトモードに入る前に変更しておこう
以上で、Advanced Photo Modeにポーズ機能を追加することができました。
※なお、キャラクタークラスに「BPC_PhotoMode」コンポーネントを追加することで、デモキャラクター以外のキャラクターでフォトモードを使用できます
発展編：Advanced Photo Modeをもっと活用しよう
ここから先は発展編です。この章では、Advanced Photo Modeや先ほど実装したポーズ機能をより有効に活用するためのアイデアをご紹介します。
複数のポーズを使いたい
とれるポーズは、1つだけでなく複数のポーズからプレイヤーが選べるとよいでしょう。これは「マルチゲート」というノードを組み合わせれば簡単に実現できます。「ThirdPersonCharacter」のブループリントを少し変更して、以下の画像のように変更しましょう。
「Set Animation」ノードの「New Anim to Play」にはそれぞれのポーズアニメーションを指定しよう。また、「マルチゲート」の後ろ側のピンは「ピンを追加」で増やすことができる
これで、Tabキーを押すたびにポーズが別のものに切り替わるようになります。テストプレイして確かめてみましょう。
他のメッシュを使いたい
撮影時のみ他のメッシュを使いたい場合は、Tabキーを押した時に「Set Skeletal Mesh Asset」ノードを使い、一時的に他のメッシュへと切り替え、さらにEscキーを押した時にメッシュを元に戻す機能を作りましょう。「ThirdPersonCharacter」のブループリントを下の画像の通りに実装します。
実装した機能は、下の動画のように動作します。
使用したポーズはアニメーションリターゲットによって用意したものだが、全く別のメッシュの別のアニメーションでも同じことができる
他のポストプロセス・アイコンなどを使いたい
Advanced Photo Modeで使用できるポストプロセス・LUT・アイコン画像にはプリセットが用意されていますが、オリジナルのものを使いたい人も多いのではないでしょうか。
フォトモードで使用できるポストプロセスなどの追加は、プレイヤーキャラクター（今回はグレイマン）にコンポーネントとしてアタッチされている「BPC_PhotoMode」の設定から行います。
「ThirdPersonCharacter」のエディタ画面で「BPC_PhotoMode」をクリックすると設定を変更できる
アイコン画像として、ゲームメーカーズロゴを追加した例
そのほかにも、「BPC_PhotoMode」はかなり詳細な設定が可能です。詳しくは公式ドキュメントなどでご確認ください。
設定次第では、このような画像も撮影できる
撮影した写真を加工したい
撮影した画像は、プロジェクト内の「Screenshots」フォルダ内にPNGファイルとして保存されています。
プロジェクトフォルダはEpic Games Launcherからプロジェクトアイコンを右クリックし、「フォルダで開く」をクリックすると開くことができる
PNGファイルは幅広い画像編集ソフトウェアで扱うことができ、撮影した画像に対して加工が可能です。また、PNGファイルはテクスチャとしてUnreal Engineにインポートできるため、撮影した写真をもとにマテリアルを作るなど、さまざまな使い方が可能です。
以上でAdvanced Photo Modeの発展的な使い方も理解できたでしょう。
工夫次第では、さらに活用が可能です。ぜひ、あなた独自の使い方を見つけてみてください。
おわかりいただけただろうか？
アンリアルエンジンにハマり、ぷちコンでゲーム作ってた男。映像編で2連覇したことも。
昔はよくアーケードゲームとかやってました。
一番やり込んだのは「ケツイ ～絆地獄たち～」「戦国BASARAX」あたり。ローグライトゲームとかも好きです。
関連記事
注目記事ランキング
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
連載・特集ピックアップ
西川善司が語る“ゲームの仕組み”の記事をまとめました。
Blenderを初めて使う人に向けたチュートリアル記事。モデル制作からUE5へのインポートまで幅広く解説。
アークライトの野澤 邦仁（のざわ くにひと）氏が、ボードゲームの企画から制作・出展方法まで解説。
ゲーム制作の定番ツールやイベント情報をまとめました。
CEDEC2023で行われた講演レポートをまとめました。
東京ゲームショウ2023で展示された作品のプレイレポートやインタビューをまとめました。
UNREAL FEST 2023で行われた講演レポートをまとめました。
BitSummitで展示された作品のプレイレポートをまとめました。
ゲームメーカーズ スクランブルで行われた講演のアーカイブ動画・スライドをまとめました。
UNREAL FEST 2022で行われた講演レポートやインタビューをまとめました。
CEDEC2022で行われた講演レポートをまとめました。
今日の用語
ワイヤーフレーム（Wire Frame）
- 3Dモデルのエッジ情報のみを表示するレンダリング手法。ゲーム開発においては、3Dモデルやシーンのポリゴン構造を確認することに用いることが多い。
- UIやWebページなどのレイアウトを決めるための設計図。
Twitterで最新情報を
チェック！
