フォトモードを追加するUEアセット「Advanced Photo Mode」でハイクオリティなスクショが撮り放題!導入方法やポーズ機能の作り方を解説

2023.05.30
注目記事ゲームづくりの知識チュートリアルしくみをつくる見た目を良くするアセットレビューアンリアルエンジンマーケットプレイス
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

ゲーム内で写真撮影ができる機能「フォトモード」を、自分のゲームに実装してみましょう!本記事では、フォトモードをゲームに導入するUnreal Engine用アセット『Advanced Photo Mode』の使い方を紹介します。加えて、フォトモードと組み合わせるためのポーズ機能の実装方法も解説します。

TEXT / wvigler
EDIT / 神谷 優斗

目次

この記事はUnreal Engine バージョン5.2.0を利用して書かれています。

今回使用するアセットを紹介

『Advanced Photo Mode』

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の発展的な使い方も理解できたでしょう。

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

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

『Advanced Photo Mode』マーケットプレイスページ『SICKA MANSION』マーケットプレイスページ
wvigler

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

関連記事

エピック ゲームズ ジャパンによる講演も行われた「第2回 Unreal Engine KYUSHU LT会 in 鹿児島」、アーカイブ動画および一部のスライド資料が公開
2024.07.11
ゲーム開発者必見のカンファレンス10選【GDC・CEDEC・Unreal Fest・U/Dayなど】
2024.07.11
「Unreal Engine」2024年7月の無料マーケットプレイスコンテンツが公開!何千ものポーンを制御するプラグインや、スタイライズされた環境アセットのバンドルなど
2024.07.03
クロスシミュレーションツール「Marvelous Designer」が1年間無料で使用可能。Epic Games、UEFNクリエイターに向けてライセンスを期間限定で提供中
2024.06.25
mocopiのモーションデータをリアルタイムでMayaに送れる公式プラグインが公開。併せて、UE版プラグインがUE5.4に対応
2024.06.21
UEでローカルLLMを実装するプラグイン、「技術書典16」でUE技術書を販売した挑戦の記録など。技術勉強会「UE Tokyo .dev #3」の講演資料が公開
2024.06.19

注目記事ランキング

2024.07.08 - 2024.07.15
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

レベル(Level)
レベル
  1. ゲーム開発において、位置情報を持つオブジェクトが配置されている地形。
  2. RPGなどのゲームにおいて、キャラクターの成長度合いを示す数値。レベルアップなど。
VIEW MORE

Twitterで最新情報を
チェック!