UnityUnityメモ

Unity初心者必見!簡単にボタンの色や背景を変える方法

Unity

はじめに

Unityでゲームを作るとき、ボタンの色を変更したい場面って結構ありますよね?たとえば、クリックしたときに色が変わるボタンを作ったり、ゲームのテーマに合わせて色をカスタマイズしたり。でも、どうやれば簡単に変更できるのか迷ったことはありませんか?

この記事では、Unity初心者の方でもわかりやすいように、ボタンの色を変更する基本的な方法から、スクリプトを使って動的に色を変えるテクニックまで、丁寧に解説します。Unityを使ったUIカスタマイズに挑戦したい方は、ぜひ最後まで読んでみてください!

ボタンを配置したことがないという方はコチラの記事から見てみてください!

1.ボタンを配置する

  1. ボタンを追加: メニューバーから「GameObject」→「UI」→「Button-TextMeshPro」を選択します。これで、キャンバスに新しいボタンが追加されます。TextMeshProを使用しない場合「GameObject」→「UI」→「Legacy」→「Button」で通常のテキストのボタンが作成されます。                     
  2. ボタンの位置とサイズを調整: SceneビューまたはRectTransformツールを使用して、ボタンの位置とサイズを調整します。           

これで、基本的なボタンが作成できました。次に、このボタンのテキストとカラーをカスタマイズしてみましょう。



ボタンのテキストを設定する

ボタンにテキストを追加すると、ユーザーに明確な指示や情報を伝えることができて便利です!

  1. ボタンを選択: ヒエラルキーウィンドウでボタンを選択します。       
  2. テキストを編集: ボタンの子要素として「Text」があります。このTextコンポーネントを選択し、インスペクタウィンドウでテキストを編集します。              
  3. フォントスタイルとサイズの調整: テキストのフォント、サイズ、色などをカスタマイズできます。あなたのプロジェクトのテーマやスタイルに合わせて調整してください。



ボタンのカラーを設定する

ボタンの色を変えることで、ユーザーの目を引きつけたり、特定のアクションを促したりする効果があります。

  1. ボタンコンポーネントの選択: ヒエラルキーウィンドウでボタンを選択し、インスペクタウィンドウで「Button」コンポーネントを見つけます。       
  2. 色のカスタマイズ: 「Button」コンポーネント内の「Color Block」セクションを見てください。通常状態、ホバー状態、押下状態など、異なる状態でのボタンの色を設定できます。
  3. 色を選択: それぞれの状態に対して、カラーピッカーを使用して色を選択します。色の選択は、ユーザーの感情やアクションに影響を与えるため、プロジェクトの全体的なカラースキームに合わせることが重要です。              



ボタンの背景に画像を設定

ボタンに画像を設定することで、視覚的に魅力的なデザインを実現できます。

  1. ボタンを選択: ヒエラルキーウィンドウで作成したボタンを選択します。
  2. Imageコンポーネントの使用: ボタンには「Image」コンポーネントが既に含まれています。これを使用して背景画像を設定します。      
  3. 画像の選択: インスペクターウィンドウの「Image」コンポーネントで、「Source Image」フィールドを見つけます。ここで、先に追加した背景に使用したい画像を選択します。                  
  4. 画像の調整: 必要に応じて、画像のスケールやアスペクト比を調整して、ボタンにフィットするようにします。                 



スクリプトでボタンの色を動的に変更する

Unityではスクリプトを使うと、ボタンの色を動的に変更することができます。例えば、ゲーム中に特定の条件でボタンの色を変更することで、視覚的なフィードバックを与えることができます。ここでは、簡単なスクリプトの例を使って解説します。


1. スクリプトの作成

次に、プロジェクトウィンドウでスクリプトを作成します。

  1. プロジェクトウィンドウを右クリック。
  2. 「Create」→「C# Script」を選択。
  3. スクリプト名を「ChangeButtonColor」と入力します。

2.スクリプトを書く

作成したスクリプトをダブルクリックして開き、以下のコードを記述します。

using UnityEngine;
using UnityEngine.UI; // UI操作のためのライブラリをインポート

public class ChangeButtonColor : MonoBehaviour
{
    // ボタンをInspectorから設定できるようにする
    public Button targetButton;

    void Start()
    {
        // ボタンのColorBlockを取得
        ColorBlock colorBlock = targetButton.colors;

        // ボタンの通常時の背景色を赤に変更
        colorBlock.normalColor = Color.red;

        // 変更したColorBlockをボタンに適用
        targetButton.colors = colorBlock;
    }
}

コード解説

  • public Button targetButton;
    Inspectorから変更対象のボタンを設定できるようにしています。
  • ColorBlock colorBlock = targetButton.colors;
    ボタンの色設定を取得します。
  • colorBlock.normalColor = Color.red;
    ボタンの通常時の背景色を赤に変更します。
  • targetButton.colors = colorBlock;
    変更した色設定をボタンに適用します。

3.スクリプトを適用

スクリプトをUnityに反映させるには、以下の手順を行います。

  1. Hierarchyで、ボタンを選択します。
  2. Inspectorの「Add Component」ボタンをクリックし、「ChangeButtonColor」スクリプトをアタッチします。
  3. Inspectorで「Target Button」に、ボタン(MyButton)をドラッグ&ドロップします。

4.実行結果を確認

  1. Unityのプレイボタンを押して実行。
  2. ボタンの背景色が赤に変わっていることを確認します。

5.応用: ボタンをクリックしたときに色を変更

ボタンをクリックしたときに色を変更する場合は、以下のコードを参考にしてください。

void Update()
{
if (Input.GetMouseButtonDown(0)) // 左クリックを検知
{
ColorBlock colorBlock = targetButton.colors;
colorBlock.normalColor = Color.green; // 緑色に変更
targetButton.colors = colorBlock;
}
}

これで、スクリプトを使ったボタンの色変更が簡単にできるようになりました!色を変更するタイミングや条件を工夫することで、ゲームの見た目や操作感をさらに向上させることができます。

UnityでのUIデザインをワンランク上に!おすすめボタンアイコンアセット3選

UnityでUIをデザインするとき、ボタンの見た目はゲームの印象を大きく左右します。今回は、Unity Asset Storeで購入できるおすすめのボタンアイコンパックを3つご紹介します。プロジェクトにぴったりなアセットを見つけて、UIをより魅力的にしましょう!


1. 6000+ Flat Buttons Icons Pack

シンプルで汎用性の高いデザインが特徴のアイコンパックです。なんと6,000以上のアイコンが収録されているため、どんなジャンルのゲームにも対応可能!特に、ミニマルなデザインやカジュアルゲームに最適です。

こんな方におすすめ
  • カジュアルゲームやモバイルゲームを開発している
  • シンプルでクリーンなデザインを求めている


2. Sci-Fi Buttons and Panels Pack

未来的でスタイリッシュなデザインが特徴のSci-Fiボタンパック。パネルやインターフェースも含まれており、SFゲームやサイバーパンクの雰囲気を強調したいときにピッタリです。組み合わせ次第でカスタム感がアップ!

こんな方におすすめ
  • Sci-Fiやサイバーパンク系のゲームを開発している
  • 未来感のあるデザインで世界観を引き立てたい


3. Cartoon UI Button Pack 7

ポップで可愛らしいカートゥーンスタイルのボタンパックです。明るい色使いや遊び心のあるデザインは、ファミリー向けや子供向けのゲームに最適!UIを楽しい印象にしたい方にぜひおすすめしたいアセットです。

こんな方におすすめ
  • 子供向けやカジュアルなゲームを開発している
  • 楽しい雰囲気を演出したい


これらのアセットを活用することで、ボタンデザインが一気にプロフェッショナルな仕上がりになります。それぞれのアセットが持つ独自のスタイルを活かして、ゲーム全体のクオリティを向上させましょう!ゲームの世界観やターゲットプレイヤーに合ったアセットを選ぶことで、UIがさらに引き立ちますよ。ぜひこの機会にチェックしてみてください!

6. まとめ

Unityでのボタンの色変更は、見た目をカスタマイズする基本的なテクニックです。エディタでの簡単な設定からスクリプトを使った応用まで、さまざまな方法を紹介しました。これを活用すれば、ゲームにオリジナリティを加えることができます。手順を参考に、ぜひあなたのプロジェクトでも試してみてください!

よくある質問(Q&A)

Q
ボタンの色変更はスクリプトなしでも可能ですか?
A

はい、UnityエディタのButtonコンポーネントの「Colors」から変更できます。

Q
色をアニメーションで変更する方法はありますか?
A

はい、Animatorを使えば色変更をアニメーションで制御できます。

Q
複数のボタンを一括で色変更するには?
A

配列やリストを使い、スクリプトで一括操作できます。