フォトモードを追加する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」あたり。ローグライトゲームとかも好きです。

関連記事

UE5とDeadlineを連携させてクラウドレンダリング。AWS公式ブログで解説記事が公開
2023.09.21
UE向け疑似物理プラグイン「KawaiiPhysics」、カットシーン切替時などで物理の荒ぶりを防ぐ「物理の空回し( Warm Up )機能」を追加
2023.09.20
ソウルライクアクションRPG『Lies of P』、Epic Gamesが開発チームにインタビューした記事を公開。Unreal Engineを使った開発の裏側が明かされる
2023.09.20
【UE5.3実験機能まとめ】「Learning Agents」でブループリント上の機械学習!定番設計パターンのMVVMの導入を補助する「UMG Viewmodel」など
2023.09.08
AAAゲームの開発を経験し、インディーゲームスタジオを設立した3人による座談会動画をEpic Gamesが公開
2023.09.07
Unreal Engine 5.3リリース。SkeletonをUE上で直接編集できる実験機能「Skeletal Editor」や、クロスシミュレーション専用エディタを新たに搭載
2023.09.07

注目記事ランキング

2023.09.21 - 2023.09.28
1
「UEFN」って実際どうなの? 編集部が3時間で「みんなで遊べるアクションゲーム(?)」を作ってみた
2
『フォートナイト』で動く本格的なゲームが作れるツール「UEFN」とは?従来のクリエイティブモードから進化したポイントを一挙紹介!
3
CGWORLD JAM vol.05にゲームメーカーズが登壇します!『ゼロから始める「UEFN」。自作モデルを使った”超簡単”な3Dアクションゲームの作り方を実演!』
4
フォートナイト クリエイティブとUEFNで使える仕掛け一覧
5
【CHALLENGE1】「クリエイター ポータル」を使って、UEFNで作成した島を世界中に公開する
6
【2022年5月版】今から始めるフォートナイトの「クリエイティブ」モードープレイ開始から基本的な操作方法まで解説
7
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.1「アイテム系」
8
【CHALLENGE2-1】フレンドと一緒にゲームを作ろう――UEFNプロジェクトをチームメンバーとリアルタイムで共同編集する
9
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part2
10
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part1
11
【STEP2】UEFNの基本的な使い方を覚えよう
12
【CHALLENGE3】UEFNの機能「ランドスケープ」を使ってオリジナルの地形を作る
13
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.5「島の設定」
14
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.2「ユーティリティ系」
15
【UEFN書籍発売記念!2大キャンペーン】UEFNで島を作ろう!動画投稿キャンペーンを開催。『フォートナイト 2800V-Bucks』が15名に当たるプレゼント企画も
16
【STEP6-1】「オリジナルキャラクターを登場させよう」――Fabでアセットをダウンロードしよう
17
『フォートナイト』で建築ビジュアライゼーション!?UEFNでオリジナルの世界観をどう作り上げたか、その手法を解説【UNREAL FEST 2023 TOKYO】
18
フォートナイトとUEFNがv26.10にアップデート。「ジップライン」が仕掛けとして追加されたほか、Verseからマテリアルの差し替えが可能になった
19
まるで『マイクラ』?ボクセル地形を生み出す無料アセット「VoxelPlugin Free」で”地形を掘ったり積み重ねたり”して遊んでみよう
20
【STEP5-1】スタート時のカウントダウンを作る
21
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.6「チーム・対戦系」Part1
22
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.4「ゲームシステム系」
23
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.3「プレイヤー系」
24
【STEP4-2】リスポーンとチェックポイントの仕組みを作る
25
フルカラー書籍「UEFN(Unreal Editor For Fortnite)でゲームづくりを始めよう!」、ついに本日発売!全国書店で好評発売中!
26
【STEP4-1】コース外に出たらデスする仕組みを作る
27
【STEP4-3】仕掛けを使って「坂を転がるボールのギミック」を組み込む
28
【STEP3】オリジナルのアスレチックコースを作ろう
29
UEFNで「栄誉の仕掛け」が実装。制作者が設定した条件を達成したプレイヤーに対し、XPを付与できる
30
【STEP6-3】「オリジナルキャラクターを登場させよう」――キーボーとムラスケのメッシュをインポート
VIEW MORE

イベントカレンダー

VIEW MORE

今日の用語

ブループリント(Blueprint)
ブループリント
  1. 設計図。
  2. アンリアルエンジンにおいて、標準搭載されているビジュアルスクリプト言語。
VIEW MORE

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