1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

エディター拡張画面を、巷にあるような、メニューを実装する方法

Posted at

#コードの使用に当たっての注意事項
コードの使用によって不利益が生じた場合は、責任を負いません。
その上で、コード使用する場合は使用してください。
参考とか、使用の場合にコメントとかに残していただけると、やる気がでて助かります。

#こんな事ってないですか?

編集している素材の保存のボタンの場所を、いつものようにメニューバーみたいな使い方できたらいいのに…

そう、青のWのソフトとか緑のXとか他のソフトみたいにエディターの画面の上部に
メニューバーみたいなのがあればもう迷わないのに…

え?それできますよ?っていう話。

以下

sample.cs
public class EditorSamapleMain : EditorWindow
{
    [MenuItem("Tools/SampleMenu")]
    static public void open_tool()
    {
        GetWindow<EditorSamapleMain>();
    }

    /// <summary>
    /// 描画部分
    /// </summary>
    private void OnGUI()
    {
        Rect _rect = EditorGUILayout.BeginHorizontal();
        {
            if(GUILayout.Button("File", EditorStyles.toolbarButton, GUILayout.Width(100.0f)))
            {
                Rect _main_rect = this.position;
                _main_rect.size = new Vector2(_rect.width, _rect.height);
                EditorSampleSub.file_menu_open(_main_rect);
            }
        }
        EditorGUILayout.EndHorizontal();
    }

}

public class EditorSampleSub : EditorWindow
{
    static public void file_menu_open(Rect _main_window)
    {
        var _window = CreateInstance<EditorSampleSub>();

        _window.position = new Rect(_main_window.x -100, _main_window.y + _main_window.size.y,200,200);

        _window.ShowPopup();
        _window.Focus();
    }

    private bool close;

    private EditorSampleSub()
    {
        close = false;
    }

    private void OnGUI()
    {
        EditorGUILayout.BeginVertical(GUI.skin.box, GUILayout.ExpandWidth(true));
        if(GUILayout.Button("緊急終了",EditorStyles.toolbarButton))
        {
            this.Close();
        }
        EditorGUILayout.EndVertical();
    }


    private void Update()
    {
        if(close)
        {
            this.Close();
        }

        
    }

    private void OnLostFocus()
    {
        close = true;
    }

}

上記を実行すると以下のようになります。

editor_sample.png

少し画面的な見栄えは、たぶん枠組みとかをつける処理をつければ、
おそらくかなりよくなると思われる。

#コード解説#
さて、少しコード解説

コードを参照するので、別画面で、上記コードぱくって、見ると良いかも。

###注目する所はRect
今回ソースの場合
画面を作る前に、別途、Rectを二つ取得しています。

1つは、HorizontalBlockから
もう1つはthisの値から取得しています。

まず1つ目の説明から
EditorSamapleMain 側のonGUI()のrectの値の値。
これは、このHorizontalBlockの中身を見せた時の大きさを見ています。
その為、今回の場合だと、Fileという書かれているボタンの大きさが値として返ってきます。
これは、このBlockの大きさを取得するために行っているものです。

2つめ
この画面の表示部分の位置からを位置と大きさを取得しています。

つまり。
editor_sample.png

1が青の枠の部分
2が赤の枠の部分

の領域を取得しています。
(青の部分だけでいいじゃん!)って気づいた人。
そう思った場合は実行してください、おそらく左上部分にメニュー顔面が出てくると思います。

赤の位置情報を取得しているのは左上起点のXとYを取得しているためです。
これによって、現在の赤枠のWindowの位置を取得しています。
その位置情報に対して、青部分のサイズのYを取得して、Fileを押した時に出てくる
ウィンドウの位置を計算しています。

そのため、2か所のRect情報が必要となってくるわけです。
2からウィンドウ位置
1からウィンドウから、コマンド分ずらした位置

1
3
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
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?