文字の基本

Date:

この項では、文字表示の基本から、文字の設定を行います。

ANBooksで「シンプルなプロジェクトを作成」から作成されたテスト用プロジェクトであると仮定して説明しています。
まずは、プロジェクトフォルダを開き、matフォルダにあるmain.anをテキストエディタで開きます。このファイルがAIRNovelへの指示を書いていくスクリプトファイルです。
すでにいろいろと書き込まれていますが、すべて消してしまいましょう。

文字表示の土台

AIRNovelでは、書き込んだ物がそのまま表示されます。
では、スクリプトファイルに「Hello World!」など何かを書き込んで保存しましょう。
そして、ANBooksの「最初から読む」で確認しましょう。

残念ながら、これではエラー停止してしまいます。
ターミナル画面の方を見ると、「文字レイヤーがありません。文字表示や操作する前に、[add_lay layer=(レイヤ名) class=txt]で文字レイヤを追加してください」というメッセージが現れています。
AIRNovelとしては、「文字を書けと言われても、どこに何で書くねん」という状態なんです。
なので、まずは文字を書く場所を用意します。
そのための指示が[add_lay layer=(レイヤ名) class=txt]なんです。

では、どのような指示になっているのかを見ていきます。
[add_lay]は、レイヤという表示する場所を追加するという命令です。
layer=は、のちのち沢山のレイヤを扱うことになるのですが、その際にどのレイヤへの指示なのかを区別するための名前をつけておきます。ここでつける名前には日本語も使用することができます。自分でわかりやすい物にしてください。
class=は、レイヤに表示する物の種類です。txtは文字を表示するためのレイヤです、という意味です。
指示全体としては、「(レイヤ名)という文字表示用のレイヤを追加する」ということになります。

では、この指示を追加して、動作を確認してみましょう。

AIRNovel:

  1. [add_lay layer=mes class=txt]
  2. Hello World!

また、何も表示されないままエラー停止してしまいました。
「スクリプト終端です」最後まで行き着きましたということですので、エラーが出るような指示はなく最後まで行き着いたために止まっただけです。
なのに、何も表示されません。
そこで、ターミナル画面から「レイヤ構造詳細(奥から手前順)」を確認します。
font_lay
「Page」にbackとforeの二つがあります。レイヤには表と裏がどうのこうのという話になるのですが、今のところは表(fore)だけを考えます。
問題は「可視」の部分です。false(否)になっています。見えていないということです。
mesレイヤのforeを見えるようにする、という指示を入れないといけないんです。
[lay layer=mes page=fore visible=true]がそのための指示です。

[lay]は、レイヤに対して変更を加えるためのタグです。
layer=でどのレイヤに対する指示なのか指定します。
page=fore(表)、back(裏)どちらに対する指示なのかを指定します。
visible=は可視状態をどうするかの指定です。trueで見えるように、falseで見えないようにします。
先ほどのタグは「レイヤへの変更指示です。mesというレイヤの表を見えるようにする」というものです。

さて、このタグはどこに書き込みましょう?
レイヤを追加する前では、mesレイヤをどうこうしろといわれてもそんな物はない、ということになってしまいます。
一方、文字を表示する前には見えるようになっていてもらわないと困ります。
ですので、レイヤ追加後文字表示前に命令を追加します。

AIRNovel:

  1. [add_lay layer=mes class=txt]
  2. [lay layer=mes page=fore visible=true]
  3. Hello World!

これで実行をしてみると、表示されたと思ったらすぐに「スクリプト終端です」エラーで消えてしまいますが、文字を表示することには成功します。
まだ文字が表示されない場合、背景色がしろっぽい色になっていませんか? 文字色の初期値が白色ですので、白に白で見えなくなります。

表示を止める

今のままでは、すぐに「スクリプト終端です」エラーで表示が消えてしまいますので、クリックするまで表示が止まるようにします。

一時停止するタグはいくつかあります。
[waitclick]: クリック等があるまで待ちます。
[wait]: time=で指定された時間待ちます。
[l]: クリック等があるまで待ちます。breaklineという画像かswfファイルがあると表示します。自動読み進めモードでは改行待ち時間待ちます。
[p]: クリック等があるまで待ちます。breakpageという画像かswfファイルがあると表示します。自動読み進めモードでは改ページ待ち時間待ちます。
[s]: 事前に設定された動作があるまで待ちます。選択肢で待つ場合に使用します。

クリック等は、クリック、ホイールダウン、Enter(return)押下、space押下、下矢印押下です。ノベルゲームを読み進めるときにする操作ですね。

クリックするまで待っているように、[waitclick][l][p]のいずれかを文字表示の後に入れておきます。
そして、「スクリプト終端です」エラーが出ないように、最後に[close]という終了させるタグを入れておくと、きれいに終了します。

AIRNovel:

  1. [add_lay layer=mes class=txt]
  2. [lay layer=mes page=fore visible=true]
  3. Hello World!
  4. [waitclick][close]

これで、「Hello World!」と表示され、すべての文字が表示されたところで一旦停止、クリックすると終了するという状態になります。

改行・改ページ

タグリファレンスで[l][p]を見てみると、[l]は行末クリック待ち、[p]は改ページクリック待ちと書かれています。
では、次のようなスクリプトを実行するとどうなるでしょうか。

AIRNovel:

  1. [add_lay layer=mes class=txt]
  2. [lay layer=mes page=fore visible=true]
  3. Hello World![l]
  4. 2行目[p]
  5. 2ページ目
  6. [waitclick][close]

[l][p]でクリック待ちが行われますが、改行も改ページもされません。
この二つのタグは、そのまま使うだけではクリックを待っていますよという合図の画像を表示する、自動読み進め時に指定された時間を待つというだけです。その画像と時間の設定が2種類使えるというものです。

では、改行・改ページの表現はどのようにしたらよいのでしょう。

まずは、改行から。
改行には、[r]という改行用のタグがあります。
[r]タグ1つにつき、1回改行されます。ですので、1行分空けたいときは[r][r]で実現することが可能です。

さて、改行に合わせてクリック待ちをする場合、[l][r][r][l]どちらにするのがよいのでしょうか?
待ち画像を表示しない場合、どちらでも実行時の見た目は同じになります。
ですが、待ち画像を表示する場合は違います。スクリプトに書かれた順番で実行されますので、[l][r]の場合は、文章・待ち画像の順で表示され、クリックで待ち画像が消え、改行されて次の文章が表示されます。
[r][l]の場合は、文章が改行されて、行頭に待ち画像が表示されます。クリックで待ち画像が消えて、待ち画像があった位置から次の文章が表示されます。

次に、改ページの表現です。
紙の場合は、前ページ分の紙を用意しなければなりませんが、全ページ分のレイヤを用意する必要はありません。
表示されている物をすべて消して、あたかも新しいページになったかの様に見せます。

消すためのタグですが、3つあります。
[clear_lay]:レイヤの内容を消去します。文字以外のレイヤにも使用できるタグです。レイヤを指定しない場合、すべてのレイヤが対象になります。
[er]:デフォルト文字レイヤ(指定していない場合は最初に追加した文字レイヤ)の両面に[clear_lay]を行います。履歴に改ページを記録するかどうかの指定が可能です。
[clear_text]:テキストのみを消去します。レイヤの指定が可能ですが、指定しない場合はデフォルト文字レイヤを対象にします。

なんだかややこしいですね。
とりあえず、不都合がなければ[er]と覚えておけば大丈夫です。
[er]で思い通りにならない場合、他にもあったなと思い出していただければ。
[p][er]の順番ですが、クリックしてから消えないと読み終わる前に文字が消えてしまいますので、[p][er]です。
なお、[p]にクリックした後に[er]を行うというのを属性で加えることもできます。その場合は、[p er=true]とします。

以上を踏まえて、最初のスクリプトを修正しますと、次のようになります。

AIRNovel:

  1. [add_lay layer=mes class=txt]
  2. [lay layer=mes page=fore visible=true]
  3. Hello World![l][r]
  4. 2行目[p][er]
  5. 2ページ目
  6. [waitclick][close]

もし、[p][l]の画像を同じ物を使って、自動読み進み時の待ち時間も同じにする場合、スクリプトではどちらか一方に統一してもかまいません。

文字の設定

画面を大きくして、長めの文字を表示してみると、左上から表示が始まり、すぐに改行されてしまいます。
表示範囲の指定や、文字サイズ・色、縦書き横書きの設定の方法です。

色々と指定できるのですが、よく使う物を。
多くの指定は[lay]タグのlayout=で指定します。属性の中に属性を書き込む感じになります。

画面端からのスペース:paddingLeft、paddingTop、paddingRight、paddingBottomです。AIRNovelの仕様上、スタート位置はこの指定で決まるのですが、終了位置は他の指定が優先されます。ですので、横書きの場合paddingLeftとpaddingTopを、縦書きの場合はpaddingRightとpaddingTopをピクセルで指定します。
文字サイズ:fontSize。ピクセルで指定します。
行の高さ:lineHeight。ピクセルもしくは%で指定します。lineHeight – fontSizeの値が行間になります。
文字色:color。16進数でRGB指定がわかりやすいかと思います。その場合、指定の最初に0xをつけ、16進数であることを宣言します。
縦書き・横書き:blockProgression。横書きの場合はtb、縦書きの場合はrlを指定します。
font
縦書きで、上から10px、右から10pxからスタート、文字サイズは20px、行間10px(行の幅は30px)、文字色赤に設定する場合、次のような指定になります。

AIRNovel:

  1. [lay layer=mes page=fore
  2.     layout='blockProgression="rl" paddingTop="10" paddingRight="10" fontSize="20" lineHeight="30" color="0xff0000"']

layout=の中身の指定は"で囲み、各要素は半角空白をあける必要があります。そのため、layout=の全体を'で囲う必要があります。
では、layout=の指定の中身に変数を使いたい場合はどうすればよいでしょうか。
"と'以外に囲みように使える文字がもう一つあります。#を使用して、次のように記載します。(文字色をfcolorという変数に入れているとしています。)

AIRNovel:

  1. [lay layer=mes page=fore
  2.     layout=#&'blockProgression="rl" paddingTop="10" paddingRight="10" fontSize="20" lineHeight="30" color="' + fcolor + '"'#]

もしくは、文字列内に変数を埋め込む方法を使用して、次のようにします。

AIRNovel:

  1. [lay layer=mes page=fore
  2.     layout=#&'blockProgression="rl" paddingTop="10" paddingRight="10" fontSize="20" lineHeight="30" color="$fcolor"'#]

#{fcolor}の方が変数名の切れ目がわかりやすいのですが、区切りの#と判断されますので。

指定できるものはまだありますので、Text Layout Editor Demo Application – Adobe Labsで色々いじってみて、画面下の「Markup…」というボタンを押したときに表示される物を参考に、記述してください。
AIRNovelで実行してみて反映されなければ、それはAIRNovelでは無効な指定と言うことで。

文字数と行数

文字レイヤには文字数と行数を指定するための属性があります。
余白の指定よりも、こちらの指定が優先されます。

max_col=:1行の最大文字数。ただし、禁則処理(。を行頭にしないなど)分を含みませんので、「。」が行頭にくる場合、1文字分増えます。
max_row=:1ページの最大行数。収まりきらない場合にエラー停止します。

一旦、充分に大きい値にしておいて、表示したい範囲にどれだけ入るか自力で数えてもいいのですが、計算式で指定すると楽です。
横書きの場合ですと、以下のようになります。

AIRNovel:

  1. [lay layer=mes page=fore max_col="&(画面幅 - 左右の余白) / 文字サイズ" max_row="&(画面高さ - 上下の余白) / 行高さ"]

txt
文字の指定情報は、指定しない場合は以前の情報が引き継がれます。
ですので、一度に書き込んでもいいですし、見づらい等で小分けに指定してもかまいません。途中で変更する場合は、変更する指定だけを記載すればOKです。

一部のみ文字を変える

レイヤ全体に対する文字の指定は[lay]タグで行いますが、一部だけを変更したい場合は、[span]タグを使用します。
強調したい部分を大きくしたり、赤字にしたりという場合に使用します。

layout=[lay]の場合と同様の指定を行います。
指定しない物は[lay]で指定された情報が引き継がれますので、変えたい部分だけを指定します。

AIRNovel:

  1. [span layout='fontSize="35"'][span layout='color="0xff0000"'][span]

上記の指定の場合、35pxで「テ」が表示され、赤色で文字サイズは[lay]での指定で「ス」が表示され、[lay]の指定で「ト」が表示されます。

また、[er]などで文字表示を消去した場合も[lay]での指定に戻ります。
途中で戻すには[span]だけでOKですし、ページの最後の場合は戻す必要はありません。
逆に、ページをまたぐ場合は、新しいページの頭で再度指定する必要があります。

段階:

関連項目: