Unity入門講座|ボタンの配置とシーン移動について学ぼう

Unity
うさタブ
うさタブ

今回はUnityのボタンの配置とシーン移動について勉強するッピ!

うさタブ
うさタブ

ボタンを押すとシーン移動する仕組みをつくるッピ!

ユウキ
ユウキ

ボタンの配置とシーン移動

アイカ
アイカ

まだ習ったことないわ!

うさタブ
うさタブ

ずばり、ボタンをポチッとすると、

画面を切り替える方法だッピ!

うさタブ
うさタブ

シーン移動はUnityの基礎基礎ッピ!
絶対覚えておくと良いッピ!

うさタブ
うさタブ

これからこのボタンの配置とシーン移動を一緒に勉強して行くッピよ~

ボタンの配置とシーン移動について学ぼう

必要なもの

うさタブ
うさタブ

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

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

が必要ッピよ~!

うさタブ
うさタブ

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

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

ボタンをつくる

うさタブ
うさタブ

まずはゲーム作成画面をつくってみるッピ!

Unity-Hubを立ち上げて、

2Dまたは3Dでプロジェクトをつくるッピよ~

ユウキ
ユウキ

できた!

うさタブ
うさタブ

いい感じッピ!

次はさっそくボタンをつくっていくッピ!

うさタブ
うさタブ

ヒエラルキー下【】(または右クリック)→ ゲームオブジェクト→UI→ボタン

を選択するッピよ~

うさタブ
うさタブ

ヒエラルキーにある
[Button]をダブルクリックすると、

ボタンに焦点が当てられるッピ!

アイカ
アイカ

これでいいかしら?

ユウキ
ユウキ

ちゃんとできてるぜアイカちゃん!

新しい画面シーンをつくる

シーンフォルダがあるのを確認しよう

うさタブ
うさタブ

次は新しい画面シーンをつくるッピ~

まず

Asset→Scene

をクリックするッピ!

うさタブ
うさタブ

この【Scene】のなかに、

SampleScene』があるのを確認するッピよ~

アイカ
アイカ

あったわ!

あたらしいシーンを用意しよう

うさタブ
うさタブ

次は

シーンフォルダで右クリック→[作成]→[シーン]

でシーンを作成するッピ!

ユウキ
ユウキ

お! なんかでた

うさタブ
うさタブ

いい感じッピ!

[after]

とわかりやすいように名前をつけてみるッピ!

シーンをプロジェクトに登録する

うさタブ
うさタブ

シーンはそのままじゃ使えないッピ!

必ずプロジェクトにシーン登録する作業が必要になるッピよ~

うさタブ
うさタブ

[ファイル]→[ビルド設定]

を選択するッピ~

うさタブ
うさタブ

作成した[after]シーンを

枠の中にドラッグ&ドロップするッピ!

アイカ
アイカ

ドラッグ&ドロップってなんだったかしら?

ユウキ
ユウキ

ファイルマウスで押しっぱなしにして、

選択したファイルをマウスごと移動することだよ

アイカちゃん!

アイカ
アイカ

そうだったわ!

ありがとうユウキくんっ

うさタブ
うさタブ

こんな風に

[after]シーンが追加されたらオッケーだっピ!

シーンを切り替える

切り替えプログラムをつくる

うさタブ
うさタブ

シーンの切り替えプログラムをつくるッピ!

Assetのシーン部分で
[右クリック]→[作成]→[C#スクリプト]

を選択するッピ!

アイカ
アイカ

できたわ!

うさタブ
うさタブ

よくできてるッピ!

このスクリプト(プログラムの素)に
[changeShean]と名付けるッピ!

プログラムを編集する

うさタブ
うさタブ

そのまま

[changeScene]をダブルクリックして

新たにプログラムを書き込むッピよ!

うさタブ
うさタブ

Visual Studio Code などのコード編集プログラムを起動するッピ!

ユウキ
ユウキ

なんかプログラムが出てきたぞ!

うさタブ
うさタブ

いい感じッピ!

うさタブ
うさタブ

プログラムをよく見てみると

using xxxxx

という文字があることがわかるッピ!

うさタブ
うさタブ

ここは

名前空間

といって、

C#Unityのどんな機能を使うか登録する場所

なんだッピヨ~!

うさタブ
うさタブ

C#プログラムはこんな風につくられているんだッピ!

アイカ
アイカ

そうなのね!

ユウキ
ユウキ

前にやったな!

復習しとこう

うさタブ
うさタブ

準備できたッピか?

それじゃあさっそくプログラムを書いていくッピ!

うさタブ
うさタブ

using UnityEngine;

の下に、


↓の文をコピーして

using UnityEngine.SceneManagement;

と入力するッピ!

うさタブ
うさタブ

これを設定すると

using使います UnityEngineunityエンジンの.SceneシーンManagement管理プログラムを;

という意味になるんだッピ♪

ここまでのコード

入力したコード

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class changeScene : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}
うさタブ
うさタブ

入力できたら、

    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }

の部分を思い切って削除するッピ♪

ユウキ
ユウキ

ええ! 消しちゃっていいのか?!

うさタブ
うさタブ

そのほうが説明しやすくなるッピよ~♪

ここまでのコード

入力したコード

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class changeScene : MonoBehaviour
{

}

シーン変更プログラムを入力する

うさタブ
うさタブ

次は、この

public class の中に

       public void change_button()
    {
        SceneManager.LoadScene("after");
    }

と入力するッピネ!

うさタブ
うさタブ

この部分が、シーン変更プログラムになるッピ!

うさタブ
うさタブ

これは、

public class呼び出せるクラスです changeScene名前はchengeScene : MonoBehaviourUnityの親クラスです
{
public呼び出せるvoid引数なしプログラム  change_button() 名前はchange_buttonです
{
SceneManager.シーン・マネージャーのLoadScene読み込みプログラムで(afterafterを呼びます);
}
}

という意味になるッピよ~

ユウキ
ユウキ

こんな感じかな

アイカ
アイカ

バッチリね!

うさタブ
うさタブ

最高ッピ!

あとはこれをファイルで保存するッピよ~

プログラムをボタンに仕込む

うさタブ
うさタブ

それじゃあ

作ったプログラムボタン仕込んでいくっピ!

うさタブ
うさタブ

Unity画面に戻って、

[changeScene]をButtonへドラッグする

ッピ!

アイカ
アイカ

右のインスペクターのほうに

何かでたわ!

うさタブ
うさタブ

プログラムが仕込まれた証拠ッピ!

あともう少しッピ~

次はプログラムのどの変数を使うか設定

するッピよ~

どの変数を使うか設定する

うさタブ
うさタブ

次は

プログラムのどの変数を使うか設定

するッピネ!

うさタブ
うさタブ

右のインスペクターの

クリック時()→ [+] ボタン

をクリックするッピ!

うさタブ
うさタブ

そのまま

Buttonをドラッグ→ [] ヨコ

にButtonをドラッグ&ドロップするッピ!

うさタブ
うさタブ

つぎは

[No Function]→[]

をクリックするっピ!

うさタブ
うさタブ

そのまま

[changeScene]→[change_button()]

を選択するッピ!

アイカ
アイカ

できたわ!

ユウキ
ユウキ

オレもだぜ!

動作確認

うさタブ
うさタブ

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

ユウキ
ユウキ

できた~!

アイカ
アイカ

やったねユウキくんっ

学習のまとめ
  • ボタンを作成(右クリック→ ゲームオブジェクト→UI→ボタン)
  • シーンを作成する(シーンフォルダで右クリック→[作成]→[シーン])
  • シーンをビルドで設定する([ファイル]→[ビルド設定])
  • 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をコピーしました