2015年1月25日日曜日

【Unity】タッチで飛び出すメニューみたいなものを作る【uGUI】

名称がわからないのでこういう表現になるんですが、ポチっと押すとグインと飛び出すメニューのようなものを作っていきます。
とりあえずスクロールビューを作ります。これは前回のおさらいです。

① Canvas > Panel > Vertical(Panel)
② Vertical > Button
③ Button をプレハブ化
    (同じものを複数扱う場合は必ずプレハブに)
④ Vertical > Button, Button, Button...
    (この時点では Button は全て同じ位置にある)
⑤ Vertical に Vertical Layout Group(Component) を追加
    (追加すると領域いっぱいに自動で Button(子オブジェクト)を配置してくれる)
⑥ Vertical に Content Size Fitter(Component) を追加、Horizontal Fit を Preferred Size に
⑦ Button に Layout Element(Component) を追加、 Preferred Height にチェック、値を入れる
    (デフォルトは 10、適当に大きくすると1つだけ Button が大きくなる)
⑧ 変更した Button のインスペクター右上の Apply を押す
⑨ Panel に Vertical Layout Group(Component) を追加、Panel > Vertical の Pivot > y を 1.0 に
⑩ Panel の名前を ScrollView にし、Sroll Rect(Component) を追加、Horizontal のチェックを外す
⑪ Scroll Rect の Content に Vertical を設定
⑫ ScrollView の Rect Transform の Width, Height を調整、アンカー位置も調整
    (アンカーの調整は Width, Height を変えたらその都度必ず行う方が良い、アンカーの設定にも依るが)

一段落、動かしてみましょう。

続いてスクロールバーを付けていきます。


⑫ Canvas > Scrollbar
    (Scrollbar は ScrollView の子にせず、ScrollView よりも下に作らないと画面に表示されない)
⑬ Scrollbar の Scrollbar(Component) の Direction を Bottom To Top に
⑭ Scrollbar の Rect Transform の Width を調整、アンカーも調整
⑮ ScrollView の Scroll Rect(Component) > Vertical Scrollbar に作成した Scrollbar を指定
⑯ ScrollView に Mask(Component) を追加

途中経過

いい感じです。


⑰ ScrollView より少しだけ縦に大きい MenuWindow(Panel) を作成、ScrollView と Scrollbar を放り込む
⑱ MenuWindow と同じサイズの Menu(Panel) を作成、 MenuWindow を放り込む
⑲ Menu の子に MenuButton(Button) を作成、大きさとアンカーの調整、色とかお好みで調整
⑳ Menu > Image(Component) > Color のアルファ値をゼロに
(Image のチェックを外しても多分問題ない)

途中経過

ここから Animator を使っていきますが、触ったことのない方は少し難しく感じるかもしれません。


① Menu を選択、Animationビューの記録ボタンを押して MenuStayDown.anim を作成
(Menu.controller は自動で作成されます)
② Add Curve > Rect Transform > Anchored Position を追加し、Add KeyFrame からキーフレームを作成、Menu の位置をキーフレームに記録し、アニメーションを作成する
③ 同様に MenuStayUp.anim, MenuUp.anim, MenuDown.anim を作成
④ Animatorビューに移り、各ステートを Transition でつなげる
⑤ Assetsフォルダに animファイルが4つできていることを確認、各アニメーションのループを切っておく

途中経過

Transition の設定が Exit Time になっているので現状ではオートで上下しています。

⑥ Animatorビューの左下にある Parameters から Bool型変数 UP を追加
⑦ スクリプトを書く、書いたら Menu にアタッチ
⑧ MenuButton > Button(Component) > OnClick() の設定を Runtime Only, MenuButton, Button.SendMessageUpwards, 呼び出す関数名(ここでは ControlMenuAnimator ) とする
⑨ Animatorビューから Transition の設定を変える
(Conditions を Exit Time から UP にし、true, false を選択)

Menu にアタッチしたスクリプト
using UnityEngine;
using System.Collections;

public class MenuOpener : MonoBehaviour {

    public void ControlMenuAnimator()
    {
        Animator _menuAnim = gameObject.GetComponent<Animator>();
        _menuAnim.SetBool ("UP", !_menuAnim.GetBool("UP"));
    }
}

シーン実行、動作確認

MenuButton の設定

ヒエラルキー

やりたいことがやれましたのでこれで終わります。
最後に、スクロールすると空白みたいなものが出て嫌な場合、ScrollView > Scroll Rect(Component) > Movement Type を Clamped にすると上端、下端でピッタリ止まりますのでお試しあれ。


参考:
お仕事募集中 【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる

0 件のコメント:

コメントを投稿