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

ANBooks更新:Adobe AIR SDK 32 へ更新

●現行版 ANBooks 更新(Windows版 Mac版 過去Ver等
7.46(現行版)
* upd:ANBooks 環境を Adobe AIR SDK 32 へ更新

 そんなに緊急ではないですが。
・【拡張ビルド】の【Adobe AIR SDKを更新】
・【拡張ビルド】の【上記のantを実行】で「latest_airapp」
・普通にビルド
 して下さい。(最初の一つは一度だけでいいです。他はプロジェクト毎)

【更新】ANBooks更新:不具合修正。コミケ終了まで更新保留

●現行版 ANBooks 更新(Windows版 Mac版 過去Ver等
7.45(現行版)
* upd:build_base.xml最新が反映されない環境があるようなので更新
7.44(現行版)
* bug:ダウンロードが正しく終了しなかった不具合(Noty〜onClose()スタックオーバーフロー)

 例によって例のごとく、コミケ前なので AIRNovel 更新は休止します。
(寄せられた不具合報告など、特別な物は情報公開しますが、更新はコミケ終了まで保留します)

【更新2】SKYNovel更新:縦書きとルビとanとのズレと

bug:縦書きでの文字レイヤと文字表示のズレを修正
chg:1文字目にルビが無い場合は見えないルビを入れて行揃え

【更新】bug:ボタンも回転するように
【更新2】アプリ版に'このアプリについて' ウィンドウを追加

 ソースはGithubで公開してます。famibee/SKYNovel: NovelGame framework by WebGL(PixiJS)


 同じ設定でも SKYNovel とAIRNovel で微妙に文字位置がずれるのは、技術や考え方が違う(Adobe AIRと各種ブラウザ)ので仕方ないなと。
181207ChRubyAn.jpg
 行送りや追い出しもないですし。

 ルビの位置(配置)の「ruby-align」も、今のとこサポートはIEのみ。
(IEがCSS3の草案を先行採用)
  ・文字の装飾・変換・ルビの位置 color font/css
 これができたらルビがAIRNovel(やAdobe InDesign)なみになるのに……。
 まぁ、少なくとも私が独自に再発明しない方がいいみたいです。いずれ実装されるかもなので。

 現在「桜の木の下には」サンプルを制作中です。

ぼちぼちいきまひょ

 SKYNovel発表したばかりの七月末辺りからちょっと元気なかったのですが、ぼちぼち再開していこうかと。
プロフィール

ふぁみべぇ

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

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