1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

画面遷移をpanelでやってみた

Last updated at Posted at 2017-05-25

#まずはじめに
Unityで画面をタッチすると次の画面に進んだり、戻ったりするゲームを作りたかった。
それを実現しようとして考えたのが、Sceneの変更とPanelの変更の2通りである。
今回はSceneだと読み込みの時間が重くなってしまうことと、作業する際にわざわざSceneを変えなくてはいけないことをを考慮して、Panelを使った方法を使用した。
#これ目標
giphy.gif

#さて作る
##仕組み
基本的にPanelのSetActiveをonまたはoffにするというScriptを作ることで画面遷移を行う。
Panel上にBottonを作成し、それを押すことで上のScriptが実行。
Panelが変更し、画面が変わる。
完成。

##Panelを作る
###作成
下の動画のようにPanelを作る
動画の要領でPanelBも作成する。
panelの作成.gif

###区別する
Panelが変わったのがわかるようにPanelに色を付ける。
今回はPanelAを青にPanelBを赤にしてみた。
panelの色付け.gif

###Buttonの設置
各PanelにButtonを作成する。
そのあとPanelAのButtonのTextに「すすむ」を入れる。
そして、PanelBのButtonのTextに「もどる」を入れる。
Buttonsakusei.gif

##Panelを操作する仕組みづくり
ここでは、PanelAからPanelBに変わる仕組みを作る。
つまり、Scriptを書いて、GameObjectにつけるまでをやる。
###まずScirptを書く
新しくScriptを開いて、Update()メソッドの下に以下のScriptを書く。

int panelIndex = 0; //今表示しているpanelのindex
public GameObject[] panels;//Panelを入れる箱を用意
public void ChangeIndex (int input){
	panelIndex = input;//引数のinputをpanelIndexに代入する
	Display();
}

//panelIndexのの番号のpanelを画面に表示する
void Display(){
	//for文でiを0からpanelsの長さまで繰り返し1ずつ足していく
	for (int i = 0; i < panels.Length; i++) {
		if (i == panelIndex) {
			//表示したいPanelを決める
			panels [i].SetActive (true);
		} else {
			//それ以外のPanelを表示しない
			panels [i].SetActive (false);
		}
	}
}

###書いたScriptをGameObjectに
新しくGameObjectを作り、Scriptをアタッチする。
PanelManagernoyau.gif

アタッチしたら、Inspector>PanelManagerにあるPanel>Sizeの数字を変える。
Panelを入れる箱がその数分発生する。
そこに、PanelAとPanelBをドラッグする。
Panel入れる.gif

これで、ひとまず完成。

##画面を変える
最後の作業。
ButtonとScriptを紐付けて、Buttonを押すことでScriptに書いた内容が動くようにする作業。

###すすむを押すとpanelBに
PanelA>ButtonのInspector>Button(Script)>On Click()の枠の右下にある + マークを押す。
そして、空いてる箱にPanelManagerをドラッグする。
そして、下のgif画像のように設定していく
button付ける.gif

この画像の最後に打ち込む数字は先ほどPanelをドラッグした箱の番号だ。
下の画像の右下である。
スクリーンショット 2017-05-30 18.24.47.png

###もどるを押すとpanelAに
上と同じ要領でButtonとScriptを暇付ける。

##再生してみる
完成.gif

#完成
完成あ.gif

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?