18
21

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 5 years have passed since last update.

【uGUI】押している間引っ込み、離した時に元に戻るボタンを作る

Last updated at Posted at 2016-06-03

この記事のUnityのバージョンは 5.3.5f1 です

uniBtn.gif

はじめに

押している間だけ引っ込むボタンの作り方がややこしかったので勉強も兼ねて記事にまとめてみました。

#1. ボタンを作る
最初に Create -> UI -> Button を選んでボタンを作成します。
1.gif

#2. TransitionをAnimationへ設定
Buttonコンポーネントの Transition を Animation へ切り替えます
2.gif

#3. Animationデータを作成
Auto Generate Animation をクリック
3.gif

AnimationController作成ダイアログが出てくるので保存したい場所を選んで保存をクリックします
image

こんな感じの Animator がボタンにアタッチされます
114514

#4. アニメーションを作る
次にAnimatorの中にあるAnimationを編集していきます。

Pressedアニメーション は ボタンが引っ込むアニメーションにします (スケール1.0 -> 0.8)
4_pressed.gif 114514

Disabledアニメーション は ボタンが引っ込んだままになるアニメーションにします (スケール 0.8)
4_disabled.gif

Highlightedアニメーション は ボタンが元に戻るアニメーションにします (スケール 0.8 -> 1.0)
4_highlighted.gif 114514

#5. Animatorをいじる (Stateの並び替え)
次にAnimatorのStateを並び替えて以下のようにつなぎます
image

#6. Animatorをいじる (State遷移の設定)
次にStateの遷移をいじります.

Any State -> Pressed の設定はこんな感じ (Conditionsは Pressed 、Has Exit Timeは OFF にします)
image
Has Exit Time を Offにすることで、Conditionの条件を満たしたときにAny StateからPressedに遷移するようになります


Pressed -> Disabled の設定はこんな感じ (Has Exit Timeは ON にします ) ![image](https://qiita-image-store.s3.amazonaws.com/0/44288/bb370877-f121-a09a-761b-c3c2a0314880.png) Has Exit Time を Onにすることでアニメーションの再生終了時に次のStateへ移動してくれます
Disabled -> Highlighted の設定はこんな感じ (Conditionsに Highlighted を入れます。 Has Exit Time は OFF ) ![image](https://qiita-image-store.s3.amazonaws.com/0/44288/745b8073-5568-d5b6-2202-4a81662c7bf9.png)
Highlighted -> Normal の設定はこんな感じ ( Has Exit Time は ON ) ![image](https://qiita-image-store.s3.amazonaws.com/0/44288/df5e0c45-9478-3c5a-d4bf-6a46e5bd703b.png)

7. 完成

以上で完成です.

押している間は引っ込みつづけて、離したときに元に戻るボタンができました
click_demo.gif

18
21
1

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
18
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?