SKYNovel Extension for VSCode
SKYNovel - Visual Studio Marketplace
CHANGELOG.md
After installing this extension ... / この拡張機能をインストールしたら……。
Next, let's download and unzip the sample project, and open the folder with VSCode!
次はサンプルプロジェクトをダウンロード・解凍し、VSCodeで【フォルダを開く】してみましょう！
List of Functions / 機能一覧
Startup timing / 起動タイミング
- When you open a file under the doc/prj folder of a template.
- テンプレートのdoc/prjフォルダ下のファイルを開いたとき
- During debugging (e.g., by pressing F5 key)
- When using the debugging function.
shortcut key / ショートカットキー
Syntax Highlight / シンタックスハイライト
- Easy color coding of .sn script files.
Diagnostic function
Displays an error when there are files with the same file name in different folders.
Error message on macro definition with predefined tag and same name.
Error display for duplicate label names in the same script.
Error display for macro definition duplication in multiple files.
Warning when using undefined macros.
Report unused macro definitions.
- After the macro is defined, the macro will not be reported even if it is not used, if [;#NO_WARM_UNUSED_MACRO (macro name)] is specified.
Warning if line break tag exceeds 10 lines. (There's a lot of risk of forgetting to close the tag.)
診断機能
Coding assistance
- Hover information (Tag, Macro)
- Auto completion
- Tag name (Start by typing "[".)
- Some tags also show usage examples.
- Attribute (With attribute description)
- Enter " " in [] to start the program.
- Attribute value (With attribute description)
- Type "=" immediately after the attribute name in [] to start.
- Snippet completion
- Jump to definition / Show definition here (Tag, Macro, Plugin definition tag)
- (Use F12 key to go back and forth between macro definition and macro usage)
- Jump to reference / Show reference here (Tag, Macro, Plugin definition tag)
- Rename symbol (Macro name, Plugin definition tag)
- (also activated by the F2 key)
コーディング補助
- ホバーで情報表示（タグ、マクロ）
- コード補完
- タグ名（「[」入力で起動）
- 一部のタグには使用例なども示しています
- 属性名（属性の説明つき）
- []内で「 」（半角スペース）入力すると起動
- 属性値名（属性の説明つき）
- []内で属性名直後に「=」入力すると起動
- タグ入力時にスニペット挿入
- 「定義へ移動」「定義をここに表示」
- （F12キーでマクロ定義とマクロ使用箇所を行ったり来たりできます）
- 「参照へ移動」「参照をここに表示」
- 「シンボルの名前変更」
- （F2キーでも起動）
Automatic icon creation / アイコン自動作成
- Just prepare "build/icon.png" and it will automatically generate ".ico" file for Windows and ".icns" file for macOS.
- 「build/icon.png」を準備するだけで、Windows 用の「.ico」ファイル、macOS 用の「.icns」ファイルを自動生成します。
Outline view and symbol search
outline display
[View] - [Open View...] to display a list of symbols contained in the currently displayed file.
Symbols are "labels, macro definitions, text, and partial tags (those involved in conditional branching and processing flow changes).
- [jump]
- [call]
- [event]
- [button]
- [link]
- [s]
- [if]
- [elsif]
- [else]
Select a symbol from the list and press the Enter key to go to that symbol.
For example, the template would look something like this
- main .sn is prefixed by [event] system and [button] in the title.
- sub .sn has a lot of macro definitions
- Although it is not included in the template, even if [if]-type tags and text are complexly intertwined
Symbol Search
Press the following keys to see a list of symbols in the file you are viewing.
| mac |
windows |
| command + shift + o |
Ctrl + Shift + o |
| Or command + p followed by @ |
Or Ctrl + p followed by @ |
If you continue typing ":", it will be sorted by category, such as label or macro definition.
You can also select a symbol and press Enter to go to that symbol.
アウトライン表示とシンボル検索
アウトライン表示
【表示】-【ビューを開く...】から【アウトライン】を選ぶと、表示中のファイルに含まれるシンボル一覧が表示されます。
シンボルとは「ラベル、マクロ定義、テキスト、一部タグ（条件分岐と処理の流れ変更に関わるもの）」のことです。
- [jump]
- [call]
- [event]
- [button]
- [link]
- [s]
- [if]
- [elsif]
- [else]
一覧からシンボルを選択し、Enterキーを押すとそのシンボルに移動します。
例えばテンプレートでは以下のような表示になります。
- main .sn は最初の方に[event]系、タイトルの[button]がならぶ
- テンプレートには含まれませんが、[if]系タグとテキストが複雑に絡み合っていてもこのとおり
シンボル検索サポート
以下のキーを押すと、表示しているファイル内のシンボルの一覧が表示されます。
| mac |
windows |
| command + shift + o |
Ctrl + Shift + o |
| もしくは command + p のち @ |
もしくは Ctrl + p のち @ |
続けて「:」をタイプすると、ラベルやマクロ定義等のカテゴリごとにソートされます。
こちらもシンボルを選択し、Enterキーを押すとそのシンボルに移動します。
Activity Bar / アクティビティバー
- Library update check
- Pop-up announcement at the bottom right (if there is an update).
- Display in Activity Bar, update with one button.
- Various functions such as "Launch browser version" can be performed with a single button.
- ライブラリ更新チェック
- （更新があれば）右下にポップアップ告知
- Activity Barにも表示、ボタン一つで更新
- 「ブラウザ版を起動」など、各種機能もボタン一つで
Debugger
デバッガー
Debugger Function Overview
Support for attach and launch
select the debugger (triangle on the insect) on the active bar, select [App+Dbg], and
Press the green triangular execution button to start the debugger (after that, just press the F5 key). (Thereafter, simply press the F5 key to start it.)
the application version starts and stops at the beginning of the script (main.sn, the first digit of the first line).
A band cursor, pentagon stop mark, and debug button bar appear on the stop line.
The call stack view will also show [main.sn 1:1]
Function to create a debug configuration "SKYNovel Debug".
If you have not yet created a debug configuration, you will see the following display: 1.
Click the [Create launch.json file] blue link.
The launch.json file is created.
If you don't have [App+Dbg], you will need to enter some of the information manually.
Open the .vscode/launch.json file with the gear button to the immediate right and
Please add the [compounds] designation manually.
"configurations": [.
{
"name": "1. Launch the app",
"type": "node",
"request": "launch",
},
{
"name": "2. Connect to the app",
"type": "skynovel",
"request": "attach",
},
{
"name": "2b.debugger",
"type": "skynovel",
"request": "launch",
}
],
"compounds": [
{
"name": "App+Dbg",
"configurations": ["1. Launch the app", "2b.Debugger"]
}
]
You can run through the tags and & assignment grammars one step at a time, or you can skip to a break point (see below).
You can even skip to the breakpoint (see below).
1. Continue (F5 key)/Pause (F6 key)
Continue ... Skip to breakpoint (waiting for events such as ka[l][p][s])
Pause ... Pause (usually when waiting for an event)
2. Step over (F10 key)
If you're a macro, don't go inside, skip to the outside.
3. Step-in (F11 key)
If it's a macro, go inside. Otherwise, step over.
4. Step out (Shift + F11)
Skip from inside the macro until you get out. Otherwise, step over.
5. restart button (Shift + Ctrl + F5 keys)
Resume from the beginning of the game engine.
6. stop (Shift + F5 key)
Stop the debugger and the app, or quit debugging (stop each of the two)
breakpoint stop
Stops the break before processing tag and & variable operations. There are five types as follows.
(A) line breakpoint
If you click on the left side of the line number, the mark with a red circle will appear.
The execution process of SKYNovel stops when it passes through there.
It also appears in the breakpoint view.
Breakpoints can be deleted, but you can also uncheck the checkbox to temporarily disable the breakpoint.
(B) conditional breakpoint
If the conditional expression is true, then (abbreviated) break before processing
right-click on the breakpoint and select
Selecting 【Expressions】 from 【Editing】 allows you to enter a conditional expression.
When passing through, it only breaks if the conditional expression is true.
(C) hit-count breakpoint
If it passes more than n times, it breaks before processing.
if you select [Hit Count] from [Edit]
You can enter the hit count of "How many times do you want to break here?".
(D) data breakpoint
Break when the value of the variable is changed
When you right-click on a variable in the Variable View and click on "Suspend when the value is changed," you can change the value of the variable by clicking on "Stop". Change Breakpoints] is added.
(In the case of tmp variable, it is not displayed in the variable view because the variable does not exist unless something is assigned. (e.g. "I'll be back")
(E) function breakpoint
Break just before the specified tag or macro is called
If you press the "+" button in the breakpoint view and enter a tag or macro name, you will be able to see the following information
Break at all points just before it is called.
Variable View
Display variable values of the script execution position
You can check the contents of the variable.
It is possible to change the value of a variable by inputting it manually while the program is stopped.
However, a variable name that begins with "const.〜" cannot be changed.
In addition, some variables whose variable names begin with "sn.˜" can be changed by SKYNovel. If you change it, it will be fixed at the input value.
Watching View
If you register a variable or an expression, it will be displayed.
If you register a variable or expression that you want to see how it changes, it will be highlighted whenever it changes.
You can also register variables that do not (yet) exist. It will be displayed as 【null】.
call stack view
Displays the break, step, etc. stop position.
If it is in a macro, it shows the call hierarchy.
Debugging Console REPL
Read-Eval-Print Loop, which allows you to look up the value by manually entering an expression on a break.
Hovering over a variable while stopped displays the value
Normal hovering in tag and macro definition display is temporarily disabled
デバッガー機能概要
attach・launch 起動対応
アクティブバーのデバッガー（虫に三角マーク）を選び、【App+Dbg】を選んで、
緑三角の実行ボタンを押すと、デバッガーが起動します。（以後はF5キーを押すだけで起動します）
アプリ版が起動し、スクリプト冒頭（main.sn、1行目の1桁目）で停止します。
停止行に帯カーソルと五角形の停止マーク、デバッグボタンバーが現われ、
コールスタックビューにも【main.sn 1:1】と表示されます。
デバッグ構成「SKYNovel Debug」作成機能
デバッグ構成が未作成の場合は、以下の表示になります。
【launch.json ファイルを作成します】青文字リンクをクリック
launch.json ファイルが作成されます。
【App+Dbg】がない場合は、一部手入力が必要です。
すぐ右の歯車ボタンで .vscode/launch.json ファイルを開き、
手入力で【compounds】指定を追記して下さい。
"configurations": [
{
"name": "1.アプリを起動",
"type": "node",
"request": "launch",
},
{
"name": "2.アプリに接続",
"type": "skynovel",
"request": "attach",
},
{
"name": "2b.デバッガ",
"type": "skynovel",
"request": "launch",
}
],
"compounds": [
{
"name": "App+Dbg",
"configurations": ["1.アプリを起動", "2b.デバッガ"]
}
]
デバッグボタンバーについて
タグや&代入文法を１ステップとして、一つずつ実行したり出来ます。
ブレークポイント（後述）までスキップすることもできます。
1. 続行（F5 キー） / 一時停止（F6 キー）
続行 ... ブレークポイント（か[l][p][s]などイベント待ち）までスキップ
一時停止 ... 一時停止する（ふつうイベント待ちで押せるようになる）
2. ステップオーバー（F10 キー）
マクロなら中へ入らず、外に出たところまでスキップ
3. ステップイン（F11 キー）
マクロなら中へ入る。それ以外はステップオーバー
4. ステップアウト（Shift + F11 キー）
マクロ内から外に出るまで飛ばす。それ以外はステップオーバー
5. 再起動ボタン（Shift + Ctrl + F5 キー）
ゲームエンジン冒頭から再開する
6. 停止（Shift + F5 キー）
デバッガーやアプリを停止、デバッグ終了（２つそれぞれを停止して下さい）
ブレークポイント停止
タグや&変数操作処理前にブレーク停止する機能。次の五種類があります。
(A) 行ブレークポイント
行番号の左をクリックすると赤丸マークの目印が付きます。
SKYNovelの実行処理がそこを通ると停止します。
ブレークポイントビューにも表示されます。
ブレークポイントは削除もできますが、チェックボックスを外すと一時的にブレークしないようにできます。
(B) 条件式ブレークポイント
条件式が真なら、（略）処理前にブレーク
ブレークポイントを右クリックし、
【編集】から【式】を選択すると、条件式を入力できます。
ここを通る際、条件式が真である場合のみブレークします。
(C) ヒットカウントブレークポイント
ｎ回以上通ったら、（略）処理前にブレーク
【編集】から【ヒットカウント】を選択すると、
「ここを何回目に通ったときにブレークするか」のヒットカウント回数を入力できます。
(D) データブレークポイント
変数値が変化したときにブレーク
変数ビューの変数を右クリックし、【値が変更されたときに中断】をクリックすると、【変数値変更ブレークポイント】が追加されます。
（tmp変数の場合はなにか代入しないと変数が存在しないため、変数ビューに表示されません）
(E) 関数ブレークポイント
指定したタグやマクロが呼ばれる直前にブレーク
ブレークポイントビューで「＋」ボタンを押し、タグやマクロ名を入力すると、
それが呼び出される直前、すべての箇所でブレークします。
変数ビュー
スクリプト実行位置の変数値を表示
変数の内容を確認できます。
【値の設定】停止中、手入力で変数値変更が可能です。
ウォッチ式ビュー
変数や式を登録しておくと、表示されます。
様子を見たい変数や式を登録しておくと、変化するたびに強調表示されます。
（まだ）存在しない変数も登録しておけます。（【null】と表示されます）
コールスタックビュー
ブレークやステップなどの停止位置を表示します。
マクロ内なら呼び出し階層を表示します。
デバッグコンソールREPL
（Read-Eval-Print Loop）、ブレーク時に式を手入力して値を調べられる
停止中、変数にホバーすると値を表示
タグやマクロ定義表示の通常ホバーは一時無効になる
デバッグ開始時、空白やコメントのみの行に指定されたブレークポイントを後ろにずらす機能
Reference search palette / リファレンス検索パレット
Open the API reference with the following steps
コマンドパレットからリファレンスを参照できる
The Reference search pallet to open API references
次の手順でAPIリファレンスを開けます。
- press Ctrl+Shift+P to open the command palette.
- Ctrl+Shift+Pを押してコマンドパレットを開きます。
- Execute the command "SKYNovel: Open reference search palette".
2. SKYNovel: Open reference search palette」というコマンドを実行します。
- type the tag name you want to open the reference and press Enter to open the web manual.
3. リファレンスを開きたいタグ名を入力し、EnterでWebのマニュアルを開きます。
- Automatically Update prj/path.json
- ファイル増減を監視して prj/path.json に自動更新
- Automatically Create SpriteSheet's json from images
- ex) breakline.5x20.png -> breakline.json
- It is meaningless and OK. Because it is internal processing.
- スプライトシート用json自動生成機能
- ex) breakline.5x20.png というファイル名の画像から breakline.json を作成
- 意味不明でOK、内部的な処理なので
スプライトシートは、生成された json を指定することで画像/動画と同じように使用できます。
- Automatically Update core/plugin.js
- It is meaningless and OK. Because it is internal processing.
- プラグインフォルダ増減でビルドフレームワークに反映する機能
License ... MIT
Famibee is ?
