13
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

uGUIのButton、Selectable

Last updated at Posted at 2015-12-03

#概要
Unityのバージョンは5.2.3f1

uGUIのButtonについてのメモです。
Buttonのコンポーネントの内容は以下の通りです。

  • Image Imageについての説明はこちら
  • Button
  • Text Textについての説明はこちら

内容はマニュアルを見ると詳しく載っています。
http://docs.unity3d.com/ja/current/Manual/script-Button.html
http://docs.unity3d.com/ja/current/Manual/script-SelectableNavigation.html

#Buttonの表現
Buttonの表現はTransitionで変わります。

  • Noe 変化なし
  • Color Tint 色の変化
  • Sprite Swap テクスチャの変化
  • Animation アニメーションで変化
    といった感じです。

ボタンの状態は4つに分けられます。

  • Normal 通常の状態(Sprite Swapの場合はImageの画像が)
  • Highlighted 選択中の状態(フォーカス中)
  • Pressed ボタンを押している状態
  • Disabled ボタンが反応しない状態(Interactableのチェックをはずした状態)

##ButtoのColor Tint

  • 各状態の色を設定するとその状態になったときに色が変化する
  • Color Multiplierで色の乗算。Fade Durationで色が変化する時間を秒単位で指定

##ButtonのSprite Swap

  • 各状態にSpriteを設定するとその状態になったときに画像が変化する
  • Normalの画像はImageコンポーネントで設定する

##ButtonのAnimation

##ButtonのNavigation(Selectable)

  • Navigationはキーボードでのフォーカス順を設定できますが、特に使用しない場合はNoneにしておく
  • そうしないとボタンを押したあとフォーカスが残ってHighlightedの状態がつづく
  • Explicitに変更すると上下左右の移動先を指定できる(これでボタン選択をループさせることもできる)
  • Select Onに移動先のオブジェクトを選択する
  • Button(Script)はAdd ComponentでButton以外にも追加することができる(名称はSelectable)
  • UI > Selectable で追加
  • EventSystemのFirst Selectedに最初に選択しておくオブジェクトを指定できる

参考ページ
https://yumineko.com/unity-ugui-gamepad/
http://westhillapps.blog.jp/archives/43683528.html
https://gametukurikata.com/program/uifocus

#Buttonのイベント
ボタンのクリックイベントはOn Click()で制御します。
ボタンは押してから離したときにイベントが発生します。
(ボタンを押してから範囲外にドラッグして離してもイベントは発生しない、同様に別の所でクリックしてからドラッグしてボタンの場所でリリースしてもイベントは発生しない)
イベントの追加方法は
1.右下の+をクリック
2.None(Object)に制御するオブジェクトを選択
3.No Functionで制御するメソッドもしくは変数を指定する

#ButtonのSprict制御

ButtonTest
  using UnityEngine.UI;

  private Button button1;
  button1 = GetComponent<Button>();  // コンポーネントを取得

  // フォーカスを指定(nullを指定すると何も選択していない状態になる)
  EventSystem.current.SetSelectedGameObject(gameObject);

  // フォーカスされてるオブジェクトを取得
  selectedObj = EventSystem.current.currentSelectedGameObject;

  // このメソッドをOn Click()に指定するとボタンを押したときにメソッドを呼び出す
  public void OnClick()
  {
      button1.enabled = false;
  }

#その他のメモ
Buttonには様々な使い道がある

  • 横に並べてナビゲーションボタンを作る
  • スクロールするようにしてリストボタンを作る
  • メッセージボックスのYes Noボタンを作る
  • シーンが切り替えられるボタンを作る
  • ボタンを押したらアニメーションやサウンドが再生されるボタンを作る
  • Scriptでドラック&ドロップの処理を追加する
  • Scriptでボタンを押しているときに反応して離したときに解除するような処理を追加する

#参考になりそうなサイトやAsset
スマホの場合、ボタンをつくる上で注意することはボタンのサイズ(小さすぎると押しづらい)
http://www.dotproof.jp/2013/08/06/minimum-tap-size/

ボタン表現の参考サイト
http://baigie.me/sogitani/2014/08/navigation-design-type/
http://lab.sonicmoov.com/smartphone/appli-ui-ux/

ボタンアニメーションの参考サイト
http://tsubakit1.hateblo.jp/entry/2015/02/11/223849
http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html
http://11neko.com/menu-style-inspiration/
http://nelog.jp/how-to-transformicons
http://elmt.jp/web/2930/#

NGUI(uGUIが出るまでゲームなどでよく使われていたアセット)
https://www.assetstore.unity3d.com/jp/#!/content/2413

#今後の課題
Buttonを使ったリスト、ドロップボックス、ナビゲーションボタンなどの作り方は別の記事で書く予定。
ドラック&ドロップ、ボタンの長押し処理は別の記事で書く予定。

13
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?