テキストについて

テキストを描画する

novelsphere.js では、テキストは基本的にメッセージレイヤに描画されます。

シナリオファイルにタグ以外の文字列を書き込んだ場合、それらは全て「カレントメッセージレイヤへそのテキストを描画せよ」という命令であるとみなされます。

カレントメッセージレイヤとは、現在操作対象としているメッセージレイヤ（正確にはページ）のことであり、[current]タグで変更できます。

[current layer="message0" page="fore"]
こんにちは。

以上のような記述をした場合、message0 レイヤの fore ページに「こんにちは。」という文字が描画されます。

もっとも実際には、テキストを描画する前に、表示位置などを設定してから描画することになります。

また、メッセージレイヤの位置や可視／不可視などが適切に設定されていないと、描画はしたものの実際には見えないということも起こりえます。思い通りの結果が得られないときは、[position]タグなどを使って、そのテキストを描画するメッセージレイヤの状態を調整してください。

改行

NS KAG では、ただ改行しただけではそれは改行として描画されません。

改行を行うには[r]タグを使います。

この文が終わったら改行します。
[r]
改行しました。

テキストを消去する

novelsphere.js では、メッセージレイヤをクリアするという形でテキストを消去することになります。

メッセージレイヤをクリアすると、そのレイヤに描画された全てのものが消去されます。すでに描画されたテキストを一部だけ消去することはできません。

メッセージレイヤのクリアには、[cm]タグなどを使います。

クリック待ち

novelsphere.js には、あるテキストを表示し終わったあとそのまま待機し、クリックされるまでコンテンツが次の行へ進むのを停止する機能があります。これをクリック待ちといいます。

行末クリック待ちと改ページクリック待ち

クリック待ちには[l]タグや[p]タグを使います。この2つのタグは、基本的な機能は同じですが、前者は行末クリック待ち、後者は改ページクリック待ちの際に使います。行末クリック待ちと改ページクリック待ちの際には、クリックを促す画像（グリフ画像）を表示することができます。novelsphere.js は基本的に PNG 形式か JPEG 形式の画像しか扱えませんが、グリフ画像に限っては GIF 形式（アニメーション GIF 形式含む）の画像を利用することができます。

どの画像をグリフ画像とするかは、Config.json や[o2_prov_glyph]タグで指定することができます。

【グリフ画像の例】

汎用のクリック待ち

[waitclick]タグを用いた汎用的なクリック待ちもあります。[l]タグや[p]タグと異なり、クリック待ちの間にグリフ画像を表示したくない場合に使います。

なお、ボタンを表示してそれがクリックされるのを待ちたい場合には、これらのタグではなく全く別のタグ（[s]タグ）を使用します。

このテキストを読み終わったらクリックしてください。改行されて次のテキストが表示されます。
[l]
[r]
改行しました。このテキストを読み終わったらクリックしてください。今見えているテキストは全て消えて、次のテキストが表示されます。
[p]
[cm]
改ページしました。

ディレイ

ノベルゲームにはよくある表現ですが、novelsphere.js は、まとまった文字列を分解して1文字ずつ時間をかけて表示することができます。この際、1文字表示してから次の文字を表示するまでの時間のことをディレイと呼びます。

また、普段はディレイを設定しておき、必要なときだけディレイを解除することもできます。この、ディレイが一時的に解除された状態のことをノーウェイトモードと呼びます。

これから表示される文字列のディレイは、[delay]タグ、[nowait]タグや[endnowait]タグから設定することができます。

ディレイの情報は、各メッセージレイヤのページごとに保存されています。

[delay speed="50"]
この部分のテキストは1文字あたり50msのディレイがかかっています。
[nowait]
この部分のテキストはディレイがかからず、一気に表示されます。
[endnowait]
再び、1文字あたり50msのディレイがかかった状態に戻ります。

クリックスキップ

ディレイのかかったテキストが順次表示されている最中にクリックすると、ディレイを一時的に0にして、一気に次のクリック待ちの箇所まで表示する（つまり、一時的にノーウェイトモードとなる）機能があります。これをクリックスキップと呼びます。

クリックスキップは初期状態では有効になっていますが、[clickskip]タグを用いて有効／無効を切り換えることができます。

[clickskip enabled="false"]
この部分はクリックスキップが無効です。
[p]
[cm]
[clickskip enabled="true"]
この部分はクリックスキップが有効です。

なお、クリックスキップを無効にすると、テキストのディレイをキャンセルできなくなる以外にも、画像のトランジションをキャンセルしたり、クエイクを途中でキャンセルしたりすることもできなくなります。

スキップモード

本来はゆっくり読ませるテキストを、いわゆる早送りで進める機能があります。これをスキップモードと呼びます。

スキップモード中は、具体的に以下のような状態となります。

スキップモードに入るには[o2_enterskip]タグを、スキップモードを解除するには[cancelskip]タグを実行します。

オートモード

本来はクリックで読み進めるテキストを、自動的に読み進める機能があります。これをオートモードと呼びます。

オートモード中は、具体的に以下のような状態となります。

オートモードに入るには[o2_enterautomode]タグを、オートモードを解除するには[cancelautomode]タグを実行します。

表示位置

novelsphere.js では、原則としてテキストはメッセージレイヤに描画されますので、テキストの描画位置は、メッセージレイヤの位置やサイズによって決まります。メッセージレイヤの位置やサイズは、[position]タグから設定できます。

また、メッセージレイヤ自体の位置やサイズを指定するだけでなく、そのメッセージレイヤ内の特定の位置にテキストを描画することもできます。これは[locate]タグでカレントポジションを設定することによって実現できます。

フレーム

メッセージレイヤは、テキストの背後にフレームを表示します。これはテキストを読みやすくするために使用されます。

フレームには、単色の矩形と、任意の画像のいずれかを使用できます。また、フレームには不透明度を設定することもできます。不透明度を 0 に設定すれば、フレームは表示されず、テキストのみが表示されることになります。なお、不透明度の設定は単色の矩形をフレームに使用しているときしか有効になりません。

単色の矩形のフレームの例

【単色の矩形のフレームの例】

任意の画像のフレームの例

【任意の画像のフレームの例】

フレームは、[position]タグから設定できます。

フォントやスタイル

[font]タグや[style]タグを用いて、表示するテキストのフォントやスタイルを変えることができます。

また、[deffont]タグや[defstyle]タグを用いて、デフォルトのフォントやスタイルを設定することもできます。[resetfont]タグや[resetstyle]タグを用いれば、フォントやスタイルの情報はデフォルトフォントやデフォルトスタイルへとクリアされます。また、[cm]タグなどによっても、フォントやスタイルの情報はデフォルトのものへとクリアされます。

[deffont color="0xffffff"]
[defstyle linespacing="5"]
[font color="0xff0000"]
この部分のテキストは赤い色で表示されます。
[r]
[style linespacing="10"]
この部分のテキストは赤い色で表示され、なおかつ2行以上にまたがった場合は行間10ピクセルで表示されます。[r]
[resetfont]
[resetstyle]
この部分のテキストは白い色で、なおかつ2行以上にまたがった場合は行間5ピクセルで表示されます。

縦書き

ver.2 から、テキストを縦書きで表示することが可能となりました。横書きと縦書きの切り替えは、[position]タグから指定します。

[position layer="message0" page="fore" vertical="true"]
これ以降、message0 レイヤに書かれるテキストは縦書きで表示されます。

web フォント

ver.2 から、web フォントを利用してテキストを表示することが可能となりました。web フォントとは、フォントファイルをコンテンツ側で用意し、コンテンツの再生時にそのフォントを使用するよう明示的に指定する機能です。一般的な web サイトでは、端末にインストールされているフォントでしかコンテンツを描画できませんが、web フォントを利用することで、どの端末で再生されても同じ見映えのテキストを表示することが可能になります。

フォントファイルの準備

novelsphere.js コンテンツを制作する際には、1つのフォントに対し、以下の形式のファイルを同時に用意しなければなりません。

フォントファイルの形式には、他に OpenType 形式、Embedded OpenType 形式などがありますが、これらのフォント形式は novelsphere.js から利用できませんので、上記2つの形式にあらかじめコンバートする必要があります。

例えば「hoge.otf」というフォントファイルを使いたい場合には、「hoge.ttf」（TrueType 形式）と「hoge.woff」（Web Open Font Format 形式）という2つのファイルにコンバートし、両方をプロジェクトフォルダ内に置いておく必要があります。これは、どちらか片方の形式のフォントしか利用できないブラウザが存在するためです。

なお、拡張子は必ず上記のものを使用してください。また、2つの形式で用意したフォントの拡張子を除いた名前部分は一致していなければなりません。

フォント形式の変換を行うアプリケーションは、無料のものが数多く存在します。以下はその一例です（2013年8月14日現在）。

WOFFコンバータ（Windows/Mac 用）公開サイト : http://opentype.jp/

オンラインでフォント形式の変換を行うサービス : http://www.henkan-muryo.com/

フォントは著作物であるため、形式を変換すること、web フォントとして利用すること、それをノベルスフィアなど第三者のプラットフォーム上で配信することについては著作権者の提示するライセンスに抵触することがないよう、十分ご注意ください。

フォントの呼び出し

上記の準備を行えば、フォントファイルは一般的なフォントと同様に[font]タグ、[deffont]タグや、Config.json 内の指定から利用することが可能となります。

この際、フォント名を指定する際にはフォントファイル名の拡張子部分を除いた部分を指定します。例えば、上記のフォントをコンテンツ中で利用するには、以下のように記述します。

[font face="hoge"]この部分は「hoge」というフォントでテキストが描画されます[deffont]

一般にフォントファイルはファイルサイズが大きく、ロードに時間がかかります。プレイヤーの回線環境によってはコンテンツの再生に支障をきたすケースも考えられますので、多用しすぎないことをお勧めします。

フォントは、自身のファイル名とは別に PostScript 名やフルネームといった名前を持っています。例えば、現在の Windows 標準フォントのファイル名は「Meiryo.ttf」ですが、多くの場合このフォントは「メイリオ」と表記されます。これはこのフォントのフルネーム情報が「メイリオ」という名前であるためです。しかしながら、novelsphere.js から web フォントを指定する際には、必ずフォントのファイル名を指定してください。なお、この制限は web フォントではない通常のフォントを利用する際には関係ありません。