SKYNovel、一般公開開始
SKYNovel をだれでも使えるよう、
環境が整いました。

基本は Node.js をインストールし、AIRNovel でいう「テンプレート」の状態でダウンロード&解凍し、コマンドラインを少々叩くだけです。(試し方はリンク先にて説明)
開発はブラウザ上(Electron でも良いですが)で動作させて行ない、リリース・実機テスト時のみビルド&パッケージします。
Android・iOS版は開発中ですが Cordova でだいたい動作確認済みです。Cordova は環境設定がめちゃめちゃ大変ですね……
明日今日の関西同人ゲーム制作者交流会 第39回 定期交流会にて軽く発表しようかと。
その内容を考えつつ、以降のこの記事にそのまま書いておきます。
・ブラウザ版起動時にクリック待ち画面が表示されます。
これはブラウザメーカーの仕様で、「クリックされるまで音を出さない、ミュートする」という制限のためです(デベロッパーツールに出ている警告がそれです)。アプリ版には出ません。
三角に丸で暗いマスクの表示はただの画像で、スクリプト上でカスタマイズ可能です。

・テンプレートについて
AIRNovel と同じでフォルダ名に意味はなく、エンジン的には名づけ自由(例外:ANBooks での fontフォルダ)ですが、テンプレート内の素材はフォルダ構成をちょっと変更しています。

・アルバム(album)・セーブロード(archive)・設定(config)・ログ(log)画面
ただの HTMLベースのWebページです。シークレットモードのブラウザで htmファイルを開いて、動作確認・カスタマイズ作業時のプレビューができます。
将来的には自分でカスタマイズした上記画面を、フォルダごと zip し配布、他の開発者が差し替えて使えます。(この為のフォルダ構成変更でもあります)

アルバム画面は画像と動画閲覧、BGM変更(試聴)機能があり、HTMLファイルに埋め込んだJavaScriptによる実装です。表示内容(JSON)だけ SKYNovel からもらうイメージです。

セーブロード画面(archive)では、セーブ時点のスナップショット、日時を表示しています。
(ブラウザ版はlocalStrageの容量的に、サムネイルはありません)
「編集ボタン」はスマホっぽい機能で、セーブデータを削除する「X」ボタンを表示できます。
上書き確認などもSKYNovelスクリプトではなく、全てHTML上のJavaScriptによる実装で、単体でデバッグできます。

設定画面はこんな感じ。
この見た目ですが、サンプルでは「lib」フォルダに入れた Materialize という「マテリアルデザイン」「レスポンシブデザイン」のUIライブラリを使用しました。
・サポートする素材ファイルの種類(拡張子)
・開発ツール

スクリプト編集はテキストエディタで出来ますが、VSCodeを推奨します。
開発をサポートする拡張機能を無料配布しているからです。

まずはシンタックスハイライトから制作中で、この通り。(色そのものは多分VSCodeテーマで変更)
今後グラフィカルユーザーインタフェイスな開発機能もいずれ提供しようかなと。
・デバッグ機能
開発中は、全ての変数をデベロッパーツールで確認できます。(暗号化も随時サポート)
AIRNovelでの「an.〜」な組み込み変数が、「sn.〜」になってたりします。

・タグリファレンス、組み込み変数一覧など、資料も随時制作していきます。
・テンプレートを使わない、最小限のファイルによるノベルプロジェクトも公開してます。
famibee/SKYNovel_sample: SKYNovel simple sample project
〜 技術話 〜

SKYNovel 本体を npm 配布とし、
skynovel - npm
ソースも公開してます。MIT。(エンジンとゲームテンプレートとギャラリーを分けました)
famibee/SKYNovel: NovelGame framework by WebGL(PixiJS)
famibee/SKYNovel_gallery: What can SKYNovel do? sample project
環境が整いました。

基本は Node.js をインストールし、AIRNovel でいう「テンプレート」の状態でダウンロード&解凍し、コマンドラインを少々叩くだけです。(試し方はリンク先にて説明)
後々、横書きのテンプレートなども制作・公開予定です。梶井基次郎「桜の樹の下には」をノベルゲーム化したものです。
famibee/SKYNovel_uc: Novelgame(Tate-gaki) sample project
開発はブラウザ上(Electron でも良いですが)で動作させて行ない、リリース・実機テスト時のみビルド&パッケージします。
Android・iOS版は開発中ですが Cordova でだいたい動作確認済みです。Cordova は環境設定がめちゃめちゃ大変ですね……
その内容を考えつつ、以降のこの記事にそのまま書いておきます。
・ブラウザ版起動時にクリック待ち画面が表示されます。
これはブラウザメーカーの仕様で、「クリックされるまで音を出さない、ミュートする」という制限のためです(デベロッパーツールに出ている警告がそれです)。アプリ版には出ません。
三角に丸で暗いマスクの表示はただの画像で、スクリプト上でカスタマイズ可能です。

・テンプレートについて
AIRNovel と同じでフォルダ名に意味はなく、エンジン的には名づけ自由(例外:ANBooks での fontフォルダ)ですが、テンプレート内の素材はフォルダ構成をちょっと変更しています。

・アルバム(album)・セーブロード(archive)・設定(config)・ログ(log)画面
ただの HTMLベースのWebページです。シークレットモードのブラウザで htmファイルを開いて、動作確認・カスタマイズ作業時のプレビューができます。
将来的には自分でカスタマイズした上記画面を、フォルダごと zip し配布、他の開発者が差し替えて使えます。(この為のフォルダ構成変更でもあります)

アルバム画面は画像と動画閲覧、BGM変更(試聴)機能があり、HTMLファイルに埋め込んだJavaScriptによる実装です。表示内容(JSON)だけ SKYNovel からもらうイメージです。

セーブロード画面(archive)では、セーブ時点のスナップショット、日時を表示しています。
(ブラウザ版はlocalStrageの容量的に、サムネイルはありません)
「編集ボタン」はスマホっぽい機能で、セーブデータを削除する「X」ボタンを表示できます。
上書き確認などもSKYNovelスクリプトではなく、全てHTML上のJavaScriptによる実装で、単体でデバッグできます。

設定画面はこんな感じ。
この見た目ですが、サンプルでは「lib」フォルダに入れた Materialize という「マテリアルデザイン」「レスポンシブデザイン」のUIライブラリを使用しました。
これも自由に変更可能です。構成がシンプルで小さかったので選んだだけです。簡単!マテリアルデザイン「Materialize」でサイト作ってみた!第一回目 | ホームページ制作ならリールーデザイン!
・サポートする素材ファイルの種類(拡張子)
※暗号化も随時サポート・・スクリプト
拡張子 sn のUTF-8・LF改行のテキストファイル(AIRNovel では an でした)
・・画像・動画・アニメ系
png、jpg、jpeg、svg、mp4
スプライトシート json と png(または jpeg)
・・BGM・音声系
mp3、m4a、ogg、aac、webm、flac、wav
※ただしブラウザ版はブラウザがサポートするモノのみ。
アプリ版は Electron の Chromiumがサポートするモノのみ(aac以外)です。
・・フォント
woff2、otf、ttf
・開発ツール

スクリプト編集はテキストエディタで出来ますが、VSCodeを推奨します。
開発をサポートする拡張機能を無料配布しているからです。
※上のイメージ画像のファイルやフォルダの色分けは、Material Icon Theme という拡張機能によるものです。

まずはシンタックスハイライトから制作中で、この通り。(色そのものは多分VSCodeテーマで変更)
今後グラフィカルユーザーインタフェイスな開発機能もいずれ提供しようかなと。
・デバッグ機能
開発中は、全ての変数をデベロッパーツールで確認できます。(暗号化も随時サポート)
AIRNovelでの「an.〜」な組み込み変数が、「sn.〜」になってたりします。

・タグリファレンス、組み込み変数一覧など、資料も随時制作していきます。
・テンプレートを使わない、最小限のファイルによるノベルプロジェクトも公開してます。
famibee/SKYNovel_sample: SKYNovel simple sample project
〜 技術話 〜

SKYNovel 本体を npm 配布とし、
skynovel - npm
ソースも公開してます。MIT。(エンジンとゲームテンプレートとギャラリーを分けました)
famibee/SKYNovel: NovelGame framework by WebGL(PixiJS)
famibee/SKYNovel_gallery: What can SKYNovel do? sample project
スポンサーサイト