« 2021年1月 | トップページ | 2021年8月 »

VRChatの青空文庫システムで自作小説をworldに置こう！

　以下の記事は青空文庫システムv8での内容です。

青空文庫システム・AOZORA LIBRARY

　六月下旬に青空文庫システムというVRChat用のアセットが登場しました。青空文庫収録作品の中から16082冊（登場当時）を収録したworldを作成するためのものです。作者さんによるこのアセットを使用したworld「AOZORA LIBRARY」を訪れて驚きました。一万六千冊以上の本があるのに200MB弱しかないのです。
　この収蔵数と容量から「テキストで格納しているのでは」と想像し、ツイートしてみたところ、作者の方から肯定のお返事を頂きました。テキストを1ピクセル2文字で画像にエンコードして格納しているとのこと。

　素晴らしい！

　何が素晴らしいかというと、これまでVRChatのworldで「本」の体裁で読めるものを置こうとしたときにテクスチャ画像として貼り付けるという形で持ち込むのが一般的でした。特に縦書きはunityの文字系機能が対応していないこともあり、テキストをテキストのまま持ち込むのは困難だったのです。そこに、

  • テキスト形式
  • 縦書き
  • ルビ
  • 字下げ
  • 文字が滲まないボケない
  • フォントの字形が画一的でない

に対応した「本」のアセットの登場です。文字はフォントで表示されるため、近づいても滲んだりボケたりしません。読める本16000冊余を置いたworldが作れてしまいます。
　最後の字形が画一的でないというのは紙の（特に活版時代の？）印刷物的な印字結果の揺らぎを与えたもののようです。

　このアセットが公開されてから数日後、自作テキストをこのシステムでworldに置くことができる「おまけプログラム」が追加公開されました。
　この「おまけ」はサポートなしが明言され公式からはガイドなしです。その方法を私にわかった範囲で解説します。（この記事の内容は私が勝手に調べて推測の元に書いたものです。強調しますが、開発元から「サポートなし」が明言されている機能です。「おまけ」機能に不明点があったとしても作者・スズ製作所様への問い合わせなどはしないでください）

大まかなしくみ

テキスト・書誌情報設定
↓
テクスチャに格納
↓
worldプロジェクトに設定

という流れで作業をします。

「おまけプログラム」設定ファイル構成

　ダウンロードした「おまけ.zip」は図のように展開されます。

20210629-031231

　自作テキストを登録するために触れる必要があるのは

  • skycode/books/*.xhtml …… 書籍テキストを格納する
  • skycode/books.json …… 書誌情報を格納する

のふたつです。これらを編集後、skycode/skycode.exeを実行すると以下のファイルが生成されます。紫字はv6にて追加されたもの。

  • skycode/out/card_0.png
  • skycode/out/code.txt
  • skycode/out/content_0.png
  • skycode/out/authors.txt
  • skycode/out/numPages.txt
  • skycode/out/sortedAuthorBookIndices.txt
  • skycode/out/sortedAuthorRubys.txt
  • skycode/out/titleRubys.txt
  • skycode/out/titles.txt

これらをプロジェクト内に配置・設定することで自worldに青空システムを使った自作「本」が置けるようになります。

作業手順1 書籍内容の用意

　「おまけ.zip」を展開した中の skycode/books/sample.xhtml がサンプル書籍になっています。

改行 <br />
改ページ <span class="notes">［＃改ページ］</span>
字下げ

<div class="jisage_?"></div>
?に字下げ文字数を設定。<div>と</div>の間に字下げする段落を記入。
ルビ <ruby><rb>親字</rb><rt>ふりがな</rt></ruby>

　使用できる記法は以上。sample.xhtmlの書式を真似して、本ごとにxhtmlファイルを分けて作ります。本はsample.xhtmlと同じ場所に置きます。一冊一ファイル。ファイル名はお好みでOK。

作業手順2 書誌情報編集

　同様に skycode/books.json を編集します。

        {

            "title": "タイトル",

            "title-ruby": "たいとるるび",

            "subtitle": "サブタイトル",

            "subtitle-ruby": "さぶたいとるるび",

            "author": "著者",

            "author-ruby": "ちょしゃ",

            "translator": "翻訳者",

            "translator-ruby": "ほんやくしゃるび",

            "xhtml-path": "books/sample.xhtml"

        },

「タイトル」や「たいとるるび」「著者」「ちょしゃ」をご自身の本のものに書き換えればOKです。「サブタイトル」や「翻訳者」といった項目が不要であれば : より右側の""内を削除しておきます。
　"xhtml-path": "books/sample.xhtml" は skycode/books に置いた（作業手順1で作成した）書籍ファイルのxhtmlのファイル名を記入します。
　初期状態では三冊分の書誌情報が仮に書き込まれていますが、skycode/books に置いた表示したい「本」(※)の数だけ記述します。

　※　書誌情報 books.json の一番上の一冊はアセットの「検索」機能の結果には表示されません。（world : AOZORA LIBRARYではワールド案内用書籍――テーブルの上に置かれている本――に使われているそうです）　ランダム棚には表示されます。ダミーの書籍なりなんなりを登録しておくのが良さそうです。
　※　{}は必ず対になる一組の数、区切りの , も過不足のないように。

作業手順3 unity用ファイル生成

　作業手順1、2で本の内容と書誌情報が揃ったら、skycode/skycode.exe を コマンドプロンプト から、かつ skycode.exe のあるディレクトリで 実行します。すると skycode/out フォルダに以下の九つのファイルが生成されます。

card_0.png 書誌情報が格納されたpngファイル
code.txt unityプロジェクト内のファイルを編集するための情報
content_0.png 「本」の本文がひとまとめに格納されたpngファイル
authors.txt 著者情報
numPages.txt 「本」の各巻開始インデックス
sortedAuthorBookIndices.txt 著者のインデックス（検索用）
sortedAuthorRubys.txt 同上ルビ（検索用）
titleRubys 「本」タイトルルビ（検索用）
titles.txt 「本」のタイトル（検索用）

作業手順4-1 unityへの青空システムの導入

　青空システムの「本」を置くためのworldのプロジェクトを開きます。（worldそのものの作成、sdkの導入等はここでは説明しません）

　青空システムのアセットをプロジェクトに追加します。

作業手順4-2 unityプロジェクトへの「本」データの追加

　次いで、explorer上での作業になります。
　unityプロジェクトの保存フォルダ（˜/Unity/プロジェクト名/Assets/AozoraLibrary/Textures）に作業手順3で作成されたファイルすべてをコピペで上書き保存します。

　unity上での作業になります。
　プロジェクトのprojectウィンドウの ˜/Asset/Aozora/Texutures フォルダでは card_0.png とcontet_0.png 作業手順3でコピーしたもの
に置き換わっているはずです。これら画像のinspectorで、下の赤で囲ったようになっていることを確認します。「本」のデータにはバイナリ一致が必要であるためのオマジナイです。

20210629-042750_li-2

作業手順4-3 unityプロジェクトの書籍データの関連付け

　書誌情報と書籍内容の入ったpngデータをunityのオブジェクトへ関連付け（の確認と余分な関連付けの除外）をします。

　Hierarchyの
　Asset/AozoraLibrary/Material の CoverFace マテリアルの Card 項目画像と PaperRight と PaperLeft マテリアルの Content0 項目画像が　それぞれ 作業3 で上書きコピーし 4-2 で確認した画像に指定されていることを確認します。

　作業4-2でご自身で追加した以外の画像（ Content1 や Content2 ）が登録されていた部分はnoneにしておきます。

作業手順4-4 unityスクリプトの変更

　作業手順3 で得られた code.txt の内容をプロジェクトのスクリプトに反映させます。
Projectの Assets/AozoraLibrary/Script フォルダの内容を表示します。以下このフォルダでの作業です。拡張子 .cs ファイルがテキストエディタに関連付けられている前提となります。

　Book.cs をテキストエディタで開き、
　private int[] numPages2 =
　の右辺を作業手順3で得た code.txt のものに置き換えます。

　SearchSystem.cs をテキストエディタで開き、
private string[] authors =
private string[] titles =
private string[] titleRubys =
private string[] sortedAuthorRubys =
private int[] sortedAuthorBookIndices =
　の右辺を同じように code.txt のものに置き換えます。

終了

　作業手順4-4の変更内容を保存し、テキストエディタを閉じて、worldのアップロードを行います。手順に誤りがなければ自作の「本」がVRChat内で読めるようになっているはず。

サンプル

　上記作業で作成した自worldです。

・VRChat - TUKIKAGEカフェ -Moonlight Cafe-

追記・quest向けworld

　青空文庫システムはquest向けworldにも導入できます。表示品質はPC版とまったく同等です。すごい！

  • world容量上限50MB

　制限はきついですが、市販の文庫本一冊相当の文章量で300KB程度にしかならないので数十冊であれば十分に設置可能です。quest対応のための作業は

  1. 作業手順4-1以降のunity上の作業が違うだけ
  2. buildターゲットをquest（android）に設定します
  3. 書誌情報 card_?.png と本文 content_?.png に加え、フォントを格納している font.png にも作業手順4-2の設定をして不可逆圧縮を回避します。
  4. アップロードで完了

　ファイルサイズは

書誌情報 card_?.png 数KB
本文 content_?.png テキストファイルとほぼ同容量
フォント font.png 8.4MB

　程度なので個人のライブラリとしては十分な数の本が置けるのではないでしょうか。

2021.06.29 パソコン・インターネット, VRChat |

« 2021年1月 | トップページ | 2021年8月 »