0
0

Sliderの設定と画像を変形せずに拡大させる方法

Posted at

UnityのSlider使う度に勘で設定してるから、いい加減覚える為にも記事書いてみた。

画像の設定から画像を変形させずに拡大させる方法を書いてます

Sliderの作成

Hierarchyで右クリック、もしくはHierarchyの+ボタンをクリックして
UI > Slider を選択 これだけでSliderとCanvasが作成できます

image.png

Canvasの設定についても記事を書く予定
PlayとPauseは関係ないです、、、

Sliderの説明

スクリーンショット 2024-07-29 214724.png
↑見本
image.png
Canvasはキャンバスです、基本これないとUI表示できません
Slider Sliderというコンポーネントがアタッチされています

Sliderコンポーネントの軽い説明

全部説明するのは面倒なので、On Value Chenged についてだけ軽く説明します

On Value Chenge

On Value Chenge はValueが変動した時に何をするかを設定できます。
下の例では値が変更した時Audio SourcetimeValueを代入しています

Dynamic floatの設定を使えば、コードを書かなくてもValueを代入できます

image.png

FillArea は上の画像でいうとピンク色の部分です、Valueの数値に応じて長さが変動します
Background は上の画像でいうと白い縁の部分です
Handle Slider Area は上の画像でいうとFillAreaの先にあるピンクい円です、これを消してもユーザはValueを変更できます

画像の設定

ぶっちゃけここからが本題です。
Imageを正しく設定しないとSliderが変形するのです、そうならないようにまず
Sliderで使う画像の設定をすべて以下のようにします。

Texture Typeの変更

スクリーンショット 2024-07-29 214503.png
Texture TypeSprite にする、これをすることで、SpriteRendererImageで使えるようになります。以下のようにって言ったけどTextureType変えるだけでいいかも

Sprite Editorで編集

次にSprite Editorを開き
緑色の線を適当に変更します
スクリーンショット 2024-07-29 214548.png
この線は画像を拡大した時にどこを拡大するかを示しています
つまり画像の場合、縦に拡大し時はカーブの先端が縦に拡大され、横に拡大した時は先端のカーブが終わったところから拡大される
image.png

Imageの設定

ImageImage TypeSlicedにします、これで変形せずに拡大ができるようになります
image.png

良かったらフォローして、他にもSNSやってるからそっちも見に行って

まだコンテンツ多くないと思うけど、、、

0
0
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
0
0