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

関連記事

SDFを活用した低負荷なアニメ調のシェーディングをUE5で実装。alwei氏が解説記事を公開
2024.03.01
「Steam Audio」がオープンソース化。UnityやUEに統合できる、ゲームやVRアプリ用の空間オーディオツール
2024.02.22
実写映像を3Dアニメーション化するAIツール「Wonder Studio」にUEエクスポート機能追加。カメラやキャラクターアニメーションなどの要素に分解も可能
2024.02.16
Unreal Engine向けゲーム制作コンテスト『第21回UE5ぷちコン』開始!テーマは「おす」。応募締切は4/7(日)
2024.02.16
揺れ物を手軽に「かわいく」揺らせる疑似物理プラグイン「KawaiiPhysics」がアップデート。ボーン間の距離を維持して、モデルのスカート貫通問題を緩和しやすく
2024.02.12
「Unreal Engine」2024年2月の無料マーケットプレイスコンテンツが公開!Steam APIを活用したブループリントアセットや、ファンタジックなインテリアを集めた環境アセットなど
2024.02.07

注目記事ランキング

2024.02.26 - 2024.03.04
1
『フォートナイト』で動く本格的なゲームが作れるツール「UEFN」とは?従来のクリエイティブモードから進化したポイントを一挙紹介!
2
【CHALLENGE1】「クリエイター ポータル」を使って、UEFNで作成した島を世界中に公開する
3
【2022年5月版】今から始めるフォートナイトの「クリエイティブ」モードープレイ開始から基本的な操作方法まで解説
4
UEFNで使えるプログラミング言語「Verse」のノウハウが集結。『UEFN.Tokyo 勉強会 03 Verse Night』レポート
5
フォートナイトとUEFNがv28.30にアップデート。「NPCスポナー」が、スポーン・撃破時のエフェクトや移動速度のカスタマイズに対応
6
フォートナイト クリエイティブとUEFNで使える仕掛け一覧
7
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.1「アイテム系」
8
【STEP2】UEFNの基本的な使い方を覚えよう
9
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.5「島の設定」
10
【CHALLENGE2-1】フレンドと一緒にゲームを作ろう――UEFNプロジェクトをチームメンバーとリアルタイムで共同編集する
11
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part1
12
まるで『マイクラ』?ボクセル地形を生み出す無料アセット「VoxelPlugin Free」で”地形を掘ったり積み重ねたり”して遊んでみよう
13
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.4「ゲームシステム系」
14
【STEP1】「UEFN」を入手しよう
15
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.2「ユーティリティ系」
16
フルカラー書籍「UEFN(Unreal Editor For Fortnite)でゲームづくりを始めよう!」、ついに本日発売!全国書店で好評発売中!
17
NIKEのAir Maxをテーマにしたフォートナイトの島『Airphoria』、制作に関するチュートリアルが公開
18
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part1
19
【CHALLENGE3】UEFNの機能「ランドスケープ」を使ってオリジナルの地形を作る
20
『フォートナイト』で建築ビジュアライゼーション!?UEFNでオリジナルの世界観をどう作り上げたか、その手法を解説【UNREAL FEST 2023 TOKYO】
21
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part2
22
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.3「プレイヤー系」
23
【STEP6-1】「オリジナルキャラクターを登場させよう」――Fabでアセットをダウンロードしよう
24
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.6「チーム・対戦系」Part1
25
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part2
26
フォートナイトとUEFNがv26.30にアップデート。ロビー画面が一新され、クリエイターが島ごとにロビー背景を自由にカスタムできるように
27
【STEP5-1】スタート時のカウントダウンを作る
28
「UEFN」って実際どうなの? 編集部が3時間で「みんなで遊べるアクションゲーム(?)」を作ってみた
29
【STEP4-1】コース外に出たらデスする仕組みを作る
30
【STEP4-2】リスポーンとチェックポイントの仕組みを作る
VIEW MORE

イベントカレンダー

VIEW MORE

今日の用語

ローパスフィルター(Low-Path Filter)
ローパスフィルター
  1. 電気信号のうち、指定した周波数(カットオフ周波数)以下の信号を通し、それより上を大きく低減させるフィルター。
  2. ゲーム開発において、基本的にはサウンド用語として用いられる。例として、特定のセリフをローパスフィルターによってくぐもった音に加工することで、隣の部屋や遮蔽物の後ろで話しているかのような表現を行うことができる。
VIEW MORE

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