SubstanceDesigner(SD)のデバック環境構築方法

## 概要
この記事はSubstanceDesignerでPythonのでバック開発環境を構築する手順の考察まとめです。

## 達成できること
最終的にはこのようなデバックができる環境構築をします。
[![Image from Gyazo](https://i.gyazo.com/1594284e13a03159aab076d6dc16d8ed.gif)](https://gyazo.com/1594284e13a03159aab076d6dc16d8ed)

## 環境
- Windows10
- SubstanceDesigner2020.2.1(10.2.1)
    - おそらく2020であれば特に問題なく動作するはず
- Python 3.7.6　※SubstanceDesigner2020.2.1時点

- VSCode1.51.1
    - 基本的VSCodeのバージョンはなんでもOK

## 手順

### 1. SubstanceDesignerにデバック用のptvsdパッケージへのパスを通す。

パスを通せれば割となんでも良さそうです。
[公式](https://docs.substance3d.com/sddoc/debugging-plugins-using-visual-studio-code-172825679.html)ではptvsdをインストールしてPTYHONPATHに通してくださいっと書いていますが、
それだけだと？？？っとなるので、いくつか思いつく方法を記載します。

#### 1-1. SubstanceDesignerのPythonに直接インストールする
おそらく一番お手軽な方法です。

デフォルトにインストールしたSubstanceDesingerのPythonの格納場所は下記となるのでそちらに直接pip installします。
C:\Program Files\Allegorithmic\Substance Designer\plugins\pythonsdk

``` bash
cd C:\Program Files\Allegorithmic\Substance Designer\plugins\pythonsdk
python -m pip install ptvsd
```

#### 1-2. 設定からPathを設定する
上記の方法だと各環境ごとの共通化やローカルのPython環境が汚れるを避けたい方も居ると思いますが、
その様な方には少し手間ですが、この方法がおすすめです。

※あらかじめPython3.7.6のインストールが必要
あらかじめディレクトリにptvsdをインストールします。

``` bash
py -3.7 -m pip install ptvsd -t "インストールしたいフォルダパス"
```

SubstanceDesignerのメニューから編集/Preferenceを開き、下記の様にそのフォルダを指定します。
PYTHONPATHへの追加を設定でやってしまうという感じですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188312/f6e24ed2-55c4-2b52-c8c8-dc74d0e3756b.png)


#### 1-3. コマンドプロンプトなどであらかじめ環境変数にパスを通す
他のDCCやPythonに馴染み深い方はこちらの方が良いかもしれません。
ちなみに私は通常のクリーンな環境で起動したい時とプラグイン入りなどを想定して、こちらの方法をお勧めします。

こちらもあらかじめディレクトリにptvsdをインストールします。

``` bash
py -3.7 -m pip install ptvsd -t "インストールしたいフォルダパス"
```

そして下記でcmdなどで下記のコマンドを実行し、SubstanceDesignerを起動します。
Substance Designer.exeのパスはインストールされたパスに適宜置き換えてください。
こうすることでSubstanceDesignerのPythonのPathに指定したフォルダが追加された状態でSubstanceDesignerが起動できます。

``` bash
set PYTHONPATH=%PYTHONPATH%;インストールしたフォルダ
"C:\Program Files\Allegorithmic\Substance Designer\Substance Designer.exe"
```

### 2. SD側でリモートデバックを起動する
適宜上記のどれかの方法でpathを追加した後、
SubstanceDesignerを開き、ウィンドウ\Python Editorを開いてください。
[![Image from Gyazo](https://i.gyazo.com/2d3e17eac5a5bdcf4d93ee7c3d314021.gif)](https://gyazo.com/2d3e17eac5a5bdcf4d93ee7c3d314021)

そして、下記を入力し、実行

``` python
import ptvsd
ptvsd.enable_attach()
```
[![Image from Gyazo](https://i.gyazo.com/3f7624981db858d39008706c69c03082.gif)](https://gyazo.com/3f7624981db858d39008706c69c03082)

ptvsdの詳しい説明は省略しますが、これを実行することでPort番号「5678」でリモートデバックができる様になります。

### 3.VSCodeのデバック設定
それではVSCodeに移りましょう。
左側の虫マークからデバックを開き、適当なデバック設定を選んで下記をコピぺしてください。

```
{
    "configurations": [
        {
            "name": "Python: SD Attach",
            "type": "python",
            "request": "attach",
            "connect": {
                "host": "127.0.0.1",
                "port": 5678
            },
            "pathMappings": [
                {
                    "localRoot": "${workspaceFolder}",
                    "remoteRoot": "${workspaceFolder}"
                }
            ]
        }
    ]
}
```

[![Image from Gyazo](https://i.gyazo.com/670f04d7b7586bbd3eca47cebcfbdebe.gif)](https://gyazo.com/670f04d7b7586bbd3eca47cebcfbdebe)

これでVSCodeの設定は完了です。

### 4. 動作確認
それでは実際にデバックできるか確認してみましょう。

適当な場所にファイルを作成して下記を入力します。
SubstanceDesignerで選択中のNodeを取得して出力するスクリプトを用意致しました。

``` python:sample.py
import sd
context = sd.getContext()
sd_app = context.getSDApplication()
ui_manager = sd_app.getQtForPythonUIMgr()

node_list = ui_manager.getCurrentGraphSelection()

for node in node_list:
    print(node)
```

Substance側でそのファイルを開きます。
[![Image from Gyazo](https://i.gyazo.com/42de2b34b9c3b891bef5a1d2dc04bdb1.gif)](https://gyazo.com/42de2b34b9c3b891bef5a1d2dc04bdb1)

下記の様に
SubstanceDesignerでノードを選択し、VSCodeでF5を押し、デバックモードに。
そして、SubstanceDesigner側の実行ボタンを押すと
VSCode上でブレークポイントで止まることが確認できると思います。

[![Image from Gyazo](https://i.gyazo.com/1594284e13a03159aab076d6dc16d8ed.gif)](https://gyazo.com/1594284e13a03159aab076d6dc16d8ed)

ついでにVSCodeのデバックコンソールで結果なども確認することができるので、非常に確認がしやすくなると思います。

環境構築は以上になります。
それでは！