サイトアイコン StudioFun

TapTapTap!!!(1)~画面上にボタンを設置する~

TapTapTap

街づくりゲームに心が折れて作り始めるゲームのタイトルは TapTapTap!! というタイトルできたいと思う。

第一回目として、画面上に丸いボタンを設置する。

Unityでゲームを開発するシリーズで説明してきたものは省略するので、そちらを確認してほしい。

1.プロジェクトを作る

プロジェクトの作り方はUnityでゲームを開発する(2)~プロジェクトを作製する~で解説した通りのため省略する。

Unityでゲームを開発する(1)~Unityのインストール方法~ では Unity のインストールまで行った。今回はUnity のプロジェクトを作る。
Unityでゲームを開発する(2)~プロジェクトを作製する~ | StudioFun - StudioFun

2.画面上にボタンを追加する

簡単な図で申し訳ないが、イメージとしては以下のような感じにしたいと思っている。

今回の完成イメージ

今回のゲームでは●をタップした際に消えるという処理を行いたい。そこで、今回●を作るにあたり、Unity の標準機能のボタンUIを用いていこうと思う。

ボタンを作るにあたり以下の画面に従い、[GameObject] > [UI] > [Button]を選択する。

(※ UI:ユーザインタフェースの略。標準的なユーザからの入力を受け付ける)

ボタンの作制

ボタンを追加すると以下の画面になることが確認できると思う。現状では以下のように角丸の四角形になってしまっている。

ボタン作成を行った結果

3.ボタンの形状を丸くする

意図したボタンの形状にするために設定の変更を行う。そのためにはボタンの設定値を表示する必要がある。まずは[Hierarchy] > [Canvas] > [Bottun] を選択する。そこで右側に諸々の設定値が表示されていればよいが、設定されていない場合は右側の [Inspector] タブをクリックすることで表示されるはずだ。

Inspector の表示まで完了したら、ボタンの設定値(形状)を変更する。ボタンの形状を変更するには[Inspector] > [Image(Script)] > [Source Image] を変更することになる。初期状態では「UISprite」となっていると思うが、その右にある◎ボタンをクリックすると以下のような画面が表示される。

ボタン形状の選択

ここで「Knob」を選択するとボタンが楕円形になるはずだ。

楕円形のボタン

あとは [Inspector] > [Rect Transform] のWidth と Height を調整してやれば好きな大きさの丸ボタンを作る事ができる。

モバイルバージョンを終了