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

Unity
Unity講座

画像を消すボタンをつくってみよう

うさタブ
うさタブ

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

ユウキ
ユウキ

画像を消すボタン?

アイカ
アイカ

さっきのやり方とは違うのかしら?

うさタブ
うさタブ

ムフフ、さっきとちょっぴり違う!

だけどめちゃくちゃカンタンにできるんだッピ!

覚えておいて損はないッピよ~

アイカ
アイカ

それは便利ね!

ユウキ
ユウキ

さっそくやってみようぜ!

2個目のボタンをつくる

うさタブ
うさタブ

まずは2個めのボタンをつくるッピ!

すこしかけあしで説明するッピよ~

うさタブ
うさタブ

やり方は前と一緒でまず

ヒエラルキー→右クリック→UI→ボタン

で作成するッピ!

うさタブ
うさタブ

できたボタンをダブルクリックすると、
名前が編集できるッピ♪

わかりやすく[ボタンを消す]と変更するッピよ~

うさタブ
うさタブ

右クリック名前を編集でもできるッピ!

うさタブ
うさタブ

できた中のボタンを、
ググッっと下にドラッグすると移動できるッピ!
やってみるッピよ~

ユウキ
ユウキ

オッケー!

ボタンにプログラムで消したい画像を登録する

うさタブ
うさタブ

画像を消すボタンにプログラムで消したい画像情報を登録するッピ!

うさタブ
うさタブ

ボタンを選択して、ヒエラルキーから、

クリック時()→ ボタン → なし(オブジェクト)

画像オブジェクト(Image)をドラッグ&ドロップで登録するッピ!

アイカ
アイカ

さっきやったからバッチリね♪

ユウキ
ユウキ

登録できたかは、

右側のインスペクターで確認できるんだよな?

うさタブ
うさタブ

その通りッピ♪
ここまではさっきと同じッピ!

うさタブ
うさタブ

仕上げに、

No Function

の▼をクリックして

GameObject→SetActive

を選択するッピ!

うさタブ
うさタブ

最後に

Image の横の

チェックボタン

をはずすッピ!

アイカ
アイカ

できたわ!

うさタブ
うさタブ

最後は[▶]でテストプレイをするッピよ~

ユウキ
ユウキ

よっしゃ! 成功だなっ

アイカ
アイカ

やったねっ♪

うさタブ
うさタブ

次のページでは、
表示ボタンがあるときには非表示ボタンを削除

非表示ボタンがあるときは表示ボタンを削除するッピよ~

ボタンの削除と表示

うさタブ
うさタブ

次は表示ボタンがあるときは非表示ボタンを削除

非表示ボタンがあるときは表示ボタンを削除してみるッピ!

アイカ
アイカ

そんなことができるのね!

ユウキ
ユウキ

すっげー! さっそくやってこーぜ

画像表示ボタンのオンオフを設定

うさタブ
うさタブ

まずは「画像表示ボタン」を切り替えてみるッピ!

うさタブ
うさタブ

ヒエラルキーから「画像表示ボタン」をクリックして、

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

をクリックするッピよ~!

うさタブ
うさタブ

「画像表示ボタン」を2番めの

なし(オブジェクト)

へドラッグ&ドロップするッピ!

うさタブ
うさタブ

そのあと

No Function → Game Object → SetActive(bool)

を選択するッピ~~

うさタブ
うさタブ

このとき

押したときに【消したいボタン】チェックをはずす

ッピネ~~

ユウキ
ユウキ

オッケー
チェックをはずすんだな?

アイカ
アイカ

できたわ!

うさタブ
うさタブ

次に押したとき表示したいボタンのセッティングをするッピ!

うさタブ
うさタブ

インスペクター→クリック時()ボタン

をクリックして

新しく項目を増やすッピ!

うさタブ
うさタブ

なし(オブジェクト)

に今度は「画像を消すボタン」をドラッグ&ドロップするッピ~

うさタブ
うさタブ

こんどは、
チェックマークを入れるッピ!

さっきと違うから気をつけるッピ!

アイカ
アイカ

今度は
チェックマークを入れるのね!

ユウキ
ユウキ

りょーかい!

画像非表示ボタンのオンオフを設定

うさタブ
うさタブ

今度は「画像非表示ボタン」の設定ッピ!

うさタブ
うさタブ

ヒエラルキーから「画像非表示ボタン」をクリックして、

インスペクター→クリック時→[+]ボタン2回

押して、アクション設定をするッピ!

うさタブ
うさタブ

今度はさっきやった

画像を消すボタンと画像表示ボタンの逆の設定

するっぴよ~~

うさタブ
うさタブ

両方とも

No Function → Game Object → SetActive

へ設定するッピ!

うさタブ
うさタブ

そして

画像表示(押すと表示したいボタン)の横のチェックマークだけ押す

ッピ!

ユウキ
ユウキ

オッケー

うさタブ
うさタブ

最後に

「画像を消す」ボタンのチェックマーク

をはずすッピ!

アイカ
アイカ

できたわ!

テストプレイ

うさタブ
うさタブ

テストプレイッピ!

画像表示ボタンを押すッピよ~

テストプレイ
アイカ
アイカ

画像表示ボタンで
うさタブさんの画像が出てきたわ!

うさタブ
うさタブ

もう一度画像表示ボタンを押して確かめるッピ!

ユウキ
ユウキ

おお、大成功だな!

アイカ
アイカ

できることがだんだん増えてってる!

すごいわ

学習のまとめ

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

うさタブ
うさタブ

上手くできたッピか?

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

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

うさタブ
うさタブ

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

スポンサーリンク

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

ユウキ
ユウキ

うさタブ!

オレ、もっと本格的にゲームが作りたいんだ

アイカ
アイカ

私もだわ!

もっとたくさん実用的なコードを

学ぶことってできないかしら?

うさタブ
うさタブ

おお、2人ともやる気ッピね!

ゲームの作り方を学ぶなら、コレとかどうッピか?


うさタブ
うさタブ
Udemy」テレビでも有名な動画教材
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

2DアクションRPG脱出ゲーム

3Dゲーム制作講座まで

買い切り講座だからいつでも勉強し放題ッピよ~!

ユウキ
ユウキ

お!いいじゃん!

アイカ
アイカ

あと、どこか素敵な素材を売っているところはないかしら? 公式の素材販売だと、クレカ支払いしかなくて・・・

ユウキ
ユウキ

小学生じゃクレカで支払えないぜ~

うさタブ
うさタブ

ゲームの素材を買いたいなら、

DLsiteBoothとかどうッピか?

うさタブ
うさタブ

素敵なドット絵や音楽素材がいっぱい売ってるッピ!

うさタブ
うさタブ

しかもUnityアセットストアと違って

クレカ支払いじゃなく、コンビニ支払いができるのもポイントッピ!

ユウキ
ユウキ

すげーカッコいい素材がいっぱいある!

アイカ
アイカ

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

スポンサーリンク
Unityプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました