モバイル向けのゲーム画面の作り方
本記事では、モバイル向けにゲーム開発する際に、
重要となるゲーム画面の開発の進め方について記載します。
本記事に入る前に、予め断っておきますが、本記事ではUnityのアセットとして「NGUI」を利用します。
NGUIは、無償ではありませんので、利用される際にはご注意ください!!
画像の表示
モバイル(スマートフォン)向けにゲームを開発する上で重要な事として、機器のリソースの使用を最小限に留めるかがあります。
Unityには、ゲームプレイ中にどれだけリソースを使っているかが参考となる統計数値を開発中に確認できます。
以下の図のように、Unity上で「Scene View」画面から「Game View」画面に切り替えると、「Scene View」画面の右上にゲーム内の統計数値が見られます。
そして画像を表示する際に、その中の「DrawCalls」がモバイルリソースに大きな影響を与える指標となります。
以下、Unityでのマニュアル本文引用です。
ドローコール バッチング / Draw Call Batching
スクリーンにオブジェクトを描画するために、描画エンジンはOpenGLやDirect3DのグラフィックAPIにドローコール(draw call)を発行しなければいけません。
どんな一回のドローコールでも多くのグラフィックAPIの集まりが必要になります。つまりこれはCPUパフォーマンスのオーバーヘッドに重大な影響をもたらします。
つまり、画像を表示する際には、「DrawCalls」の数値に注意していくことで、「サクサク」とした動きのゲームを開発できます。
(※他にもネットワークであったり、エフェクトであればバッチングであったりと色々と考慮すべき項目もあります。)
そして「DrawCalls」の目標数値は、「Android」と「iPhone」を対象とするならば、大体の目安ですが「40」までに抑えるべきです。
それ以上は、パフォーマンスにも影響が発生します。
一般的には、前回の記事で説明した方法で画像を表示しますが、画像を追加すればするほど「DrawCalls」の数は増えていきます。
もちろんゲーム内に登場する画像の数は、40位内に収まることは少ないです。
そこで画像が増えたとしても、「DrawCalls」が増えない方法として、次項で説明する「NGUI」というアセットを利用する方法があります。
(※もちろん自分でNGUIと同じ機構を実装して利用するという方法もありますが、NGUIと同じアトラス機構の実装は大変かと思います。)
NGUIを利用する目的
NGUIは、複数の画像を1つにまとめ、ゲーム内で画像を利用する際に、その中の画像を一つ一つ「Sprite」として切り出してくれます。
NGUIでは、「Sprite」として切り出す時に、どこの座標(位置)に画像があるかを自動で計算してくれるため、開発者が画像の座標計算を意識する必要はありません。
そして特筆すべきこととして、NGUIを利用することで画像の「DrawCalls」を「1」に抑えることができます。
(※ただしアトラスを複数作成して利用すれば、DrawCallsの数も増えます。)
NGUIの導入
それでは早速、NGUIを導入します。
まずUnityのメニューから「Window」→「Asset Store」を選択します。
次にUnityのアセットストアが現れ、その右上の検索フォームで「ngui」を検索すると、以下の図のようになります。
そして初めて利用する際には購入画面に遷移し購入が完了しアップデートが完了すると、以下の図のように「Import」が可能となります。
NGUIをインポートすると、メニュー項目に「NGUI」が表示されます。
NGUIでAtlasの作成方法
本項では、NGUIでAtlasを作成します。
ここで作成したAtlasを利用して、ゲーム画面を作成していきます。
まず以下の図のように、プロジェクト内で複数の画像を選択し右クリックすると、「NGUI」が表示され「Open Atlas Maker」を選択します。
そして以下の図のように、Atlasの名前を決め「Create」を押すと、Atlasが作成されます。
2D画面の作成
NGUIのコンポーネントに含まれる「UI」作成機能を利用して、2D画面を作成します。
メニューバーから以下の図のように、「2D UI」を作成します。
「2D UI」を作成すると、以下の図のようにHierarchyに「UI Root」が作成されます。
この中に前項で作成したAtlasを用いて、UIを作成します。
Atlasの利用
Hierarchyの中の「UI Root」→「Camera」を選択したまま、以下の図のように「Sprite」を選択すると、
「Camera」の子階層に「Sprite」が作成されます。
ここで以下の図のように、「Sprite」を変更すると、表示される画像が変更されます。
また「Dimensions」を変更することで、「Sprite」の大きさを変更できます。
座標の位置は、「Transform」の「P」のxyz座標値を変更します。
応用：ボタンアイコンの作成
そして応用ではありますが、画面のフレームのアトラス、背景のアトラス、アイコンのアトラスを組み合わせることで、以下の図のようにアイコンをボタンアイコンを作成できます。
この時重要となってくるのが、「Depth」のパラメータを変更して、前後の表示関係を決めることです。
※Depthは、CSSでの「z-index」になります。
そしてDrawCallsを確認すると、画像を3枚も使っているにもかかわらず、「1」が表示されています!!!
この作業の繰り返しでどんなUIも作成できると思います。
NGUIには、他にもスクロール画面やグリッド画面といった特殊な画面を簡単に作成できるコンポーネントもあります。
是非試してみてください。
