＜前文＞
で勉強しています。今回は、「9章3節 ゲーム画面のサイズに基づいたUI用のスケーリングの作成」を勉強します。
＜本文＞
＜目的＞
前回作成したレシピのHUDは大変小さかったです。今回は、HUDのサイズをコントロールする方法を学びます。レシピの題は、Creating screen size-aware scaling for UIなので、直訳すると、「UIのためのスクリーンのサイズを気にしたスケーリングの作成」となります。この場合のスクリーンとはゲーム画面の事です。またスケーリングとはサイズの拡大縮小を行う事です。何のサイズでしょうか？もちろんUIのサイズです。よってレシピの題を意訳すると「ゲーム画面のサイズに基づいたUI用のスケーリングの作成」となります。
＜方法＞
Step.0
新しいプロジェクトを作成します。プロジェクト名は、Chapter9_part3_0611としました。
Step.1
前回と同じように、クラスウィザードで作成していきます。
教科書では指定していませんが、Privateを選択しました。
以下にScalingUIPlayerControllerのヘッダーファイルを示します。
Step.2
加えました。
Step.3
加えました。
前回のレシピと全く同じコードですね。
ヘッダーも全く同じものを加えました。
SlateモジュールとSlateCoreモジュールを使用するために、Build.csのコードの一部をアンコメントしました。
念のために、ビルドしてみました。
普通にビルドしました。
Step.4
まず、クラスウィザードからゲームモードを選びます。
名前をScalingUIGameModeに変更します。前回のレシピではprivateにしても何も問題はなかったのですが、クラスの宣言部がPackePublish社が提供しているサンプルコードと微妙に違っていました。ので今回はpublicにしてみます。ひょっとしたらこれで、クラスの宣言部がPackePublish社が提供しているサンプルコードと同じになるかもしれません。
プロジェクト名が違うために、PackePublish社が提供しているサンプルコードとは完全には同じになりませんでしたが、クラス プロジェクト名 クラス名：public 親クラス と形式は同じになりました。
ただし、ソースファイルがエラーを吐いているので、以下に示すように直しました。
次にデファルトコンストラクターを作成します。サンプルコードにはAScalingUIGameMode();となっているので、そちらを採用しました。と言うか、AScalingUIGameMode()が正しいはずです。
Step.5
サンプルコードを参考にして以下の様にコードを追加しました。
試しにビルトすると
成功しました。
Step.6
試しに、エディターを開きgame modeにScalingUIGameModeを指定してからplayを実行してみると、
＜結果＞
Step.7
Step.8
<エディター内から行う方法>
開きました。
Step.9
User Interfaceセクションを開きました。
Step.10
しました。
Step.11
しましたが変化が分かりませんでした。のでアウトプット値を10にしてみました。
ボタンが大きくなりました。
Step.12
<コンフィグメソッド>
見つけました。
Configを開きます。
Step.13
Notepad++で開きました。
Step.14
見つけました。
Step.15
見つけました。
Step.16
しました。
エディターを開いて、プレイしてみるとボタンが小さく大きさが変化しているのか分かりません。Value を10に変化してみました。
大きさが変化しているのが確認出来ました。
Step.17
しました。
Step.18
はい。
Step.19
はい。
Step.20
しました。
Step.21
しました。
Step.22
r.setreswidthxheightのコマンドがありませんでした。
r.setResコマンドを使用してウィンドウのサイズを変更する事は出来ました。この場合、r.setRes 1920x1080のように使うそうです。r.setRes 1280 × 720で試してみます。
表示されているサイズと変わりませんでした。640×480fも試してみます。
変わらないですね。100x100でやってみました。
やっと変わりました。今気が付いたのですが、r.setreswidthxheightのコマンドはr.setRes width x height の事だったんですね。
これだけでは、解像度によってUIのスケールが変化したかどうか分かりません。解像度1280 × 720のスケールを10に設定してUIの変化を見てみます。
以下に示すようにボタンが非常に大きく表示されています。
r.setRes 1920x1080を使用します。
今度は、ゲーム画面が大きくなり、更にボタンのサイズが小さくなりました。
コマンドr.setResを使用してもUIのサイズの変化を観察する事は不可能ではないですが、ゲーム画面のサイズをマウスでコントロールした方が、UIの大きさの変化の確認は優しかったです。
＜考察＞
今回も、How it works…を読んでいきましょう。
はい、その通りです。今回は、AScalingUIGameModeクラスのデファルトのコンストラクターの実装部内に以下に示したコードを追加する事で、どのPlayerControllerを我々が使用したいかを指定しました。
以下の事が２．では述べられています。
(a) カスタム化したPlayerControllerクラスとGamoeModeクラスの両方を作成します。
(b) UIを描くために、PlayerCotrollerクラスのBeginPlay関数内にslateを使用してコードを書きます。
前回のレシピでUIをスクリーンに表示した方法と全く同じやり方です。以下にBeginPlay関数内のコードを示します。前回と全く同じコードです。
はい。３．と４．の解説は同時に考察します。
私は、最初、勘違いをしていて、今回のレシピを作成した後、このレシピのテストしている最中に気が付いたのですが、今回のレシピはボタンがゲームをプレイしている時、大変小さく表示されるので、ボタンのサイズを指定してボタンを大きくする方法を習うのではなく、ゲームスクリーン全体に対してボタンの大きさが自動的に決まっているのですが、ゲームスクリーンが小さい場合ボタン上の字が読めないため、ゲームスクリーンに対してボタンの大きさの小さくなる比率をゲームスクリーンが小さい場合は、小さくする事でした。
Step.9のグラフが非常に分かりやすく説明しています。ゲームプレイ中の画面が小さい場合と大きい場合のボタンの大きさをここでリニア的に決定していたのです。３．も４．もこれについての解説をしています。
Hard Coded の意味を私は知らなかったのですが、
Hard-Coded: fix (data or parameters) in a program in such a way that they cannot be altered without modifying the program.
と説明されていました。訳はそのままにしておきました。
ここからは、コンフィグファイルについての解説のようです。コンフィグファイル内にある.ini ファイルたちについてあまり知識のない私には、結構重要な解説になるかもしれません。気を引き締めて読んでいきます。
.iniファイルは一般的に、https://www.weblio.jp/content/.iniによると
とあります。初期設定用のファイルである。テキスト形式で書かれているため、書き換えが出来る。とあります。UE4の場合は、ゲームの初期設定を指定するファイルのようです。
以下に実際のコンフィグファイルを示します。
Key=Valueの形で指定されています。
以下にUserInterfaceSettingsクラスのUIScaleCurveプロパティのDefaultEngine.iniの初期設定値を示します。
Serializeの意味が良く分からないので、調べて見たのですが、今回は、
の1. の意味のようです。
はい。
はい。値を変えるだけでなく、新しいキーポイントも追加できるとあります。試してみましょう。
(Time=600.000000,Value=0.690000)を追加してみました。
以下に示すように、見事に追加されていました。
でもこれってProject Settingからも出来るのではないのでしょか？
グラフ内をダブルクリックしたら新しいキーポイントが追加出来ました。
UserInterfaceSettingsクラスのUIScaleCurveプロパティのDefaultEngine.iniの初期設定値も変更されました。
大変面白いです。そして何より、UserInterfaceSettingsクラスのUIScaleCurveプロパティのDefaultEngine.iniの意味が分かりました。が、実用性はどうでしょうか？素直にProject Settingから設定した方が楽だし正確に出来そうな気がします。
以下の事が１２．では述べられています。
(a) Project Settingのダイアログは デザイナーが直観的な方法でカーブを編集する事が出来るフロントエンドです。
(b) テキストとして保存されたデータを持つ事で、プログラマーがこのゲームを再コンパイルしないでもUIScaleのようなプロパティを調節できるビルトツールを潜在的に開発出来るようになりました。
(b)については、現状では全く分かりません。モジュールでも制作する時に必要になるのでしょうか？
これはもう自明の事ですね。以下に実際のコードを示します。
こっちも既に自明ですね。Valueを10に設定した実験ををStep.16で行いました。その結果を下にもう一度示しておきます。
これは。step.16 で行った最初の実験です。結果はstep.16で述べた通りです。
＜まとめ＞
今回は、ゲーム画面のサイズに基づいたUI用のスケーリングの調節に方法について勉強しました。しかし、その中で、コンフィグファイルのデータの調節方法を学んだ事がもっと重要でした。コンフィグファイル内には３つの.iniファイル、DefaultEditor.ini, DefaultEngine.ini, そしてDefaultGame.iniがあり今回は、DefaultEngine.iniファイル内から、UserInterfaceSettingsクラスのUIScaleCurveプロパティの値を調節する事でUI用のスケーリングの調節を行いました。
＜おまけ＞
今回は、３つの知らなかった事を知りました。特に、UE4のC++の勉強とは関係ないですが、ここにメモっときます。
- Hard-Coding
- .iniファイルの意味
- Serializing
Hard-Coding はプログラミングの方法の一つで、コード内で使用する定数などがプログラムの変更なしには変更出来ないようにする事だそうです。.iniファイルは、一般的には、そのアプリのための初期条件のデータを保存しています。Serialingは、あるスレッドがそのデータを使用している間は、他のスレッドがそのデータにアクセス出来ないようにブロックする事を指す言葉だそうです。Serializingなんて単語は見た事ないと今まで思っていたのですが、電磁気学のクラスで散々習った直列と並列のSerialとParallelのSerialの動詞でした。直列と並列から推測するとプログラミングにおけるSerializingの定義が、あるスレッドがそのデータを使用している間は、他のスレッドがそのデータにアクセス出来ないようにブロックする事を指す言葉になるのも納得です。
