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)のインスペクター→画像(ゲームオブジェクト)

へ画像を仕込むッピよ~

動作確認

うさタブ
うさタブ

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

アイカ
アイカ

すごい、できたわ!

ユウキ
ユウキ

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

うさタブ
うさタブ

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

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

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

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

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

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

アイカ
アイカ

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

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