Web novel
Web novelは、ゲームなどでお馴染みのサウンドノベルのシステムを WEB上でJavaScriptを用いて再現したものです。
対応ブラウザはInternet Explorer4.0以上、Netscape Navigator4.0以上です。 IE5.0が現在の所、一番動作が安定しています。
デモゲームはこちら-> Web Novel -推理狂の館-
遊び方



■設置方法

自分のページでもこれを置きたいなという奇特な方は(笑)、 以下の様な手順で設置して下さい。

  1. まず、シナリオを用意します。(画像やサウンドなども) >Scenario Converter対応の形式で作成すると作業効率が上がります。
  2. そして、シナリオファイルを、Scenario Converterなどで Web Novel形式に変更します。
  3. 変更したシナリオを、適当な名前を付けて、拡張子.js形式で保存します。(例:scenario.js)
  4. Web Novelのプログラムをダウンロードします。>ダウンロード
  5. ダウンロードしたファイルを解凍し、novel.htmファイルを編集し、設定をします。>設定方法
  6. 設定が終了後、novel.htmファイルをブラウザで開けば動作の確認が出来ます。


■設定方法

Web Novelは、「メインHTMLファイル」「シナリオファイル」 「WebNovelプログラム(novel_prog.js)」「その他・画像やサウンドなど」 の4つのファイルから成っています。 このうち、メインHTMLファイルをエディタなどで開き、 諸設定をして頂く必要があります。

・シナリオファイルの指定
拡張子.jsを付けて保存したシナリオファイルを指定します。
<!-- シナリオファイルを.jsファイルにパッケージ -->
<script langugae="javascript" src="scenario.js"></script>
srcで指定します。
・画像ファイル先行読み込み
スクリプトタグの中に以下のような記述をします。
timg = new Array();
timg[0] = new Image(); timg[0].src = "picture/black.gif";
timg[1] = new Image(); timg[1].src = "picture/sea.jpg";
以下、timg[2] = new Image(); timg[2].src = "picture/beach.jpg"; ..........と先行読み込みしておく画像を増やすことが出来ます。
・その他
メインHTMLファイルの設定について


■フォーマット

Web Novelで、文章を表示するには、 シナリオを、ある特定の形式に変換させる必要があります。
Web Novelは以下の様なフォーマットを採用しています。 (なお、Scenario Converterを使用する事により、 以下の様なフォーマットをあまり気にせずに、 Web Novelを作ることが可能になります。)

Web Novelでは以下の様なフォーマットをとっています。

novel["STORY1"] = new Array(); //配列
novel["STORY1"][0] = new Array();//配列
novel["STORY1"][0][0] = "・・・・ここはどこだろう?";
novel["STORY1"][0][1] = "僕は目が覚めると、見知らぬ場所にいた。";
novel["STORY1"][0][2] = "ザザーッ・・・・・";
novel["STORY1"][0][3] = "静かな空間に、海の波しぶきの音が響く。";
novel["STORY1"][0][4] = "僕は周りを見回す。";
novel["STORY1"][0]["BGIMAGE_0"] = "picture/B003.jpg";

novel["STORY1"][1] = new Array() //配列の宣言
novel["STORY1"][1][0] = "人の気配はしない。すごく静かだ・・・・";
novel["STORY1"][1][1] = "・・・・ここはどこなんだろう?";
novel["STORY1"][1][2] = "・・・・いや、僕は誰なんだろう?";
novel["STORY1"][1][3] = "っ!・・・頭が激しく痛む。";
novel["STORY1"][1][4] = "何故ここにいるんだ!?";
novel["STORY1"][1][5] = "ここはどこなんだ!?";

novel["STORY1"][2] = new Array() //配列の宣言
novel["STORY1"][2][0] = "・・・考えれば考えるほど、頭が激しく痛む。なぜ、なにも思い出せないんだろう?";
novel["STORY1"][2][1] = "ザザーッ・・・・・・・";
novel["STORY1"][2][2] = "!";
novel["STORY1"][2][3] = "突然、背後で気配を感じた。";
novel["STORY1"][2][4] = "僕は・・・";
novel["STORY1"][2]["SELECT"] = "ゆっくりと振り向いた。,STORY1,3|こわくなり逆の方向に逃げ出した。,END1,0|混乱して海の方へ走っていった。,END2,0";
文章は、多次元配列に格納されています。 ["STORY1"]は、今現在のストーリーの名称を表します。 その後の、["STORY1"][0]の[0]は、現在のページ番号です。 そしてその後ろの、["STORY1"][0][0]の、後ろの[0]はページの行番号です。
物語はクリックする度に変わっていきます。流れは以下の通りです。
  1. まず1回目のクリックで0ページの0行目が、つまりnovel["STORY1"][0][0]の文章が画面に表示される。
  2. 次にクリックすると、先程の文章に続いて、novel["STORY1"][0][1]の文章が表示される。
  3. 以下同上。
  4. novel["STORY1"][0][n]の n の数字が最大になった時、特別な命令がない限り、次回のクリック時画面がクリアされ、ページ1の0行目、つまりnovel["STORY1"][1][0]の文章が改めて表示される。
  5. 以下2〜4の繰り返し。
なお、novel["STORY1"][0]["BGIMAGE_0"]という記述は、Web Novelの命令を表します。 (>命令について) 命令は画像などの変更をするときなどに必要です。 例えばこの場合は、0ページ目(つまり、初めのページ)の、0行目(つまる、初めの行)の 文章を表示するとき、背景画像を変更します。


■命令について

WebNovelには、ゲームを表現する上での命令がいくつか用意されています。

Version1.0 beta6 現在
行指定が必要
BGIMAGE 背景画像の指定。ページが読み込まれたとき背景を変更。
["BGIMAGE_n"] = "画像のURL" という形で代入します。(nは行番号)
BGSOUND バックミュージックの指定。ページが読み込まれたときサウンドを変更。現在IE4.0のみのサポートです。
["BGSOUND_n"] = "サウンドのURL" という形で代入します。(nは行番号)
FLASH Flashムービーを読み込んで再生します。ムービーの再生中はマウスのクリック入力が無効となります。
["FLASH_n"] = "ムービーのURL"というう形で代入します。(nは行番号)
CHARACTER 背景とは別にキャラクタ画像表示ウインドウを作成します。
["CHARACTER_n"] = "id, visible/hidden, imgsrc, xpos, ypos" という形で代入します。nは行番号
COMMAND 引数として渡した文字列をJavaScriptのコードとして実行します。
["COMMAND_n"] = "document.bgColor='#000000'" などという形で代入します。nは行番号
行指定必要。テキスト表示後処理。
COMMAND_END 引数として渡した文字列をJavaScriptのコードとして実行します。実行は行表示後。
["COMMAND_END_n"] = "document.bgColor='#000000'" などという形で代入します。nは行番号
行指定は必要ナシ。各ページの最後の行を表示した後に実行される。
SELECT 選択肢を作成します。この命令を記述したページは"WAIT"と同じ状態になります。現在のページが全部読み込まれたとき選択肢を出します。
["SELECT"] = "選択肢1|選択肢2|選択肢3(|.......)";詳しくは下で。
WARP 別のストーリーや、別のページに飛びます。
["WARP"] = "飛ぶ先のストーリー名,飛ぶ先のページ番号" 詳しくは下で。
URL 指定されたURLへ飛びます。以後Web Novelの操作は続けられないので、エンディング向けです。
["URL"] = "URL" という形で代入します。カンマ(,)に続けて待ち時間を設定する事も可能です。
WAIT 現在のページが全部読み込まれたとき、以後クリックの受付を無効にします。エンディング向け。時間を渡せば、一定時間クリックの受付を無効にし、一定時間後有効に戻します。
["WAIT"] = "true" という形で代入します。数字(ミリ秒)を代入した場合は、タイマーセット。
*BG_IMAGEはBGIMAGEに、BG_SOUNDはBGSOUNDにそれぞれ変更されました。
*赤字は新命令。青字は仕様変更。

「行指定が必要なもの」とは、命令名の後ろに、 アンダーバー(_)と、命令を実行する時の行番号が必要なものです。 命令は下記の用に記述します。

novel["STORY1"][0]["BGIMAGE_0"] = "picture/B003.jpg";
これは"STORY1"の0ページ目の0行目が読み込まれたとき、"picture/B003.jpg"の画像を表示するという命令です。 つまり、命令はnovel[ストーリー名][ページ番号][命令]というように記述します。

●命令["BGIMAGE"]
背景画像を変更する命令です。
命令の書式は、 「novel[ストーリー名][ページ番号]["BGIMAGE_n"] = 画像URL」(nは行番号)となります。
例えば、
 novel["STORY1"][3]["BGIMAGE_4"] = "picture/B004.jpg";
などと、命令名の後に"_n"と記述する事により(nは行番号)、 ページ内のどの行ででも背景を変更出来るようになりました。 上記の例ですと、3ページ目の4行目が読み込まれたときに、背景画像を変更します。

*beta7から、Filter効果に対応しています。

●命令["BGSOUND"]
BGMを変更する命令です。
命令の書式は、 「novel[ストーリー名][ページ番号]["BGSOUND_n"] = 音楽のURL」(nは行番号)となります。
例えば、
 novel["STORY1"][3]["BGSOUND_4"] = "n58.mid";
などと、命令名の後に"_n"と記述する事により(nは行番号)、 ページ内のどの行ででも背景を変更出来るようになりました。 上記の例ですと、3ページ目の4行目が読み込まれたときに、BGMを変更します。

●命令["FLASH"]
WebNovel内で、Flashムービーを再生する命令です。
ムービーの再生中は、クリックの入力を無効にしているので、再生中にクリックを連射されても、 物語がどんどん進んでいくことがないようにしています。
なおFlashムービーの終了フレームには、GoTo URLイベントに「javascript:end_flash()」と書いて下さい。 この命令がありませんと、物語の進行がストップしてしまいます。
命令の書式は、「novel[ストーリー名][ページ番号]["FLASH_n"] = FLASHムービーのURL」(nは行番号)となります。
例えば、
 novel["STORY1"][0]["FLASH_0"] = "title.swf";
と記述すると、0ページの0行目(つまり改ページと同時に)、Flashムービーが再生されます。

●命令["CHARACTER"]
登場人物用の画像を表示したい時に使います。
この画像は背景画像とメッセージウインドウの間に表示されます。
命令の書式は、「novel[ストーリー名][ページ番号]["CHARACTER_n"] = "id, visible/hidden, imgsrc, xpos, ypos"」(nは行番号)となります。

id:キャラクタのID。各キャラクタに一つのIDを設定して下さい。
visible/hidden:画像の可視・不可視設定です。visibleを指定すると画像が可視状態になり、hiddenを指定すると不可視になります。
imgsrc:キャラクタ画像への相対パスを指定します。
xpos:キャラクタ画像の表示場所のX座標を指定します。なお原点は、背景画像の左下に設定されています。
ypos:キャラクタ画像の表示場所のy座標を指定します・・・が、ここではキャラクタ画像の高さ(height)の値を入れてください。

例えば、 novel["STORY1"][3]["CHARACTER_1"] = "takuya,visible,picture/takuya.gif,100,300";
と記述すると、3ページの1行目表示時に、takuya.gifのキャラクタ画像を (100,-300)の座標に表示します。
続けて、
novel["STORY1"][3]["CHARACTER_4"] = "takuya,hidden";
とすると、4行目表示時に、キャラクタ画像を消します。


●命令["SELECT"]
この命令は、現在のページを全て読み終えたとき、つまりnovel["STORY1"][0][n]の n の 数字が最大になった時に選択肢を生成します。
命令は、"選択肢1|選択肢2|選択肢3(|.......)"という形で代入します。 選択肢1のとこには、"選択肢の文章,飛ぶ先のストーリー名,飛ぶ先のページ番号"という形で 記述して、"|"で区切ることにより、選択肢を複数生成します。
novel["STORY1"][2]["SELECT"] = "ゆっくりと振り向いた。,STORY1,3|こわくなり逆の方向に逃げ出した。,END1,0|混乱して海の方へ走っていった。,END2,0";
先程の、文章のフォーマットの例を取ると、 "STORY1"の2ページ目の4行目まで表示されると、
  1. ゆっくりと振り向いた。
  2. こわくなり逆の方向に逃げ出した。
  3. 混乱して海の方へ走っていった。
という選択肢が画面に表示されます。 この時"1"をクリックすると、"STORY1"(ストーリー名)の3ページ目に飛びます。 "2"をクリックすれば、"END1"(ストーリー名)の0ページ目に飛んで、 "3"をクリックすれば、"END2"(ストーリー名)の0ページ目に飛びます。

●命令["WARP"]
この命令は、現在のページを全て読み終わり、次のページへ行くとき、 指定のストーリー、指定のページへ飛ぶようにします。
命令は、"飛ぶ先のストーリー名,飛ぶ先のページ番号"という形で記述します。
novel["STORY1"][4]["WARP"] = "STORY1,10";
と記述することにより、4ページ目が終わると、 次に"STORY1"(ストーリー名)の10ページ目に飛びます。

●命令["COMMAND_n"]
WebNovelにない命令を実行するときなどに使用します。
背景画・キャラ表示などのWebNovel標準命令の関数を直接呼び出す事も出来ます。
命令は、自作した関数の処理をさせたい時などは引数として、
novel["STORY1"][4]["COMMAND_0"] = "foo()";
と記述することにより、4ページ目の1行目を表示する前に、 foo()関数を実行します。

●命令["COMMAND_END_n"]
WebNovelにない命令を実行するときなどに使用します。
普通の"COMMAND"命令と違い、テキスト行を表示する前に処理をするのではなく、 一行表示した後に実行されます。 例えば、
novel["STORY1"][4]["COMMAND_END_0"] = "foo()";
と記述することにより、4ページ目の1行目を表示した後に foo()関数を実行します。

●Filterへの対応について for IE
背景画像・人物画像を表示する時にFilter効果をつけて表示する事が可能です。ただしIEのみです。
Filterに対応した命令は、"BGIMAGE"・"CHARACTER"の2つです。 Filter効果付きにする場合は下記のように、命令名の後ろに"_FILTER"という文字列を追記します。

novel["STORY1"][0]["BGIMAGE_0_FILTER"]

なお、渡す引数は、
"Filterの種類,パラメータ1,パラメータ2......"
との様になります。例えば、RevealTransのエフェクトをかけながら背景を表示するには、

novel["STORY1"][0]["BGIMAGE_0"] = "picture/black.gif";
novel["STORY1"][0]["BGIMAGE_0_FILTER"] = "revealtrans,duration=1.0,transition=11";
上記の様に記述する事により、表示時にFilterのエフェクトをつけます。


■開発環境について

この文章フォーマットだと、いちいち書くのは大変です。
また、WebNovelは日々進化(退化?)し続けている為、 文章のフォーマットがバージョン毎に異なったりします。 バージョンが変わる度に、いちいち書き直すのも大変です。
よって、簡単な開発環境を作ってみました。 これに所定の形式のテキストを張り付けることにより、自動的にWeb novel形式に変換してくれます。

Scenario Converter


■更新履歴

ver1.0 final beta+ (beta7)

ver1.0 final beta (beta6)

ver1.0b5



■etc...



■これからのバージョンについて

とりあえずこれからについては、

などが出来たらいいなぁと思っています。
とりあえず目標は「か●いたちの夜」(笑)


■デモゲームの遊び方

まず、ゲームのページへと飛んだら、データのロードが終わるまで待ちます。
タイトル画面が表示されたら、マウスでクリックをするか、キーボードのキー(どれでもいいです)に 触ると文章が表示されます。クリックする度に、物語はどんどん進んで行きます。
物語を進めていくと、分岐ポイントに到着します。 分岐ポイントに到着したら、自分が選びたい選択肢の方を選びクリックして下さい。 IEの場合はALT+数字キーでも選択する事が出来ます。(IE5の場合は、選択した後Enterキーを押す)。 選択肢を選ぶと、その選択肢に沿ってまた物語は進んで行きます。

このデモプログラムを最後まで進めると、推理結果を投稿出来る画面が出ます。 あなたの推理結果をそこに書いて投稿することが出来ます。 その場合、別のCGIに飛び専用伝言板に記録されますので(他の人からの閲覧可能) ご注意下さい。

トリックはパクリで(^^;、しかも簡単なものです。 文章も幼稚ですんで、あまり期待しないで下さい。#デモプログラムですし、、、
#っていうか、昔某ページで公開したものをそのまま持ってきたものです(^^;

Netscapeで、背景画像の下部が見えない時などは、URLバーなどを消して表示ウインドウのサイズを大きく広げて下さい。