自作ツール&スクリプト

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

unity-multiple-scene-load

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

まずは基礎から。

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

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

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

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

シーンの作成

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

以上。

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

f:id:min0124:20171015190253p:plain

f:id:min0124:20171015190257p:plain

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

シーンの登録

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

f:id:min0124:20171015190826p:plain

スクリプトの作成

※topのシーンにて

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

f:id:min0124:20171015192042p:plain

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
public class GameController : MonoBehaviour {
public void toGameScene(){
SceneManager.LoadScene("home");
}
}

※名前空間(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を選択。

f:id:min0124:20171015192843p:plain

f:id:min0124:20171015192848p:plain

ゲームの再生

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

f:id:min0124:20171015193203g:plain

参考

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しても良いかも

参考

f:id:min0124:20161112181706j:plain

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

github.com



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

unity-transition-no-code

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

UIパーツの作成

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

f:id:min0124:20160728230240j:plain

アニメーションの作成

  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のチェックをはずして、ループを切っておく

f:id:min0124:20160728230317j:plain

f:id:min0124:20160728230324j:plain

f:id:min0124:20160728230331j:plain

メカニムでの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を選択して遷移状態を確認

f:id:min0124:20160728230907j:plain

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

  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画面に戻るようにする

f:id:min0124:20160728230915g:plain

感想

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

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

【追記】

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

参考

qiita.com

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



以上、すいみん(@cg_method)でした!