*

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

公開日: : 最終更新日:2014/11/30 Unity

前回に続いて、今回はUI Buttonの説明。
公式はこちら

まずはHierarchyにUIのButtonを追加しましょう。
Unity_

UIのボタンはImage(Script)Button(Script)があります。

ボタンを追加すると、Textっていう子が出来ますが、削除することでテキストなしのボタンになります。
Unity_Unity_

ButtonのInspectorを見てみましょう。
Button(Script)のInteractableはボタンの有効化のプロパティです。
チェックを外すとボタンが利用出来なくなります。
Unity_

Transitionはいくつかの種類があります。

Noneはマウスオーバーなどで動きは付きません。

ColorTintはその逆で色を変更などが出来ます。
Normal Color:普段の色
Highlighted Color:マウスオーバー時の色
Pressed Color:ボタンを押したときの色
Disabled Color:Interactableがfalseのときの色
Unity_

SpriteSwapはマウスオーバー時のスプライトを変更したりなどが出来ます。
画像を差し替えたり出来ますね。
Unity_

Animationはその名の通り、アニメーションをそれぞれの状態で定義出来ます。
Unity_
アニメーションのやり方は、まずはButton(Script)でAuto Generate Animationをクリック。
Unity_

Buttonを選択した状態でCtrl+6でアニメーションを開きます。
Unity_

左上の部分でそれぞれの動きを決めることが出来ます。
ためしにクリックしたときに横幅を大きくしてみましょう。
Pressedを選択して、
Unity_
録音ボタンを押す。
Unity_
それからButtonのInspectorのWidthをクリックしながら左右に動かして、大きさを変更しましょう。
Unity_
クリックしたときのボタンの大きさを決めたら、再度録音ボタンを押して、録音解除。

ゲームを実行して実際にボタンをクリックすると、クリックしたときに大きくなります
Unity_

同じ動きをするボタンを追加するときは、ボタンをCanvasに追加して、名前を変更して、
Unity_

そのボタンのButton(Script)のTransitionAnimationに変更。
Unity_

AddComponentからAnimatorを追加。
Unity_

最後にAnimatorのControllerの丸印をクリックして、ButtonをControllerに設定。
Unity_
実行してクリックすると追加したボタンも大きくなります。

クリックしたときの処理はButton(Script)にあるOn Click(Button)でオブジェクトを選択して、その関数やコンポーネントを記述します。
例えばButtonがクリックしたときにButtonのテキストを「Click!!」に変更してみます。
HierarchyのButtonを選択して、On Click()+マークから追加。
Unity_

変更したいTextをドラッグ&ドロップ。
Unity_

No Functionになっているところをクリックしてドロップダウンから、Text→string textを選択。
Unity_

出てきたテキストボックスに「Click!!」と入力。
Unity_

実行してクリックをするとテキストが「Click」に変更しました。
(同じような要領で関数をアタッチすれば、スクリプトを流せますね)
Unity_

こんなところですね。お疲れ様でした。
次回更新しました→[Unity]Unity4.6 UIチュートリアル Lesson4.UI Image 日本語要約

ad

関連記事

Unity_

[Unity]Unity2Dチュートリアル 画面上のGameObjectを取得する

前回の続きです。 というわけで移動の仕方は完璧です。本当なら一瞬で移動ではなく、パズドラみたく

記事を読む

Unity_

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

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

記事を読む

Unity_

[Unity]Unity2Dチュートリアル 番外編 これパズドラじゃなくね?

前回の続き。 パズドラみたく直線で3つ以上連なっているときに消したいんです。 そして、何を勘

記事を読む

cropped-wannabenote_logo.png

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

Unity関連まとめページはこちら→Unity Unity4.6 UIチュートリアル Less

記事を読む

unity

[Unity]コードリファレンス GameObject生成

Unityをまじめに扱う必要が出てきたので、自分用のリファレンスを書いていきます。 適当にボタ

記事を読む

Wannabenote

[Unity]Unity2Dチュートリアル パズルを落下させる。

前回の続き。 とりあえず、パズルが消えたので、パズルを落としましょう。 以下のようにソースを

記事を読む

Unity2_1

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

前回の続き。 早速、スプライトを設置して作っていきましょう。 ※スプライトとは スプライ

記事を読む

Unity_

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

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

記事を読む

wannabenote_unity

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

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

記事を読む

Unity_

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

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

記事を読む

ad

Comment

  1. […] ネットに回答あり [Unity]Unity4.6 UIチュートリアル Lesson3.UI Button 日本語要約 […]

  2. Johne861 より:

    Very good blog post.Really thank you! Fantastic. kcdckkekkkdc

  3. わな び より:

    I hope you find my blog posts informative!

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 ↑