![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はUnityのマウスクリックで画像を表示について勉強するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
マウスを押すと画像がオンオフ表示される仕組みをつくるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
マウスクリックと画像表示?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
まだ習ったことないわ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
マウス操作と画像の扱いはUnityの基礎の基礎ッピ!
絶対覚えておくと良いッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これからこのマウスクリックと画像オンオフ表示を一緒に勉強して行くッピよ~
マウスクリックで画像表示・非表示方法を学ぼう
必要なもの
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは必要なものを用意するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/09/unity.png)
- Unity
- Windows または Mac のパソコン
が必要ッピよ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まだ Unity をダウンロードしてない人は
↓ の記事を参考に必要なものをインストールするといいッピ!
Unityを起動する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずはゲーム作成画面をつくってみるッピ!
Unity-Hubを立ち上げて、
2Dまたは3Dでプロジェクトをつくるッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-09_00-1024x522.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
できた!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
いい感じッピ!
画像ファイルを用意しよう!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さっそく画像をUnityで表示するっぴ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
・・・その前に、画像が必要だっぴよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/08/うさタブ.png)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回は、うさタブの画像を用意したッピ!
必要な人は上のうさタブの画像を右クリックから保存するッピ♪
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_画像オンオフ_18.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_画像オンオフ_20.jpg)
画像の上で[右クリック]をして[名前をつけて画像を保存]を選択します。
今回は、画像を「キャラクター」と名付けました。
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
こんなかんじ?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔2.png)
うまくできてるわっ
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_画像オンオフ_19.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
バッチリだッピよ~♪
画像をアセットに登録する
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity0.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それじゃあ最初に画像をアセット登録するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_画像のオンオフ.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
使いたい画像を、ドラッグ&ドロップでアセットの部分に登録するッピ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_困1.png)
ドラッグ&ドロップってなんだったかしら・・・?
わたし、すっかり忘れちゃって
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
たしか、ファイルをクリックして、押しっぱなしのまま、
ファイルを移動する方法を
ドラッグ&ドロップっていうんじゃなかったかな?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔4.png)
思い出したわ!
ありがとうユウキくんっ♪
別のウィンドウからファイルを引っ張ってもってくればいいのよね
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_画像オンオフ_21.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
これでどうかしら?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最高ッピ!
2人とも才能あるッピ♪
画像をシーンに設置する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は画像をゲーム画面(シーン)にセッティングするッピ♪
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_画像のオンオフ2.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ヒエラルキー下の部分で
右クリック→UI→画像
を選択するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_画像オンオフ_23.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ヒエラルキーの部分に
Image
オブジェクトができるッピ!
それをクリックして選択するッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
りょーかい!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_画像オンオフ_28.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
これでどうよ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔3.png)
よくできてるわっ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
パーフェクトッピ♪
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_画像のオンオフ3.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は、
インスペクター→Image→ソース画像
に向かって、使いたい画像をドラッグ&ドロップするッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_画像オンオフ_27.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_謎.png)
こんな感じでいいの?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
サイコーだぜアイカちゃん!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
エクセレントだッピ~★
この調子でグイグイいくッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そしたら
インスペクター→一番上の■
のチェックボタンを外すッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
オッケー!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_画像のオンオフ4.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_画像のオンオフ5.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
あれ?!
画像が消えてるぞ!?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_驚き3.png)
どうしたのかしら
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_画像オンオフ_26.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ふふふ、これがプログラミングの魔法ッピ!
これは、【画像を非アクティブ】状態にしたことによって、
画像を一時的に見えなくしたんだッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これから、
マウスを押すとこの画像を見えるようにプログラムを組んでいくッピよ~
空のオブジェクトをつくる
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは空のオブジェクトをつくるッピ!
この空のオブジェクトに、
のちのちプログラムを仕込む予定だッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
やり方は
ヒエラルキー→右クリック→空のオブジェクト
で作成するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
名前を
MouseClick
へ変更するッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick1.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
これでいいか?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_笑顔.png)
すてきねっ!
C#スクリプトを作成する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次からプログラムを組んでいくッピよ~!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick2.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは画面下のAssetの部分で
右クリック→作成→C#スクリプト
を選択するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
名前を
MouseClick
に変更するッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick3.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔3.png)
できたわ!
プログラムを編集する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
できたC#プログラムを
ダブルクリックして、スクリプトファイルを開くッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick4.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
もともと書かれている
1~2、7~17行目のプログラムを削除して、新しくプログラムを書いていくッピ~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
消しちゃっていいのか?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
大丈夫だッピ~♪
このうさタブに任せるッピ!
using UnityEngine;
public class sound : MonoBehaviour
{
//ここに新しいプログラムを入力その1
void Update()
{
//ここに新しいプログラムを入力その2
}
}
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
こんな感じで良いのかしら?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
バッチリッピよ~!
アイカちゃん才能あるッピね♪
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ちなみにこのプログラムは
using UnityEngine;
public class MouseClick : MonoBehaviour
{
//ここに新しいプログラムを入力その1
void Update()
{
//ここに新しいプログラムを入力その2
}
}
という意味になるッピ!
新たにプログラムを書き込む
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick5_.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
Public Class のその1の下に、新しくプログラムを書いていくッピ!
//ここに新しいプログラムを入力その1
public GameObject Image;
と書き込むッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
このプログラムは、
public GameObject Image;
という意味になるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
void Update の中のその2の下にも、新しくプログラムを書いていくッピ!
//ここに新しいプログラムを入力その2
if (Input.GetMouseButtonDown (0))
{//Clickで画像表示
Image.SetActive (true);
}
if (Input.GetMouseButtonDown (1))
{//右Clickで画像消去
Image.SetActive (false);
}
と書き込むッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ちなみにこれは
if (Input.GetMouseButton(0))
{
Image.SetActive (true);
}
if (Input.GetMouseButton(1))
{
Image.SetActive (false);
}
という意味になるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
へ~、なるほど
こういう意味だったのか!
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);
}
}
}
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
プログラムができたら、
ファイル→保存(Ctrl+S)
でセーブするッピよ~
オブジェクトにプログラムを組み込む
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
保存したプログラムを、オブジェクトに組み込んでいくッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick6.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
C#スクリプト[MouseClick]を
GameObjectのMouseClickへドラッグ&ドロップするッピ~
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick7.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
右のインスペクターに
MouseClick(スクリプト)
があることを確認するッピ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
できてるわ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
さすがだな、アイカちゃん!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
2人ともグングン成長してるッピ!
画像をプログラムに仕込む
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後は画像をプログラムに仕込むッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick8.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
左のヒエラルキー下の
Imageをドラッグ&ドロップして、
GameObject(MouseClick)のインスペクター→画像(ゲームオブジェクト)
へ画像を仕込むッピよ~
動作確認
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick10.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後は動作確認ッピ~!
ゲームの上にある[▶]ボタンを押してゲームを開始するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-26_unity_MouseClick11.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2022/12/2022-08-26_unity_MouseClick13.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2022/12/2022-08-26_unity_MouseClick14.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔4.png)
すごい、できたわ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
天才プログラマーになった気分だぜ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は同じマウスボタンを押して画像をオンオフしてみるッピ!