Unity を検索

新公開の「Photo Mode」デモでゲーム内での写真撮影システムについて学ぼう

2021年8月24日 カテゴリ: ゲーム | 4 分 で読めます
Photo Mode Demo Package title and preview image
Photo Mode Demo Package title and preview image
取り上げているトピック
シェア

ゲーム内のスクリーンショットをカスタマイズするためのバーチャルフォトグラフィーシステムを導入するためのサンプルプロジェクトのご紹介です。この記事を読み、Photo Mode の詳細や使い方を把握してください。

あらゆる種類のゲームでバーチャルフォトグラフィー機能の人気がますます高まっています。プレイヤーは、ゲームプレイ中のお気に入りの瞬間をクリエイティブに表現し、保存し、シェアすることができます。プレイヤーがゲーム内で撮影した写真をシェアすることで、クリエイターも恩恵を受ける面があります。プレイヤーのエンゲージメントやコミュニティ活動を向上させ、より多くの人にゲームを楽しんでもらうことができるのです。

クリエイターがゲームに写真撮影のオプションを追加する方法を学ぶためのデモパッケージ「Photo Mode」をリリースします。URP(ユニバーサルレンダーパイプライン)を使用する PC およびコンソールの Unity プロジェクトで利用可能です。このデモには、カメラ、画像調整、UI ビヘイビアのコレクションが含まれており、プレイヤーはカスタマイズ可能な撮影モードに入り、完璧なスクリーンショットを撮るためにゲーム環境を備することができます。

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

さまざまな Unity プロジェクトにおける Photo Mode の動作を動画で確認できます。

まず、Photo Mode パッケージをダウンロードして、PhotoMode プレハブをゲームに追加し、以下の手順でシーンとフォワードレンダラー内に該当する参照を作成します。実装が済むと、カメラの位置、被写界深度、ビネット、ステッカーオーバーレイ、フィルターなど、ゲーム内の撮影オプションを利用できるようになります。Photo Mode はモジュールになっているため、外観や動作を柔軟に変更することができ、独自のカスタムエフェクトオプションを作成することもできます。セットアップ方法については、Photo Mode Overview の動画をご覧ください。

Photo Mode は、開発しているプラットフォームのネイティブなスクリーンショット機能とスムーズに統合できるように設計されています。撮影した写真を保存するには、付属の「Hide UI」オプションを使って UI オブジェクトを表示しないようにして、デバイスの「Share」または「Screenshot」ボタンを押します。

このデモを実現するために、いくつかの機能やシステムが連携していますので、その仕組みを簡単にご紹介します。

  • UI メニューシステム: Photo Mode のほとんどの機能は、スライダーや入力インターフェースで構成されており、その値が実行時に調整されると、Unity Event を通じて該当するメソッドが呼び出されます。これらのメソッドは、対応する Cinemachine、ボリューム、UI の設定値を更新するもので、PhotoMode.cs スクリプトに含まれています。スライダーの最小値と最大値の範囲は、同じスクリプトのコンポーネント内でカスタマイズできます。このデモのために作られたカスタム UI には、テキストベースのスライダーや、Photo Mode のステッカー配置機能を視覚化するシステムなどがあります。  
  • 入力システム:このデモパッケージでは、入力システムを利用して、フォトモードのコントロールをすばやく変更したり、既存のプロジェクトの入力とのオーバーライドを防いだり、キーボードとゲームパッドのコントロールスキームを簡単に交換したりすることができます。Photo Mode に Player Input コンポーネントを追加すると、プロジェクトの既存の入力システム設定と衝突する可能性があるため、Input System API を介して個別の入力アクションへの参照を作成しました。これらの参照は PhotoModeInputs.cs スクリプトに含まれており、Photo Mode のアクションを Player Input コンポーネントを使わずにユーザーに提供します。また、独自のイベントシステムを搭載しており、Photo Mode が有効になると、プロジェクトの既存のイベントシステムが上書きされます。  
  • Cinemachine:デモのモジュール性を維持するために、Photo Mode は独自のバーチャルカメラを使用するように設定し、プロジェクトの既存のカメラに影響を与えずにターゲットの周りを周回したり、クレーンで移動したりできるようにしました。この方法では、シーンに Cinemachine Brain を置いておけば、それが PhotoMode.cs スクリプトを使って自動的に検索され、バーチャルカメラと接続されます。  
  • ボリューム: フォーカス距離、絞り、露出、コントラスト、彩度の設定は、Photo Mode に含まれるグローバルボリュームで管理されます。ボリュームの値は、対象プロジェクトのオリジナルのポストプロセッシング設定に合わせて調整することができます。  
  • シェーダーグラフ:Photo Mode のフィルターコレクションのために作成されたシェーダーは、シェーダーグラフを使用し、URP のレンダーパス機能を使って実装されています。この機能により、ユーザーは新しいレンダーパスを実装・カスタマイズすることで、レンダーパイプラインを拡張することができます。Photo Mode では、シェーダーグラフで作成した各シェーダーをレンダリングテクスチャに適用し、フルスクリーンのフィルター効果として使用するために Blit を使用します。  
  • カスタムステッカーシステム: Photo Mode のステッカーシステムは、EventSystem の Navigation の値を使用して移動軸を作成し、ステッカーカーソルの位置を変更します。このカーソルは、ステッカーがスタンプされた後に適用される位置、回転、スケール、およびイメージのプレビューを表示します。スタンプアクションがトリガーされると、PhotoModeStickerController.cs スクリプトは、既存のステッカープレースホルダーオブジェクトのプールからプレースホルダーを選択し、選択したプレースホルダーにトランスフォームとイメージ設定を適用して、可視状態にします。
Screenshots of Photo Mode being used in different Unity projects

Photo Mode デモパッケージを使って皆さんがどんなことを学び、どんなものを作るのか楽しみにしています。フィードバックを共有したい、良い作品ができたので披露したいという時は、Photo Mode フォーラムのスレッドに投稿するか、DiscordTwitterFacebook に「#MadeWithUnity」のタグを付けて投稿してください。

2021年8月24日 カテゴリ: ゲーム | 4 分 で読めます
取り上げているトピック
関連する投稿