UnityでUI画面を作ってみよう!

※本記事には広告を含みます

UIってなに?

Right Caption
ゲームを遊ぶときに、スコアが見えたりボタンがあったりすると便利だよね。 その「見た目で操作する部分(ボタン・文字・画像など)」を UI(ユーザーインターフェース) と呼びます。 今日は、「クリッカーゲーム」を例にして、UI画面を作るところまでを一緒にやっていくよ。

クリッカーゲームのUI画面作成の記事を読みながら順を追って設定していきます。

途中、背景画像をヒエラルキーにドラッグして設定していた時、ブログ記事のようにならなくて
おかしいなぁーって思っていたら、画像のサイズの変更をするのを忘れていました。
うっかりミスですね
講座のブログにも書いてあるので、ちゃんと確認して設定しましょう。

講座の配布されていた画像はwoolとbasketを使いました。背景とキャラクターはオリジナルです。

背景画像を用意しよう

Left Caption
UI画面をきれいに見せるためには、まず背景が大切!


背景は「Canva」を使って作りました。

背景画像のサイズに合わせてデザインサイズを指定します。幅 480 × 高さ 800にして、新しいデザインを作成ボタンを押します。

素材を押して、検索で配置したいイラストを探してクリックすると画像が貼られます。
配置したい場所に移動させて完成したら、右上の共有ボタンを押してダウンロードします。

キャラクターとスクリプトの作成

スプリクトの作成方法は色々ありますが、講座の作り方で作成します。

キャラクターをシーンに配置したら、そのまま画像のように「コンポーネントを追加」をクリック

下の方にスクロールして「新しいスクリプト」をクリックします。

講座通り「Sheep」と入力して「作成して追加ボタン」を押します。

作ったスクリプトは「スクリプトフォルダ」にはありません。どこにあるかと言うと👇

アセットフォルダにあるんですよね

スクリプトを作ったらその都度スプリクトフォルダに移動させておきましょう。

コードは講座のブログ記事にあるので、ここでは割愛させていただきます。

Sheepスクリプト

スクリプトを保存してエディターに戻ってくると「スクリプト」の欄に画像を設置する箇所が追加されてるので追加しました。画面中央の上の→ボタンをクリックするとゲームモードになって動かせます。

キャラクターをクリックすると、あらっ!毛が刈られてしまいましたね。☺️

設定は成功してるみたいです。

まとめ

UI画面はゲームでプレイヤーが触ったり操作したりする場所。

背景、キャラクター、画像素材を入れることが第一歩。

スクリプトを使って「クリックしたら変化する」といった動きをつけると、一気にゲームらしくなる。

素材を整理したり、見た目を講座と近づけたりすると勉強になるし、あとあと使いやすい。

Left Caption
次回は、毛を刈り取った時に出る羊毛を作るみたいです。

game_lob - にほんブログ村