差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

--- vscode:debugger [2022/09/05 18:02]
pastatto ↷ 移動操作に合わせてリンクを書き換えました。
+++ vscode:debugger [2023/10/24 19:13]
pastatto ディレクトリ変更箇所の修正「infiniteloop Co,Ltd」→「VirtualCast」
@@ ライン 1: / ライン 1: @@
-====== VSCodeでデバッガを使用する方法 ======
+~~NOTOC~~
-デバッガ（Debugger）とは、プログラムのデバッグを助けてくれるツールです。
+====== VSCodeでデバッグをする方法 ======
-デバッガには、変数の状態を確認したり、ステップ実行という方法でプログラムの動作が追う機能があります。
+VSCodeは、プログラムのデバッグを助けてくれる**デバッガ（Debugger）**の機能を備えたツールです。\\
+デバッガとして利用することで、変数の状態を確認したり、ステップ実行という方法でプログラムの動作を追うことができます。
-===== 1.バーチャルキャストの設定 =====
+**[[vscode/tutorial]]**の内容を理解している前提で説明します。
-{{:vscode:vciconfig.png?400|}}
+===== 1. バーチャルキャストの設定 =====
-[VCIスクリプトのデバッガーのTPCポート番号]に適切な値を設定してください。推奨値は、**41912**です。
+<WRAP center box round 95%>
+<WRAP half column>
+[VCIスクリプトのデバッガーのTPCポート番号]に適切な値を設定してください。\\
+推奨値は、**41912**です。\\
 [スタジオにデバッグ情報を表示する]にチェックしてください。
+</WRAP>
-===== 2.VSCodeにデバッガのプラグインを追加 =====
+<WRAP half column>
+{{ :vscode:vciconfig.png?direct |}}
+</WRAP>
+</WRAP>
-{{vscode:vci_debugger_1.png?direct&400|}}
-VSCodeを起動後、左のタブから拡張機能を選択して[MoonSharp]で検索してください。
+=====2. VSCodeにデバッガのプラグインを追加 =====
+<WRAP center box round 95%>
+VSCodeを起動後、左のタブから拡張機能を選択して**[MoonSharp]**で検索してください。\\
 [MoonSharp Debug]のページが新規のタブで開くので、そこからプラグインをインストールします。
-===== 3.VSCodeのワークスペースにlaunch.jsonを作成 =====
+{{ vscode:vci_debugger_1.png?direct&600 |}}
+</WRAP>
-VSCodeのデバッガをVirtualCastで使用する場合
-[EmbeddedScriptWorkspace] フォルダの直下に [.vscode] のフォルダを作成し、その中に [launch.json] を作成する必要があります。( [launch.json] がデバッガの設定ファイルになります)
+===== 3. VSCodeでの作業用スクリプトの作成 =====
-** 1. [EmbeddedScriptWorkspace] のフォルダを開く **
+<WRAP center  box round 95%>
+**(1)VSCodeでフォルダを開く**\\
+ワークスペースをVSCodeで開きます。
+<code>C:/Users/_USER_/AppData/LocalLow/VirtualCast/VirtualCast</code>
-エクスプローラーで以下で以下のフォルダを開いてください。
+上記のパスにある[EmbeddedScriptWorkspace]フォルダーを開きます。\\
+フォルダーの開き方は**[[vscode/tutorial]]**でも説明しています。
-<code>C:/Users/_USER_/AppData/LocalLow/infiniteloop Co,Ltd/VirtualCast/EmbeddedScriptWorkspace]</code>
+{{vscode:luapath.png?direct|}}
-''_USER_''は使ってるパソコンのユーザー名になります。
+</WRAP>
-{{vscode:vci_debugger_2.png?direct&200|}}
+<WRAP center round box 95%>
+**(2)対象VCIの専用フォルダ作成**\\
+バーチャルキャスト上でVCIアイテムを出すと、対象のVCIフォルダが自動生成されます。\\
+例えばVCISampleというアイテム名であれば、[VCISample]というフォルダが作成されます。
-既にVSCodeで [EmbeddedScriptWorkspace] フォルダを開いてる場合は、VSCodeのワークスペース上で右クリックからメニューを開いて[エクスプローラーで表示します]を押すと、開くことができます。\\
+<wrap notice right>⇒ [[seed:upload]]</wrap>\\
-** 2.[EmbeddedScriptWorkspace] に [.vscode] という名前のフォルダを作成する **
+<wrap em>スクリプトのデバッグを行う場合は、エクスポート時にVCIObject の[Script Enable Debugging]にチェックを有効にしてください。</wrap>
-{{vscode:vci_debugger_3.png?direct&400|}}
+</WRAP>
+<WRAP center round box 95%>
+**(3)main.luaを作成**\\
+上記で生成されたフォルダに[main.lua]を作成します。\\
+[EmbeddedScriptWorkspace/template.lua]をコピーして[main.lua]にファイル名を変更するのがお勧めです。
+{{ vci:vci_sample_intro3.png?direct }}
+ここで作成した[main.lua]が**作業用スクリプト**となり、編集結果がバーチャルキャスト上で逐次反映されるようになります。
+</WRAP>
+===== 4. 設定ファイルを作成する =====
+[EmbeddedScriptWorkspace] フォルダの直下に [.vscode] のフォルダを作成し、その中に [launch.json] を作成する必要があります。\\
+( [launch.json] がデバッガの設定ファイルになります)
+<WRAP center box round 95%>
+<WRAP half column>
+** (1)フォルダーをエクスプローラーで表示する **
+[EmbeddedScriptWorkspace]フォルダーをエクスプローラーで表示します。\\
+既にVSCodeで [EmbeddedScriptWorkspace] フォルダを開いてる場合は、VSCodeのワークスペース上で右クリックからメニューを開いて[エクスプローラーで表示します]を押すと、開くことができます。
+</WRAP>
+<WRAP half column>
+{{vscode:vci_debugger_2.png?direct|}}
+</WRAP>
+</WRAP>
+<WRAP center box round 95%>
+<WRAP half column>
+** (2)[EmbeddedScriptWorkspace] に [.vscode] という名前のフォルダを作成する **
 [EmbeddedScriptWorkspace] フォルダの直下に [.vscode] というフォルダを作成してください。\\
+</WRAP>
+<WRAP half column>
+{{vscode:vci_debugger_3.png?direct|}}
+</WRAP>
+</WRAP>
-** 3.[.vscode]フォルダの中に[launch.json]を新規作成 **
+<WRAP center box round 95%>
+** (3)[.vscode]フォルダの中に[launch.json]を新規作成 **
 [.vscode]フォルダの中でメニューを開き、[新規作成 > テキストドキュメント] を作成し、できたファイルを ''launch.json'' にリネームしてください。\\
-※もしくは、下記の[launch.json]ファイルをダウンロードして[.vscode]内に保存してもよいです。\\
+※もしくは、下記の[launch.json]ファイルをダウンロードして[.vscode]内に保存してもよいです。
-** 4.[launch.json]の中に下記をコピー＆ペースト **
+</WRAP>
-==== launch.json ====
+<WRAP center box round 95%>
+** (4)[launch.json]の中に下記をコピー＆ペースト **
+先ほど作った[launch.json]ファイルを開いて、下記のテキストをコピー＆ペーストして保存します。\\
+※補足ですが…公式のリファレンスは ''"debugServer": 41912,'' の記述箇所が間違ってます。\\
+上記の[launch.json]は修正した内容になっています。\\
+[[https://marketplace.visualstudio.com/items?itemName=xanathar.moonsharp-debug|MoonSharp Debug]]
+</WRAP>
 <file json launch.json>
@@ ライン 67: / ライン 130: @@
 </file>
-先ほど作った[launch.json]ファイルを開いて、上記のテキストをコピー＆ペーストして保存します。\\
-※補足ですが…公式のリファレンスは ''"debugServer": 41912,'' の記述箇所が間違ってます。\\
-上記の[launch.json]は修正した内容になっています。\\
-[[https://marketplace.visualstudio.com/items?itemName=xanathar.moonsharp-debug|MoonSharp Debug]]
-===== 4.デバッガを使用する手順 =====
+===== 5.デバッガを使用する手順 =====
-バーチャルキャストにスクリプトを含むVCIを取り込みます。THE SEED ONLINEにVCIスクリプトを含むVCIをアップロードして、バーチャルキャストを立ち上げてSEED連携を行ってください。
-<wrap notice right>⇒ [[seed:upload]]</wrap>\\
+バーチャルキャストにスクリプトを含むVCIを取り出します。\\
+VCIスクリプトを含むVCIをアップロードしてください。
-**スクリプトのデバッグを行う場合は、エクスポート時にVCIObject の[Script Enable Debugging]にチェックを有効にしてください。**
+<wrap em>スクリプトのデバッグを行う場合は、エクスポート時にVCIObject の[Script Enable Debugging]にチェックを有効にしてください。</wrap>
 ==== デバッガの使い方 ====
-{{vscode:vci_debugger_6.png?direct&400|}}
+<WRAP center box round 95%>
+<WRAP half column>
+デバッグを行うVCIをバーチャルキャストで取り出します。\\
+その後、VSCodeの[実行 > デバッグ開始]からデバッガを起動します。
+</WRAP>
+<WRAP half column>
+{{ vscode:vscode_debug.png?direct |}}
+</WRAP>
+</WRAP>
-まず、VirtualCastを立ち上げてスタジオに入り、デバックを行うVCIを表示します。\\
+<WRAP center box round 95%>
-その後、VSCodeの[デバッグ > デバッグ開始]からデバッガを起動します。
-{{vscode:vci_debugger_7.png?direct&400|}}
 行番号の左をクリックすると、ブレークポイントの設定ができます。\\
 ブレークポイントとは、**ブレークポイントの行までプログラムが実行された場合一時停止する箇所** です。
-上記の例では ''onGrab()'' の中にブレークポイントが設定されているので、スタジオに戻りVCIをつかみます。\\
+下記の例では ''onGrab()'' の中にブレークポイントが設定されています。\\
 つかんだ後、本来なら3回の ''print()'' が実行されるはずですが、実行されてないと思います。\\
 VSCodeのデバッガツールから、ステップ実行させる事でプログラムが処理されます。\\
@@ ライン 100: / ライン 165: @@
 デバッグコンソールや、左のバーを見る事で変数の状態を確認したりできるので print関数では追いづらい細かい挙動もチェックできます。
+{{vscode:vci_debugger_7.png?direct&|}}
+</WRAP>
+デバッグが終了してVCIを公開する場合、<wrap em>VCIObject の[Script Enable Debugging]にチェックを無効にして出力し直さなければ、スクリプトが参照できる状態で公開されてしまいますので注意しましょう。</wrap>

VirtualCast

ユーザ用ツール

サイト用ツール

差分

ページ用ツール