
Unity でウィンドウを 9スライス機能を使って作っていく記録です。 こんなサイズ可変のウインドウのインターフェイスを簡単に作成できます。便利。
ウィンドウは透明にもできますし、一つの画像からそのまま可変サイズのウィンドウにできるのが良いです。
ソフトウェア | バージョン |
---|---|
Unity | Unity2020.3 LTS |
OS | Windows 10 Home |
以下、画像用意~ Unity 上で表示するまでの流れです。
ウィンドウの元となる画像を作成します。 9つに分割されることを想定した、画像を用意します。
完成の Window 例のイメージはこんな感じ。
今回は透過色を含む上のような画像を png ファイルで用意しました。
Unity に画像をドラッグ&ドロップで取り込みます。
画像を取り込んだら、テクスチャの設定をします。
ボタンを選択。スプライトエディタが表示されます。
もしエディタが表示されず、「No Sprite Editor Window registerd.」というメッセージが出る場合は、「Sprite Editor」をダウンロードします。
何もエラーなくエディタが表示されるならこの作業は不要です。
メニューの
→ からダウンロードできます。
検索先を「Unity Registry」にして検索テキストに「2D Sprite」と入力。
2D Sprite を選択して、右下の
ボタンを押します。しばらくすると、インストール完了します。。(終了時には特にメッセージでないです) もう一度、テクスチャから
ボタンを押してちゃんとエディタが表示されたら準備完了です!以下のようなウィンドウが表示されます。
ここから、ウィンドウの左右上下、中央を区切って、9つのエリアに画像を分割します。
以下がなにも設定していない初期の状態です。 左右上下に緑の点が見えるかとおもいます。 これをマウスで移動して区切り位置を指定できます。
区切り位置を以下のように変更しました。
区切ったら
ボタンを押して変更を適用します。これで、Unity シーン内に Canvas を新規作成し、 その配下に Image を新規作成します。
作成した「Image」の
に先ほど作成したテクスチャを指定すると、無事に下のように可変のウィンドウっぽいものが出来ます!
上の画像の例は、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お名前:以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください
お名前: