フォトモードを追加するUEアセット「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は、独立したプロジェクト形式のアセットです。そのため、今回は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キーでフォトモードをキャンセルします。

プレイ中に「G」キーを押すと、ギャラリーモードに移行します。ギャラリーモードでは、これまでに撮影した写真を閲覧することができます。

基本的な機能を把握したら、次はSICKA MANSIONのマップでAdvanced Photo Modeを使ってみましょう。

フォトモード機能をほかのプロジェクトへ移植するのが簡単である点も、Advanced Photo Modeの長所です。

「コンテンツ > SICKA_mansion > Maps」にある、SICKA MANSIONのメインマップ「MAP_Mansion」で、Advanced Photo Modeを使用してみましょう。「MAP_Mansion」をダブルクリックして開きます。

マップを開いたら、右下の「ワールドセッティング」タブから一番上にある「Game Mode→ゲームモードオーバーライド」の項目を「ThirdPersonGameMode」に変更します。これで機能の移植は完了です。

「ワールドセッティング」タブが見つからない場合、左上の「ウィンドウ」から「ワールドセッティング」をクリックして表示できる

プレイを開始し、先ほどと同じようにフォトモードが使えれば、機能の移植が成功しています。

現状のプレイヤーキャラクターは、フォトモード中にアニメーションを一時停止しているだけであり、少し物足りません。そこで、フォトモードでも一般的な、キャラクターがポーズをとる機能を追加してみましょう。

まずは、グレイマンのポーズにあたるアニメーションを作成します。グレイマンのアニメーションは「コンテンツ > AdvancedPhotoMode > Demo > ThirdPersonTemplate > Mannequin > Animations」に格納されています。

元々あるアニメーションを複製し、それを基にポーズのアニメーションを作成しましょう。「ThirdPersonIdle」を右クリックし、メニューから「複製」をクリックして複製します。そして、複製したアニメーションをダブルクリックし、エディタ画面を開きます。

名前は自由に付けてよい。ここでは「Anim_VSign」という名前にした

エディタ画面上で、左下の画像で示した位置にマウスカーソルを合わせて右クリックしましょう。現れたメニューから「フレーム1からフレーム79を削除」を選択します。これで、1フレーム目以外のアニメーションが削除され、長さ1フレームのアニメーション（つまりポーズ）ができます。

かなり正確にマウスカーソルを合わせないと1フレーム目を選択できないため、注意しよう

続けて、ポーズを付けていきましょう。ビューポート上側の「キャラクター→ボーン→すべての階層」をクリックすると、グレイマンの動きを制御する「ボーン」がすべて表示されます。

エディタ画面からポーズを作成する場合は、ボーンをすべて表示させた方がやりやすいだろう

ボーンをクリックして選択すると、3Dギズモを使ってボーンを動かすことができます。

ボーンを動かすことでポーズを作成できますが、このままでは保存されないので注意してください。画面上部にある「+キー」ボタンを押すことで、ポーズを付けたボーンの情報をキーフレームとして保存できます。

「+キー」を押さずにエディタを閉じると、せっかく付けたポーズが元の状態に戻ってしまう。こまめに記録しておこう

ポーズの作成例

ポーズが完成したら、保存してアニメーションのエディタを閉じましょう。そして、「コンテンツ > AdvancedPhotoMode > Demo > ThirdPersonTemplate > ThirdPersonBP > Blueprints」にある、グレイマンのブループリント「ThirdPersonCharacter」をダブルクリックで開きます。

コンパイルの警告が出ていますが、これは入力設定に起因するものであるため、今は放置しても問題はありません。

今回実装するポーズ機能は、「Tabキーでポーズを取り、Escキーでポーズ状態を解除する」仕組みにします。TabキーとEscキーの入力が必要なので、まずはイベントグラフ上で右クリックし、ノード一覧から「Tab」「Esc」のノードを追加します。

続いて、左上のコンポーネントタブから「Mesh(CharacterMesh0)」をドラッグし、先ほど追加した2つのノードの近くにドロップします。これで「Mesh」と書かれたノードが出現するはずです。

続けて、下の画像の通りノードを繋ぎましょう。

赤く囲った部分は正確に指定しないと正しく動作しないため、気を付けよう

ノードを繋ぎ終えたら、ポーズ機能の実装は完了です。プレイしてTabキーでポーズが取れること、そしてEscキーで元の状態に戻れることを確認しましょう。

以上で、Advanced Photo Modeにポーズ機能を追加することができました。

※なお、キャラクタークラスに「BPC_PhotoMode」コンポーネントを追加することで、デモキャラクター以外のキャラクターでフォトモードを使用できます

ここから先は発展編です。この章では、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の発展的な使い方も理解できたでしょう。

工夫次第では、さらに活用が可能です。ぜひ、あなた独自の使い方を見つけてみてください。

おわかりいただけただろうか？

wvigler

アンリアルエンジンにハマり、ぷちコンでゲーム作ってた男。映像編で2連覇したことも。
昔はよくアーケードゲームとかやってました。
一番やり込んだのは「ケツイ ～絆地獄たち～」「戦国BASARAX」あたり。ローグライトゲームとかも好きです。