概要

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

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

稼働確認

作成の流れ

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

画像の用意

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

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

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

Unity への取り込み

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

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

• Texture Type を Sprite(2D and UI) に設定。
• MeshType を Full Rect に変更。

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

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

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

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

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

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

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

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

Sprite Editor の表示

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

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

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

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

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

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

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

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

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

参考

• (英語)answers.unity.com - no-sprite-editor-window-registered-please-download

• (公式)docs.unity3d.com - Unity2020.3 - 9SliceSprites

注記・著作権等

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.

変更履歴