Labyrinthのつくりかた – ポストプロセスデバッグ編

Labyrinth
わんちゃん
今回は番外編でデバッグ機能の紹介です!

1. はじめに

この解説は、そらまめゲームスが開発中の3D謎解きゲーム「Labyrinth(仮題)」の実装方法を解説したものです。

Labyrinth

Labyrinthではゲームのシステム部分のUE4プロジェクトを公開しております!私たちの方針はノウハウの全公開ですので、少しずつですが実装方法をご紹介していこうと思います。

あくまでLabyrinthでの実装事例を報告したもので、推奨される実装方法とは限りません。
実装を参考にするのは自己責任でお願いします。

もっと良い実装方法があれば是非教えて下さい!質が上がれば皆が幸せになります!

2. 発端

Labyrinthはモバイル向けのゲームとして開発しています。

UE4ではモバイルのポストプロセスエフェクトが充実しており、かなり自由に絵作りすることができます。

しかし、運用する際にはいくつか注意点があります。

2.1. モバイル向けのドキュメントが古い

どの機能がモバイルで使うことができるのか、一応ドキュメントはあるのですが、エンジンの更新が早いのでドキュメントの更新が間に合わず、結局実際に実機で試して動くかどうかで判断する場面が出てきます。

2.2. エディタ上と端末上では見た目が異なる

UE4エディタでモバイルのエミュレート機能はあるのですが、実際の端末上で見てみると、色味が変わっていたり、エディタで動いていた機能が動いてなかったりすることがあります。

エディタで調整して実機に転送して確認する手順を繰り返すのはかなり時間がかかってしまいます。

3. 解決策

そこでLabyrinthでは、UE4標準のポストプロセスのパラメータをゲーム実行中に調整できるデバッグ機能を用意しました。

ポストプロセスのほぼ全てのパラメータを調整するUMGを作成して、モバイル端末上でゲームを動かしながらリアルタイムで確認することができます。

特にこういった絵作りの作業はアーティストの方が対応されることが多いと思いますので、シンプルな操作で感覚的に調整できるようにしたつもりです。

4. 使用方法

画面左上の[Debug]ボタンを押して、[PostProcess]ボタンを押します。
ポストプロセスのカテゴリメニューが表示されるので、調整したいカテゴリのボタンを選択します。

  • 項目ごとに現在のパラメータが表示され、スライドバーを動かすとパラメータ変更ができます。
  • パラメータを変更すると数値が黄色になります。
  • [Reset]ボタンを押すとパラメータがデフォルトに戻ります。
  • [Background]項目の[Visible]ボタンを押すと背景を非表示にして画面効果が見やすくなります。

いい感じのパラメータになったら、エディタ側でその値を手入力で設定してください!

5. 他のプロジェクトで使うには

実装はLabyrinthCoreプロジェクトの中に組み込まれています。

Blueprints>Debug>PostProcessというフォルダの中の全てのブループリントを、ご自身のプロジェクトに持っていけばそのまま使うことができます。

WB_DebugUI_PP_Baseからポストプロセスボリュームを編集できるようにする必要があります。WB_DebugUI_PP_Base内の関数GetPostProcessにてポストプロセスボリュームの参照を取得できるようにしてください。

Lensカテゴリのパラメータはカメラコンポーネントのポストプロセスを編集する必要がありますが、デモプロジェクトでは紐付けていないのでパラメータをいじっても意味がありません。調整したい場合は必要に応じて参照を渡してください。
(他にもそんな感じのがある気がします)

LUTなどのテクスチャをセットするようなパラメータは対応していません。エディタでセットして、端末側でパラメータを調整する想定で作っています。

6. 注意点

上下左右キーなどのカーソル選択には対応していません。

ポストプロセスの機能はエンジンバージョンによってどんどん更新されます。指定のバージョン以外ではコンパイルエラーになる可能性が高いです。その場合の対応自体は簡単だと思いますのでご自身のバージョンにあわせて対応してみてください。

もともと自分のプロジェクト用に作ったものですので、ご自身で使いやすいようにいい感じに(勝手に)作り変えてください!

バグってたらごめんなさい!

7. 配布UE4プロジェクト

以下のリンク先からUE4プロジェクトを取得すると、今回の実装をすべて確認することができます!自己責任でお好きにご利用くださいませ!