こんにちは！Unityの入門書で通称”ヒヨコ本”として親しまれている”Unity5入門 最新開発環境による簡単3D&2Dゲーム制作
今回はゲームのタイトル画面を作っていきます。
ゲーム画面で表示されるUIオブジェクトが画面の解像度や縦横比にかかわらずちゃんとレイアウトされるように設定を行います。
Unityの画面中央上部にある[Game]ビュータブをクリック。ビューの左上にある画面サイズ設定ボタン[Free Aspect]をクリックして[16:9]に変更します。
ゲームのタイトルロゴをWebサービスを利用して作ってみることにしました。
ロゴ及び画像ジェネレーター
まずはサイトのトップページからロゴのスタイルをクリックして選択します。
スタイルをクリックするとページが切り替わり、ロゴテキストの入力画面になります。ちなみに、ゲームタイトルは”Rolling Ball”にしました。フォントやテキストサイズだけでなく、色や影も変更可能です。設定を変更するとプレビュー画像が更新されてリアルタイムに確認することができます。
テキストサイズは大きめに”180″を指定しました。デザインができたら[Create Logo]ボタンをクリックします。
[画像をダウンロード]をクリックするとPNG形式のファイルがダウンロードできます。ダウンロードしたファイルは名前を”TitleLogo.png”に変更しておきます。
Unityに画像をインポートする前にあらかじめ画像の縦横サイズを2のべき乗に変更しておきます。
Photoshopを使用してリサイズを行いました。まずは横幅を1024ピクセルに揃えます。
メニュー：イメージ > 画像解像度 を選択。[画像解像度]ウィンドウ > 幅: 1024 に変更。
次に高さを揃えます。
メニュー：イメージ > カンバスサイズ を選択。高さ: 256 に変更。
リサイズが完了したら画像を保存。メニュー：ファイル > 保存 を選択します。これでタイトルロゴの画像が完成です。
画像サイズを調整したらファイルをUnityの[Project]ウィンドウにドラッグ&ドロップでインポート。設定を行います。
[Project]ウィンドウ > ロゴ画像”TitleLogo”を選択。
[Inspector]ウィンドウ > Texture Type > [Sprite (2D and UI)]に変更。[Apply]ボタンをクリック。
作成したタイトルロゴ画像を割り当てるUIオブジェクトを作成します。
[Hierarchy]ウィンドウ > [Create]ボタン > UI > Panel を選択。
作成したPanelオブジェクトの名前を”Panel TitleLogo”に変更。
[Inspector]ウィンドウ > Panel TitleLogo > Image(Script) > Colorフィールドをクリック。カラー設定パレットが開いたらA 255に設定します。
ゲームビューではこんな感じに表示されています。
次にタイトル画面の背景を作っていきます。
背景が増もWebサービスを利用してタイトルロゴ画像を作成することにしました。
Free Seamless Pattern Backgrounds _ Patterncooler.com
このサイトの利用についてはフリーと有償のライセンス形態が明記されていました。作成した画像はフリーライセンスでは商用使用はNGとなっています。
画面の上部でプリセットを選択し、中央のアイコンをクリックしてパラメータを調整します。
画面下側にあるスライダーでパターンサイズを調整します。サイズを2のべき乗の256に調整します。ただしプリセットパターンによっては縦横サイズが異なるものがあるので、その場合は後で調整が必要ですね。
画面右下の[Download option]ボタンをクリック。ファイルをダウンロードしたらファイル名を”TitleBG”に変更します。
画像サイズを調整したらファイルをUnityの[Project]ウィンドウにドラッグ&ドロップでインポート。
[Project]ウィンドウ >画像”TitleBG”を選択。
[Inspector]ウィンドウ > Texture Type > [Sprite (2D and UI)]に変更。
Advanced > Wrap Mode > [Repeat]に変更。[Apply]ボタンをクリック。
作成したタイトル背景画像を割り当てるUIオブジェクトを作成します。
[Hierarchy]ウィンドウ > [Create]ボタン > UI > Panel を選択。
作成したPanelオブジェクトの名前を”Panel Title”に変更。
[Hierarchy]ウィンドウ > Canvas > Panel Title を選択。
[Inspector]ウィンドウ > Panel Title > Image(Script) > Colorフィールドをクリック。カラー設定パレットが開いたらA 255に設定します。
では最後にゲームのスタートボタンを作成します。
標準のボタンデザインは物足りないのでWebサイトのサービスを使って作成してみます。
WEBボタン素材自動生成サイト – ButtonMakerアフラット
作成パラメータが細かく用意されているのでかなり幅広いデザインのボタンを作成することができます。今回はこんな感じにシンプルなボタンにしました。（画像拡大 ）
作成するボタン画像のサイズ縦64 横256に設定。作成した画像をダウンロードするには画像を右クリック > 名前を付けて画像を保存を選択します。
画像を保存したらファイル名を”ButtonStart”に変更しておきます。
画像サイズを調整したらファイルをUnityの[Project]ウィンドウにドラッグ&ドロップでインポート。
[Project]ウィンドウ > ロゴ画像”ButtonStart”を選択。
[Inspector]ウィンドウ > Texture Type > [Sprite (2D and UI)]に変更。
[Apply]ボタンをクリックします。
ボタンに標準で用意されているボタン名表記のテキストUIオブジェクトは削除しておきましょう。[Hierarchy]ウィンドウ > Canvas > Button Start > Text を選択して削除。
タイトルロゴ”Panel TitleLogo”、タイトル背景”Panel Title”、スタートボタン”Button Start”を階層化しておきましょう。階層構造は下記のようになります。
Canvas
┗ Panel Title
┣ Panel TitleLogo
┗ Button Start
とりあえずこれでタイトル画面ができました。
