Edited at

Unityを使ったAndroid向け課金ゲームアプリの画面作成に関する初歩的な情報

More than 1 year has passed since last update.

この記事では、初心者の方向けに Unity を用いて課金ゲームを作る際の画面設計やデザイン作業に関する補足情報をご紹介します。

itemstore BLOG で連載している

【いますぐ始めるアプリ内課金】第3回 :アプリの設計

の補足になりますので、併せてお読みください。


スマートフォンの解像度について

スマートフォンにはさまざまな解像度があります。

今回のゲーム制作では、ひとつの解像度をターゲットにして作成していきます。

他の解像度への対応は Unity の Camera の設定を調整することで対応します。

スマートフォンの解像度については、次の引用元のようにわかりやすくまとめている便利なサイトもありますので、参考にしてみてください。

No.
ポイント
主な製品

1
320×568
iPhone5 / iPhone5s

2
375×667
iPhone6 / iPhone6s

3
720×1280
iPad

4
1080×1920
Fujitsu F-01F ARROWS NX F-01F for DoCoMo / KDDI SOL22 Xperia UL / Sony SOL23 Xperia Z1 SOL23 for KDDI

5
360×640
Samsung SC-04F GALAXY S5 SC-04F for DoCoMo / Google Nexus 5

6
320×480
iPhone3G / iPhone3GS / iPhone4 / iPhone4s

7
360×592
Sony SO-02 Xperia Z3 Compact / Sony SO-01G Xperia Z3

8
414×736
iPhone6 Plus / iPhone6s Plus

9
480×800
Samsung SC-03D GALAXY S II LTE SC-03D for DoCoMo / KDDI ISW12K Urbano Progresso

10
540×960
HTC ISW13HT HTC J ISW13HT for KDDI / Sony SO-05D Xperia SX SO-05D for DoCoMo

引用:スマホの画面解像度シェアを調べてみた(2017年1月版) | WEBSEEYA(ウェブシーヤ)


Unity の Game タブの解像度設定

Unity では、さまざまな解像度に変えて実行することで、レイアウトの崩れなどをチェックすることができます。

解像度を設定するためには、[Game] タブの左上にある解像度のテキストをクリックします。

表示されたリストの中から試したい解像度を選びましょう。

選択肢に試したい解像度がない場合は、リストの下にある [+] を選択することで、次のように設定を追加できます。

27-Unity Game タブの解像度設定


Unityのシーンにスプライトを配置する簡単な方法

ブロック崩しのボールやバーは、 Sprite Renderer と呼ばれるコンポーネントによって画像をシーン上に表示しています。

28-Unity Sprite Renderer を持つ Ball オブジェクトの Inspector

コンポーネントはオブジェクトを選択した後の [Inspector] タブで [Add Component] したり、 Unity のメニュー[Game Object]→[2D Object]→[Sprite] で作成することができます。

ただし、この場合は、 Sprite Renderer の Sprite の項目を自分で選択しなければいけません。

それよりも簡単なのが、画像をシーン上にドラッグ&ドロップすることです。

Unity の Assets 以下に配置された画像を [Project] タブから選択して、[Scene]タブにドラッグ&ドロップします。

このとき、画像の Texture Type は Sprite を選択しておきましょう。

これだけで、 Ball.png を Sprite に設定した先程の [Inspector] の図のようなコンポーネントが自動的に設定されます。

29-Unity 画像をドラッグアンドドロップしてスプライトを作成

あらかじめ画像のサイズを決めておけば、仮の画像でオブジェクトの大きさの調節ができます。

画像のサイズさえ変わらなければ、画像の差し替えはファイルの上書きだけで気楽にできます。


Unity にフォントを追加する方法

Unity ではあらかじめ Arial フォントが入っていますが、他のフォントも簡単にいれることができます。

今回はゲームにも利用できるフリーのフォント M+ FONTS を追加します。

30-M+FONTS の公式サイトより

M+ FONTS からフォントの入った圧縮ファイルをダウンロード・展開し、使用するフォントの .ttf ファイルを選びます。

あとは、選んだ .ttf ファイルを Unity の [Project] タブの任意のフォルダにドラッグ&ドロップするだけです。

31-Unityにフォントを追加

これで、 Unity で追加したフォントが選択できるようになりました。

ためしに、テキストのフォントを変更してみましょう。

まずは、適当な Canvas の Text を選択して、 Inspector に Text コンポーネントを表示します。

最初は Font のフィールドに Arial フォントが選択されています。

32-最初は Arial フォントが選択されている

Font のフィールドの右にある丸をクリックすると、フォントを選択するダイアログが表示されます。

33-テキストのフォントの選択ダイアログ

ここで、さきほど追加したフォントを選択すると、テキストのフォントを変更できます。

34-追加したフォントを選択


参考URL