LoginSignup
1
1

More than 1 year has passed since last update.

Unity2020でよく見るデザイン・外観のダイアログを開く!

Last updated at Posted at 2022-01-05

0.やりたかったこと

こういうダイアログを開いて、アプリ内にローカル保存のデータ(画像とか)をインポート、そのデータを利用する、というもの
完成図.png
※間違ってもこの↓↓古いデザインのダイアログではない…
懐かしいけれどもね…?💦
(こちらのやり方もリクエストがあれば書きますが…いりますかね…OpenFileDialogを使う方法だと、自分の環境ではこんなダイアログになるんです…)
完成図そのⅡ.png

1.環境

  • Windows10Pro Version 20H2
  • Unity2020.3.21f (LTS)
  • Microsoft Visual Studio Community 2019 Version 16.11.8

2.使用するもの

外部アセットとしてこれを使わせていただきます…!
制作者の方には心よりの感謝を…(- -)(_ _)ペコリ

3.導入手順

画像多めで説明しますので、おそらく秒で導入できるのではないかと…

3-1.Unityプロジェクトの下準備

①適当なUnityプロジェクトを作成します
スクリーンショット (373).png

②先述のページの中ほどにあるDownload PackageをクリックしてUnityPackageをダウンロード
そのUnityPackageをUnityプロジェクト内にドラッグ&ドロップでインポートします
スクリーンショット (374).png

③インポートをおします
スクリーンショット (375).png

④エラーがいくつか吐いていると思います。
これらはUnity既存のパッケージで競合しているものがあるのが原因なようで、解決するべく左上のタスクバーのWindowsをおします
スクリーンショット (376).png

⑤Windows→PackageManagerとおします
スクリーンショット (377).png

⑥VersionControlがあると思いますので、これをRemoveで削除してください
スクリーンショット (378).png

⑦…これで準備完了なのですが、未だ残っているエラーメッセージが気になる人はクリアしてください…
スクリーンショット (379).png

3-2.ボタンの設置

⑧ヒエラルキーウィンドウでButtonのUIを作成します
スクリーンショット (382).png

⑨Buttonのサイズなど、微調整は各自お願いします
私はわかりやすいように、後でstretch×stretchで画面サイズピッタリにしました
スクリーンショット (383).png

3-3.スクリプトの作成・アタッチ

⑩プロジェクトウィンドウでC#スクリプトを作成してください
スクリーンショット (380).png

⑪スクリプトの名前はOpenExplorerにしました
スクリーンショット (381).png

⑫スクリプトをダブルクリックして、実際にスクリプトを作成します

入力するスクリプト

OpenExplorer.cs
using UnityEngine;
using UnityEngine.UI;
using SFB; //追加(ダイアログ出す用,今回の本題)
using System.IO; //追加(画像データを加工する用)

public class OpenExplorer : MonoBehaviour
{
    Image image; //スクリプトをアタッチしたbuttonのImageコンポーネント
    void Start()
    {
        image = GetComponent<Image>();
    }

    /// <summary>
    /// ボタンを押したらダイアログが表示される
    /// ダイアログで指定した画像をボタンに反映する
    /// </summary>

    public void OnClickFileOpen()
    {
        // フィルタはここで追加操作する
        // new ExtensionFilter("表示名", "拡張子1", "拡張子2", ...)
        var extensions = new[] {
            new ExtensionFilter("画像ファイル", "png","jpg"),
            new ExtensionFilter("すべてのファイル", "*"),
        };

        // ダイアログを表示する
        // StandaloneFileBrowser.OpenFilePanel("タイトル", "最初のディレクトリ場所", [フィルタ設定], [複数選択可能かどうか(true or false)])
        string[] path = StandaloneFileBrowser.OpenFilePanel("画像ファイルを選択", "", extensions, false);

        // Pathは文字列の配列だから、1つの場合は1個のみかの判定 + null判定
        if (path.Length == 1 && path[0] != null)
        {
            //OKボタンがクリックされたとき、選択されたファイル名を表示する
            Debug.Log(path[0]);

            //選択した画像をバイト型のデータで読み込む
            byte[] bytes = File.ReadAllBytes(path[0]);

            //バイト型のデータをTexure2D型に変換
            Texture2D texture = new Texture2D(1, 1);
            texture.LoadImage(bytes);

            //Texure2D型のデータをsprite型に変換して代入
            image.sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), Vector2.zero);
        }
    }
}

⑬スクリプトを作成したら、Buttonにドラッグ&ドロップしてアタッチします
また、Buttonを選択したまま、OnClick()の下の+をおします
スクリーンショット (384).png

⑭NoneとなっているところにButtonをドラッグ&ドロップします
スクリーンショット (385).png

⑮NoFunctionを押し、OpenExplorer → OnClickFileOpen()を選択します
スクリーンショット (387).png

4.テストプレイすると

お疲れさまでした。これで実装手順は終了です
再生ボタンを実際に押して…
スクリーンショット (388).png

その後ボタンをクリックすると…よく見るダイアログが出てきたでしょうか…?
実際に適当な画像を選択すると…
スクリーンショット (390).png

こんな感じで画面に反映されます
スクリーンショット (391).png

5.ビルド時の注意

上記の手順で、Unityエディタ上の挙動はすべて作成可能だと思うのですが、スタンドアロンビルド(パソコン用ビルド)するのであれば、設定面でひと手間が必要なようです。

①UnityBuildの画面からPlayerSettingにいきます
スクリーンショット (392).png

②PlayerのProjectSettingを下へとスクロールし…
スクリーンショット (393).png

③APIを.NET 4.xにします
スクリーンショット (394).png

④あとはビルドすればうまくいくはず!

6.編集後記

この場を借りまして、今回の件に関して快く相談に乗ってくれ、解決策を惜しみなく教えてくれた職場の同僚・友人に心よりの感謝を。いつも自分を助けてくれてありがとう。2022年もどうかよろしく!

1
1
0

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
  3. You can use dark theme
What you can do with signing up
1
1