Unity入門講座|マウスクリックで画像を表示・非表示する方法を学ぼう

Unity
うさタブ
うさタブ

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

うさタブ
うさタブ

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

ユウキ
ユウキ

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

アイカ
アイカ

まだ習ったことないわ!

うさタブ
うさタブ

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

うさタブ
うさタブ

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

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

必要なもの

うさタブ
うさタブ

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

  • Unity
  • Windows または Mac のパソコン

が必要ッピよ~!

うさタブ
うさタブ

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

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

Unityを起動する

うさタブ
うさタブ

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

Unity-Hubを立ち上げて、

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

ユウキ
ユウキ

できた!

うさタブ
うさタブ

いい感じッピ!

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

うさタブ
うさタブ

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

うさタブ
うさタブ

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

画像サンプル
キャラクター画像
うさタブ
うさタブ

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

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

保存のやりかた

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

ユウキ
ユウキ

こんなかんじ?

アイカ
アイカ

うまくできてるわっ

うさタブ
うさタブ

バッチリだッピよ~♪

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

うさタブ
うさタブ

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

うさタブ
うさタブ

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

アイカ
アイカ

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

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

ユウキ
ユウキ

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

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

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

アイカ
アイカ

思い出したわ!

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

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

アイカ
アイカ

これでどうかしら?

うさタブ
うさタブ

最高ッピ!

2人とも才能あるッピ♪

画像をシーンに設置する

うさタブ
うさタブ

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

うさタブ
うさタブ

ヒエラルキー下の部分で

右クリックUI画像

を選択するッピ!

うさタブ
うさタブ

ヒエラルキーの部分に

Image

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

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

ユウキ
ユウキ

りょーかい!

ユウキ
ユウキ

これでどうよ!

アイカ
アイカ

よくできてるわっ

うさタブ
うさタブ

パーフェクトッピ♪

うさタブ
うさタブ

次は、

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

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

アイカ
アイカ

こんな感じでいいの?

ユウキ
ユウキ

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

うさタブ
うさタブ

エクセレントだッピ~★

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

うさタブ
うさタブ

そしたら

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

チェックボタンを外すッピ!

ユウキ
ユウキ

オッケー!

ユウキ
ユウキ

あれ?!

画像が消えてるぞ!?

アイカ
アイカ

どうしたのかしら

うさタブ
うさタブ

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

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

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

うさタブ
うさタブ

やり方は

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

で作成するッピ!

うさタブ
うさタブ

名前を

MouseClick

へ変更するッピよ~

ユウキ
ユウキ

これでいいか?

アイカ
アイカ

すてきねっ!

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

うさタブ
うさタブ

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

うさタブ
うさタブ

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

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

を選択するッピ!

うさタブ
うさタブ

名前を

MouseClick

に変更するッピよ~

アイカ
アイカ

できたわ!

プログラムを編集する

うさタブ
うさタブ

できたC#プログラム

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

うさタブ
うさタブ

もともと書かれている

1~2、7~17行目のプログラムを削除して、新しくプログラムを書いていくッピ~!

ユウキ
ユウキ

消しちゃっていいのか?

うさタブ
うさタブ

大丈夫だッピ~♪

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

using UnityEngine;

public class sound : MonoBehaviour
{

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

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

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

うさタブ
うさタブ

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

うさタブ
うさタブ

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

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

public呼び出し可能 class クラスです MouseClick 名前はマウスクリック : MonoBehaviourユニティの親クラスです
{

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

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

}

という意味になるッピ!

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

うさタブ
うさタブ

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

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

と書き込むッピよ~

うさタブ
うさタブ

このプログラムは、

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

という意味になるッピ!

うさタブ
うさタブ

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

//ここに新しいプログラムを入力その2
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)

でセーブするッピよ~

オブジェクトにプログラムを組み込む

うさタブ
うさタブ

保存したプログラムを、オブジェクトに組み込んでいくッピ!

うさタブ
うさタブ

C#スクリプト[MouseClick]

GameObjectMouseClickへドラッグ&ドロップするッピ~

うさタブ
うさタブ

右のインスペクターに

MouseClick(スクリプト)

があることを確認するッピ!

アイカ
アイカ

できてるわ!

ユウキ
ユウキ

さすがだな、アイカちゃん!

うさタブ
うさタブ

2人ともグングン成長してるッピ!

画像をプログラムに仕込む

うさタブ
うさタブ

最後は画像をプログラムに仕込むッピ!

うさタブ
うさタブ

左のヒエラルキー下の

Imageドラッグ&ドロップして、
GameObject(MouseClick)のインスペクター→画像(ゲームオブジェクト)

へ画像を仕込むッピよ~

動作確認

うさタブ
うさタブ

最後は動作確認ッピ~!
ゲームの上にある[▶]ボタンを押してゲームを開始するッピ!

アイカ
アイカ

すごい、できたわ!

ユウキ
ユウキ

天才プログラマーになった気分だぜ!

うさタブ
うさタブ

次は同じマウスボタンを押して画像をオンオフしてみるッピ!

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