LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

UnityでNavigation Drawerっぽいものを作りました

はじめに

こんにちは。Livesense Advent Calendar 7日目です。
普段はAndroidアプリの開発・運用を担当している私ですが、クロスプラットフォームにも最近興味が出てきました。
今回は少しだけ触ったことがあるUnityを駆使して、スマホアプリのNavigation Drawerっぽいものを作ってみたのでその紹介をさせてください!
本記事では初心者向けの記事となりますので、どうぞよろしくお願いいたします。

Navigation Drawer

一般的にアプリの左側から出てくるメニューのことです。
別カテゴリーの画面に切り替える時や、アプリの設定画面を探すときに開くことが多いのではないでしょうか。

画像はMaterial Designより引用

Unityで作るにあたって

UnityにはAndroidのようにNavigation Drawerを作るためのライブラリはありません(あったらすみません)
そのため自前で作るか、有志の開発したassetを購入する必要があります。
今回はもちろん自前で実装してみます。

実装

1. プロジェクト作成

今回は3D要素はないので、Mobile 2Dで作成します。

2. 画面準備

  1. 「GameObject > UI > Canvas」 でHierarchyにCanvasを追加
  2. Hierarchyの中にあるCanvasを右クリックし、「UI > Panel」を追加
  3. PanelのInspectorからColorをクリックし、透明度(A)を255にする。色は任意
  4. Panelを右クリックし、「UI > Text」「UI > Button」を追加
    Text設定値
    Width : 500
    Height : 200
    FontSize : 100
    Text : HOME
    Button設定値
    Anchor Presets : Top-Left
    PosX : 150
    PosY : -150
    Width : 300
    Height : 300
    FontSize : 100
    Text : ≡ (アイコンなのでテキストでなくてもOK)
  5. Panelをコピペして、「Panel(1)」を生成
  6. Panel(1) とTextとButtonをの設定値を一部変更
    Panel(1)設定値
    Color : Panel とは違う色にする
    Anchor Presets : Bottom-Left
    PosX : -980
    PosY : 0
    Width : 980
    Text設定値
    Text : SETTING
    Button設定値
    Text : ← (アイコンなのでテキストでなくてもOK)
  7. 2つのPanelの名前をそれぞれ以下の通りにする
    Panel : HomePanel
    Panel(1) : SettingPanel
  8. 2つのButtonの名前をそれぞれ以下の通りにする
    HomePanel配下のButton : NavigationButton
    SettingPanel配下のButton : BackButton

HierarchyとSceneが以下の通りになっていることを確認して、問題なければ次へ進みます。

Hierarchy Scene

3. 画面切り替え用のスクリプト

  1. ProjectタブのAssetsで右クリックし、「Create → C# Script」を選択
  2. もう一度Assetsで右クリックし、「Create → C# Script」を選択
  3. ファイル(クラス名)をそれぞれHomeDrawerNavigatorSettingDrawerNavigatorにリネーム
  4. 以下のソースコードをそれぞれのクラスにコピペ
HomeDrawerNavigator.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class HomeDrawerNavigator : MonoBehaviour
{
    [SerializeField]
    GameObject settingPanel;

    public void OnClick()
    {
      // settingPanelのPositionを(0, 0)に移動
      if (settingPanel != null)
      settingPanel.transform.position = new Vector2(0, 0);
    }
}
SettingDrawerNavigator.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SettingDrawerNavigator : MonoBehaviour
{
    [SerializeField]
    GameObject settingPanel;

    public void OnClick()
    {
      // settingPanelのPositionを(-980, 0)に移動
      if (settingPanel != null)
      settingPanel.transform.position = new Vector2(-980, 0);
    }
}

4. スクリプト適用

  1. HomeDrawerNavigator.csNavigationButtonまでドラッグ&ドロップ
  2. NavigationButtonのInspectorにあるHome Drawer Navigator(Script)の中にある、Setting PanelにSettingPanelを適用
  3. Home Drawer Navigator(Script)の上にある、On Click()欄の右下にある「+」をクリック
  4. None (Object)の欄にはNavigationButtonを適用
  5. 「No Function > HomeDrawerNavigator > OnClick()を選択
  6. SettingDrawerNavigator.csBackButtonまでドラッグ&ドロップ
  7. BackButtonについても、上の2~5にそって同じように適用

5. 実行

Sceneの上にあるRun「▶︎」をクリックして動作確認してみましょう。
左上のButtonをクリックして以下のようになればOKです。

起動直後・BackButtonクリック後 NavigationButtonクリック後

おわりに

今回はNavigation Drawerっぽいものを紹介させていただきました。
Unityはゲーム開発の側面に目を向けがちですが、個人的にはクロスプラットフォームであることを生かしたスマホアプリ開発ができることが強みだと思っています。
Navigation Drawerの表示にスクリプトを用いましたが、ループ処理を使って徐々にPositionをずらすことでアニメーションのような動きもできます。
AndroidもiOSも両方作ってみたいけど...という方へぜひ参考になれば嬉しいです。

追記

それぞれのスクリプトを以下のように置き換えるとNavigation Drawerを開くアニメーションっぽいものができました。

HomeDrawerNavigator.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class HomeDrawerNavigator : MonoBehaviour
{
    [SerializeField]
    GameObject settingPanel;

    private bool isClicked = false;

    void Update() {
      if (isClicked && settingPanel != null) {
        settingPanel.transform.position = Vector2.MoveTowards(settingPanel.transform.position, new Vector2(0, 0), 3000f * Time.deltaTime);
      }

      if (settingPanel.transform.position.x == 0) {
        isClicked = false;
      }
    }

    public void OnClick()
    {
      isClicked = true;
    }
}
SettingDrawerNavigator.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SettingDrawerNavigator : MonoBehaviour
{
    [SerializeField]
    GameObject settingPanel;

    private bool isClicked = false;

    void Update() {
      if (isClicked && settingPanel != null) {
        settingPanel.transform.position = Vector2.MoveTowards(settingPanel.transform.position, new Vector2(-980, 0), 3000f * Time.deltaTime);
      }

      if (settingPanel.transform.position.x == -980) {
        isClicked = false;
      }
    }

    public void OnClick()
    {
      isClicked = true;
    }
}

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0