【Unity】Sliderでサウンド調節できるようにしよう!①

Audio Unity

Sliderでサウンド調節できるようにしよう!

今回からSliderを使ってゲーム内のBGMやSEの音量を変更できる機能の実装方法を解説していきます。

こちらが完成品になります。全3回すべて同じようにおこなうとこちらのものができるようになります。(Displayのサイズ設定によりUIの位置が多少誤差があります)

UIを実装しよう!

今回はSliderでサウンドを調整するための下準備としてUIを実装していきます。

カメラの設定

今回作成するサウンドの設定画面は、背景を黒色を想定しているので、Main cameraの設定を変更していきます。

HierarchyにあるMain Cameraを開いてください。

デフォルトでは、Camera ComponentのClear FlagsがSkyboxにBackgroundが青色になっています。こちらを変更して背景を黒色にしていきます。

Main-Camera

それでは変更しましょう。

Clear Flagsは、SkyboxからSolid Colorへ

Backgroundは、青色から黒色へ

こちらは、お好みの色に変更してもらって構いません。

Change-Main-Camera

背景を黒色に変更することができたのでテキストを追加しましょう。

UIを追加

今回使用するUIは、text、Button、Sliderになります。

まずは、textでページのタイトルを作成しましょう。

Hierarchyにtextを追加します。

Hierarchy→UI→Text

Add-Title

ページのタイトルのなのでtextObjectをTextからTitleTextに変更しましょう。

TitleText

TitleTextのポジションを画面上部に移動させFontの設定も変更しましょう。

TitleTextのInspectorを開いてください。

以下のように変更します。

  • Pos Yを0から250に変更
  • Widthを160から300に変更
  • Heightを30から100に変更
  • Font Sizeを14か50に変更
  • Alignmentを左端上部から中央に変更
  • Font Colorを黒色から白色に変更
  • TextをNew Textからサウンド設定に変更

すべて変更すると以下の画像のようになると思います。

Title-Text

これでページタイトルの設定が終わりました。

次にBGMMenuViewを作成します。

BGMMenuViewの作成

BGMMenuViewでBGMをに関わるUIを一括管理します。

Canvasの中に空のGameObjectを作成し、名前をBGMMenuViewに変更してください。

BGMMunuViewにUIのSliderを追加してください。

Hierarchy→Canvas→BGMMunuView→UI→Slider

Add-Slider

SliderのSlider ComponentのValueの値を0.5に変更してつまみを動かしてみると、Sliderの色がデフォルトでは、白色になっており見にくいので変更していきます。

Slider-Component

Slider→Fill Area→Fillを開いてください

FillのImage ComponentのColorを変更することで色の変更が可能です。

お好みの色に変更してもらって構いませんが、今回は青色に変更したいと思います。

Fill-Color

これでSliderの設定は完了です。

次にBGMMenuViewにTextを追加します。

今回は、なんの音量を調整するかわかるテキストと現在の音量が分かるテキストをが欲しいので2つのテキストを追加します。

まずは1つ目

BGMMunuViewにTextを追加します。

Hierarchy→Canvas→BGMMunuView→UI→Text

Add-text

追加すると画像のようにテキストが見にくいので変更していきます。

Capture

まずは、TextObjectの名前をLabelTextに変更しておきましょう。

LabelTextのInspectorを開いてください。

以下のように変更します。

  • Pos Xを0から-150に変更
  • Widthを160から100に変更
  • Heightを30から100に変更
  • TextをNew TextからBGMに変更
  • Font Sizeを14から35に変更
  • Alignmentを左端上部から中央に変更
  • Colorを黒色から白色に変更

すべて変更すると以下の画像のようになります。

Label-Text

以上でLabelTextの設定が完了です。

2つ目は、LabelTextを複製してVolumeTextを作成します。

複製方法は以下のようになります。

Windows Ctrl+d
Mac Command+d

複製したObjectの名前をVolumeTextに変更しておいてください。

VolumeTextのInspectorを開いてください。

以下のように変更します。

  • Pos xを-150から150に変更
  • TextをBGMから50に変更

すべて変更すると以下の画像のようになります。

Add-VolumeText

 

 

 

以上でVolumeTextの設定が完了し、BGMMenuViewの設定がすべて終わりました。

次は、SEMenuViewの設定をしていきましょう。

SEMenuViewの作成

VolumeTextを作成した時とどうように複製を使って作成します。

BGMMenuViewを複製してください。

複製したObjectの名前をSEMenuViewに変更しておいてください。

Add-SEMenuView

BGMMenuViewとSEMenuViewの位置を少し変更しておきます。

以下のように変更します。

  • BGMMenuViewのPosYを0から25に変更
  • SEMenuViewのPosYを0から-25に変更

すべて変更すると以下の画像のようになります。

それではSEMenuViewの設定を変更していきます。

変更するのは1つだけです。

LabelTextのTextをBGMからSEに変更してください。

Change-Text

以上でSEMenuViewの設定が完了しました。

ゲームにおいてサウンド設定画面には、メイン画面に戻る必要があるので戻るボタンをつけておきましょう。

Buttonの追加

CanvasにButtonを作成します。

Hierarchy→Canvas→UI→Button

Add-Button

ButtonのInspectorを開いてください。

PosYを0から-200に変更してください。

Change-PositionY

今回実装したButtonはクリックのみでScene切り替えはできませんが、Scene切り替えを実装したい方は、下記の記事を見てください。

【Unity】簡単にSceneをボタンで切り替えるには?
ゲーム制作する上で、タイトル画面からメイン画面に切り替えたり、リザルト画面に切り替える技術は必ず必要になります。今回は、そんな時に便利な方法を解説します。

以上でButtonの設定は完了しました。

UIの設定はすべて終わりました。

次回はSliiderとテキストを連携してSliderのvalueを変更したらVolumeTextの数値が変わるようにします。

【Unity】Sliderでサウンド調節できるようにしよう!②
前回からSliderを使ってゲーム内のBGMやSEの音量を変更できる機能の実装方法を解説しています。 今回はSliderとVolumeTextを連携させてSliderのValueの値が変化するとVolumeTextの値も変化させれるようにします。

 

コメント

タイトルとURLをコピーしました