ashelの日記スマートフォン用の表示で見るashelの日記この広告は、90日以上更新していないブログに表示しています。2014-03-21ビジュアルノベル作成サイトを作りました去年の夏に、@wakenさん主催の開発合宿に行ってきたのですが、そこで作り始めたブラウザ上でスクリプトベースのビジュアルノベルを作成できるサイトができました。ビジュアルノベル作成サイトテキストを入力するだけでそれっぽいものができるようになっていますので、是非遊んでみていただけたらと思います。ものを作るときは何にでも言えることなのですが、こういことをやりたいって考えるのはすぐでも、実現するのは時間がかかりますね。途中で何のためにやっているのかわからなくなってくることもあります。結局のところ、「せっかく作ったんだから完成させたい」という、作ったものへの思い入れと、「みんなに見てもらいたい」という自己顕示欲なのかなあと思います。サイトの特徴ビジュアルノベルをウェブ上で作成できるサービスというのは既にいくつかあるので、どうして新たに作成したのか...というと、僕がイメージしていたものとは違っていたというのが理由になるのかなと思います。以下のような点が特徴だと思います。スクリプトベースであること今あるビジュアルノベルをウェブ上で作成できるサービスは、スクリプトベースではなく、専用のUIで作成していくものが多いです。その方がとっつきやすいのですが、スクリプトベースにはKAGやNScripterからの伝統があって(今回のサイトで採用しているスクリプトは全く違う仕様ですが)、コピー&ペーストがしやすかったり、バージョン管理がしやすかったり、また別の魅力があります。僕はスクリプトベースが好きなので、そういうものを作りたいなと思っていました。ユーザーの操作を待たないこと今回作ったサイトで作成できるビジュアルノベルは、ユーザーの操作を待つ機能がありません。動画を見ているように流れていきます。今後も、例えば選択肢を選んでもらうような機能を追加するとかでない限りは、ユーザーの入力を待つ機能は付けないと思います。ビジュアルノベルというのは、弟切草のように小説のように地の文があって、テキスト量が多いものが多かったので、ユーザーのタイミングで進むことができるようにすることは必然だったと思います。今回作成したのは、メッセージボックスが画面下にある、会話形式をメインとした画面構成で、テキスト量が多くありませんし、ユーザーからの入力は不要なのではないか、と考えました。そもそも目指したものが、ニコニコ動画でNovelsM@sterを見ているような感覚で見られるようにすることだった、とも言えます。ユーザーからの入力待ちを必要としないということは、読むためのウェイトをスクリプト側で設定しなければいけません。これはかなり作業量が多くなるのですが、これを軽減するために、「特定のコマンドの前後に自動でウェイトを入れる」という機能を用意していて、この数値も調整できるので、ウェイトの管理はかなり楽になっていると思います。サイトのトップにあるサンプルノベルのスクリプトはこちらですが、ウェイトは多いものの、まだ管理できるレベルになっていると思います。試せること今回のサイトは、アカウントを作ったり、リソースを用意しなくても、フォームにテキストを入力するだけで、すぐに試すことができるものを目指して作りました。トップページにフォームを置いているのもそのためです。ブラウザ上で作れるのですから、手軽さというメリットを最大限まで活かしたいと思ったからです。スクリプトを覚えないといけないので、次のステップは結構難しいですが、まず触ってもらうのは大事かなと思っています。これができるのは、素晴らしい素材を配布してくださっている方々のおかげです。碧茶さんが配布されている立ち絵素材は本当に美麗で、碧茶さんのミクを使ってみたいというのは、今回のサイトを作成した大きな動機でした。技術的な面についてプログラムコードは、GitHubで公開しています。プログラムの難しいところは、今回使わせていただいたtmlib.jsというライブラリに頼りきっていて、コード量もあまり多くありません。仕様を考える上で、コード量が多くなりそうなものは避けているという面もあります。スクリプトのパースとかは特にそうですね。tmlib.jsは、2Dゲームであれば何の問題もなく作れるくらい機能が充実していますし、クラスベースで書いていけるので、普段クラスベースのプログラムを書いている人にはとても扱いやすいライブラリだと思います。サイトを作る上では、状態を持たないことを重視しました。今回作成したサイトは、フォームからpostされたデータを受け取るためにcgiを使っているくらいで、あとは全て静的なhtmlです。スクリプトの管理は、GitHubのgistを使ってもらうようにしています。サイトが状態を持っていると、どうしても管理が難しくなって、続かなくなってしまいます。今回のサイトは、無理なく続けられるかなと思ってます。最後にニコニコ動画に、サンプルデモを動画化した動画も投稿してみました。サンプルデモそのままですが、もしよかったら見てみてください。技術部タグで動画を投稿するのは、僕にとってぜひやってみたいことの一つだったので、それが実現できてとても嬉しいです。今回は、途中で完成できるのか不安になったりしたので、無事に形にすることができて、ほっとしています。触ってみていただけたらと思います。月別アーカイブはてなブログをはじめよう!ashelさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。