Nodachisoft Nodachisoft logo, Katana Sword Icon
  
@あまじ✎ 2021年12月18日に更新

Unity で自前のウィンドウ(GUI)を描画する

Unity で自前のウィンドウ(GUI)を描画する

概要

Unity でウィンドウを 9スライス機能を使って作っていく記録です。 こんなサイズ可変のウインドウのインターフェイスを簡単に作成できます。便利。

Original Window GUI Image on Unity

ウィンドウは透明にもできますし、一つの画像からそのまま可変サイズのウィンドウにできるのが良いです。

稼働確認

ソフトウェア バージョン
Unity Unity2020.3 LTS
OS Windows 10 Home

作成の流れ

以下、画像用意~ Unity 上で表示するまでの流れです。

画像の用意

ウィンドウの元となる画像を作成します。 9つに分割されることを想定した、画像を用意します。

完成の Window 例のイメージはこんな感じ。

Window sample

今回は透過色を含む上のような画像を png ファイルで用意しました。

Unity への取り込み

Unity に画像をドラッグ&ドロップで取り込みます。

画像を取り込んだら、テクスチャの設定をします。

インスペクター

  • Texture TypeSprite(2D and UI) に設定。
  • MeshTypeFull Rect に変更。

Sprite Editor ボタンを選択。スプライトエディタが表示されます。

「No Sprite Editor Window registerd.」が表示される

もしエディタが表示されず、「No Sprite Editor Window registerd.」というメッセージが出る場合は、「Sprite Editor」をダウンロードします。

ダウンロードしてね

何もエラーなくエディタが表示されるならこの作業は不要です。

メニューの Window{/ }→ Package Manager からダウンロードできます。

Package Manager

検索先を「Unity Registry」にして検索テキストに「2D Sprite」と入力。

Searching 2D Sprite

2D Sprite を選択して、右下のInstallボタンを押します。

しばらくすると、インストール完了します。。(終了時には特にメッセージでないです) もう一度、テクスチャからSprite Editor ボタンを押してちゃんとエディタが表示されたら準備完了です!

Sprite Editor の表示

以下のようなウィンドウが表示されます。

Appear Sprite Editor

ここから、ウィンドウの左右上下、中央を区切って、9つのエリアに画像を分割します。

以下がなにも設定していない初期の状態です。 左右上下に緑の点が見えるかとおもいます。 これをマウスで移動して区切り位置を指定できます。

InitialState

区切り位置を以下のように変更しました。

AfterModifiedSpriteDivisor

区切ったら Apply ボタンを押して変更を適用します。

Unity シーンに Window を表示してみる

これで、Unity シーン内に Canvas を新規作成し、 その配下に Image を新規作成します。

作成した「Image」の Source Image に先ほど作成したテクスチャを指定すると、無事に下のように可変のウィンドウっぽいものが出来ます!

3window

上の画像の例は、3つの Image インスタンスを Canvas 配下においてみて、それぞれ Width と Height 、表示位置を変更してみたものです。

参考

注記・著作権等

Unity 公式より借りてきたロゴを記事の画像に使用させていただいております。

This article are not sponsored by or affiliated with Unity Technologies or its affiliates. Unity Trademark is a trademark or registered trademark of Unity Technologies or its affiliates in the U.S. and elsewhere.

変更履歴

日付 変更概要
なし
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Unity の C# コードで System.Type.GetType が null を返してしまう

Unity の C# コードで System.Type.GetType が null を返してしまう

#Unity#.net✎ 2022-1-11
Unity の C# コードで System.Type.GetType が null を返してしまう
目次
Unity で自前のウィンドウ(GUI)を描画する
Unity で自前のウィンドウ(GUI)を描画する
概要
概要
稼働確認
稼働確認
作成の流れ
作成の流れ
画像の用意
画像の用意
Unity への取り込み
Unity への取り込み
「No Sprite Editor Window registerd.」が表示される
「No Sprite Editor Window registerd.」が表示される
Sprite Editor の表示
Sprite Editor の表示
Unity シーンに Window を表示してみる
Unity シーンに Window を表示してみる
参考
参考
注記・著作権等
注記・著作権等
変更履歴
変更履歴
Nodachisoft © 2021