SKYNovel 開発者向け情報

SKYNovel Information for developers

入門編

SKYNovelとは

WebGL・JavaScriptを中心としたWeb技術によるノベルゲームシステムです。

SKYNovelのはじめかた

すべてGUIによるインストールで、コマンドラインは触りません。

VSCodeをインストール

VSCodeは多機能なテキストエディタで、SKYNovel開発環境のベースとなります。フリーウェアです。
ダウンロードしてインストールしていきます。



Macの場合も同様です。


Macの場合はzipを解凍するとappファイルが入っていますので、それを「アプリケーション」フォルダに移動するだけです。

あとはアプリケーションとして起動できます。


以後は Windowsの場合について解説していきます。
exeを開くとインストーラーが起動します。

あとはよくあるソフトのインストールですが、注意点だけ赤丸しておきます。







インストールを完了し、起動できました。

VSCode用拡張機能 SKYNovel をインストール

起動したVSCodeからインストールできます。

 左端の「Activity Bar」上から5つ目をクリックし、
検索窓に「SKYNovel」(大文字小文字関係なく)入力すると、
(恐らく)famibeeと書いてあるのが 一つだけ検索に引っかかるので「インストール」を押して下さい。それだけです。


 ついでに VSCode を日本語化する、Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace拡張機能ぐらいは入れて置いた方が良いと思います。
 以降の説明では Material Icon Theme - Visual Studio Marketplace というのでアイコンもカラフルにしています。

あとは 拡張機能 SKYNovel の指示に従って……

Node.jsなどをインストールしていきます。

左端の「Activity Bar」に拡張機能 SKYNovelの「丸に紙飛行機」マークが表示されているので、クリックして下さい。

エラーっぽい表示がされています。同時に「SKYNovel開発環境 準備の手引き」というページが開かれていますので、あとはその指示に従ってインストールを続けて下さい。

(注意)「windows-build-tools」は Windows でのみ表示されます。

テンプレートで始めよう

すでに動くゲームをオープンソースで提供しており、これを改造していきます。

 例えば自作の小説本を出版するとします。
 その際、パルプの生成方法、紙の刷り方、印刷技術、装丁デザインの勉強等までする必要があるでしょうか?
 本来小説を書くというのは、紙とペンを用意し、書き始めることだけのはずです。
 良い小説を書くために「小説の書き方本」を読みあさり、知らない事を勉強する方向へ労力を注ぎ、胃を壊すぐらいコーヒーを飲みたいのではないでしょうか?
 同じように、まずはあなたの作品を造り上げることに専念して下さい。


 ●ではどうやって本にするのか?
 今ここに本があります。
 梶井基次郎 原作の短編ノベルゲーム「桜の樹の下には」または拙作「初音館にて」です。
 実はこれは鉛筆で書かれています。
 まずはこの本を消しゴム掛けして、元の文章をあなたの原作に書き換えてしまいましょう。
 本を作るところから、始める必要はありません。
 これはもちろんたとえ話ですが──同じようにして、あなたの本が完成するのです。

 作品を書いているうちに装丁を考えたり、紙質や手触りに凝ったりしたくなるかも知れません。
 その時は初級・中級・上級へと読み進めていって下さい。
 今度は小説を書く楽しみではなく、本を作る楽しみが待っています。

 どんなものか、お試しでやってみましょう。
 まずは、横書きテンプレート プロジェクトの「初音館にて」をダウンロードします。

 zipファイルを解凍すると、ゲームプロジェクトのフォルダが現われます。

 VSCodeの「フォルダーを開く...」で開きます。

 先ほど解凍したフォルダを選択します。

 VSCodeでフォルダが開かれました。
 今後ゲーム開発は、このVSCodeの「フォルダーを開く...」で始めます。


 さて、ゲームをブラウザ上で起動してみましょう。
「Activity Bar」SKYNovelを選択し、
【ブラウザ版を起動】右の【再生ボタン】をクリック。

 すると、ブラウザが開いてWeb版のゲームが起動します。
(初回だけ下準備があり、1分ほど待たされます)

 画像や音楽の素材を差し替えたり、スクリプトを書き換えたり。
 これを改造して、自分のゲームへと作り込んでいくわけです。

改造してみよう

テンプレートを改造してみましょう。まずはタイトル画面から。

 自由な文字列からボタンを作れる「文字ボタン」という機能があります。
 テンプレートのタイトル画面でも使用されていますので、これを変更してみましょう。

「Activity Bar」一番上の「エクスプローラー」を選択します。
 【prj/script フォルダ】下の【main.sn】をクリックすると、そのファイルが開かれます。
 この拡張子【.sn】のファイルはスクリプトというテキストファイルで、シナリオや様々な演出はこのファイルを変更・記述していきます。

「わけの分からないことが書いてある! 意味不明!」
 ですが、いまは置いといてください。おいおい解説しますので。

(余談)(慣れればお好きなテキストエディタで変更して構いません)
※文字コードはUTF-8、改行コードは LF 固定です。文字コード・改行コードを間違うミスに注意。

 ここで55行目付近にある「ロード」という文字を「つづきから」に変えてみます。
 メニューの【ファイル】-【保存】、あるいは Ctrl+Sショートカットで保存します。

 ブラウザの再読み込みボタンを押します。

 文字が変更されました! ボタンもちゃんと押せます。

 さて、いまわざと触れませんでしたが、いま変更したのは「[button]タグのtext属性」というものです。
「タグ??? 属性???」
 新しい言葉が出てきましたね。タグについて解説していきます。

(豆知識)VSCodeで自動保存

スクリプトを変更するたびに保存を選んだり、毎回ショートカットを押すのは面倒!

 そこで、VSCode に保存を任せてしまいましょう。
 こちらの記事を参考に、VSCode を便利に設定してみて下さい。
  →[VS Code] 自動保存するように設定する | あいすのブログ  (web.archive.org)
(注意)設定画面の「ダーティーファイル」というのは、「変更したけど保存してないファイル」という意味合いです。

 自分も「onFocusChange」にしてます。別のアプリをクリックしただけで保存してくれます。この辺はお好みで。
 スクリプトの変更を戻したい場合は、メニューの【編集】-【元に戻す】にて。「アンドゥ(UNDO)」というやつです。

 VSCode には他にも様々な便利設定があります。どんどん使いやすくしていきましょう!

スクリプトとは

スクリプトってなんでしょう?

 SKYNovelにおけるスクリプトとは、
 テキストファイルに書いた「小説」に、タグなどによる「演出」を書き加えたものです。

 実際に見てみましょう。【main.sn】と同じフォルダにある、【ss_000.sn】を開いて下さい。


「小説」は【君の部屋に行こう】という文字の部分です。
「タグなどの命令」は「[」と「]」の半角文字の大括弧に挟まれた、英語や数字や記号の部分です。

(余談)「;」で始まる部分はコメントや注釈と呼ばれるもので、制作者がメモを書ける機能です。SKYNovel 自体は読み飛ばしますので、スルーして下さい。

 7行目は「[r]」ですね。これを今後は「タグ名が r だ」と言い、「rタグ」と呼び、今後この文章(SKYNovel 開発者向け情報)では[r]と書きます。

【bg=white】とか【visible=false】とか、たくさん「おまけ」が付いてる[grp]や18行目の[plc]に注目です。
「おまけ」は、「属性」と呼びます。
 一つの働きをするタグに、細かい指示をする記述の事です。
 半角空白や改行で途切れて、複数指定できます。(タグがサポートしてない属性は無視されます)

 属性って色んなものにありますよね。
 呪文にも「タイプは炎系。力の源は闇。攻撃力は25。水棲生物に強い」
 女性キャラクターなら「年齢は十四歳。メガネは必須! 髪色は黒髪、背はちょっと高めなのを気にしている。スリーサイズはそれぞれ……」
 某ラーメン屋なら「アブラナシヤサイカラメマシニンニクスクナメ」

 同様に[sys_scenario_start]、最後に[grp]などなど。
 それぞれが小さな機能を持っています。それらを積み木のように組み合わせて、演出をしていきます。

 試しに [r] について知りましょう。
 タグの機能については「タグリファレンス」というWeb上の資料で確認できます。
 このページの左上の【タグ】からでもいいですが、リンクを張っておきます。
  →SKYNovel タグリファレンス Tag Reference [r]
「文字レイヤ」とか「ページ」とか色々不明の言葉がありますが──
 とにかく、【改行を出力する】機能を持っています。


 タグは言うなれば魔法の呪文。
 RPGなら暗い洞窟を明るく照らしたり、仲間の体力を回復したり、扉の鍵を開けたり。
 呪文は一つ一つに意味があり、役割があります。便利で頼りになる道具です。
 でも瀕死の仲間を明るく照らしたり、扉の体力(?)を回復したりしても意味はありません。
 タグの使い道を正しく理解し、よりよいノベルゲーム制作という冒険を進めましょう。

「タグなどの命令」は一見ややこしく難しそうに見えます。
 ですが、「今すぐ」「全てを」理解する必要はありません。
 タグリファレンスというカンニングペーパー、辞書があります。
 タグを使いこなすのに、「あんなタグがあったな」となんとなく憶えておけば、あとはタグリファレンスという辞書を引きながら記述していけばよいのです。


 例えばさっき「ロード」という文字を「つづきから」に変えたのは、[button] タグの text属性 を変更したのだった、というわけです。

(豆知識)引用符っているの? いらないの?

属性の値の引用符について。

 引用符、すなわち。
 属性の値でアポストロフィー【'】やクオーテーションマーク【"】で囲っていたりいなかったり、表記が揺れているのが分かるでしょうか?
 先ほど変更した[button]ですら、三種類が混在しています。

[button text='つづきから' left=350 top=360 width=90 call=true label=*load hint="セーブ箇所から続ける" enterse=&sysse_choice clickse=&sysse_ok1]

 これはどの書き方でも同じ動作をします。ので、制作上はどれでも構いません。
(見た目があまり美しくないので、揃えたほうが良さげですが……)
 ただ、「引用符に囲まないと半角空白が表現できない」などの理由で、この文法が用意されています。
 変更前に text=' ロード ' という記述だったのもそれです。
(引用符を使わないと、属性の区切りと見なされエラーになってしまいます)

引用符を文字として値にしたい場合もあります。
その場合は text='太郎"うひょー"' という感じで指定できます。
両方の引用符を使いたいときは……?
実は【#】(半角いげたマーク)も引用符に使えるようになっています。
text=#太郎"うひょー" 花子'むきょー'#

 では三種類の引用符を同時に文字としたいときは……?
 ここでは割愛しますが、後に説明する「変数」という箱に入れてから使用することになるかと思います。

BGM素材を差し替えよう

素材を差し替えて、よりあなたの作品らしく

 audio フォルダに様々な mp3 ファイルが入っています。
 これらは効果音やBGM(バックグラウンドミュージック)のファイルです。
 タイトル画面でもBGMが流れていますが、これを変更してみましょう。

 再び【main.sn】を開いて、64行目辺りにある[bgm]に注目して下さい。

 fn="free10" となっているので、値をfree04に変更してみましょう。
 拡張子は省略できる、というのもポイントです。

 ページを再読み込みすると、なんだか明るい雰囲気のタイトル画面になりました。
 画像素材なども同じように変更・差し替えていくことができます。

初級テクニック

SKYNovelを更新しよう

SKYNovelは随時更新されています。更新の通知と手段を知りましょう

 VSCode起動時、時々右下にポップアップが現われることがあります。

 上部【開発環境】にネット上の最新バージョン、
 下部【開発ツール】にあなたのPC/Mac上のバージョンが表示されます。
 値が異なりますね。最新版に更新しましょう。

 とはいっても、右にあるボタンを押すだけです。
 しばらく待つと、最新バージョンに更新されます。簡単ですね。

(レイヤなどについて)

(未作成)

 SKYNovel でも AIRNovel と概念は変わらないので、AIRNovel の解説文へのリンクでお茶を濁します。いずれ書きなおしたいです……。
  →AIRNovel 開発者向け情報

(予定稿・順不同)
レイヤとは
レイヤには裏表がある
使用できる素材ファイル
フォルダの追加削除
ジャンプしてみる
選択肢を作る
スクリプト文法・詳細編

マクロ

中級テクニック

変数・定数の可視化機能

デベロッパーツールから変数や定数を確認できる機能です。

 ブラウザ版では、デベロッパーツール(ChromeやSafariの機能)を開いて【Application】-【Local Storage】から、システム変数(sys:)などの内容が見えます。
※直接値の変更・クリアができます。jsonで記入して下さい。
※暗号化ON/OFFも予定しています。
 またプロジェクトファイル(prj.json)の【debug】-【variable】を true にすると、 全ての変数が可視化されます。(Session Storageのほうに表示される)
※こちらは値の変更をサポートしていません。[s][l]などの停止時に出力するだけです。
※暗号化ON/OFFも予定しています。

組み込み変数・定数(save:)

SKYNovelが値を設定している変数や定数です。起動直後から使えます。

const.sn.〜、sn.〜という名前はSKYNovelが使いますので、皆さんは新規に作成しないで下さい。
以下の表にあるモノを使うの(読み・書き)は全然OKです!

冒頭がconstな変数は、書く(設定)することができません。
constでない変数は、設定するとその値がシステムに反映されます。
例えば「&sn.auto.enabled=true」は自動読みすすみモードを有効にします。

変数名初期値値域・型コメント
save:const.sn.autowc.enabledfalseBoolean[autowc](文字ごとのウェイト)enabled属性で指定した値。
save:const.sn.autowc.text''String[autowc](文字ごとのウェイト)同名属性で指定した値。
カンマ区切りで複数文字設定可能。ただしtextとtimeは常に同数にすること。設定は常にリセット&上書き
[autowc enabled=true text="二六八" time="500,1000,1500"]
save:const.sn.autowc.time
save:const.sn.mesLayer''Stringデフォルト文字レイヤ。レイヤ指定を省略した時はこの値が使われる。[current]で変更できる
save:sn.doRecLogfalseBooleanテキストを履歴に記録するか
save:const.sn.sLog''String履歴テキスト
save:const.sn.loopPlaying"{}"jsonループ中のサウンドバッファ
save:const.sn.scriptFn''スクリプト名最後に[record_place]したスクリプト名
save:const.sn.scriptIdx0Integer最後に[record_place]したスクリプトインデックス(行番号ではなく内部トークン単位)
save:const.sn.layer.(文字レイヤ名).enabledtrueBoolean文字レイヤのenabled値

組み込み変数・定数(sys:)

SKYNovelが値を設定している変数や定数です。起動直後から使えます。

const.sn.〜、sn.〜という名前はSKYNovelが使いますので、皆さんは新規に作成しないで下さい。
以下の表にあるモノを使うのは全然OKです!

constでない変数は、設定するとその値がシステムに反映されます。
例えば「&sn.auto.enabled=true」は自動読みすすみモードを有効にします。

変数名初期値値域・型コメント
sys:TextLayer.Back.Alpha10.0〜1.0バック不透明度。テキストウインドウの背景の濃度。0.0で透明、1.0で不透明。
sys:const.sn.nativeWindow.x0画面左上を(0, 0)とする座標アプリウインドウの座標。[window]で変更できる
sys:const.sn.nativeWindow.y0
sys:const.sn.sound.BGM.volume10.0〜1.0BGMの基準音量(buf="BGM"の効果音)
[volume]で変更できる
sys:const.sn.sound.SE.volume効果音の基準音量(buf="SE"の効果音)
[volume]で変更できる
sys:const.sn.sound.SYS.volumeシステムの基準音量(buf="SYS"の効果音)
[volume]で変更できる
sys:const.sn.sound.【buf】.volumeシステムの基準音量(buf="【buf】"の効果音)
[volume]で変更できる
任意のbuf属性を指定した[playse buf=【buf】] 実行で自動で生まれる変数
sys:sn.auto.msecLineWait500Integer未読テキストの改行待ち時間(ミリ秒)
※ここでの改行とは[l]の事
sys:sn.auto.msecLineWait_Kidoku500Integer既読テキストの改行待ち時間(ミリ秒)
※ここでの改行とは[l]の事
sys:sn.auto.msecPageWait3500Integer未読テキストの改ページ待ち時間(ミリ秒)
※ここでの改ページとは[p]の事
sys:sn.auto.msecPageWait_Kidoku3500Integer既読テキストの改ページ待ち時間(ミリ秒)
※ここでの改ページとは[p]の事
sys:sn.skip.mode"s"Stringスキップモード。
sn.skip.enabled = trueの際、改行待ちや改ページ待ちをスキップするかどうかの動作を指定する。
"l" …… 改行待ち=する、改ページ待ち=する
"p" …… 改行待ち=しない、改ページ待ち=する
"s" …… 改行待ち=しない、改ページ待ち=しない
(初期値="s")
sys:sn.tagCh.canskiptrueBooleanテキストをクリックなどでスキップ可能か
sys:sn.tagCh.doWaittrueBoolean未読テキストにウェイトを掛けるか
sys:sn.tagCh.doWait_KidokutrueBoolean既読テキストにウェイトを掛けるか
sys:sn.tagCh.msecWait10Integer未読テキスト待ち時間(ミリ秒)
sys:sn.tagCh.msecWait_Kidoku10Integer既読テキスト待ち時間(ミリ秒)

組み込み変数・定数(tmp:)

SKYNovelが値を設定している変数や定数です。起動直後から使えます。

const.sn.〜、sn.〜という名前はSKYNovelが使いますので、皆さんは新規に作成しないで下さい。
以下の表にあるモノを使うのは全然OKです!

constでない変数は、設定するとその値がシステムに反映されます。
例えば「&sn.auto.enabled=true」は自動読みすすみモードを有効にします。

変数名初期値値域・型コメント
const.Date.getDateStr取得の瞬間の日時"2019/02/10 15:47"形式変数参照時の日時を返す
const.Date.getTimeミリ秒IntegerJavaScriptの(new Date).getTime()
const.Stage.mouseX0Integerマウス水平座標
const.Stage.mouseY0Integerマウス垂直座標
const.sn.Math.PI3.141592653589793Number円周率
const.sn.bookmark.json"[]"ArraySKYNovel内部によるsave:の管理用
const.sn.config.(略)テンプレートの_config.snの作業用
const.sn.displayStatefalseBooleanウインドウ・フルスクリーン状態。trueならフルスクリーン
const.sn.isAppfalseBooleanランタイム環境のタイプ(仕様策定中)
const.sn.isDebuggertrueBooleanブラウザ実行、それもVSCode・npmによる「npm: webタスク」上での実行か
const.sn.isFirstBootfalseBooleanゲームがインストールされてから、初めての起動か(起動されるまでデータが空だったか)
const.sn.isKidokutrueBooleanこの変数を参照した位置は既読か。参照「後」必ず既読になる点に注意
const.sn.key.alternatefalseBooleanALTキー(MacならOptionキー)が押されているか
const.sn.key.backfalseBooleanback 〃
const.sn.key.commandfalseBooleancommand 〃
const.sn.key.controlfalseBooleancontrol 〃
const.sn.key.endfalseBooleanend 〃
const.sn.key.escapefalseBooleanescape 〃
const.sn.last_page_text''Stringそのページの履歴テキスト(《》文法もそのまま)
const.sn.lay.(レイヤ名)trueBooleanレイヤが[add_lay]され存在するか
const.sn.lay.(レイヤ名).(foreかback).alpha0.0〜1.0Numberレイヤの不透明度
const.sn.lay.(レイヤ名).(foreかback).height1Integerレイヤの縦幅。ただし文字レイヤの場合は1、画像レイヤの場合、画像読込後でないと0
const.sn.lay.(レイヤ名).(foreかback).visibletrueBooleanレイヤが表示されているか。visible属性の値を返す
const.sn.lay.(レイヤ名).(foreかback).width1Integerレイヤの横幅。ただし文字レイヤの場合は1、画像レイヤの場合、画像読込後でないと0
const.sn.lay.(レイヤ名).(foreかback).x0画面左上を(0, 0)とする座標レイヤの座標。leftやtopでないことに注意
const.sn.lay.(レイヤ名).(foreかback).y0
const.sn.needClick2Play環境によるBooleanブラウザ実行で、クリックされるまで音声再生が差し止められている状態か。なにかクリックされれば falseになる
const.sn.platform.os.family"Windows", "OS X", "Ubuntu", "Android", "iOS"などStringプラットフォーム名。詳細はPlatform.js の【platform.os.family】の項を参照
const.sn.sLog"[{"txt":""}]"左記json_log.snが_log.htmに渡す用、1ページずつ{}に分割してjson化して返す
const.sn.sound.codecs.aac環境によるBooleanゲーム実行環境がこのコーデックをサポートしているか
const.sn.sound.codecs.flac
const.sn.sound.codecs.m4a
const.sn.sound.codecs.mp3
const.sn.sound.codecs.ogg
const.sn.sound.codecs.wav
const.sn.sound.codecs.webm
const.sn.vctCallStk.length0Integerコールスタックの深さ([call]するたびに増)
sn.auto.enabledfalseBoolean自動読みすすみモードかどうか
sn.button.fontFamily"'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif"String文字ボタンフォントを指定
sn.eventArg''場合によるボタン等のイベント発生時、そのボタンタグのarg属性でで指定された値。使い道はスクリプトで自由に決めていい
sn.eventLabel''場合によるボタン等のイベント発生時、そのボタンタグのlabel属性でで指定された値。使い道はスクリプトで自由に決めていい
sn.skip.allfalseBooleanfalse(初期値)なら既読のみをスキップ
sn.skip.enabledfalseBoolean次の選択肢(/未読)まで進む が有効か
sn.tagL.enabledtrueBoolean頁末まで一気に読み進むか(l無視)

AIRNovelからの変更点

AIRNovelからの変更点をざっくり説明します。

  • 組み込み変数名が変わりました。
    旧)save:const.an.scriptFn
    新)save:const.sn.scriptFn
  • 定数が変数になったモノも。
    例)const.an.eventArg → sn.eventArg
詳細は当ページの「組み込み変数」関連の記事をご覧下さい。

フォントの導入

フォントの導入・指定方法について解説していきます。

1.フォントを準備

※以下をサンプルとして話を進めます。字形が多いのでだいたい入ってるだろうし。
「IPAmj明朝フォント」戸籍統一文字などに含まれる6万字の漢字を収録したフォント - 窓の杜
・【参考資料】日本語フリーフォントをwebフォント化する4ステップ / hirok-k.com

2.使用する字形だけ入ったフォントファイルを作成

サブセットフォントメーカー(Win / Mac版あり)
【フォントに格納する文字】へ本文をコピペして、ツールに貼って変換します。
※【書体名を変更する】は使わない
※ただ縦書きフォントでは「──」を渡すと上手くいかないので、入れない。

全ての文字が入ったフォントファイルは大きすぎる。ロード時間も掛かる。
上記手順で、「初音館にて」ではサイズが1/100ほどになった。
・ipamjm.woff2
  23.1MB(全部入り)
  344 KB(初音館で使用しているモノのみ)
  343540 /23065440 = 0.014894145

3.(可能なら圧縮率の高い)woff2に変換

WebフォントWOFF、WOFF2形式に変換できるフリーソフト
WOFFコンバータ(Win / Mac版あり)
 SKYNovelがサポートするフォント拡張子は「woff2, otf, ttf」です。※ブラウザによる

4.生成ファイルをプロジェクトフォルダにコピー

※どこでもいいが、サンプルでは script フォルダに。

5.sub.sn の「def_fonts」でフォント名を指定すると、本文に反映される

sn.button.fontFamily で文字ボタンのフォントを指定できます。

6.部分的・一時的に変更したい場合は、

[span style='font-family: QuiMi_mincho;']フォント[span] などと使う。
戻すときも同様。