目次
個人ファイルと執筆記事一覧
実績バッジ
THE ORIGIN(2016年エイプリルフール)
THE END(2017年エイプリルフール)
ノベルゲー構文解説
ノベルゲー構文解説
まずはこちらをご覧ください
こんなノベルゲーライクなものが作れる
「ノベルゲー構文」
のご紹介です。
作り方概要
- このページのソースをあなたのサンドボックスにコピペしてsaveする
- ソースに書かれているurlを修正する
- シナリオを書く
- 完成！
コピペ用コード
作り方
(1) コピペ用コードのコピー
前述のコピペ用コードをあなたのページにコピペしてSAVEします。
注意: サンドボックス3の新規作成ページで作業を行う場合、必ず1度saveしてください。saveしないと、新規作成ページではURLが確定しておらず、以降の作業が行えません。
(2) IFRAMEの修正
次の部分を修正します。
[[iframe <ここにhttp://で始まるページのURL>/code/1 width="100%" height="500px" scrolling="no"]]
ページのURLが「http://scp-jp.wikidot.com/author:dr-toraya」の場合、次のように記載します。
[[iframe http://scp-jp.wikidot.com/author:dr-toraya/code/1 width="100%" height="500px" scrolling="no"]]
(3) 1つ目のCODEブロックの修正
1つ目のcodeブロックに、IFRAMEで表示するHTMLの内容を書きます。codeブロック内の2つ目のscriptタグに、ページ名を記載してください。ページのURLが「http://scp-jp.wikidot.com/author:dr-toraya」の場合、次のように記載します。
<!-- ここにこのページの2番目のCodeブロックのURLを入れてください -->
<script src='/author:dr-toraya/code/2'></script>
(4) 2つ目のCODEブロックの修正
2つ目のcodeブロック(javascript)の変数texturlに、シナリオのURLを記載します。ページのURLが「http://scp-jp.wikidot.com/author:dr-toraya」の場合、次のように記載します。
let texturl='/author:dr-toraya/code/3';
また、変数ASSETSに、使用する画像につける名前とURLを記載します。記載形式は次です。
'名前' : '画像のURL',
(5) 3つ目のCODEブロックの修正
3つ目のコードブロックにシナリオを書きます。
書き方は後述のリファレンスを参照してください。
(6) SAVEして完成！
ね？簡単でしょう？
シナリオの書き方のリファレンス
@で始まらない行
テキストボックスに表示します。自動的に折り返します。改行が入ると次のページになります。
先頭が [ で始まる場合、[]で囲んだ部分をキャラIDとし、指定したキャラを会話中にします。（名前を表示して画像を強調します。）
先頭が " で始まる場合、先頭の"を削除して、残りを普通の文字列として使用します。
（指定例）:
これは普通のテキスト。
[キャラ1]これはキャラ1を会話中に指定しする。テキストで[]内は表示されない。
"[たとえば]こう書いた場合は先頭の"だけを取り除く。
@talker;id=<キャラID>;imgid=<画像ID>;name=<キャラ名>
テキスト表示時にアクティブな画像と名前を指定します。
テキストを記載する前に@talkerを指定する必要があります。
（指定例）:
@talker;id=キャラ1;imgid:@left;name=キャラ1の名前
注意: 現在のところimgidは省略できません。そのうち対応します。
@text;text:<表示文字列>[;talker:<キャラID>][;next:auto][;size:<ピクセル数>][;color:<色指定>][;speed:<表示速度>]
表示文字列をテキストボックスに表示します。
基本的に@で始まらない行と同様ですが、先頭文字の解析はしません。
talker: キャラIDを指定した場合、指定したキャラを会話中にします。（名前を表示して画像を強調します。）
next: autoを指定した場合、文章表示後に自動的に次の行を開始します。
size: 文字サイズをピクセル数で指定します。デフォルト値は32です。この指定は次の行に引き継がれません。
color: 文字の色を16進数のrgb形式(例:#FFF)またはrgba形式(例:rgba(255,255,255,1.0))で指定します。この指定は次の行に引き継がれません。
speed: テキストの表示速度(1文字ごとの表示間隔)をミリ秒単位で指定します。この指定は次の行に引き継がれません。
（指定例）:
[キャラ1]キャラ1のセリフ
@text;talker:キャラ1;text:キャラ1のセリフ
上記２つは同じ意味。(ちなみにこの行にも上の会話中キャラが継続して適用される）
@asset;id=<0以上の整数>
ASSETSから読み込む要素の番号を指定してください。
@imgを指定する前に必ず実施しておく必要があります。
（指定例）:
@asset;id=0
@img;position:{bg|right|center|left|<X座標>[,<Y座標>]}[;name:<ASSETSの名前>][;scale:<画像サイズ>][;id:<画像ID>][;mirror:x]
画像を表示または削除します。一番シンプルな書き方は次です。画像を表示して、削除します。
@img;name=画像1;position:left
@img;id:@left
position: bgを指定すると背景、right、left、centerは立ち絵です。rightだけ左右反転します。X座標は画面中央が0、値を大きくすると右へ動きます。Y座標は画像下端がテキストウィンドウにピッタリくっつく位置が0、値を大きくすると下へ動きます。idの指定がない場合、画像idには@bg、@right、@left、@centerが自動的に付与されます。
name: ASSETSで指定した画像の名前を指定します。省略した場合、idが一致する画像に対する操作であると解釈します。
scale: 下端中央を中心に、画像を拡縮します。1.0が等倍、0.5が半分、2.0が倍のサイズです。省略値は1.0です。
id: 画像idはキャラと関連付けるための値です。@talkerのimgidに画像idを指定すると、指定のキャラが会話中になったときにこの画像が強調表示されます。positionにbg、right、left、centerを指定した場合は省略できます。
mirror: xを指定すると、画像の中心を軸として左右反転します。idが'@right'の場合、自動的にxが指定されます。
画像の削除について: idを指定し、それ以外の属性を省略すると、画像を削除します。このとき、@talkerの指定も解除されるので、削除した画像を再表示する際には、もう一度@talkerで関連付ける必要があります。
（指定例）:
@img;position:left;name:画像1
@img;id:@left;position:0,-300;name:画像1
@title;main:<タイトル>;sub:<サブタイトル>
タイトル画面を表示します。画面のどこかをタッチするとタイトル画面を閉じます。
main: メインタイトルを指定します。
sub: サブタイトルを指定します。表示しない場合は空にしてください。
@chapter;flag:<ジャンプ先フラグ>;text:<テキスト>
チャプター画面で表示するチャプターボタンのテキストとジャンプ先を指定します。指定する場合、
テキストウィンドウと名前ウィンドウの内容はすべて削除されます。@configで指定した設定は引き継がれます。
flag: @flagで指定するidを指定してください。
text: チャプター選択ボタンに表示するテキストを指定してください。
@goto;id:<フラグ名>
指定した@flagまでジャンプします。後ろには戻れません。
（指定例）:
@goto;id:flag1
@flag;id:<フラグ名>
@gotoや@selectのジャンプ先です。
（指定例）:
@flag;id:flag1
@select;[text:<表示テキスト>][;flag:<フラグ名>]
選択肢です。「flag」がない「@select」がくるとそれまでに書いた選択肢を書いたボタンを列挙します。ボタンを選択すると<フラグ名>に指定したidのフラグまでジャンプします。後ろには戻れません。flagがない行にtextを指定しないでください（そのうち対応します）
（指定例）:
@select;text:選択肢1;flag:flag1
@select;text:選択肢2;flag:flag2
@select;text:選択肢3;flag:flag3
@select;
@config;key=<キー>;value=<値>
さまざまな設定を変更します。
次に一覧を示します。
| キー | 初期値 | 説明 |
| talker_shadow | true | 会話中のキャラを強調する場合true。 |
| bgcolor | #000 | 背景色を16進数のrgb形式で指定する。 |
| font_size | 32 | メッセージウィンドウのテキストのサイズを指定します。 |
| font_color | #FFF | メッセージウィンドウのテキストのサイズを指定します。rgb形式またはrgba形式で指定してください。 |
色指定の形式について
rgb形式
「#rgb」の形式で指定します。
rは赤、gは緑、bは青です。それぞれ0～Fを指定できます。
例…黒:#000、白:#FFF、赤:#F00、緑:#0F0、青:#00F
rgba形式
「rgba(r, g, b, a)」の形式で指定します。
rは赤、gは緑、bは青です。それぞれ0～255の整数を指定します。
aは透明度です。0～1の小数を指定します。0は透明、1は不透明です。
例…黒:rgba(0,0,0,1)、白:rgba(255,255,255,1)、半透明の赤:rgba(0,255,0,0.5)
注意事項
- いろんなバグが残っているおそれがあります。見つけたら教えてください。
- 機能が色々足りていません。要望を教えてください。
- シナリオやcodeブロックを複数のサイトに分けることはできません。例えば財団サイトとサンドボックス3の両方にまたがって置くことは多分できません。画像ファイルは別のサイトからでも参照可能です。
補足
画像を大量に準備する場合、そのシーンで使用する画像と使用しない画像が出てくるでしょう。その場合、javascriptの配列を使い、image要素を複数記載し、読み込み画像をグループ分けすることができます。
let ASSETS = [
{
image: {
'名前' : 'グループ0の画像のURL',
},
},
{
image: {
'名前' : 'グループ1の画像のURL',
},
},
];
それぞれのグループの画像の読み込みはシナリオの「@asset;id=グループ番号」で指定します。グループ番号は0から始まることに注意してください。例えば上記のグループ0を読み込む場合は次を指定します。
@asset;id=0