【UGUIのCanvasを用いたUI画面の作り方】UGUIとスプライトでゲーム画面を作る | Unity入門の森 ゲームの作り方

【UGUIのCanvasを用いたUI画面の作り方】UGUIとスプライトでゲーム画面を作る

Unity タワーディフェンスゲームの作り方


Unity入門の森オリジナル本格ゲーム制作講座はこちら
11種類の本格ゲームの全ソースコード公開・画像&動画による解説付き

第2回である今回はUIの画面配置とステージ作成を行っていきます。

前回の記事↓

プロジェクト作成とタワーディフェンスゲームの素材のインポートを行う
本講座はUnityでタワーディフェンスゲームの作り方について説明していきます。 Unityの新規プロジェクトを作成するところから、一つずつ丁寧に進めていきますので、初学者の方でもタワーディフェンスゲームの完成まで辿り着けます。 全10回構成...

ゲームのつくり方は色々ありますが、今回はまだScriptなどは使わず、画面から作っていきます。というのも、形から入った方が目標が見えモチベーションが維持しやすいからです。

ではやっていきましょう。


【Line登録者限定のプレゼントもあるよ!】

UGUIの設定

まず、Unity標準UI(ユーザーインターフェース:ボタンやテキスト等)として用意されている UnityUI(通称uGUIと略されます)をシーンに追加していきます。

それでは、ヒエラルキービューを右クリックし(何も選択されていない状態、MainCameraを選択しないよう注意)UI→Imageを作成します。

すると、 Canvas オブジェクトが自動で作成され、その下(子)として Imageオブジェクトが作られ、また、 EventSystem というものも作れたのが分かると思います。

このEventSystemというのはUIのイベント(ボタンクリック等)を処理するためのものと考えておくと良いです。(なので、EventSystemは消してはいけません。 消すとボタンが効かなくなります)

Imageの設定

この Image をゲームの状態などを表示するUI部分の下地として使おうと思います。

UGUI では、UIのコンポーネント(ImageやTextなど)は Rect Transform という、親オブジェクトの指定場所(Anchor)からの相対位置で表示する場所や幅を決める仕組みを採用しています。

Imageを選択し、Inspectorビューで ↑の赤い枠をクリックすると

Anchor Presets のウインドウが表示されます。

今は 中心 を Anchor としているので、親(Canvas)の中心をAnchor(起点)として、どれぐらいずれた場所に表示するかが指定されています。

例えばこの状態で

  • Pos X:0
  • Pos Y:0

とします。 すると Image は 親(Canvas)の中心を起点としているので、画面の中心に表示されることになります。

もう一度、 Anchor Presets のウインドウを表示し、今度は Shift と Alt キーを押しながら、一番右下のボタンを押してみてください。

Imageが画面全体に広がりました。

これは、親(Canvas)の左上端、左下端、右上端、右下端それぞれを起点として、そこからLeft,Top,Right,Bottomをどれだけずらすか。という指定方法になっており、今は全て0のためずれはなし=画面全体に表示

という状態なわけです。

今回はゲーム画面を1024×768とするというのは前回書きましたが、タワーディフェンスゲームの本体部分はそのうちの768×768(正方形)で使い、残りの部分をUIで使うことにします。

ゲーム画面を画面左、UIを画面右に配置したいので、Image の Left768 にします。

SceneビューではグラフィカルにAnchor(△)からどれくらいずれているかが表示されているのが分かります

Spriteの指定

これで、Imageの位置は良いのですが、ただの白い板が表示されています。

これは、Image の Source ImageNone (Sprite) となっているためです。本来、ここには表示をしたい画像(Sprite)をセットしておくのですが、されていないため、白い板が表示されています。

Source Image の ↑の赤枠の中 をクリック すると、セットする画像(Sprite) を選択するウインドウが開きます。

ここでは tile を選択します。

表示されましたが、どうも線が汚いですね。これは、単純に画像を引き延ばしてしまっているからです。

そこで、ImageTypeをSlicedにします。

すると「this Images doesn’t have a border.」と何やら警告っぽいものが出てきますが、大丈夫です。

筆者も英語は苦手ですがざっくり読むと「この画像にはborderが無いよ」と書いてありますね。 この「border」というのは、表示しようとしているSpriteに設定するものです。

なので、先ほど指定した「tile」をProjectビューのAssets/Imagesの中から選択し、

まずInspectorビューの「Sprite Editor」を選択し、Sprite Editor ウインドウを開きます。(Mesh Type が Full Rect になっていることを確認してください)

この、上下左右にある緑の■ をドラッグして、全てちょっと内側に寄せます

(または、右下の Border LTRB 全てに 12 を 入れても構いません)

最後に SpriteEditor の右上にある 「Apply (適用)」ボタンを押します。(そうしたら SpriteEditor は閉じてしまって構いません)

最後に、Inspectorビューの Apply ボタンを押して、変更を適用します。

(またはApplyボタンを押さずに違う操作を行おうとした場合に

このようなダイアログが表示されるので、そこで「Apply」を選んでも同じ結果になります。)

どうでしょう、Imageの枠がキレイになったのではないでしょうか。

before

After

このSliceはBorderによって区切られた9つのパーツ(属に9スライスと呼ばれます)を組み合わせてキレイに描画してくれる仕組みです。(より詳しく知りたい方はUnityの公式ドキュメントをどうぞ)

 

ゲームクリエイター専門学校の資料請求はこちら
【学歴不問・高卒、元ニートでも挑戦できる】

ゲーム本体画面の準備

次に、ゲーム画面の準備していきたいと思います。

先ほど使っていた Assets/Image の中の Tile

をまた使います。

今度はこのTileを、直接 Hierarchyビューにドラッグアンドドロップします。(この時、MainCameraやCanvasなど、既にHierarchyビューに置いてあるオブジェクトの上にドロップしてしまうと子要素になってしまうので注意してください)

なお、先ほどUIで指定したTileと同じものですが、UIとしてのTileは Image として描画され、今回はSpriteを描画するSpriteRendererによって描画されており、別のものです。

では、このtileをゲーム画面を配置するベース(親)にしたいと思います。

  • 名前を GameField
  • Position の X を -1.6(Positionの位置が0のままだと画面がずれてしまっているので、ゲーム位置をずらします。UIがかぶらないくらいの位置までTransformのPosition X をずらしてください。 -1.66ぐらいが適当です)
  • Color を 適当な灰色
  • Draw Mode を Tiled に変更
    • Width を 10
    • Height を 10

に変更します。

まだ下地をそろえただけですが、ここから徐々にゲーム画面を作っていきます。

ブロックPrefabの作成・配置

次に、ブロックを配置していきます。

まず、Assets/Images/tile_brick を先ほど作った GameFieldオブジェクトの上にドラッグアンドドロップします。

このままでは画面に表示されないので、Order in Layer を 0 から 1 に変更します。

このOrder in Layer は数字が大きければ大きいほど上に表示されるようになります。

このブロックでまず外枠を作っていきたいのですが、その前にAssets/Prefabs にドラッグアンドドロップしてprefab化しておきます。

同じように、Assets/Images/tile_border も

  • GameFieldオブジェクトの上にドラッグアンドドロップ
  • Order in Layer を 0 から 1 に変更
  • Assets/Prefabs にドラッグアンドロップし、prefab化

しておきます。

この二つのprefabを沢山配置してステージを作成していきます。このステージ構成がそのままゲームの難易度、レベルデザインにつながります。
あなた好みのタワーディフェンスゲームのステージを自由に作ってみましょう。

注意点は以下の4つ。

  • tile_border の方がユニットが配置出来るブロックになること
  • tile_brick の方がユニットが配置出来ないブロックになること
  • 敵は画面外から入ってくるので、周り全てを塞がないこと
  • 入口が1つだと簡単すぎるので、入口は2つ以上作ること

となります。

いいステージ案を思いつかない場合はこの第二回記事の一番下にシンプルな例がありますのでその通りに作ると良いと思います(もちろん後からでも変更できます)。

ステージ制作のコツ

Assets/Prefabs からそれぞれを GameField にドラッグアンドドロップしていっても良いですが、Ctrl+Dキーを押して複製をしていくのが簡単だと思います。

複数選択した状態で Ctrl+D(複製)

同じ場所に複製されているので、移動(この時Ctrlを押しながら移動させると0.25ずつ移動するのでキレイに揃いやすいです)

もしくは、vキーを押しながら画像の位置を揃える頂点スナップモードを利用しましょう。これはゲームオブジェクトの頂点を他のゲームオブジェクトの頂点にの近くにちょうどよく移動させる機能です。

動かしたいゲームオブジェクト(今回の場合はtile_border)をクリックし、次の順序で操作します。

  1. ヒエラルキーではなくSceneビューで動かしたいゲームオブジェクトを一度クリック。
  2. 頂点を選ぶ段階でマウスボタンを離したままマウスポインタを移動。頂点が決まったらドラッグ開始。
  3. vキーは最初から最後まで押したまま。位置がそろったら離す。

 

これを繰り返すと若干簡単ですが、同じところに重ならないように注意してください。

これは一例です(なお、これはキレイに並んでいますが、多少歪んでいても構いません)

<例>

追記:CanvasとCameraのRender Modeの調整

ここから説明する設定は行わなくても良いですが、やっておくとSceneビューとGameビューのCanvasの見た目の大きさや表示位置が同じになります。

開発時にSceneビューとGameビューで見た目が違って作りにくい・・・
Canvasだけがやたらと大きくて気になる・・・という方は以下の画像になるよう設定してください。

まず、Canvasオブジェクトの中にあるCanvasコンポーネントの「Render Mode」をScreen Space – Cameraに変更します。

すると、Render Cameraと書いてある場所が現れます。ここにヒエラルキービューのMain Cameraゲームオブジェクトをドラッグ&ドロップします。

この設定を行うとMain Cameraの表示位置に合わせてCanvasのサイズが調整されます。

より詳しい解説を読みたい方は「クリッカーゲームの作り方講座」の第2回「UI画面作成と羊オブジェクトの作成(当たり判定とクリック処理)」の”Canvasのモード変更 Render Modeの使い方”の部分を読んでみてください。

関連記事:

UI画面作成と羊オブジェクトの作成(当たり判定とクリック処理)
前回は使用するリソース(画像・フォント)のインポートや、ゲームサイズの設定、描画レイヤーの追加などの準備を行いました。 前回の記事↓ 第2回である今回はUI等の画面配置と羊オブジェクトの作成をやっていきます。 ではやっていきましょう。 クリ...

おさらいと次回予告

今回は主に画面配置をしました。

次回は、この作ったステージを侵略してくる敵を作成していきます。

次回の記事↓

敵オブジェクトの作成・パラメータ設定・敵処理のプロトタイプの作成
タワーディフェンス講座の第3回では敵オブジェクトを作っていきます。 今回からスクリプトも書いていきます。 前回の記事↓ 敵オブジェクトの作成 まず、空の敵オブジェクトを作ります。 Hierarchyビューで 右クリック→CreateEmpt...

 



Unity入門の森オリジナル本格ゲーム制作講座はこちら
11種類の本格ゲームの全ソースコード公開・画像&動画による解説付き

コメント

タイトルとURLをコピーしました