TapTapTap!!!（２４）～テスト用アプリをダウンロードして実機で動かす～ ではこのアップロードした「TapTapTap!!!」を実機にダウンロードし動作するか確認を行った結果、散々な結果だった。内容については前回を参照にしてほしい。今回は前回の動作結果を元にアプリの修正（画面幅調整）を行う。
まずは、前回の結果のみをお見せすると以下の状態である。
- 表示が画面内に収まっていない
- ボタンの表示が小さい
- 文字の表示が小さい
これらを順に改良していく。
１．表示を画面内に収める
まずは Unity 内に３：２にするという設定があったため、これを用いてボタンやライフ文字の位置を調整した。
同様に Unity の設定内に１６：１０ものもあったのでこちらも表示してみたが、思ったとおり、枠や位置にずれが起きてしまう。
そのため、取れる手段として考えられるものは以下の２通りだろう。
- 画面を３：２または１６：１０のいずれかに合わせて黒く塗りつぶす
- 画面の表示を３：２または１６：１０のいずれかに合わせて引き伸ばす
「TapTapTap!!!」では縦横非は重要とならないため、2 の引き伸ばす手段をを用いて画面サイズを調整していきたいと思う。
２．画面サイズを引き伸ばす
画面サイズを引き伸ばす方法として、シューティングゲームのチュートリアルの中に記載があったのでこれを参考していきたいと思う。項目としてはモバイル編 (共通)の複数の画面解像度に対応するが参考となる。こちらはスクリプトで画面調整を行うというものである。
実際のサンプルのスクリプトを参考に実装を行ってみた結果が以下のとおりである。うまく枠内に収まっていることが確認できる。
スクリプトの全容は以下の通り。
[cce_csharp]using UnityEngine;
using UnityEngine.UI;
public class MaxLevel : MonoBehaviour
{
/// <summary>
/// 最高レベル表示用テキスト
/// </summary>
public Text maxLevel;
/// <summary>
/// 最高レベル用テキスト
/// </summary>
private string maxText = "最高レベル：";
/// <summary>
/// ライフ表示バー
/// </summary>
[SerializeField]
private GameObject LifeWindow;
void Start()
{
FindObjectOfType<LifeViewer>().Init();
// Google Play Games を有効化
GooglePlayGames.PlayGamesPlatform.Activate();
// Google Play Games へのログイン
Social.localUser.Authenticate((bool success) =>
{
});
Vector2 max = Camera.main.ViewportToWorldPoint(new Vector2(1, 1));
Transform windowTrans = LifeWindow.transform;
Vector3 size = new Vector3(max.x * 2, windowTrans.localScale.y, windowTrans.localScale.z);
LifeWindow.transform.localScale = size;
if (PlayerPrefs.HasKey("PlayerData"))
{
int level = PlayerPrefs.GetInt("PlayerData");
maxLevel.text = maxText + level.ToString();
}
else
{
maxLevel.text = maxText + "-";
}
}
}[/cce_csharp]
サンプルのスクリプトをやや応用して、ビューポートからサイズを取得し表示バーのサイズを更新するというものである。
３．各解像度に合わせたゲームを作るにあたって
各解像度に合わせてゲームを作るのであれば予め、文字や枠は割合でデータを保持したほうがよいと思われる。というか、そうでなければオンリーワン（１個の機種）に限定したものができてしまうことが容易に想像できた。本格的に作るゲームではそのあたりもしっかり設計しておく必要がありそう。