Unity入門講座|ボタンを押して画像のオンオフ表示について学ぼう

Unity
うさタブ
うさタブ

今回はUnityのボタンの配置と画像のオンオフ表示について勉強するッピ!

うさタブ
うさタブ

ボタンを押したら画像を表示される仕組みを一緒につくっていくッピ!

ユウキ
ユウキ

ボタンの配置と画像表示?

アイカ
アイカ

まだ習ったことないわ!

うさタブ
うさタブ

ボタンの配置と画像表示・非表示は、
Unityでも基礎の基礎の大事な部分ッピ!

うさタブ
うさタブ

これからこのボタンの配置と画像表示を一緒に勉強して行くッピよ~

ボタンの配置と画像表示について学ぼう

必要なもの

うさタブ
うさタブ

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

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

が必要ッピよ~!

うさタブ
うさタブ

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

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

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

うさタブ
うさタブ

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

うさタブ
うさタブ

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

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

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

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

保存のやりかた

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

アイカ
アイカ

できたわ!

ユウキ
ユウキ

これでいいかな?

うさタブ
うさタブ

オッケーだッピよ~♪

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

うさタブ
うさタブ

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

うさタブ
うさタブ

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

ユウキ
ユウキ

ドラッグ&ドロップってなんだっけ??

アイカ
アイカ

たしか、ファイルをマウスで選択して押しっぱなしのまま

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

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

ユウキ
ユウキ

そうだったそうだった!

別のウィンドウからファイルを引っ張ってもってくれば良いんだな!?

ユウキ
ユウキ

こんな感じ?

うさタブ
うさタブ

いい感じだっぴ!

2人ともよく出来てるッピ♪

画像をシーンに設置する

うさタブ
うさタブ

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

うさタブ
うさタブ

ヒエラルキー下の部分で

右クリックUI画像

を選択するッピ!

うさタブ
うさタブ

Image

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

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

アイカ
アイカ

わかったわ!

アイカ
アイカ

これでどうかしら!

ユウキ
ユウキ

いい感じだぜアイカちゃん

うさタブ
うさタブ

さすがッピ!

うさタブ
うさタブ

次は、

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

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

ユウキ
ユウキ

これでどうだ?

アイカ
アイカ

さすがユウキくんね!

うさタブ
うさタブ

いい感じだッピ~★

うさタブ
うさタブ

そしたら

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

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

ユウキ
ユウキ

オッケー!

アイカ
アイカ

画像が見えなくなったわ!

ユウキ
ユウキ

どうなってんだうさタブ!

うさタブ
うさタブ

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

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

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

うさタブ
うさタブ

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

ボタンをつくる

うさタブ
うさタブ

それじゃあ、
さっそくUnityでボタンをつくってみるっぴ!

うさタブ
うさタブ

ヒエラルキー下の部分で

右クリックUIボタン

を選択するッピ!

アイカ
アイカ

できたわ!

うさタブ
うさタブ

よくできてるッピよ~!

うさタブ
うさタブ

このボタンを

[画像表示]

と名前をつけるッピ~

うさタブ
うさタブ

そのまま画像表示と名付けた

[画像表示]text(Legacy)

をクリックして、

インスペクター→テキスト

を選んで、Buttonの文章を編集するッピ!

アイカ
アイカ

名前は何がいいかしら?

ユウキ
ユウキ

そのまんま【ボタンを表示】でいいんじゃないかな?

うさタブ
うさタブ

ナイスアイデアッピ!

わかりやすいのが一番いいッピ!

ボタンに押すと画像を表示するプログラムを仕込む

うさタブ
うさタブ

ボタンに、押すと画像が出るプログラムを仕込むッピ!

うさタブ
うさタブ

まずは、【画像表示】と名付けたUIボタンをクリックするッピ!

うさタブ
うさタブ

プログラムを仕込む準備をするッピ!

インスペクター→[クリック時()]→[+]

をクリックするッピ!

ユウキ
ユウキ

こんな感じか?

うさタブ
うさタブ

うんうん、いい感じッピよ~♪

うさタブ
うさタブ

そのあとは、左のヒエラルキー下にある

Imageをドラッグ→[クリック時()]下→[なし(オブジェクト)]

にドロップして、プログラムを設定するッピ♪

アイカ
アイカ

Image◎になったわ!

うさタブ
うさタブ

おお、上手くできてるッピ♪

アイカちゃん天才だッピ!

うさタブ
うさタブ

次はクリック時()の

[No Function]

[GameObject]→[SetActive(bool)]

を選択するッピ~

うさタブ
うさタブ

最後に、
Imageの横のチェックボタンにチェックが入っているかを確認するっピよ~

テストプレイ

うさタブ
うさタブ

最後にテストプレイをするッピよ~

[▶]を押して、ボタンをクリック!

画像が表示されば完了ッピ!

ユウキ
ユウキ

おおお!
画像が現れたっ

アイカ
アイカ

やったねっ

学習のまとめ

学習のまとめ
  • ヒエラルキーからUI、ボタンでボタンを作成する
  • ドラッグ&ドロップで画像ファイルをアセットに登録
  • 画像ファイルを非アクティブにする
  • クリック時()の下[+]ボタンを選択
  • 画像を[なし(オブジェクト)]にドラッグ&ドロップ
  • No Functionのをクリックし、GameObject]→[SetActive(bool)]を選択
  • テストプレイ

うさタブ
うさタブ

次は画像を消すボタンをつくってみるッピよ~~!

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビ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をコピーしました