【Unity】初心者の2Dゲーム制作/マウスタッチで画像を動かす

Unityで2Dゲームを作成するチュートリアル。マウスで画像をタッチして動かす方法を解説
Unity
基本を学ぶ
この記事は約6分で読めます。

おはようございます！

1月20日 月曜日。曇りのち晴れ。朝のうちは曇ってたのにな～。
予想気温13/6℃。二桁℃だとやっぱり違いますな。

暖かくはないけど、寒いけど、耐えられる寒さかなと。

今日は大寒ですか。

大寒⛄

・時期: 毎年1月20日頃が「大寒」にあたるが、前後する場合もある。
・特徴: 気温が一年を通して最も低くなる時期で、厳しい寒さが続くことが特徴。

<大寒の過ごし方>
・体を温める: 暖かい服装をしたり、温かい飲み物を飲んだりして体を温めることが大切。
・体を動かす: 室内でも軽い運動をすることで、血行を良くし、寒さを乗り切ろう。

<大寒の食べ物>
・おしるこ: 温かいお汁粉は、体の中から温めてくれる冬の定番。
・甘酒: 甘酒は、体を温める効果があり、古くから大寒の日に飲まれてきた。

記事とは関係ないですが、冬の寒い日に食べたくなるようなあたたかいおしるこのイラストです。
ほっと一息あたたかいおしるこ

　

おしるこの口になりました。完全に。食べますよ。今日。

おしるこふひひひ。

　

さあ、今日もやってまいります。

　

今日の教材はこちら、

[PR]

[PR]

　

スポンサーリンク

CHAPTER ４　マウスでタッチしよう

CHAPTER 4.1　コライダーでマウスのタッチを有効化

　

こらいだぁ？

🐶 Box Collider 2Dをアタッチしてマウスのタッチを調べる

Unityゲームにおけるプレイヤー操作の仕組みをベン図で表した図です。マウス操作によるゲームオブジェクトの制御など、本記事で解説している内容と関連しています。
「プレイヤーがゲームを操作するしくみ」の中の「マウスでタッチする仕組み」

オブジェクトに「衝突」や「重力」などの物理的な機能を持たせるには、「コライダー2D（Collider 2D）」コンポーネントが必要。

　

詳細は次の小CHAPTERから👇

　

CHAPTER 4.2　タッチしたら、消す

シーン「chap4」を「Basic 2D(Built-in)」で新たに作る。

Unityで新しいシーン「chap4」を作成し、Assets/Scenesフォルダに保存する手順を示した画像です。
新しいシーンの作成

🐶 タッチしたらオブジェクトを消す

・オブジェクトに「Box Collider 2D」をアタッチ

Unityのインスペクターウィンドウで、画像オブジェクトに「Box Collider 2D」コンポーネントを追加している様子を示しています。
「Box Collider 2D」コンポーネントを追加

　

・オブジェクトに「On Mouse Down Hide」をアタッチ

Unityのインスペクターウィンドウで、画像オブジェクトに「On Mouse Down Hide」スクリプトを追加している様子を示しています。このスクリプトを追加することで、オブジェクトをマウスでタッチすると非表示にすることができます。
「On Mouse Down Hide」スクリプトを追加

　

・「Play」ボタンで実行

Unityの動作確認画面です。マウスでオブジェクトをクリックすると、そのオブジェクトが消える様子が示されています。
マウスクリックで消える

　

🐶 スクリプトの内容確認

・「タッチしたら、消える（On Mouse Down Hide）」スクリプト（抜粋）

Unityのスクリプト「On Mouse Down Hide」の解説図です。マウスでオブジェクトをクリックしたときにオブジェクトが消える仕組みを、コードの一部を抜粋して視覚的に説明しています。
「On Mouse Down Hide」スクリプト解説


　・gameObject：このスクリプトがアタッチされているオブジェクト

　・SetActive(false)：オブジェクトを非アクティブ（見えない状態）にする

　

[PR]

　

　

CHAPTER 4.3　タッチしたら、表示する

🐶 タッチしたらオブジェクトを表示する

・イメージ

「配置した画像をマウスでタッチしたとき他の画像を表示させる」というシーンのイメージ画像
ボタンを押して電球を表示（イメージ）

　

・ドーナツ（クリックする画像）とおばけ（表示する画像）を配置

Unityで作成したゲームのシーンです。画面上のドーナツをタッチすると、オバケが現れる仕組みを実装しています。
ドーナツタッチでオバケ出現！

　

・ドーナツに「Box Collider 2D」と「On Mouse Down Show」をアタッチ

Unityのインスペクターウィンドウで、ドーナツの画像オブジェクトに「Box Collider 2D」コンポーネントを追加している様子を示しています。
「Box Collider 2D」コンポーネントを追加
Unityのインスペクターウィンドウで、ドーナツの画像オブジェクトに「On Mouse Down Show」スクリプトを追加している様子を示しています。このスクリプトを追加することで、オブジェクトをマウスでクリックすると表示することができます。
「On Mouse Down Show」スクリプトを追加

　

・ドーナツにアタッチした「On Mouse Down Show」の「Show Object」におばけを設定

Unityのスクリプトエディタの画面です。「On Mouse Down Show」スクリプトの設定部分を示しており、ドーナツをクリックすると「kuiiji_1_0」という名前のオブジェクトを表示するよう設定している画像です。
オブジェクト表示設定

　

・「Play」ボタンで実行

Unityで作成したゲームのデモ画面です。ドーナツの画像をマウスでクリックすると、オバケの画像が表示される様子を示しています。
インタラクションデモ：ドーナツをタッチ！

　

🐶 スクリプトの内容確認

・「タッチしたら、表示する（On Mouse Down Show）」スクリプト（抜粋）

Unityのスクリプトエディタの画面です。「On Mouse Down Show」イベントでオブジェクトを表示する仕組みを解説しています。「オブジェクト変数」や「スタート時は非表示」といったキーワードに注目してください。
オブジェクトを表示するスクリプト解説

　
　・showObject：タッチしたときに表示するオブジェクトを入れておく変数（事前に要設定）

　・void Start()：ゲームのスタート時にまず通るところ
　　　　　　　　　※一番最初かどうかはわからんです。。まだ。

なるほど、まず非表示にしておくのね。

ほほ～

　・＜ゲームオブジェクト＞.SetActive(false);：ゲームオブジェクトを非表示にする

　・＜ゲームオブジェクト＞.SetActive(true);：ゲームオブジェクトを表示する

　

🐶 レイヤーでオブジェクトの重なり順を指定する

・Z軸の値を変更（おばけの画像のZ軸の値「-3」に設定）

Unityのインスペクターウィンドウで、オブジェクトのZ軸を調整して表示順を設定している様子を示しています。
オブジェクトを手前に配置

　

・Z軸の値を変更（ドーナツの画像のZ軸の値「3」に設定）

Unityのインスペクターウィンドウで、オブジェクトのZ軸を調整して表示順を設定している様子を示しています。
オブジェクトを奥に配置

　

奥行きとしてZ軸が存在する。

手前に表示させたいものはZ軸の値をマイナスにする。
奥に表示させたいものはZ軸の値をプラスにする。

※ただし、カメラは「Z＝-9」の手前にあるので、「Z＝-10」とかにしてしまうと表示されなくなってしまう。手前に設定するときは「-1～-9」の範囲で設定すること。

　

・「Play」ボタンで実行

Unityで作成したゲームのデモ画面です。ドーナツの画像をマウスでクリックすると、その上にオバケの画像が重なって表示される様子を示しています。
インタラクションデモ：ドーナツをタッチ！

　

[PR]

　

　

CHAPTER 4.4　タッチしたら、回転

🐶 タッチしている間だけ、回転するオブジェクト

・イメージ

マウスでオブジェクトをタッチしている間、そのオブジェクトが回転しているイメージ図です。
タッチで回転のイメージ図

　

・画像に「Circle Collider 2D」と「On Mouse Down Rotate」をアタッチ

Unityのインスペクターウィンドウで、画像オブジェクトに「Circle Collider 2D」コンポーネントを追加している様子を示しています。
「Circle Collider 2D」コンポーネントを追加
Unityのインスペクターウィンドウで、画像オブジェクトに「On Mouse Down Rotate」スクリプトを追加している様子を示しています。このスクリプトを追加することで、オブジェクトをマウスでクリックすると回転させることができます。
「On Mouse Down Rotate」スクリプトを追加

　

・「Play」ボタンで実行

Unityで作成したゲームのデモ画面です。マウスでオブジェクトをタッチしている間だけ、そのオブジェクトが回転し続けています。
タッチで回転！

　

🐶 スクリプトの内容確認

・「タッチしたら、回転する（On Mouse Down Rotate）」スクリプト（抜粋）

Unityのスクリプトの画面です。「タッチしたら回転する」と「タッチをやめたら回転量を0にする」という処理が記述されたスクリプトの一部を示しています。
回転スクリプト解説

　

[PR]

　

　

CHAPTER 4.5　タッチしたら、回転してゆっくり止まる

🐶 一度タッチしたら、回転してゆっくり止まるオブジェクト

すみません、イメージは割愛します。。。

すません

　

・画像に「Circle Collider 2D」と「On Mouse Down Roulette」をアタッチ

Unityのインスペクターウィンドウで、画像オブジェクトに「Circle Collider 2D」コンポーネントを追加している様子を示しています。
「Circle Collider 2D」コンポーネントを追加
Unityのインスペクターウィンドウで、画像オブジェクトに「On Mouse Down Roulette」スクリプトを追加している様子を示しています。このスクリプトを追加することで、オブジェクトをマウスでクリックするとランダムな角度で回転させることができます。
「On Mouse Down Roulette」スクリプトを追加

　

・「Play」ボタンで実行

Unityで作成したゲームのデモ画面です。マウスでオブジェクトをタッチすると、そのオブジェクトが回転し始め、徐々に回転速度が遅くなり、最終的に停止する様子を示しています。
タッチで回転、ゆっくりと停止

　

🐶 スクリプトの内容確認

・「タッチしたら、回転してゆっくり止まる（On Mouse Down Roulette）」スクリプト（抜粋）

Unityのスクリプトエディタの画面です。「タッチしたら回転し始める」「50の回転量で回転し始める」「少しずつ0に近づける」といった処理が記述されたスクリプトの一部を示しています。
回転速度を調整するスクリプト

　

　

今日は学んだというより試したって感じですな。。

　

次のCHAPTER5は見てみたら面白そうだ。

おもろそ～

　

週が始まったばかりですからね～。

　

明日に備え今日はこれにて終了です。

　

おつかれさまでした～(‘◇’)ゞ

　

　

[PR]

スポンサーリンク

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