Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【アセット紹介】Loading Screenでロード画面を簡単に実装する【Unity】

今回はアセットの紹介をしていきます。
紹介するのは「Loading Screen」。
ロード画面を簡単に実装できるアセットです。

 

f:id:Raspberly:20210209015423g:plain

 

アセットの使用感をチェックしたい方は実際に試してみる までスキップ!

 

お得なバンドル情報!

現在アセットストアでは、旧正月を記念したメガバンドルが発売中です!終了しました
厳選されたツール系アセットとアート系アセットが超お得に手に入るチャンス
今回紹介するLoading Screenも対象アセットです。
詳しくは下のバナーリンクからどうぞ。

f:id:Raspberly:20210209005108p:plain

 

 

どんなアセット?

プレハブをドラッグアンドドロップするだけで簡単にロード画面を実装できるアセットです。
ロード画面の呼び出しもボタンに紐づけるか、スクリプトに1行追加するだけ!

特徴:
◆完全なUGUIシステム。
◆シーン間のスムーズな移行。
◆非同期および偽の読み込み。
◆バックグラウンド遷移。
◆ゲームのヒントシステム。
◆フェード効果のあるバックグラウンドサウンド
スクリプトで使用する1行のコード。
プログレスバーの読み込み。
◆進行状況テキストの読み込み。
◆進行状況が塗りつぶされた画像の読み込み。
◆シーンの説明を表示します。
◆シーンカストン名を表示します。
ドラッグアンドドロップシステム。
◆完全かつ簡単にカスタマイズ可能。
◆簡単に拡張できます。
◆15個の既製のプレハブを使用できます。
◆組み込みのドキュメント。

 

 

 

開発環境

Unity2020.1.17f1

Loading Screen ver1.4.5

 

 

 

インポートとドキュメントの確認

アセットインポート完了時はこんな感じです。
ドキュメントを勧めてくるウインドウが表示されます。

f:id:Raspberly:20210207182656p:plain


このウインドウはWindow/LOSでも表示できますし、
ドキュメントはWindow/Loading Screen/Documentationからも参照できます。

f:id:Raspberly:20210207182956p:plain

 

ドキュメントはこんな感じ、動画や画像も使われていてとてもわかりやすく解説されています。

f:id:Raspberly:20210207184449p:plain

ドキュメントがエディター拡張で作られてるのってあまりないので、このコードだけでもかなり価値がありそう。
 

ドキュメントの中身については次項以降で説明します。

 

 

 

ロードシーンの確認

ロードシーンはLoading Screen/Example/Scenesから確認できます。

f:id:Raspberly:20210207200312p:plain

Example xという名前のシーンがロード画面のシーンです。
LoadExampleシーンはロード後に遷移するシーンです。

 

Example xシーンを再生するとロード画面の挙動確認が行えます。
デフォルトではロード画面からLoadExampleシーンに遷移するので、
Build SettingsからLoadExampleシーンをビルドに含めるようにしましょう。

f:id:Raspberly:20210207203352p:plain

f:id:Raspberly:20210207203515p:plain

 

 

Example シーン一覧

数が多いため小さく表示しています。
プログレスバーが違ったり、ゲームのTipsが表示されたり、ロード完了後ボタンを押すよう促したりと様々。

f:id:Raspberly:20210208032211g:plain   f:id:Raspberly:20210208032241g:plain

f:id:Raspberly:20210208032305g:plain   f:id:Raspberly:20210208032329g:plain

f:id:Raspberly:20210208032401g:plain   f:id:Raspberly:20210208032429g:plain

f:id:Raspberly:20210208032451g:plain   f:id:Raspberly:20210208032516g:plain

f:id:Raspberly:20210208032549g:plain   f:id:Raspberly:20210208032615g:plain

f:id:Raspberly:20210208032715g:plain   f:id:Raspberly:20210208032740g:plain

f:id:Raspberly:20210208032843g:plain   f:id:Raspberly:20210208032945g:plain

f:id:Raspberly:20210208033025g:plain   f:id:Raspberly:20210208033131g:plain

 

ロードシーンのエラー解決

Example 3シーンにて、プログレスバーの横にあるテキストが表示されない不具合があります。

f:id:Raspberly:20210207211637p:plain

Canvas/UI (Example)/SceneLoader 3/Loader UI/LoaderRoot/LoadingBar/BarSlider/LoadingTextのTextで、
Fontを別のもの(Rajdhani-Boldなど)に変更し、Horizontal OverflowとVertical OverflowをOverflowに変えると解決します。

 

 

ドキュメント解説

ここから本題、ドキュメントの内容を解説していきます(機械翻訳を含む)

クイックスタート

1. UnityのトップメニューからWindow/Loadiong Screen/Add Levelsをクリック

f:id:Raspberly:20210208225946p:plain

 

2. SceneLoaderManagerにシーンの情報を入力する

Add Levelsをクリックすると、SceneLoaderManagerがInspectorで表示される。
同時に、Build Settingsに登録してあるシーンが自動でSceneLoaderManagerに追加される。

f:id:Raspberly:20210208230852p:plain

 

3. ロード画面に移行したいシーンのCanvasScene Loaderプレハブを配置する

Loading Screen/Content/Prefabs/SceneLoadersにあるSceneLoaderプレハブをシーンのCanvas内に配置する

f:id:Raspberly:20210208231721p:plain

f:id:Raspberly:20210208234138p:plain

 

4. ボタンやコードでシーンをロードする

SceneLoaderプレハブにあるbl_SceneLoaderコンポーネントのLoadLevel関数をボタンやコードから呼ぶ
引数として遷移先のシーン名を渡す

f:id:Raspberly:20210208234405p:plain

 

これで完成、ボタンを押すとロード画面が挟まりシーン遷移します。

f:id:Raspberly:20210209015338g:plain



 

ここからは細かく見ていきます。

ロード先のシーンを追加する方法

シーンをロードするには、2つのことが必要です。

1. シーンがBuild Settingsに登録されていること
2. シーンがSceneLoadingManagerに登録されていること

 

SceneLoaderManagerは、このアセットで使用されるシーンの情報が保存されているScriptableObjectです。
Resoucesフォルダにあります。

f:id:Raspberly:20210208224248p:plain

 

Loading Screen/Add Levelsからプロジェクトのシーンを追加するのが初めての場合、
Build Settingsに登録されているシーンがSceneLoaderManagerに自動的に追加されます。

f:id:Raspberly:20210208225946p:plain

 

また、Add LevelsはSceneLoaderManagerをInspectorに表示します。
ここからシーンの様々な設定ができます。

f:id:Raspberly:20210209001122p:plain



ボタンからロードする方法

ボタンからロードするには2つの方法があります。

1. ボタンにbl_ButtonSceneLoadコンポーネントをアタッチしてシーン名を指定する

2. ボタンのOnClickにnl_ButtonSceneLoadコンポーネントを追加し、LoadLevel関数を呼ぶようにする

f:id:Raspberly:20210208234405p:plain



コードからロードする方法

Unity標準のLoadScene関数を置き換えるだけです。

//Unity標準の関数
SceneManager.LoadScene("SCENE_NAME");

これをこうじゃ

//LoadingScreenの関数
bl_SceneLoaderUtils.GetLoader.LoadLevel("SCENE_NAME");

ドキュメントで紹介している最もシンプルな実装例はこんな感じです

using UnityEngine;

public class LoadSceneScript : MonoBehaviour
{
        public string SceneName = "LoadExample";

        public void LoadMyScene()
        {
                bl_SceneLoaderUtils.GetLoader.LoadLevel(SceneName);
        }
}

 

 

ロードタイプ

シーンのロードタイプは2つあります。
ロードタイプはSceneLoaderManagerからシーンごとに選択できます。

f:id:Raspberly:20210209002949p:plain

Async

非同期でシーンをロードし、ロードが終わり次第ロード画面を終了します。

Fake

シーンの読み込み状況に関わらず、指定の時間分ロード画面を表示します
すぐにロードが終わる小さなシーンで便利ですが、ロードの遅い大容量のシーンには不向きです。
ロード時間はFakeLoadingTimeで設定できます。

f:id:Raspberly:20210209003311p:plain

 

 

ロード画面を編集する方法

ロード画面のデザインをカスタマイズするには、既存のプレハブを改造していく必要があります。

Assets/Loading Screen/Content/Prefabs/SceneLoadersにあるプレハブをOpenPrefabで開いたり、
適当なシーンのCanvasに置いて編集するのがオススメです。

 

SceneLoaderのLoaderRootオブジェクトをアクティブにしてから修正を開始します。

f:id:Raspberly:20210209004726p:plain

注意点として、最初から用意されているロード画面プレハブは全てuGUIのTextで構成されています。
必要に応じてText Mesh Proに置き換えていきましょう。

 

 

 

 

実際に試してみる

ドキュメントに従って実際にロード画面を作ってみます。
ここだけ見れば大体の雰囲気はつかめるかも!

 

シーンを準備

ロード画面を呼び出すメニュー画面のシーンと、
ロード画面から遷移するゲーム画面のシーンの2つを用意します。

 

メニュー画面の方はTitleシーン

f:id:Raspberly:20210209012516p:plain 

 

ゲーム画面の方はGameシーンとします

f:id:Raspberly:20210209012727p:plain

 

Gameシーンのセッティング

GameシーンをBuild Settingに登録し、

f:id:Raspberly:20210209012416p:plain

 

Window/Loading Screen/Add LevelsでSceneLoaderManagerに登録します。

f:id:Raspberly:20210208225946p:plain

 

 

シーンの設定をします。
Gameシーンであることを確認しパラメータを変えていきます。

f:id:Raspberly:20210209012019p:plain

Skip Type:Any Keyに変更。ロード終了後何かキーが押されるとロード画面が終了するようになります。

Loading Type:Fakeに変更。ロード状況に関わらず最低5秒ロード画面を表示するようにします。

Background:適当なユニティちゃんのスプライトを設定します。

 

 

SceneLoaderの配置と編集

TitleシーンのCanvas内にSceneLoaderプレハブを配置します。
プレハブはLoading Screen/Content/Prefab/SceneLoadersにあります。

f:id:Raspberly:20210209012945p:plain

 

このプレハブがロード画面なので、このデザインを調整していきます。

f:id:Raspberly:20210209013113p:plain

テキストの削除、円形プログレスバーの拡大、最下部のプログレスバーのサイズ調整などをしていきます。

 

ボタンを押したらロード画面に進むようにする

TitleシーンのボタンのOn Clickに先ほど配置したSceneLoaderプレハブのLoadLevel関数を紐づけ、
引数として遷移先のシーン名を渡します。今回はGameシーンに行きたいのでGameを選びます。

f:id:Raspberly:20210209013330p:plain

 

 

完成!

これで終わりです。
Titleシーンをプレイし、STARTボタンを押すことでロード画面を挟みながらGameシーンに遷移します。

f:id:Raspberly:20210209015423g:plain

 

 

まとめ

・Loading Screenアセットを使うと簡単にロード画面を実装できる
・シーンの登録をし、付属のプレハブを配置してシーンをロードするだけ!

 

以上です。
現在開催中のメガバンドルを購入すると他にもお得なアセットがついてくるのでオススメ! 

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。
※この記事はユニティちゃんライセンスの提供でお送りしています。
© Unity Technologies Japan/UCL

 

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。