UnityUnityメモ

Unityで簡単!ボタンを使ってオブジェクトのサイズを拡大縮小する方法

Unity

はじめに

Unity初心者の皆さん、こんにちは!今回は、UIボタンを使って3Dオブジェクトのサイズを自由に変更できる機能を作ってみましょう。Unityには、直感的に操作できるUIシステムが備わっており、ボタン一つでさまざまなアクションを実現することができます。


この記事では、拡大ボタンと縮小ボタンをクリックするだけで、シーン内のオブジェクトのサイズを段階的に変更できる仕組みを作ります。具体的には、次のような流れで進めていきます。

  1. ヒエラルキーウィンドウを使ってボタンを作成する。
  2. サイズを変更する対象となる3Dオブジェクトを配置する。
  3. サイズ変更を制御するC#スクリプトを実装する。
  4. ボタンにスクリプトを紐付けて動作を設定する。

Unityを使い始めたばかりの方でも、この記事の手順を追えば簡単に機能を実装できるようになっています。ゲームにインタラクションを追加する第一歩として、この機能をぜひ学んでみてください!それでは、早速始めましょう!

Unityを触ったことがないという方はコチラの記事から見てみてください!



ボタンを用意しよう

まず、サイズを変更するためのボタンを用意します。今回は「拡大ボタン」と「縮小ボタン」をそれぞれ作成し、名前やテキストをわかりやすく設定していきましょう。


1. ボタンを追加する

  1. ヒエラルキー(Hierarchy)ウィンドウを開きます。
  2. ウィンドウ内で右クリックして、以下の手順を選択します:
    • 「UI」→「Button」
  3. これでシーンにボタンが追加されます。

2. ボタンをもう一つ追加

1つ目のボタンと同じ手順で、もう1つボタンを追加します。この2つ目のボタンは「縮小ボタン」として使います。


3. ボタンの名前を変更する

追加した2つのボタンを区別しやすくするために、名前を変更しましょう。

  1. ヒエラルキーウィンドウで1つ目のボタンを選択します。
  2. 名前を「ScaleUpButton」に変更します。
  3. 同じように、2つ目のボタンを選択して名前を「ScaleDownButton」に変更します。

4. ボタンのテキストを編集する

次に、それぞれのボタンに表示されるテキストを編集します。

  1. ヒエラルキーウィンドウで「ScaleUpButton」を選択します。
  2. ボタンの子要素である「Text」を選択します(※新しいUnityバージョンでは「Text (Legacy)」や「TextMeshPro」が使われている場合もあります)。
  3. インスペクターウィンドウで「Text」プロパティを編集し、文字を「拡大」に変更します。
  4. 同様に「ScaleDownButton」の「Text」プロパティを編集して、文字を「縮小」に変更します。

5. 配置を整える

ボタンがシーンビュー上で見やすいように、配置を調整します。

  1. Sceneビューでボタンをドラッグして位置を調整します。
    • 「ScaleUpButton」を画面の上側に配置。
    • 「ScaleDownButton」を画面の下側に配置。

これで、拡大ボタンと縮小ボタンの準備が整いました!


次のステップでは、サイズを変更する対象のオブジェクトを配置していきます。これでボタンの準備はバッチリですね!



3. サイズを変更する対象オブジェクトを配置

次に、サイズを変更する対象となるオブジェクトをシーンに配置します。今回は、シンプルな3Dオブジェクト「キューブ」を使用します。以下の手順に従って、キューブをシーンに追加しましょう。


手順1:ヒエラルキーウィンドウを使ってキューブを追加する

  1. ヒエラルキー(Hierarchy)ウィンドウを右クリックします。
  2. 表示されるメニューから「3D Object」→「Cube」を選択します。
  3. シーン内にキューブが追加されます。

手順2:キューブの位置を調整する

キューブが追加されたら、位置を調整して見やすくします。

  1. ヒエラルキーウィンドウで「Cube」を選択します。
  2. インスペクター(Inspector)ウィンドウの「Transform」コンポーネントで以下の値を設定します:
    • Position: X = 0, Y = 0.5, Z = 0
    • Rotation: X = 0, Y = 0, Z = 0
    • Scale: X = 1, Y = 1, Z = 1

これで、シーン内のキューブが中央に配置され、操作しやすくなります。


手順3:名前を変更する(オプション)

複数のオブジェクトを扱う場合に備え、キューブの名前を分かりやすく変更しておきましょう。

  1. ヒエラルキーウィンドウで「Cube」を右クリックし、「Rename」を選びます。
  2. 名前を「ResizableCube」に変更します。

これで、サイズを変更する対象オブジェクトの準備が整いました。次のステップでは、このキューブのサイズを変更するためのスクリプトを作成します。簡単なので、ぜひ進んでみてください! 😊



4. スクリプトの作成

この記事では、オブジェクトのサイズを変更するスクリプトを作成します。このスクリプトでは、ボタンをクリックするたびに対象オブジェクトのサイズを拡大または縮小する機能を実現します。以下の手順に沿って進めましょう。

スクリプトの作成手順

  1. 新しいスクリプトを作成する
    • プロジェクトウィンドウを右クリックします。
    • 「Create」→「C# Script」を選び、新しいスクリプトを作成します。
    • スクリプトの名前を 「ScaleChanger」 とします。
  2. スクリプトを編集する
    • 作成した「ScaleChanger」スクリプトをダブルクリックして開きます。
    • 以下のコードを入力してください。
using UnityEngine;

public class ScaleChanger : MonoBehaviour
{
    public GameObject targetObject; // サイズを変更するオブジェクト
    private Vector3 originalScale;  // 元のサイズを保存
    private int scaleStep = 0;      // 現在のサイズの段階
    private int maxSteps = 5;       // 最大の段階数
    private float scaleFactor = 0.2f; // 1段階ごとのサイズ変更量

    void Start()
    {
        // オブジェクトの元のサイズを保存
        originalScale = targetObject.transform.localScale;
    }

    public void ScaleUp()
    {
        if (scaleStep < maxSteps)
        {
            scaleStep++;
            targetObject.transform.localScale = originalScale * (1 + scaleStep * scaleFactor);
        }
    }

    public void ScaleDown()
    {
        if (scaleStep > 0)
        {
            scaleStep--;
            targetObject.transform.localScale = originalScale * (1 + scaleStep * scaleFactor);
        }
    }
}

コードのポイント

  • targetObject
    サイズを変更するオブジェクトを外部から指定できるように、public な変数として宣言しています。これにより、Unityエディターのインスペクターウィンドウでオブジェクトを簡単に設定できます。
  • originalScale
    オブジェクトの元のサイズを記録しておくための変数です。これにより、サイズ変更後も元の状態に戻せるようになります。
  • ScaleUp メソッド
    サイズを1段階拡大します。現在の段階が最大値を超えないようにチェックを行っています。
  • ScaleDown メソッド
    サイズを1段階縮小します。現在の段階が0より小さくならないようにチェックを行っています。

スクリプト完成後の確認

スクリプトを保存したら、次のステップでオブジェクトにスクリプトをアタッチして設定を行います。このスクリプトが正しく動作するためには、次に紹介する設定が重要ですので、そのまま次のセクションに進んでください!


これでスクリプト部分は完成です!引き続き設定やボタンとの連携を行い、実際に動作させてみましょう。



5. スクリプトのアタッチと設定

オブジェクトのサイズを変更するために作成したスクリプトを、対象のオブジェクトにアタッチして設定を行います。以下の手順に沿って進めてください。

1. スクリプトを対象オブジェクトにアタッチする

  1. ヒエラルキー(Hierarchy)ウィンドウで、サイズを変更する対象オブジェクト(例:キューブ)を選択します。
  2. プロジェクトウィンドウから、先ほど作成した「ScaleChanger」スクリプトをドラッグ&ドロップで対象オブジェクトにアタッチします。
  3. オブジェクトを選択した状態で、インスペクター(Inspector)ウィンドウに「ScaleChanger」コンポーネントが追加されていることを確認してください。

2. スクリプトの「Target Object」フィールドを設定する

  1. インスペクターウィンドウ内の「ScaleChanger」コンポーネントを探します。
  2. Target Object」というフィールドが表示されています。このフィールドに、サイズを変更する対象のオブジェクトを設定します。
    • ドラッグ&ドロップ:ヒエラルキーウィンドウでキューブを選択し、このフィールドにドラッグして設定します。
  3. 設定が正しく行われている場合、「Target Object」にキューブが表示されます。

3. 設定の確認

  • 「ScaleChanger」コンポーネントが正しくアタッチされ、フィールドにオブジェクトが設定されていれば準備完了です。
  • スクリプトが意図したとおりに動作するか、次のステップで動作確認を行いましょう。

ヒント

  • スクリプトがアタッチされていないと機能しないため、インスペクターを再確認してください。
  • フィールドが空白の場合、ボタンをクリックしてもエラーが発生することがあります。

これでスクリプトのアタッチと設定は完了です!次はボタンにスクリプトを紐付けて、実際に動作を確認していきましょう。



6. ボタンにスクリプトを紐付ける

最後に、ボタンをクリックしたときにスクリプトのメソッドが呼び出されるように設定しましょう。この手順では、「ScaleUpButton」を使ってサイズを拡大するメソッドを紐付け、「ScaleDownButton」を使ってサイズを縮小するメソッドを紐付けます。

①「ScaleUpButton」にメソッドを紐付ける

  1. ヒエラルキー(Hierarchy)ウィンドウで「ScaleUpButton」を選択
    ボタンをクリックすると、インスペクター(Inspector)ウィンドウにその設定が表示されます。
  2. 「Button (Script)」セクションを探す
    インスペクターの中から、「Button (Script)」セクションを見つけます。その中にある「On Click ()」という項目を確認してください。
  3. 新しいイベントを追加する
    「On Click ()」のリスト右下にある「+」ボタンをクリックします。これで新しいイベント項目が追加されます。
  4. 対象のオブジェクトを割り当てる
    「On Click ()」リストに表示された新しい項目の空欄部分に、スクリプトがアタッチされたキューブ(例:Cube)をヒエラルキーウィンドウからドラッグ&ドロップします。
  5. 呼び出すメソッドを選択する
    ドロップダウンメニュー(デフォルトでは「No Function」と表示)をクリックし、以下の手順でメソッドを選択します。
    • ScaleChangerScaleUp ()

これで「ScaleUpButton」が正しく設定されました!


②「ScaleDownButton」にメソッドを紐付ける

「ScaleUpButton」の設定と同じ手順で、「ScaleDownButton」も設定します。ただし、呼び出すメソッドが異なります。

  1. 「ScaleDownButton」を選択し、インスペクターウィンドウで「Button (Script)」セクションを開く
  2. 「On Click ()」に新しいイベントを追加
  3. キューブをドラッグ&ドロップで割り当てる
  4. ドロップダウンメニューからメソッドを選択
    • ScaleChangerScaleDown ()

これで「ScaleDownButton」が設定され、縮小操作が可能になります。


ポイントと確認

  • メソッドを選択する際、必ず正しいオブジェクトとスクリプトが割り当てられているか確認してください。
  • 設定が完了したら、シーンを再生して実際にボタンをクリックしてみてください。「拡大」ボタンを押すとキューブのサイズが大きくなり、「縮小」ボタンを押すと小さくなるはずです。

次のステップでは、動作確認について解説します!



7. 動作確認

最後に、実際に作成した機能が正しく動作するかを確認してみましょう。

ステップ1: シーンを再生する

Unityエディターの上部にある「Play」ボタンをクリックして、シーンを再生します。このボタンを押すと、ゲームの実行状態になります。

ステップ2: ボタンをクリック

ゲーム画面に表示されている「拡大」ボタンと「縮小」ボタンをクリックしてみましょう。それぞれのボタンを押すたびに、オブジェクト(キューブ)のサイズが変更されるはずです。

  • 拡大ボタンを押すと: オブジェクトのサイズが徐々に大きくなります。
  • 縮小ボタンを押すと: オブジェクトのサイズが徐々に小さくなります。

ステップ3: 正しく動作しない場合の確認ポイント

もし、ボタンを押してもオブジェクトのサイズが変更されない場合、以下を確認してみてください。

  1. スクリプトの設定
    「ScaleChanger」スクリプトがオブジェクトにアタッチされているか、インスペクターで確認してください。また、「Target Object」に正しいオブジェクトが設定されているかもチェックしましょう。
  2. ボタンの「On Click()」設定
    ボタンの「On Click()」設定で、正しいメソッド(ScaleUp() または ScaleDown())が選ばれているか確認してください。
  3. コンソールのエラーメッセージ
    Unityエディター下部のコンソールウィンドウにエラーメッセージが表示されている場合、メッセージをよく読んで問題の原因を特定しましょう。

ステップ4: 応用例を試してみる

動作が確認できたら、次のような応用にも挑戦してみましょう。

  • サイズの変更ステップを調整する
    scaleFactor の値を変更して、1回のボタン押下でどの程度サイズが変わるかを調整できます。
  • 他のオブジェクトにも適用する
    「Target Object」を別のオブジェクトに変更すれば、異なるオブジェクトにも同じ機能を簡単に適用できます。

これで動作確認は完了です!問題なく動作した場合は、この記事を参考に他の機能も作成してみてください。ゲーム開発の幅がぐっと広がりますよ!



8. まとめ

この記事では、UnityのUIボタンを使ってオブジェクトのサイズを拡大・縮小する方法を解説しました。この手法をマスターすることで、インタラクティブなUI操作をゲームやアプリに取り入れることができ、ユーザー体験をより豊かにすることが可能です。

特に今回のポイントは以下の通りでした:

  • UIボタンの基本的な作成と設定:ボタンを作成してテキストや名前を変更する方法を学びました。
  • 対象オブジェクトの設定:操作対象のオブジェクトをシーンに配置し、スクリプトで連携する手順を解説しました。
  • スクリプトによるロジック実装:簡単なC#スクリプトを作成し、段階的にサイズを変更するロジックを実装しました。
  • ボタンとスクリプトの紐付け:「On Click()」イベントを利用して、スクリプトのメソッドをボタンに割り当てました。

これらを組み合わせることで、ボタンをクリックするたびにオブジェクトのサイズが変更される機能を実現しました。


応用アイデア

この方法をさらに活用するためのアイデアをいくつかご紹介します:

  1. 複数のオブジェクトを操作:同じスクリプトを使って複数のオブジェクトを一括でサイズ変更できるようにする。
  2. アニメーションの追加:拡大・縮小時にスムーズなアニメーションを付け加えることで、見た目をより魅力的に。
  3. ユーザー入力に対応:ボタン以外にもスライダーやマウスホイールでサイズを変更する機能を追加。

この記事で紹介した内容を応用すれば、さらに高度なUI操作を実装できるようになります。ぜひ、自分のプロジェクトに取り入れてみてください!



よくある質問

Q
スクリプトが動かない場合はどうすればいいですか?
A

まず、以下のポイントを確認してください:

  • スクリプトが対象のオブジェクトにアタッチされているか。
  • 「Target Object」に正しく対象のオブジェクトが設定されているか。
  • コンソールにエラーが表示されていないか。エラーがある場合は、エラーメッセージを確認してコードを修正しましょう。
  • Unityエディターを再起動することで問題が解決する場合もあります。
Q
ボタンを複数追加して、異なるオブジェクトを操作したい場合は?
A

それぞれのオブジェクトに別々のスクリプトをアタッチするか、一つのスクリプトに複数の「GameObject」を操作するロジックを追加できます。例えば、以下のように複数の「Target Object」をリストで管理すると便利です:

public List<GameObject> targetObjects; // 操作対象のオブジェクトリスト

public void ScaleUpAll()
{
foreach (var obj in targetObjects)
{
obj.transform.localScale *= 1.2f;
}
}
Q
サイズ変更を無制限にしたい場合はどうすればいいですか?
A

サイズ変更の制限を外すには、コード内の maxStepsscaleStep に関する条件を削除するだけです。以下のように変更します:

public void ScaleUp()
{
targetObject.transform.localScale *= 1.2f;
}

public void ScaleDown()
{
targetObject.transform.localScale *= 0.8f;
}

これでサイズ変更の回数に制限がなくなり、無制限に拡大・縮小が可能になります。ただし、極端に小さくしたり大きくしたりすると見た目や動作に影響が出る可能性があるため注意しましょう。

おすすめのアセット

「+300 Icons | +300 Buttons | 11 Panels | 6 Avatars Pixel UI Package」は、ドット絵スタイルのUIデザインを手軽に実装できるアセットです。このパッケージには、300以上のアイコン、300種類のボタン、11枚のパネル、6つのアバターが含まれており、ゲームやアプリのインターフェースを簡単にカスタマイズできます。レトロなピクセルアートのデザインが特徴で、204.7KBと軽量ながら、視覚的に豊かなUIを実現できます​。