[Unity] Editor操作のチュートリアルを作成できるIn-Editor Tutorialについて

In-Editor Tutorialの概要や実装方法について調査しました。

# In-Editor Tutorialとは？
- Editor操作のチュートリアルを行えるようにする機能
- [元々Unity社のチームが学習プロジェクトのインタラクティブなチュートリアルを作成するために使っていた内部ツール](https://blog.unity.com/ja/technology/in-editor-tutorials-available-to-try-in-unity-20211)
- 開発者使用想定の「Tutorial Authoring Tools」パッケージでチュートリアルを作成可能
    - 基本的にScriptable Objectで作成する
- ユーザー使用想定の「Tutorial Framework」パッケージでチュートリアルを再生可能

# 出来ること
- Tutorialsウィンドウで行うべき手順の説明
- 手順説明の表示直後に実行するCallBackの設定
- 各手順で操作すべき箇所のハイライトと、それ以外の操作防止
- 次の手順に進める基準設定
<iframe width="806.4" height="453.6" src="https://www.youtube-nocookie.com/embed/ojnutA8JXwc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 参考資料・ドキュメント
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で検索すると出てきます。
    - <img width="800" alt="PackageImage.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/76160872-ccf0-3885-93cf-99375171ccaa.png">

- 2019.4 - 2021.1
    - Githubにあります。
    - ダウンロード後、Add package from diskなどを行って頂く必要があります。
        - [Tutorial Authoring ToolsのReleaseページ](https://github.com/needle-mirror/com.unity.learn.iet-framework.authoring/releases)
        - [Tutorial FrameworkのReleaseページ](https://github.com/needle-mirror/com.unity.learn.iet-framework/releases)

# 実装例
- LEGOⓇ Microgame
    - [LEGOⓇ Microgame](https://blog.unity.com/ja/technology/create-your-first-game-brick-by-virtual-brick-with-the-lego-microgame)とはUnity操作を説明するサンプルプロジェクト。Unity社が提供。
        - ※この記事の「出来ること」で動画を貼ったUnityプロジェクト
    - このプロジェクトの中でIn-Editor Tutorialが実装されており、参考例として有用。
    - Unity Hubで新規プロジェクトを作成するときに「使い方を学ぶ」タブからテンプレートプロジェクトが作成される。
        - <img width="800" alt="MakeProject.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/94ae7d30-3d00-8e90-7224-5e95223a43fb.png">
    - In-Editor Tutorial用のScriptable Objectは以下フォルダで閲覧可能
        - <img width="800" alt="TutorialFiles.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/4a6a7cca-fbed-271e-7ae1-30a1b95d75d0.png">

# 設定方法
## 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
このプロジェクトのチュートリアルの全体設定が出来ます。
<img width="800" alt="TutorialProjectSettings.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/ba0b4ef4-842a-186e-b3e9-6250ce8d71c4.png">


#### Tutorial Welcome Page
プロジェクトの起動直後に表示されるウェルカム ダイアログ
<img width="800" alt="WelcomePage1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/6ab8ca99-0c1f-50fa-39a7-6aab3c6dc144.png">
<img width="800" alt="WelcomePage2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/370e028c-9ee2-080e-e4a2-eb40b21c5b94.png">

Scriptable Objectでボタンを押した後のCallbackの実装が出来ます。
<img width="1000" alt="WelcomePage3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/e72321de-f2fe-c5bf-e059-aea72ee2b2b5.png">

#### Tutorial Container
チュートリアルの全セクションの設定
<img width="800" alt="TutorialContainer1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/a5019cc8-d9a4-38c8-9aa9-5073cc8f328a.png">

外部リンクの設定も出来ます。
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
<img width="800" alt="TutorialContainer2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/042ea1ff-55cb-1db3-7b20-b67c197c5e23.png">

#### Tutorial
各セクションの設定
<img width="600" alt="Tutorial.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/240f3b7e-0100-eef4-4aa5-d808a9d6379f.png">
<img width="800" alt="Tutorial2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/987c8c90-10f4-48f5-f957-c4595fa97d23.png">
<img width="800" alt="Tutorial3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/f7648629-f233-34bc-35b1-5496bdfd16c1.png">

#### Tutorial Page
各ページの設定項目(大きく分けて6つ)
<img width="800" alt="TutorialPage.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/4a90efe7-b9d0-04ac-85bb-ccd2a91b9478.png">

##### ①説明表示
<img width="500" alt="PageDescription.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/1a55a239-d6ae-5a80-b28c-fd263960386f.png">
<img width="800" alt="PageDescription2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/a5d009b2-d8e4-c0c7-f1f2-44952d88d59c.png">

なお表示する画像・動画について、ドキュメントに[以下の規定](https://docs.unity3d.com/Packages/com.unity.learn.iet-framework@3.1/manual/framework-documentation.html#tutorial-media)が書かれていました。
```
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説明](https://docs.unity3d.com/Packages/com.unity.learn.iet-framework@3.1/manual/framework-documentation.html#criteria-descriptions)
- Completed When All Are True, Completed When Any Is Trueを設定可能
- <img width="700" alt="Criteria1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/3f39b5c1-04ec-2922-b0ad-b227df994be4.png">
- ArbitraryCriterionを選択すると、Scriptable Objectにより任意の判定基準(bool)を設定可能
- <img width="700" alt="Criteria2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/1933b779-e4a5-7733-c10c-d0df55e541e2.png">
- <img width="800" alt="Criteria3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/a8455aeb-a206-bee0-7401-74c152220c66.png">
- ※[Criterionクラス](https://docs.unity3d.com/Packages/com.unity.learn.iet-framework@3.1/api/Unity.Tutorials.Core.Editor.Criterion.html)を継承した新クラスを実装しても、Criteria Type一覧に表示される新基準を設定可能

##### ③Callback
ページを表示した後など、特定のタイミングでCallbackを実行出来ます。
<img width="800" alt="Callback1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/fe6238ce-a1d3-1332-e7e4-e171c004d93f.png">

##### ④Mask・ハイライト設定
操作不可能なMask箇所と、操作可能+強調されるハイライト箇所の設定が出来ます。
- ハイライト箇所はWindow以外にも、PrefabやPropertyに関して設定可能
- Prefabの場合
- <img width="600" alt="PrefabMask.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/b7114b49-ea86-9d29-9eb0-d5812d608993.png">
- <img width="800" alt="PrefabImage.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/6e37a251-8029-a645-8470-58421c486dfa.png">
- Property
- <img width="600" alt="PropertyMask.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/6d23a27a-e752-c000-e890-6e6741a7b8a6.png">
- <img width="800" alt="Mask2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/a166f4be-5c09-2c8e-2e2b-4984b59c5ad1.png">
- その他、ハイライト位置の設定方法の選択肢
- <img width="800" alt="Mask3.png (23.1 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/f5e47fe0-405f-6a10-c5b2-af39b95c1533.png">

##### ⑤ページ表示時のカメラ位置
<img width="800" alt="InitialCamera.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/322090a7-ea49-cbe3-d986-0c26df5acbb7.png">

##### ⑥基準達成時の効果音
<img width="800" alt="Sound.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/c09cf10b-923a-19fb-7a32-d6509bd41c7a.png">

# 検証してみた疑問点
### Unity最上部のMenuや[Overlays](https://learning.unity3d.jp/8336/)にハイライトは出来るか？
ハイライトするよう設定することが出来ませんでした。
ただし、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 に書いてある手順に従って設定可能
    - <img width="1000" alt="Localization1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/da9a513c-3400-936c-48de-b055f556eca1.png">
- 初心者向け・上級者向けチュートリアルと同じようにカテゴリで分ける
    - https://docs.unity3d.com/Packages/com.unity.learn.iet-framework.authoring@1.2/manual/authoring-guide.html#creating-a-tutorial-category に書いてある手順に従って設定可能
    - <img width="800" alt="Localization2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/a63ee264-f3bf-dab0-3062-31d394b2d9a3.png">
    - <img width="800" alt="Localization3.png (11.4 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/cee8be7e-1d9e-cc24-d34c-38f051122722.png">

### 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> 区切り
```
<img width="800" alt="RichText.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/552f944c-9013-868f-3bb3-98d1db202e10.png">

# その他、補足事項など
- [Future Prefab](https://docs.unity3d.com/Packages/com.unity.learn.iet-framework@3.1/manual/framework-documentation.html#future-prefabs-and-criteria)なるものがある
    - シーンでPrefabをスポーンし、シーン内でプレハブの値を変更するチュートリアルに役立つ
- [Tutorialのスタイル設定](https://docs.unity3d.com/Packages/com.unity.learn.iet-framework@3.1/manual/framework-documentation.html#tutorial-styles)
    - <img width="800" alt="TutorialStyle.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182279/5490cef3-60d9-a571-4a6f-84546f149726.png">