*

[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

関連記事

logo

[Unity, C#]曲線を描こう エルミート曲線とベジエ曲線

演出を作る際に綺麗な曲線を描きたいですよね。 というわけでC#でエルミート曲線とベジエ曲線を計算す

記事を読む

Wannabenote

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

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

記事を読む

unity move

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

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

記事を読む

Wannabenote

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

Unityまとめページはこちら。 前回の続き。 今回はスライダーコントロールについてです

記事を読む

Unity1_5

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

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

記事を読む

Unity_

[Unity]Unity 2Dチュートリアル スプライトをドラッグ(タップ)して移動する

前回はスプライトの簡単な操作を覚えました。 今回はスプライトを移動させてみましょう。 ドラッグして

記事を読む

Unity_

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

前回の続き。UI Imageの説明。 公式はこちら。 Image(Script)の説明です。

記事を読む

Unity_

[Unity]Unity2Dチュートリアル スプライトを利用する その2

前回で、タイルを置いて、全部消えちまうじゃねぇか! 色一個一個つけるのめんどくせぇ!! というところ

記事を読む

logo

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

◆全文 using UnityEngine; using System.Collection

記事を読む

Wannabenote

[Unity]Unity2Dチュートリアル 繰り返しパズルを消す

Unity関連記事まとめページはこちら 前回の続き。 さて、前回、やっとパズルのような体

記事を読む

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 ↑