いんでぃーづ

ゲームメインのブレブレブログ。ゲーム,Unity,デザイン,UI/UX

クレイジー・ビート・ジャンクション : on Steam

Unity : uGUIのボタンをフワフワ強調表示させてタップを促す

{スポンサーリンク}

チュートリアルなどでボタンをクリックさせたいとき、下のようにボタンに拡大縮小のアニメーションを使ったりすると効果的です。

f:id:sugar_affordance:20170620104357g:plain

Unity標準の機能で実現できるので紹介します。

ボタンを配置する

なにはともあれ、GUIのボタンを配置します。

Transitionタイプを変更する

Button コンポーネントTransition 欄が Color Tint になっていると思うので、Animation に変更します。

さらにその下の Auto Generate Animation ボタンを押すとファイル保存のダイアログが出るので、適当なところに保存します。自動で作成されるAnimatorControllerです。

Highlighted アニメーションを作る

メニューの Window > Animation から アニメーションウインドウ を開きます。
ショートカットで開く場合は Windows : Ctrl + 6、Mac : Command + 6 。

先ほどのシーン内でボタンを選択状態にすると、以下のように編集するアニメーションを選択できるので、Highlightedを選択しましょう。

さらに Add Property ボタンから Rect Transform > Scale の右の+ボタンを押します。

デフォルトで 0 と 1 のあたりに キーフレーム がついているので、0.3秒位置あたりに新規キーフレームを追加します。
そして Scale.x, Scale.y をそれぞれ 1.3 くらいの値を入れましょう。

このとき、タイムライン上の赤い線の位置を合わせないと意図したアニメーションにならないので注意。

f:id:sugar_affordance:20170620111650j:plain

スクリプトからフワフワさせる

ゲーム実行後、スクリプトで以下のように制御すると、ボタンがフワフワアニメーションします。

    Button MenuButton = GetComponent<Button>();    // 対象のボタン
    MenuButton.animator.SetTrigger ("Highlighted");

ワンポイントで使うとヨイよ!


“Unity” and Unity logos are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere, and are used under license.


Amazon.co.jpアソシエイト


免責事項

当サイトの広告バナー、リンクによって提供される情報、サービス内容について、当サイトは一切の責任を負いません。

また、当サイトの情報を元にユーザ様が不利益を被った場合にも、当サイトは一切の責任を負いません。

すべて自己責任でお願いします。