メニュー
\ ポイント最大11倍! /詳細を見る

【Unity】シーンロードで複数の画面を切り替える方法 [画面遷移]

eyecatch_unity

海外でフリーランスをしているテクニカルアーティスト
ゲーム開発・映像制作・WEB制作等を請け負っています。
当ブログは作業効率化のための技術ブログです。

目次

[基本] Unity 基本のシーン遷移のやり方

まずは基礎から。

Unityの基本操作とシーン遷移のやり方とビルド方法がわかれば、

画像置いて、遷移範囲きめて、遷移先指定してと、プロトタイピングできます。

Unityはじめて触る人でも、少ない学習コストでできるようになります。

そのシーン遷移のやり方について。

シーンの作成

  1. GameObject>UI>Buttonでボタンを作成。
  2. 「top」という名前でシーンを保存
  3. シーンを複製して、「home」という名前で保存

以上。

あとはお好みで、見た目も変えておきます。

※ サンプルはカメラの背景を白にしたり、ボタンのimageの表示を切ったりしています。

シーンの登録

  1. File>Build Settingsから先程の2つのシーンをドラッグ&ドロップで登録します。

スクリプトの作成

※topのシーンにて

  1. Asset>Create>C# ScriptからGameControllerというスクリプトを作成
  2. 下記のコードを挿入

<span class="synStatement">using</span> System.Collections;
<span class="synStatement">using</span> System.Collections.Generic;
<span class="synStatement">using</span> UnityEngine;
<span class="synStatement">using</span> UnityEngine.SceneManagement;
<span class="synType">public</span> <span class="synType">class</span> GameController : MonoBehaviour {
<span class="synType">public</span> <span class="synType">void</span> toGameScene(){
SceneManager.LoadScene(<span class="synConstant">"home"</span>);
}
}

※名前空間(using)にusing UnityEngine.SceneManagement;を追加

※SceneManager クラスを使いシーンを読み込みます。

  1. GameObject>Create Emptyから空のゲームオブジェクト(GameController)を作成
  2. GameControllerを選択し、インスペクターに表示されているAddComponentの下側にさきほど作成したスクリプトをドラッグ&ドロップ

スクリプトの登録

  1. Buttonを選択し、下側のOn Click()の右下のプラスボタンを選択
  2. Noneと表示されている場所にゲームオブジェクト(GameController)をドラッグ&ドロップ
  3. No functionを選択し、GameControllerを選択、toGameSceneを選択。

ゲームの再生

あとは再生ボタンを押して、Tap To Startをクリックすれば、シーン遷移できます。

参考

Unity2D ~Scene遷移~ – Qiita

Unity – スクリプトリファレンス: SceneManagement.SceneManager.LoadScene

[本題]Unity シーンロードで複数画面切り替える方法

SceneManager.LoadSceneを使って、デザイナーでもできそうな簡単な画面遷移を作成していました。

ちなみによく本に載っているApplication.LoadLevelはUnity 5.3 から非推奨になりました。

で、作っている間に、より良いものを見つけてしまったのでそこまでにして、後はメモ。

SceneManager.LoadSceneの使い方

using UnityEngine.SceneManagement;を追加する

SceneManager.LoadScene("Main");で遷移

アンロード

SceneManager.UnloadScene(1);

【Unity】シーンの「追加読込」と、追加読込したシーンの「破棄」 – テラシュールブログ

BuildSettingsに登録されている番号(sceneBuildIndex)での遷移

SceneManager.LoadScene (1);

追加する場合は
SceneManager.LoadScene (1, LoadSceneMode.Additive);

Unity 5.3 で Application.LoadLevel が Obsolete になりました – NinaLabo

次のシーンに行くときにはただ+1しても良いかも

やりたかった事の殆どがこちらにありました。。。

GitHub
GitHub - sanukin39/SceneManagerTest: UnityのSceneManagerを使ってソシャゲっぽい遷移をするサンプル UnityのSceneManagerを使ってソシャゲっぽい遷移をするサンプル. Contribute to sanukin39/SceneManagerTest development by creating an account on GitHub.

[応用] uGUIでコードを書かずに画面遷移する方法


uGUIでコードを書かずに画面遷移する方法。

UIパーツの作成

  1. ボタンの作成 GameObject>UI>Button
  2. 平面の作成 GameObject>UI>Inmage
  3. ボタンと平面の親にGameObjectを作成
  4. 作成したGameObjectの親にさらに『View1』と命名
  5. 『View1』を複製して『View2』とする

アニメーションの作成

  1. 『View1』のRect Transform>Anchorsの値をMIN(0,0) MAX(2,1)に変更。右側に画面ひとつ分、領域が拡張されることを確認
  2. 『View1』の子のGameObject Rect Transform>Anchorsの値をMIN(0.5,0) MAX(1,1)に変更。ボタンが拡張された領域に移動しているのを確認
  3. Animationウインドウを開き、子のGameObjectを選択した状態で『Create』ボタンを押してアニメーションを作成(ToView)
  4. Add PropertyからAnchor MaxとAnchor Minのプロパティを追加
  5. アニメーションの作成。Min(0→0.5)Max(0.5→1)ついでにイーズがかかるようにカーブを調節
  6. 同じように画面が待機状態のアニメーションも作成する。View1(Min:Max 0.5,0) View2(Min:Max 1,0.5)
  7. Projectウインドウにあるアニメーション(ToView)を選択して Loop Timeのチェックをはずして、ループを切っておく

メカニムでのUIの遷移設定

  1. Animatorウインドウを開く
  2. 右クリックからCreate State>Emptyを押して、ステートを3つ作成。
  3. オレンジのステートを選択して、右クリックから Make Transitionを押して、作成したステートにぐるっと一周するよう(View1→ToView2→View2→ToView1→View1)に繋いでいく。
  4. ToView1、ToView2を選択して、Motionにさきほど作成したアニメーション(New Animation)を追加、ToView1のほうはSpeedを『-1』にする
  5. View1、View2を選択して、それぞれにMotionに待機状態用のアニメーションを『View1』,『View2』にする
  6. Animatorウインドウの左側のParametersのタブに切り替えて『+』ボタンを押してTrrigerを2つ(View1,View2)作成する
  7. View1→ToView2 の矢印を選択、 Conditionsの+ボタンを押してView1を選択、続いてView2→ToView1 の矢印を選択、 Conditionsの+ボタンを押してView2を選択
  8. 再生ボタンを押して、ParametersのView1,View2を選択して遷移状態を確認

ボタンを押すとアニメーションする設定

  1. ボタン(Button1)を選択して、Onm Click()の+ボタンを押す。
  2. ○ボタンを押してAnimatorが入っているGameObjectを追加。
  3. No FunctionからAnimator>SetTrigger(String)を選択してView2を記述(トグルのParameters名)
  4. 再生してボタンが押すとView1が右側に移動することを確認
  5. 同じ要領でView1が移動してでるView2画面のボタンにもAnimator>SetTrigger(String)を選択してView1と記述して、もとのView1画面に戻るようにする

シーンロードで複数の画面を切り替える方法 [画面遷移]まとめ

今回は下記のQiitaの記事を参考に再現してみました。

特にメカニムとボタンを使った表現はUI遷移だけでなくキャラモーションやエフェクトのチェックでも、デザイナーだけで構築できるので便利です。

【追記】

遷移を作成するときに、一つのアニメーターですべての遷移をつくるのではなく、それぞれのUIの命名を統一して、スライドなりフェードなりの機能別でアニメーターをつけていくと作業が楽でした。

Qiita
UGUIでアニメーションを使ってNoCodingで画面遷移を作る - Qiita  #初めにUnityの標準UIシステム、UGUIは実はとても高機能で、データ更新の必要ない内容の決まっている表示に関してはほぼこれだけ(スクリプトを書く必要なしに)使うこと...

SOU·COLLE | uGUIのAnchorsでレスポンシブアニメーション

全記事一覧

  • URLをコピーしました!

Unityに関する参考記事・ツール・書籍のまとめ

Unityの参考書籍

著:北村 愛実
¥2,673 (2024/04/14 08:56時点 | Amazon調べ)
\ポイント最大9倍!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
著:吉谷幹人, 著:布留川英一, 著:一條貴彰, 著:西森丈俊, 著:藤岡裕吾, 著:室星亮太, 著:車谷勇人, 著:湊新平, 著:土屋つかさ, 著:黒河優介, 著:中村優一, 著:牙竜, 著:コポコポ, 著:かせ, 著:hataken, 著:monmoko
¥4,400 (2024/04/13 03:39時点 | Amazon調べ)
\ポイント最大9倍!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
著:森哲哉, 著:布留川英一, 著:西森丈俊, 著:車谷勇人, 著:一條貴彰, 著:打田恭平, 著:轟昂, 著:室星亮太, 著:井本大登, 著:細田翔, 著:西岡陽, 著:平井佑樹, 著:コポコポ, 著:すいみん, 著:Maruton, 著:karukaru, 著:ハダシA, 著:notargs, 著:EIKI`, 著:おれんじりりぃ, 著:黒河優介, 著:中村優一, 著:藤岡裕吾
¥8,408 (2024/04/13 03:39時点 | Amazon調べ)
\ポイント最大9倍!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
ボーンデジタル
¥5,060 (2024/04/09 07:48時点 | Amazon調べ)
\ポイント最大9倍!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
技術評論社
¥4,620 (2024/04/14 08:56時点 | Amazon調べ)
\ポイント最大9倍!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

Unityの人気アセット

目次