*

[Unity]Unity4.6 UIチュートリアル Lesson8.UI Transition 日本語要約

公開日: : Unity

Unityまとめページはこちら。

Lesson7.UI Sliderの続き。

Transition

なんとなく利用していたTransitionというプロパティについての説明みたいです。
適当にボタンでも配置して説明します。
GameObject -> UI -> Button と選択して、ボタンを配置。
Wannabenote

Transitionのプロパティ

Transitionは以下の4種類があります。

  1. None
  2. Color Tint
  3. Sprite Swap
  4. Animation

また、それぞれ以下のプロパティを持ちます。(Noneは別として)

  1. Normal:基本の状態
  2. Highlighted:フォーカスされたときの状態(マウスオーバー等)
  3. Pressed:押されたときの状態
  4. Disabled:利用できないときの状態

要するにボタンをクリックしたときに色を変えたり出来るんです。

Color Tint

デフォルトだとTransitionはColor Tint(色合い)になっているはずです。
Wannabenote

こちらは前回のUI Sliderですごい色合いにしていましたが、マウスオーバー時の色やクリックされたときの色を指定出来ます。
どれの色を変えるのか、という問題もあるので、Target Graphicというプロパティも持っています。
試しにNormal、Highlighted、Pressed、Disabledの色を変更してみましょう。
Wannabenote

実行して確認します。
Disabledを確認するにはInteractableのチェックを外します。
Wannabenote

Color Multiplier

色の乗算。
正直使い方が私にはわかりません。ごめんなさい。

Fade Duration

こちらはクリックしてから色が変わるまでの間隔です。
数字が大きくなればなるほどゆっくりと色が変わります。
デフォルトが0.1なので、1程度にしてゲームを実行して、クリックなどをすると違いがわかるでしょう。

Sprite Swap

その名の通り、それぞれ四つの状態でスプライトを入れ替えます。

試しに以下の画像をスプライトにしてみます。
tile

Projectのフォルダに放り込んで、TextureTypeをSpriteに。
SpriteModeをMultipleに。
Wannabenote
Wannabenote

Sprite EditorでSlice
Wannabenote

Scriptに適当にスプライトを設定。
Wannabenote

実行するとそれぞれの状態のときにスプライトが差し替わります。
Wannabenote

Animation

多分これが一番重要です。
アニメーションさせることが出来ます。

デフォルトの名前だと問題があるので、ボタンの名称を「TestButton」に変更します。
Wannabenote

Auto Generate Animationをクリックしてアニメーションを自動生成します。
Wannabenote
そのまま保存。
Wannabenote

Ctrl+6(Cmd+6)でAnimationウィンドウを開きます。

マウスオーバーしたときに回転するように設定してみます

HierarchyのTestButtonをクリックしておいて、Highlightedを選択します。
Wannabenote

Add Curveから Rect -> Transform -> Rotation と進み、+ボタンをクリックして追加します。
Wannabenote

ルーラで真ん中あたりをクリックして、Position.x360に。
Wannabenote

シーンを実行すると、ボタンにカーソルを合わせたときにくるくる回ります
Wannabenote

同じアニメーションを設定する

例えばこのボタンを複数のボタンで同じアニメーションをさせたい場合があります。
Auto Generate Animationをすると、別のアニメーションとして保存されてしまいます。

同じ動きをさせたい場合は、同じ動きをさせたいUIを選択して、AddComponentからAnimatorを追加して、保存したアニメーションコントローラを選択してください。
Wannabenote

こんなところですね。

ad

関連記事

Unity1_5

[Unity]Unity2Dで3マッチパズルを作ろう~インストール編~

Unityの2D機能で3マッチパズルでも作ろうかと思ったのですが、ほとんど資料がない。Unity

記事を読む

unity move

[Unity]コードリファレンス GameObjectを移動する。

移動します。 transformプロパティ GameObjectのtransformプロパテ

記事を読む

logo

[Unity]Unity2Dチュートリアル 同じ色のパズルを消去する ソース解説

◆全文 using UnityEngine; using System.Collecti

記事を読む

Unity_

[Unity]Unity 2Dチュートリアル スプライトをクリック(タップ)して削除する

前回、スプライトを置くことが出来たのですが、動かせるようにしたいところです。 ドラッグして動

記事を読む

logo

[Unity]Unity2Dでパズドラのようにタイルを動かす ソース解説

◆全文 using UnityEngine; using System.Collection

記事を読む

Unity_

[Unity]Unity4.6 UIチュートリアル Lesson2.UI Rect Transform 日本語要約

今回はUIのRect Transformの使い方。 公式はここ→http://unity3d.co

記事を読む

Unity_

[Unity]Unity 2Dチュートリアル スプライトを元の位置に戻す

前回ドラッグして移動するところまでは作成したのですが、パズドラって、タップしてもその場から動かさなか

記事を読む

Wannabenote

[Unity]Unity4.6 UIチュートリアル Lesson9.UI Scroll Rect 日本語要約

Unity関連まとめページはこちら→Unity Lesson8.UI Transition 日

記事を読む

wannabenote_unity

[Unity]コードリファレンス ゲーム時間を表示する。

ゲーム内の時間を表示します。 Timeクラス 時間のためのクラスです。 ゲームが起動してか

記事を読む

Unity_

[Unity]Unity4.6 UIチュートリアル Lesson5.UI Text 日本語要約

前回の続き。今回はUI Textについての説明。 とはいえ、さすがにテキストなので、あまり説明

記事を読む

ad

Message

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

ad

  •  Auther;わなび

     「オープン系得意だよね? 俺のPCの調子悪いんだけど」という無茶振りから解き放たれゲームエンジニアに。
    C#とかUnityを扱います。
    Twitterフォロー大歓迎です。
    githubアカウント→wannabenote
  • follow us in feedly
PAGE TOP ↑