【Unity】オブジェクトの画像(Sprite)をマウスクリックで変更する方法②

こんにちは、人生ってゲームだね。の108びっとです。

今回はUnityの初心者による初心者向けの解説記事 第2弾です。

前回は画面のどこでもクリックすると画像が変更してしまったので、今回はオブジェクトをクリックしたときのみ実行されるような方法を紹介します。

Event Triggerでタッチイベントを取得する方法で行います。

難しそう

テレビくん

108びっと

最初は慣れないけど、覚えたら簡単だよ。

実装方法の流れ

  1. タッチで実行させる動作が書かれたスクリプトの作成
  2. タッチさせたいオブジェクトに上記のスクリプトをアタッチ
  3. タッチさせたいオブジェクトにEvent Triggerコンポーネントを追加
  4. タッチさせたいオブジェクトにコライダー追加
  5. ヒエラルキーウィンドウにEvent System追加
  6. メインカメラにRaycasterコンポーネントを追加

スクリプトを準備する

「SpriteChange.cs」というスクリプトを作成しました。

「onClickAct()」という関数がタッチされた時に呼び出される物になります。

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

前回の記事と同様に変更後の画像をスクリプトに登録しておきましょう。

オブジェクトに「Event Trigger」コンポーネントを追加する

インスペクターの最下部にある「コンポーネントを追加→イベント→イベントトリガー」で追加します。

「イベントトリガー」コンポーネントの「新しいイベントタイプを追加」をクリックして「PointerClick」を選択します。

リストは空ですと表示されます。「+」ボタンを押してリストに追加しましょう。

画像を変更したいオブジェクトを選択し、「イベントトリガー」コンポーネントの「なし(オブジェクト)」と書かれたボックスにドラック&ドロップします。

「No Function」と表記されている部分はタッチした時に呼び出す関数を選択します。今回は「SpriteChange → onClickAct()」を選びましょう。

オブジェクトにコライダーコンポーネントを追加する

オブジェクトにコライダーコンポーネントを付ける事で当たり判定が発生し、タッチの判定が生まれるようになります。

「コンポーネントを追加 → 2D物理(3Dなら物理) → 2Dサークルコライダー」で追加します。

Event Systemの追加

ヒエラルキーウィンドウで「UI→ イベントシステム」でEvent Systemを追加します。特に設定は不要です。

もう既にある場合はこの手順は飛ばしてもokです。

メインカメラにレイキャスターを追加

ヒエラルキーウィンドウでメインカメラを選択します。

次にメインカメラに「2D物理レイキャスター」を追加します。「コンポーネントを追加 → イベント → 2D物理レイキャスター」を選択します。

特に設定は不要です。

動作の確認

実装が出来ましたので動作の確認をしましょう。

注意点

オブジェクトが複数あり、重なっている場合は1回のタッチにつき1つのオブジェクトしか反応しません。

次回の記事では重なっている複数のオブジェクトを同時にタッチする方法を紹介します。

Unity初心者におすすめの本

絵が可愛くて気に入っている。

説明も丁寧で読みやすい。

UnityはC#言語の基礎が分からないとコーディング出来ない。

入門書読んだあとも何度もこの本にお世話になっている。