ビジュアルノベル作成サイトを作りました

去年の夏に、@wakenさん主催の開発合宿に行ってきたのですが、そこで作り始めたブラウザ上でスクリプトベースのビジュアルノベルを作成できるサイトができました。

ビジュアルノベル作成サイト

テキストを入力するだけでそれっぽいものができるようになっていますので、是非遊んでみていただけたらと思います。

ものを作るときは何にでも言えることなのですが、こういことをやりたいって考えるのはすぐでも、実現するのは時間がかかりますね。途中で何のためにやっているのかわからなくなってくることもあります。

結局のところ、「せっかく作ったんだから完成させたい」という、作ったものへの思い入れと、「みんなに見てもらいたい」という自己顕示欲なのかなあと思います。

サイトの特徴

ビジュアルノベルをウェブ上で作成できるサービスというのは既にいくつかあるので、どうして新たに作成したのか…というと、僕がイメージしていたものとは違っていたというのが理由になるのかなと思います。例えば以下のような点が特徴だと思います。

スクリプトベースであること

今あるビジュアルノベルをウェブ上で作成できるサービスは、スクリプトベースではなく、専用のUIで作成していくものが多いです。もちろんその方がとっつきやすいのですが、スクリプトベースにはKAGやNScripterからの伝統があって(今回のサイトで採用しているスクリプトは全く違う仕様ですが)、コピー&ペーストがしやすかったり、バージョン管理がしやすかったり、また別の魅力があります。僕はスクリプトベースが好きなので、そういうものを作りたいなと思っていました。

ユーザーの操作を待たないこと

今回作ったサイトで作成できるビジュアルノベルは、ユーザーの操作を待つ機能がありません。ニコニコで動画を見ているように流れていきます。

おそらく今後も、例えば選択肢を選んでもらうような機能を追加するとかでない限りは、ユーザーの入力を待つ機能は付けないと思います。

ビジュアルノベルというのは、弟切草のように小説のように地の文があって、テキスト量が多いものが多かったので、ユーザーのタイミングで進むことができるようにすることは必然だったと思います。

しかし、今回作成したのは、メッセージボックスが画面下にある、会話形式をメインとした画面構成で、テキスト量が多くありませんし、ユーザーからの入力は不要なのではないか、と考えました。
そもそも目指したものが、ニコニコ動画NovelsM@sterを見ているような感覚で見られるようにすることだった、とも言えます。

ユーザーからの入力待ちを必要としないということは、読むためのウェイトをスクリプト側で設定しなければいけません。これはかなり作業量が多くなるのですが、これを軽減するために、「特定のコマンドの前後に自動でウェイトを入れる」という機能を用意していて、この数値も調整できるので、ウェイトの管理はかなり楽になっていると思います。
サイトのトップにあるサンプルノベルのスクリプトこちらですが、ウェイトは多いものの、まだ管理できるレベルになっていると思います。

すぐに試せること

今回のサイトは、アカウントを作ったり、リソースを用意しなくても、フォームにテキストを入力するだけで、すぐに試すことができるものを目指して作りました。トップページにフォームを置いているのもそのためです。

せっかくブラウザ上で作れるのですから、手軽さというメリットを最大限まで活かしたいと思ったからです。スクリプトを覚えないといけないので、次のステップは結構難しいですが、まず触ってもらうのは大事かなと思っています。

もちろんこれができるのは、素晴らしい素材を配布してくださっている方々のおかげです。特に碧茶さんが配布されている立ち絵素材は本当に美麗で、碧茶さんのミクを使ってみたいというのは、今回のサイトを作成した大きな動機でした。

技術的な面について

プログラムコードは、GitHubで公開しています。

プログラムの難しいところは、今回使わせていただいたtmlib.jsというライブラリに頼りきっていて、コード量もあまり多くありません。仕様を考える上で、コード量が多くなりそうなものは避けているという面もあります。スクリプトのパースとかは特にそうですね。

tmlib.jsは、2Dゲームであれば何の問題もなく作れるくらい機能が充実していますし、クラスベースで書いていけるので、普段クラスベースのプログラムを書いている人にはとても扱いやすいライブラリだと思います。作者さんに感謝です。

また、サイトを作る上では、状態を持たないことを重視しました。今回作成したサイトは、フォームからpostされたデータを受け取るためにcgiを使っているくらいで、あとは全て静的なhtmlです。スクリプトの管理は、GitHubgistを使ってもらうようにしています。
サイトが状態を持っていると、どうしても管理が難しくなって、続かなくなってしまいます。今回のサイトは、無理なく続けられるかなと思ってます。

最後に

ニコニコ動画に、サンプルデモを動画化した動画も投稿してみました。サンプルデモそのままですが、もしよかったら見てみてください。
ニコニコ技術部タグで動画を投稿するのは、僕にとってぜひやってみたいことの一つだったので、それが実現できてとても嬉しいです。

今回は、途中で完成できるのか不安になったりしたので、無事に形にすることができて、ほっとしています。ぜひ触ってみていただけたらと思います。