#概要
Unityのバージョンは5.2.3f1
uGUIのButtonについてのメモです。
Buttonのコンポーネントの内容は以下の通りです。
内容はマニュアルを見ると詳しく載っています。
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
- Auto Generate Animationを押してButtonのcontrollerを作成する
- Animationを設定したボタンをHierarchyで選択してAnimationウィンドでScaleやColorを変化させる
http://www.metalbrage.com/UnityTutorials/uGUI/ButtonElement.html
##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制御
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を使ったリスト、ドロップボックス、ナビゲーションボタンなどの作り方は別の記事で書く予定。
ドラック&ドロップ、ボタンの長押し処理は別の記事で書く予定。