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 クラスです sound 名前はsound : 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)のインスペクター→画像(ゲームオブジェクト)

へ画像を仕込むッピよ~

動作確認

うさタブ
うさタブ

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

アイカ
アイカ

すごい、できたわ!

ユウキ
ユウキ

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

Unityのマウス入力について

うさタブ
うさタブ

Unityのマウス入力には、

Inputメッソドを使うッピ!

プログラムメッソド発動条件
Input.GetMouseButtonマウスボタンが押されていたら発動
Input.GetMouseButtonDownマウスボタンが押された瞬間に発動
Input.GetMouseButtonUpマウス押されたボタンが開放されたときに発動
ユウキ
ユウキ

インプットメッソド~?

って何だ?

うさタブ
うさタブ

インプットメッソドというのは、

マウスキーボードなど、外部から入力があったときに

発動するプログラムをつくるときに使うものッピ!

アイカ
アイカ

そうなのね!

うさタブ
うさタブ

そしてマウスのInputメッソドは

Input.GetMouseButton

をつかうことが多いッピね~

ユウキ
ユウキ

なあ、うさタブ

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);
		}
    }
}
ユウキ
ユウキ

じゃあこの、

Input.GetMouseButton(0)

(0)とか(1)ってあるけどさ??

ユウキ
ユウキ

なんで(0)なのか、

まったく理解できないんだけど・・・

どうして1とか0なわけ?

うさタブ
うさタブ

それはズバリ、この数字が

引数だからッピね~!

アイカ
アイカ

引数??

ユウキ
ユウキ

引数ってなんだっけ・・・?

オレまだそこらへん記憶あいまいなんだけど

うさタブ
うさタブ

引数というのは、
プログラムが予め仕組んだ、分かれ道条件のことだっピ!

うさタブ
うさタブ

if~~●●(分かれ道の条件
{ プログラムの命令文 }

みたいなとき、
実際にその分かれ道の条件が満たされるもの変数
仕込むことができるのが引数なんだッピ!

ユウキ
ユウキ

ど、どういうこと?

アイカ
アイカ

むずかしくてわからないわ

うさタブさん・・・

うさタブ
うさタブ

つまり今回みたいな

(0)なら、マウスの左クリック
マウスの左を押したら発動するプログラム

というのを組むことができるんだッピ!

引数対応するマウスの場所
(0)マウスの左ボタン
(1)マウスの右ボタン
(2)マウスのホイール
ユウキ
ユウキ

わかった!

0が左クリック、1が右クリックみたいな感じになるのか!

うさタブ
うさタブ

その通りッピ!

つまりさっきのコードも、0から1に変えると、

枝分かれの条件が右クリックを押したら~に変わってしまうんだッピよ~

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);
		}
    }
}
ユウキ
ユウキ

なるほどなー

アイカ
アイカ

勉強になったわっ!

学習のまとめ
  • Assetsに画像ファイルを登録する
  • ヒエラルキーから空のオブジェクトを作成する
  • C#スクリプトを作成
  • できたスクリプト空のオブジェクトに登録
  • 空のオブジェクトに画像をドラッグ&ドロップで登録
  • テストプレイ

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

うさタブ
うさタブ

UnityはC#を元に作られているッピ!
まだまだ Unity や C#について勉強したい人は↓の記事を参考にするッピ♪

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

Unityプログラミング動画付き
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました