読者です 読者をやめる 読者になる 読者になる

ツテなしフリーランス日誌

ツテが全く無いまま会社を辞め、我が道を行くフリーランスエンジニアのブログです



【Unity】Buttonをクリックして、ButtonのTextを変える

簡単な動作確認をするのに Button はとても便利です。Android, iOSでもそのまま動作します。

ButtonのOnClickイベントを検知して、文字を変える方法を紹介します。

1. Buttonオブジェクトの作成

1. HierarchyビューのCreate -> UI -> Buttonを選択します。

f:id:kurisankaku:20170321231333p:plain

2. Canvasが作成されていない場合は、CanvasとButtonが作成されます。

f:id:kurisankaku:20170321231354p:plain

3. AndroidiOSで見たときにも見栄えが変わらないように、CanvasのUI Scale Modeを変更します。

  • UI Scale Mode -> Scale With Screen Size

f:id:kurisankaku:20170321231506p:plain

4. Buttonがこのままでは見難いので、位置と大きさを調整します。

  • Pos X -> 0, Pos Y -> 0
  • Width -> 300, Height -> 100

f:id:kurisankaku:20170321231518p:plain

5. TextのFont Sizeも調整します。

  • Font Size -> 40

f:id:kurisankaku:20170321231533p:plain

2. スクリプトの作成

1. ProjectビューのAssetsフォルダ上で右クリックし、Create -> C# Scriptを選択し、スクリプトを作成します。名前はなんでも構いません。

f:id:kurisankaku:20170321231554p:plain

f:id:kurisankaku:20170321231630p:plain

2. スクリプトを開き、下記コードを挿入してください。

public void OnClickButton()
{
    // Textコンポーネント郡を取得します。
    var components = this.gameObject.GetComponentsInChildren<Text>();
    // テキストを文字の状態によって変更するようにします。
    components[0].text = components[0].text == "Button" ? "Changed" : "Button";
}

3. Buttonにスクリプトを追加

1. ButtonのInspectorを開き、Buttonにコンポーネントとして、先程作ったスクリプトドラッグアンドドロップして追加します。

f:id:kurisankaku:20170321231834p:plain

2. On Clickの+ボタンを押します。

f:id:kurisankaku:20170321231850p:plain

3. None(Object)のボタンを押し、Buttonオブジェクトを選択します。

f:id:kurisankaku:20170321232003p:plain

f:id:kurisankaku:20170321232101p:plain

4. No Functionとなっているところを押し、作成したスクリプトのメソッドを選択します。

f:id:kurisankaku:20170321232130p:plain

4. 実行

実行し、ボタンを押して文字が変わることを確認してください。

f:id:kurisankaku:20170321232142p:plain

f:id:kurisankaku:20170321232153p:plain