🎮

[Unity2D] おしゃれなスライダーを作ろう

に公開
Unity
unity1week
unity2d
unity入門
tech

はじめに

Unity2Dでおしゃれなスライダーを作ったので、備忘録として記事を残します。
Unityのチュートリアルを完了して自ら作品を作り始めたい人が対象です。
実装時間: 約10分

用意するもの

環境

  • Unity6000.1.4f1

画像

  • background.png
    background画像。スライダーの背景画像として使用。

background

  • fill.png
    fill画像。スライダーのFillの部分として表示される画像として使用。

fill

  • handle.png
    handle画像。スライダーのハンドル部分の画像として使用。

handle

完成品

以下のようなスライダーが出来ます。
Unity標準のSliderをカスタマイズしているので、デフォルトのスライダーと同じように使うことが出来ます。
完成品

作り方

1. プロジェクトを用意する

Unity6000.1.4f1 で 2Dプロジェクトを作成します。
今回、「2D(Bulid-In-Render Pipeline)」で作成しました。
未検証ですが、3DでもURPでも出来ると思います。

  1. Unityのバージョンが「6000.1.4f1」であるか確認する
  2. 「2D(Bulid-In-Render Pipeline)」を選択する
  3. 「Create project」をクリックしてプロジェクトを作成する

sub_1

2. 画像を追加する

  1. エクスプローラーから画像を選択して、UnityのProjectパネルの中にドラック&ドロップする

sub_2

  1. 画像を選択し、「Sprite Editor」を開く

sub_3

  1. 2つ目以降のスプライトを削除する
    sub_4

  2. 1つ目のスプライトの範囲を全体を覆うようにする

sub_5

  1. 右上の「Apply」を押して、変更を保存する

sub_6

  1. もう片方の画像の対しても同じようにスプライトを1つに統合する

※ 編集が完了した後、各画像のスプライトが1つであることを確認してください。

3. スライダーを作成する

  1. Hierarchyパネルで右クリックする

  2. Sliderオブジェクト(UI > Slider)を作成する

sub_7

  1. 各ImageコンポーネントのSource Imageをアサインする
  • Slider > Background のImageコンポーネントのSource Imageにbacground画像をアサイン
  • Slider > Fill Area > Fill の Imageコンポーネントの Source Image にfill画像をアサイン
  • Slider > Handle Slide Area > HandleのImageコンポーネントのSource Imageにhandle画像をアサイン

画像をアサインすると以下のようになります。
ここでは、わかりやすいようにSliderのValueを 0.5 に設定しています。

sub_8

スタイルが崩れているため、いくつか設定をする必要があります。

  1. fill画像をマスクにする
    デフォルトの設定ではfill画像はSliderのValueを変更すると横に拡縮するので、これをマスクに変更します。
    Slider > Fill Area > FillのImageコンポーネントを設定します。

sub_9

  1. Fill Areaオブジェクトの横幅を変更する
    Slider > Fill AreaのRect Transformコンポーネントを設定します。

sub_10

  1. 各オブジェクトの縦幅を調整する
    お好みで調整してください。ここでは以下に設定しました。
  • Slider > BackgroundのRect Transformコンポーネントの TopとBottomを-2に設定
  • Slider > Fill AreaのRect Transformコンポーネントの TopとBottomを-2に設定
  • Slider > Handle Slide AreaのRect Transformコンポーネントの TopとBottomを-4に設定

完成

完成品

応用例

  • BGM&SEのスライダーとして使用する
    image

Discussion