SKYNovel、一般公開開始

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


 基本は Node.js をインストールし、AIRNovel でいう「テンプレート」の状態でダウンロード&解凍し、コマンドラインを少々叩くだけです。(試し方はリンク先にて説明)

梶井基次郎「桜の樹の下には」をノベルゲーム化したものです。
famibee/SKYNovel_uc: Novelgame(Tate-gaki) sample project

 後々、横書きのテンプレートなども制作・公開予定です。

 開発はブラウザ上(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ライブラリを使用しました。

簡単!マテリアルデザイン「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を推奨します。
 開発をサポートする拡張機能を無料配布しているからです。

SKYNovel - Visual Studio Marketplace

 ※上のイメージ画像のファイルやフォルダの色分けは、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
スポンサーサイト



プロフィール

ふぁみべぇ

Author:ふぁみべぇ
 →@famibee
 →メアド(四角を@に)

カテゴリ
リンク
検索フォーム
最新記事
月別アーカイブ