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などを行って頂く必要があります。
  - Tutorial Authoring ToolsのReleaseページ
  - Tutorial FrameworkのReleaseページ

実装例

LEGOⓇ Microgame
- LEGOⓇ MicrogameとはUnity操作を説明するサンプルプロジェクト。Unity社が提供。
  - ※この記事の「出来ること」で動画を貼ったUnityプロジェクト
- このプロジェクトの中でIn-Editor Tutorialが実装されており、参考例として有用。
- Unity Hubで新規プロジェクトを作成するときに「使い方を学ぶ」タブからテンプレートプロジェクトが作成される。
- In-Editor Tutorial用のScriptable Objectは以下フォルダで閲覧可能

設定方法

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

チュートリアルの全セクションの設定

外部リンクの設定も出来ます。
https://docs.unity3d.com/Packages/com.unity.learn.iet-framework.authoring@1.0/manual/authoring-guide.html#adding-an-external-link-in-the-table-of-contents

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設定と同じ言語で表示されるようにする
- https://docs.unity3d.com/Packages/com.unity.learn.iet-framework.authoring@1.2/manual/authoring-guide.html#content-localization に書いてある手順に従って設定可能
初心者向け・上級者向けチュートリアルと同じようにカテゴリで分ける
- https://docs.unity3d.com/Packages/com.unity.learn.iet-framework.authoring@1.2/manual/authoring-guide.html#creating-a-tutorial-category に書いてある手順に従って設定可能

Unity Layoutの変更は出来るか？

以下の手順で出来ました。
https://docs.unity3d.com/Packages/com.unity.learn.iet-framework.authoring@1.0/manual/authoring-guide.html#custom-window-layouts

リッチテキスト表示は可能か？

出来ました。

<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のスタイル設定