In-Editor Tutorialの概要や実装方法について調査しました。
In-Editor Tutorialとは？
- Editor操作のチュートリアルを行えるようにする機能
- 元々Unity社のチームが学習プロジェクトのインタラクティブなチュートリアルを作成するために使っていた内部ツール
- 開発者使用想定の「Tutorial Authoring Tools」パッケージでチュートリアルを作成可能
- 基本的にScriptable Objectで作成する
- ユーザー使用想定の「Tutorial Framework」パッケージでチュートリアルを再生可能
出来ること
- Tutorialsウィンドウで行うべき手順の説明
- 手順説明の表示直後に実行するCallBackの設定
- 各手順で操作すべき箇所のハイライトと、それ以外の操作防止
- 次の手順に進める基準設定
参考資料・ドキュメント
https://blog.unity.com/ja/technology/in-editor-tutorials-available-to-try-in-unity-20211
https://docs.unity3d.com/Packages/com.unity.learn.iet-framework.authoring@1.2/manual/authoring-guide.html
https://docs.unity3d.com/Packages/com.unity.learn.iet-framework@3.1/manual/framework-documentation.html
Package
-
2021.2以降
- Package Managerで検索すると出てきます。
-
-
2019.4 - 2021.1
- Githubにあります。
- ダウンロード後、Add package from diskなどを行って頂く必要があります。
実装例
- LEGOⓇ Microgame
-
LEGOⓇ MicrogameとはUnity操作を説明するサンプルプロジェクト。Unity社が提供。
- ※この記事の「出来ること」で動画を貼ったUnityプロジェクト
- このプロジェクトの中でIn-Editor Tutorialが実装されており、参考例として有用。
- Unity Hubで新規プロジェクトを作成するときに「使い方を学ぶ」タブからテンプレートプロジェクトが作成される。
-
- In-Editor Tutorial用のScriptable Objectは以下フォルダで閲覧可能
-
-
LEGOⓇ MicrogameとはUnity操作を説明するサンプルプロジェクト。Unity社が提供。
設定方法
Tutorial Authoring Toolsインポート後の初期設定
- Projectウィンドウで右クリックし、
Create > Tutorials > Ready-to-Use Tutorial Projectを選択すると、
チュートリアルに必要なScriptableObjectが選択中のフォルダに一通り生成される
- Tutorial Project Settings: このプロジェクトのチュートリアルの全体設定
- Welcome Dialog: プロジェクトの起動直後に表示されるウェルカムページ設定
- Tutorials: チュートリアルの全セクションの設定
- New Tutorial: 最初のセクションの設定
- 5-StartPage: 1ページ目(説明のみ)
- 10-TutorialPage: 2ページ目(インタラクション + 説明)
- 15-LastPage: 3ページ目(インタラクション + 説明 + セクション目次に戻る)
各Scriptable Object説明
Tutorial Project Settings
このプロジェクトのチュートリアルの全体設定が出来ます。
Tutorial Welcome Page
プロジェクトの起動直後に表示されるウェルカム ダイアログ
Scriptable Objectでボタンを押した後のCallbackの実装が出来ます。
Tutorial Container
チュートリアルの全セクションの設定
Tutorial
各セクションの設定
Tutorial Page
各ページの設定項目(大きく分けて6つ)
①説明表示
なお表示する画像・動画について、ドキュメントに以下の規定が書かれていました。
tutorial page image/video: 300 x 150 (width x height)
welcome dialog image: 700 x 200
In your texture asset's Import Settings,
make sure you have chosen Editor GUI and Legacy GUI as the Texture Type.
for video, WebM VP8 is recommended.
②Criteria
次に進めるようになる基準設定が出来ます。
- デフォルトで用意されている各Criteria説明
- Completed When All Are True, Completed When Any Is Trueを設定可能
-
- ArbitraryCriterionを選択すると、Scriptable Objectにより任意の判定基準(bool)を設定可能
-
-
- ※Criterionクラスを継承した新クラスを実装しても、Criteria Type一覧に表示される新基準を設定可能
③Callback
ページを表示した後など、特定のタイミングでCallbackを実行出来ます。
④Mask・ハイライト設定
操作不可能なMask箇所と、操作可能+強調されるハイライト箇所の設定が出来ます。
- ハイライト箇所はWindow以外にも、PrefabやPropertyに関して設定可能
- Prefabの場合
-
-
- Property
-
-
- その他、ハイライト位置の設定方法の選択肢
-
⑤ページ表示時のカメラ位置
⑥基準達成時の効果音
検証してみた疑問点
Unity最上部のMenuやOverlaysにハイライトは出来るか？
ハイライトするよう設定することが出来ませんでした。
ただし、MenuやOverlayの操作後の結果をCriteriaとして設定することは出来ました。
新規追加したEditorウィンドウの表示をCriteriaにすることは出来るか？
出来ました。ハイライトにすることも出来ました。
Localizationは出来るか？
出来ました。2パターン方法がありました。
- Edit > Preferences > Languages設定と同じ言語で表示されるようにする
- 初心者向け・上級者向けチュートリアルと同じようにカテゴリで分ける
Unity Layoutの変更は出来るか？
リッチテキスト表示は可能か？
出来ました。
<b>Bold text hereああ</b>
<i>Italic text hereあああ</i>
<a href="http://yourlink.com">Link text hereああああああ</a>
<br/> あああああForce a linebreak (not necessary, you can use return)
<wordwrap>強制的にああ</wordwrap> 区切り
その他、補足事項など
-
Future Prefabなるものがある
- シーンでPrefabをスポーンし、シーン内でプレハブの値を変更するチュートリアルに役立つ
-
Tutorialのスタイル設定
-
