【ホーム画面】Unityでホーム画面を作成
今回はUnityでUIを作成したいと思います。
まずはCanvasを作成します。
CanvasがないとUGUI(Unity Graphical User Interface)が見えない状態になってしまうそうです。
1，UI作成
[手順]
Hierarchyウィンドウで右クリック→UI→Canvas
シーンビュー上に(↓)四角い枠が出てきました。
動画(↑)のように白い四角はゲームの解像度によって大きさが変わります。
プレイヤーの持っているデバイス(PC/IOS/android)などによって解像度は変わるので、この白い四角の中に絵やテキストを入れていくと思うと思いますがちょっとだけ違うので一旦表示だけさせて枠は無視しておきましょう。
次にUIの中身を作成していきます！
Canvasの上で右クリック→UI→Imageをクリックします。
Imageというオブジェクトが作成され、Canvasの子オブジェクトになりました。(オレンジが親オブジェクトで、水色が子オブジェクトです)
UGUIはCanvasの子オブジェクトになっていないと表示されないので注意が必要です！
親子オブジェクト
image画像
白い箱のようなものが出てきました。
次に表示させたいものを作成します。
自分で描いた絵でも、素材でもなんでも大丈夫です。
私はCanvaという無料のデザインツールで画像を作成しました。
ゲームのTOPページの背景になるのでシンプルな感じにしました。
作成したものを.jpgまたは.pngで保存しておきます。
保存をしたらそのファイルをUnityのProjectウィンドウにドラック＆ドロップをします。そうするとProjectの中に素材が追加されました。
Projectウィンドウで追加した素材を選択したままInspectorを見ます。
すると追加した素材のパラメーターがたくさん出てくるのですが、上の方にあるTextureTypeをSprite(2D and UI)に変更します。できたら下記画像のオレンジで囲った部分のApplyというボタンをクリックします。
基本的にパラメーターを変更した時はApplyをクリックするまでは反映されないのできちんと押しましょう。
押し忘れてほかの作業をしてしまいそうになったら下記のようなダイアログが出てきます。
ダイアログ
Apply(適応する)/Revert(破棄する)/Cancel(キャンセル)が出でくるので、今回はApplyを選択し、変更を適応させましょう。
次にHierarchyウインドウでimageを選択しinspectorを確認します。
Imageの中Source Imageのオレンジの四角の部分に先ほどの素材をドラック＆ドロップします。
そうすると、先ほどの素材がゲーム画面で表示されると思います。
上記のように大きさを簡単に変えることができます。
2，Textを使って文字を表示させていきます！
次にTextを使って文字を表示させていきます！
Cavasの上で右クリック＞UI＞Text-TextMesh Proをクリック
するとシーンビューに「New Text」と表示されます。
HierarchyウィンドウでText(TMP)を選択した状態で、inspectorを見ます。
「New Text」という文字がTextInputの中に記入してあることがわかります。
試しに文字を変えてみます。
「New Text」から「ABCABCABC」になったと思います。
ここで注意なのですが、Text-TextMesh Proだと下記画像のように日本語表記が「□□□」になってしまします。
なので次のブログで日本語表記のやり方を書いていきたいと思います。
3，Buttonを使ってボタンを作っていきます！
最後にButtonを使ってボタンを作っていきます！
Cavasの上で右クリック＞UI＞Button-TextMesh Proをクリック
するとシーンビューに「Button」というボタンが表示されます。
ボタンはボタンの子オブジェクトにTextがついてきているので、ボタンの上に「Button」をいう文字が表示されます。
またこちらの、TextがText-TextMesh Proなので日本語表記が「□□□」になってしまします。
実行ボタン(下記画像のオレンジで囲った△マーク)を押下するとボタンっぽくプッシュできると思います！
補足、スクリプトを書いてみました
下記はやらなくても大丈夫なのですが、補足程度にまとめていきます！
簡単にスクリプトを書いて、ボタンを押下したときにメソットを呼び出すという処理を書いていこうと思います！
Project＞Assets＞作成＞C#スクリプトをクリック
するとAssetsの中に「NewBehaviourScript」ができます。
ダブルクリックをするとVisualstudioが開きます。
(先にインストールをしておく必要があります)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class NewBehaviourScript : MonoBehaviour
{
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
}
public void testclick()
{
Debug.Log("クリックされました！");
}
}
赤の部分が今回書いたスクリプトです。(本当に少しだけ．．．笑)
簡単に説明すると
Public＝「公開する」
Publicを付けることによってこのメッソドはこのスクリプトの外から呼び出せるようになりました
(メソッド＝オブジェクトの操作を定義したもの)
スクリプトを書いたら新たにGameObjectを一つ作成します。
ここにドラック＆ドロップでスクリプトをアタッチします。
ButtonのinspectorのOnClickとなっているところの＋ボタンをクリックします。
上記のようになったと思います。
次に、Ｎone(object)とあるところに先ほどスクリプトをアタッチしたGameObjectをHierarchyからドラック＆ドロップをします。
次に、No Functionとなっているところの横の▼を押下します。
すると先ほど作ったスクリプト名＞TastClickを選択します。
ここまで出来たら実行ボタンを押下し、ボタンをクリックしてみてください。
ボタンが押され、Consoleにメソッドが呼び出されているのがわかるようになりました！
最後に
私は上記を使用して
┗タイトル画面
┗TOP画面
┗選曲画面
┗リザルトを作れました！
参考になったら嬉しいです。
次はボタンをタップして画面遷移について書いていこうと思います。
