扉の開け閉め、電源のONとOFFを画像切り替えで簡単に行う方法【Unityゲーム制作】

今回は、スクリプトを使わずに、クリックしたら簡単に見た目を切り替える方法のメモです。例えば、クリックで扉を開けたり閉めたり。電源ONとOFF状態の切り替えなどに使えます。

今回実装するもの

画像をクリックしたら「閉じている状態」から「開いている状態」に変化するのを作成していきます。下図のようなものですね。

画像の準備

今回は画像を「いらすとや」さんからお借りしています。どんな画像でも問題ないです。ここで使うのは「床下収納」と「タブレット」です。ダウンロードしておきます。

作成開始

では、実際に作成していきます。Unityのヴァージョンは「2020.3.1f1」です。

画像を入れる

2Dでプロジェクトを作成。Assetsフォルダ内に「Images」フォルダを作成します。

Imagesフォルダ内にダウンロードした画像を入れます。「ONの状態」と「OFFの状態」の画像です。

画像を適用する

画像を埋め込んでいきます。ヒエラルキーで「UI」→「画像」を選びます。

Canvasの下にimageが出来ます。もう一つ「画像」を追加して、それぞれ名前を変更。

CloseはOFF状態、OpenはON状態ですね。それぞれに画像を適用して、画像サイズに合わせて幅と高さも変更します。

Open(ON状態)の方はアクティブ状態のチェックを外しておきます。

OFF状態の上にON状態の画像が乗っている。という感じですね。ON状態が無効化(非アクティブ)されているので「OFF状態」という感じです。見えていない「ON状態」が上にいるというわけですね。

ここで重要なのはCanvas配下でOFF->ONという順番になっているところです。

動作を適用する(ONにする)

次にクリックした時の動作を入れます。非常に単純で、OFF状態をクリックしたらON状態が有効になるようにします。Closeにイベントトリガーを追加。

イベントトリガーに「新しいイベントタイプを追加」、クリックした時の動作なので「PointerClick」を選びます。

追加したPointerClickのオブジェクトにOpenを適用、Function(動作)はGameObjectのSetActive(bool)を選び、チェックボックスにチェックを入れます。

下図のような感じにします。簡単にいうとClose画像をクリックしたら「Openを有効化する」です。

これで一度「再生ボタン」を押して実行してみます。クリックしたら開く状態になればOK。ただし、このままだと開きっぱなしなので、閉じるのを追加していきます。

動作を適用する(OFF状態)

今度はOpenの方に同じようにPointerClickを追加。違うのはチェックを外しておくことです。簡単に言うと「Open画像をクリックしたらOpenを無効化する」ですね。

実際に再生してみます。下のようにクリックすると開いたり、閉じたりすれば完成!

同じようにタブレット画像でもやってみます。ちなみに、同じような動きのモノを作る場合、複製すると簡単にできます。

複製して簡単に同じ動作のモノを追加

ヒエラルキーからCanvasを複製します。配下のClose,Openも複製されます。

それぞれお名前を変えて、ソース画像、サイズを変えます。

実際に再生してみて下図のようになればOK。

今回はあくまでも簡単に見た目だけの変更。他の処理や複雑な事をやらせたいときはスクリプトを書く必要もあったり。とはいえ、クリックしたら見た目だけ扉を開け閉めしたい。電源を付けたいみたいな時にはすごく簡単な方法。

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