top of page
検索
9月17日読了時間: 3分

1分間 Unity講座　UIのボタンでクリックするごとに数が増えるカウンターを作成する方法

このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。


今回はUnityのUI活用方法の2回目、Button（ボタン）をクリックするたびに数が増えていくカウンター（クリッカー）の作成について。


下の動画は「ファイブボックス　一分間Unity講座　UIのボタンでクリックすると数が増えるカウンターを作成する方法」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください！




1,Button 素材の取得


ヒエラルキー上で右クリック、または左上の「＋ボタン」から　UI ⇒ Legacy ⇒ Button を選択します（OSやUnityのEditorバージョンによっては選択しの順番や名前が違いますがButtonが選ばれればOKです）


UnityでUI,Button の取り込み

下の図のようにCanvasの配下に「Button (Legacy)」その配下に「Text（Legacy）」2つのオブジェクトが生成されませした。「Button」はボタン本体、「Text」はボタン内のテキスト部分（初期値は Button と入力）になります。

UnityUI,Buttonの設定


続いてInspectorからそれぞれ以下のように修正します。


■ Button

Rect Transform ：親要素に対する座標、大きさを任意の場所に指定。

サンプルでは Anchor Preset をCenter Middle のままで、Y座標100，Width（幅）160、Height（高さ）50 に指定。

Image ：ボタンの背景画像、色などを指定することができます。サンプルではそのままにしています。

Unity、UI、ButtonのRectTransformコンポーネントの設定

■ Text

Rect Transform ：Buttonに対する座標、大きさを任意の場所に指定。サンプルでは初期状態のまま使用しています。

Text：文字の大きさ、書体、色などを指定

UI,Button,TextのTextコンポーネントの設定

テキストコンポーネントには上のようなプロパティがあります。それぞれ任意で調整してみましょう。

Font：FontFamily（書体）を指定

Font Style：文字の太さ、斜体などを指定

Font Size：文字の大きさを指定

LineSpacing：行高を指定

Sllignment：文字の配列を指定

Horizontal Overflow：横に文字が溢れたときの処理

Vertivcal Overfllow：縦に文字が溢れたときの処理

Best Fit：指定した文字の大きさの範囲で収める

Color：文字の色


2,Button のプログラム


今回はボタンをクリックする際に、以下の2つの処理実行されます。

  • 数を1ずつ増加させる

  • Buttonのテキストを更新する

この2つを行うために、以下の変数を用意します。名前は任意です。

  • int型（整数型）：counter

  • Text型：buttonText


前回の記事で作成した「UIManager.cs」 を立ち上げて以下のコードを追記します。今回改めて作成する場合は、NameSpace に以下のコードを追記してください。

using UnityEngine.UI;

上で確認した変数の宣言、および初期値の取得を行います。


Text buttonText;   //Button配下のText(Legacy)のTextコンポーネント
int counter;		 //数を数えるカウンター

void Start()
{
	//Buttonの子要素からTextコンポーネントを探してbuttonTextに代入
	buttonText = transform.Find("Button").GetComponentInChildren<Text>();
	buttonText.text = counter.ToString(); //buttonTextのtextプロパティを更新
}

スタート関数内では、先に宣言した変数 : buttonText にButtonの子要素、Text（Legacy)

からTextコンポーネントを取得します。transform.Find()メソッドを使って

buttonText = transform.Find("Button/Text（Legacy)").GetComponent<Text>();

と探す方法もありますが、子要素に含まれるコンポーネントが特定できる場合は、GetComponentInChildren<>() を使うことができます。


buttonText.text = でTextプロパティにcounterの値を代入していますが、Textプロパティ代入できるのは文字列型になります。そこで int型のcounter を ToString()メソッドを使って文字列型に型変換しています。


続いてbuttonがクリックされたときの処理を関数で作成します。

public void CountUp()
{
    counter++;                             //counter を1ずつ加算
    buttonText.text = counter.ToString();  //buttonText を更新
}

ここで行う処理は、このフェーズの冒頭で説明した2つです。

1つ目、 counter++ で変数：counter をインクリメント、つまり1ずつ加算。

2つ目、buttonText.text = counter.ToString() で加算された変数：counter でTextを更新。


これでクリックすると数が増えるカウンターができました。



 

ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

Comments

bottom of page