Unity講座｜マウスクリックで画像をオンオフする方法を学ぼう

うさタブ

今回はUnityのマウスクリックで画像を表示について勉強するッピ！

うさタブ

マウスを押すと画像がオンオフ表示される仕組みをつくるッピ！

ユウキ

マウスクリックと画像表示？

アイカ

まだ習ったことないわ！

うさタブ

マウス操作と画像の扱いはUnityの基礎の基礎ッピ！
絶対覚えておくと良いッピ！

うさタブ

これからこのマウスクリックと画像オンオフ表示を一緒に勉強して行くッピよ～

マウスクリックで画像表示・非表示方法を学ぼう

マウスクリックで画像表示・非表示方法を学ぼう

必要なもの

うさタブ

まずは必要なものを用意するッピ！

Unity
Windows または Mac のパソコン

が必要ッピよ～！

うさタブ

まだ Unity をダウンロードしてない人は

↓ の記事を参考に必要なものをインストールするといいッピ！

Unityを起動する

うさタブ

まずはゲーム作成画面をつくってみるッピ！

Unity-Hubを立ち上げて、

2Dまたは３Dでプロジェクトをつくるッピよ～

ユウキ

できた！

うさタブ

いい感じッピ！

画像ファイルを用意しよう！

うさタブ

さっそく画像をUnityで表示するっぴ！

うさタブ

・・・その前に、画像が必要だっぴよ～

画像サンプル

うさタブ

今回は、うさタブの画像を用意したッピ！

必要な人は上のうさタブの画像を右クリックから保存するッピ♪

保存のやりかた

画像の上で[右クリック]をして[名前をつけて画像を保存]を選択します。
今回は、画像を「キャラクター」と名付けました。

ユウキ

こんなかんじ？

アイカ

うまくできてるわっ

うさタブ

バッチリだッピよ～♪

画像をアセットに登録する

うさタブ

それじゃあ最初に画像をアセット登録するッピ！

うさタブ

使いたい画像を、ドラッグ＆ドロップでアセットの部分に登録するッピ！

アイカ

ドラッグ＆ドロップってなんだったかしら・・・？

わたし、すっかり忘れちゃって

ユウキ

たしか、ファイルをクリックして、押しっぱなしのまま、

ファイルを移動する方法を

ドラッグ＆ドロップっていうんじゃなかったかな？

アイカ

思い出したわ！

ありがとうユウキくんっ♪

別のウィンドウからファイルを引っ張ってもってくればいいのよね

アイカ

これでどうかしら？

うさタブ

最高ッピ！

２人とも才能あるッピ♪

画像をシーンに設置する

うさタブ

次は画像をゲーム画面（シーン）にセッティングするッピ♪

うさタブ

ヒエラルキー下の部分で

右クリック→UI→画像

を選択するッピ！

うさタブ

ヒエラルキーの部分に

Image

オブジェクトができるッピ！

それをクリックして選択するッピ！

ユウキ

りょーかい！

ユウキ

これでどうよ！

アイカ

よくできてるわっ

うさタブ

パーフェクトッピ♪

うさタブ

次は、

インスペクター→Image→ソース画像

に向かって、使いたい画像をドラッグ＆ドロップするッピよ～

アイカ

こんな感じでいいの？

ユウキ

サイコーだぜアイカちゃん！

うさタブ

エクセレントだッピ～★

この調子でグイグイいくッピよ～

うさタブ

そしたら

インスペクター→一番上の■

のチェックボタンを外すッピ！

ユウキ

オッケー！

ユウキ

あれ？！

画像が消えてるぞ！？

アイカ

どうしたのかしら

うさタブ

ふふふ、これがプログラミングの魔法ッピ！

これは、【画像を非アクティブ】状態にしたことによって、

画像を一時的に見えなくしたんだッピ！

うさタブ

これから、
マウスを押すとこの画像を見えるようにプログラムを組んでいくッピよ～

空のオブジェクトをつくる

うさタブ

まずは空のオブジェクトをつくるッピ！

この空のオブジェクトに、

のちのちプログラムを仕込む予定だッピ！

うさタブ

やり方は

ヒエラルキー→右クリック→空のオブジェクト

で作成するッピ！

うさタブ

名前を

MouseClick

へ変更するッピよ～

ユウキ

これでいいか？

アイカ

すてきねっ！

C#スクリプトを作成する

うさタブ

次からプログラムを組んでいくッピよ～！

うさタブ

まずは画面下のAssetの部分で

右クリック→作成→C#スクリプト

を選択するッピ！

うさタブ

名前を

MouseClick

に変更するッピよ～

アイカ

できたわ！

プログラムを編集する

うさタブ

できたC#プログラムを

ダブルクリックして、スクリプトファイルを開くッピ！

うさタブ

もともと書かれている

１～２、７～17行目のプログラムを削除して、新しくプログラムを書いていくッピ～！

ユウキ

消しちゃっていいのか？

うさタブ

大丈夫だッピ～♪

このうさタブに任せるッピ！

using UnityEngine;

public class sound : MonoBehaviour
{

   //ここに新しいプログラムを入力その１

     void Update()
    {
         //ここに新しいプログラムを入力その２
    }
}

アイカ

こんな感じで良いのかしら？

うさタブ

バッチリッピよ～！
アイカちゃん才能あるッピね♪

うさタブ

ちなみにこのプログラムは

using使います UnityEngineユニティエンジンの機能を;

public呼び出し可能 class クラスです MouseClick　名前はマウスクリック : MonoBehaviourユニティの親クラスです
{
　//ここに新しいプログラムを入力その１

void引数なしプログラム Update()　随時更新します
{
//ここに新しいプログラムを入力その２
}
}

という意味になるッピ！

新たにプログラムを書き込む

うさタブ

Public Class のその１の下に、新しくプログラムを書いていくッピ！

//ここに新しいプログラムを入力その１
public GameObject Image;

と書き込むッピよ～

うさタブ

このプログラムは、

public共有プログラム GameObjectゲームオブジェクトです Image変数名はイメージ;

という意味になるッピ！

うさタブ

void Update の中のその２の下にも、新しくプログラムを書いていくッピ！

//ここに新しいプログラムを入力その２
if (Input.GetMouseButtonDown (0)) 
	{//Clickで画像表示
	 Image.SetActive (true);
	}

if (Input.GetMouseButtonDown (1)) 
	{//右Clickで画像消去
	 Image.SetActive (false);
	}

と書き込むッピよ～

うさタブ

ちなみにこれは

ifもしも (Input入力されたら.GetMouseButton　マウスが押されたら実行(0　左クリックを　))
{
Image.ImageのSetActive　ゲームオブジェクトを (true作動して);
}

ifもしも (Input入力されたら.GetMouseButton　マウスが押されたら実行　(1右クリックを))
{
Image.ImageのSetActive　ゲームオブジェクトを (false作動をやめて);
}

という意味になるッピ！

ユウキ

へ～、なるほど

こういう意味だったのか！

using UnityEngine;

public class MouseClick : MonoBehaviour
{
    public GameObject Image;

    void Update()
    {
		if (Input.GetMouseButtonDown (0)) 
		{//Clickで画像表示
			Image.SetActive (true);
		}

		if (Input.GetMouseButtonDown (1))
		 {//右Clickで画像消去
			Image.SetActive (false);
		}
    }
}

うさタブ

プログラムができたら、

ファイル→保存(Ctrl+S)

でセーブするッピよ～