画像の基本

Date:

この項では、画像表示の基本から、差分の利用を行います。

ANBooksで「シンプルなプロジェクトを作成」から作成されたテスト用プロジェクトであると仮定して説明しています。
また、「文字の基本」に目を通していただいているものとしています。

使用できる画像

AIRNovelでは、jpg・png・swfファイルを画像ファイルとして使用することができます。

pngやswfファイルでは、透明部分はそのまま透明で表示されます。ですので、別途マスクファイルを用意する必要はありません。

swfファイルはアニメーションを表示することができます。ただし、フレームレートはswfの設定値ではなく、AIRNovelの設定値が採用されます。
AIRNovelのフレームレート初期値は100fpsです。ですので、30fpsでいい感じに作られているswfファイルの場合、AIRNovelで表示すると3倍以上の早さで表示されます。
[window framerate=数字]でフレームレートを変更することが可能です。ただし、文字表示にも影響してきますので、遅くしますと、全体的にもっさり感が出ることになります。

瞬きのような一部のみのアニメーションの場合、透明部分が透明で表示されることを利用して、目の部分のみをswf画像にし、顔はpngで用意しておいて重ねて表示するという方法があります。

画像を表示する

まずは、画像を表示するためのレイヤを準備します。
[add_lay]を使用し、文字レイヤの時はclass=txtとしたところを、class=grpとします。
基本的に表示したい物1つに対し、1つのレイヤを用意します。背景に立ち絵が3人分でしたら、レイヤは4つです。立ち絵は使わない、すべて1枚絵にするということでしたら、レイヤは1つです。

文字表示用のmesレイヤと立ち絵用のmanレイヤ、背景用のbgレイヤを用意してみます。

AIRNovel:

  1. [add_lay layer=mes class=txt]
  2. [add_lay layer=man class=grp]
  3. [add_lay layer=bg class=grp]

用意したレイヤに画像を表示するには[lay]タグを使用します。
fn=で表示したい画像のファイル名を指定します。ファイル名は拡張子なしで指定することができます。暗号化作業を考えますと、拡張子なしで指定しておく方がおすすめです。慣れるまでは不思議な感じがするかもしれませんが。
素材は事前に指定した素材フォルダに入れておかないと、エラー停止します。(参考

次の背景と立ち絵を表示してみたいと思います。

AIRNovel:

  1. [add_lay layer=mes class=txt]
  2. [add_lay layer=man class=grp]
  3. [add_lay layer=bg class=grp]
  4. [lay layer=bg fn=bg1 page=fore visible=true]
  5. [lay layer=man fn=man1 page=fore visible=true]
  6. [lay layer=mes visible=true]
  7. Hello World!
  8. [waitclick][close]

これで実行してみると、きちんとvisible=true指定をしたにもかかわらず、背景画像しか表示されていません。
lay_grp0
ANBooksのターミナル画面から「レイヤ構造3D」を確認してみましょう。
「斜め」を選択すると、各レイヤの状態が表示されます。
manレイヤにもきちんと画像が表示されています。
lay_grp1
「正面」にすると、bgレイヤでmanレイヤが隠れてしまいました。
lay_grp2

レイヤには順番があるんです。
色々おける透明のシートを下から重ねるイメージですので、一番上のシートに全面塗ってしまえば、下のシートが見えなくなるのは当然です。
さて、その順番ですが、レイヤを追加した順番に下から重ねられていきます。
上の例では、一番下がmes、その上にman、一番上にbgです。
「レイヤ構造3D」の「斜め」で確認すると、その順番になっていることがわかります。
追加順を考えて、スクリプトを直すと、以下のようになります。

AIRNovel:

  1. [add_lay layer=bg class=grp]
  2. [add_lay layer=man class=grp]
  3. [add_lay layer=mes class=txt]
  4. [lay layer=bg fn=bg1 page=fore visible=true]
  5. [lay layer=man fn=man1 page=fore visible=true]
  6. [lay layer=mes visible=true]
  7. Hello World!
  8. [waitclick][close]

後からレイヤの順番を変更することもできるのですが、今がどういう順番になっているのかの把握がややこしくなるということもありますので、最初に順番を考えて準備して、後は移動させないことをおすすめします。

全面を塗りつぶす・画像を表示するということをしてしまえば、それより下のレイヤがすべて隠れることを利用して設定画面等のレイヤを上に準備しておけば、そのときのメイン画面の状態を変更することなく、設定画面等を表示することが可能です。

表示されている画像を消去するには[clear_lay]を使用します。

画像を表示する位置

前項では画像の位置指定をしないままに表示しました。
その場合、縦位置は下寄せ、横位置は中央寄せで表示されます。
全画面表示の背景や、真ん中に表示する立ち絵の場合位置の指定は必要ありません。

pos指定

主に立ち絵で使う指定です。
pos=で行う位置指定は、横位置の指定を指定する方法で、縦位置は下寄せの固定です。
c, l, rという特殊指定と数字で指定する方法があります。

c, l, rは次のように決まっています。
pos=c:中央寄せです。未指定の場合と同じ位置です。
pos=l:左寄せです。画像の左端が画面の左端にくっつく位置です。
pos=r:右寄せです。画像の右端が画面の右端にくっつく位置です。
centerのc、leftのl、rightのrです。
pos1

数字で指定する場合は、画像の中心の画面左端からの距離をピクセルで指定します。
pos2

top, left指定

縦位置と横位置両方を指定する方法です。
top=は画像上端の画面上端からの距離を指定します。
left=は画像左端の画面左端からの距離を指定します。

言い方を変えると、画面左上を原点とした場合の画像の左上のx位置がleft=、-yがtop=です。
top_left

整数、もしくは0を超える1未満の少数(計算式で分数も可)で指定します。
整数で指定する場合は、距離をピクセルで指定します。負の数や画面外になるような数字も指定可能です。
少数の場合は画面上端(左端)を0、下端(右端)を1とした場合の割合で指定します。1を指定した場合は下端(右端)の指定ではなく、上端(左端)から1pxの位置に表示されます。

一方だけを指定した場合、もう一方が0指定として扱われます。

発展指定

基本はpos=top=left=の組み合わせの指定なのですが、他に縦位置はmiddle=, bottom=, s_bottom=、横位置はcenter=, right=, s_right=を使用することができます。
top=left=と同じく整数または割合を少数で指定します。

middle=, bottom=はそれぞれ画像中央、下端の画面上端からの距離です。s_bottom=は画像下端の画面下端からの距離です。
center=, right=はそれぞれ画像中央、右端の画面左端からの距離です。s_right=は画像右端の画面右端からの距離です。

使いどころ例:
取得したアイテム画像を画面中央に表示したい。

AIRNovel:

  1. [lay layer=item fn=key1 center=0.5 middle=0.5]

縦も横も中央を画面サイズの半分に指定することで、中央表示になります。

立ち絵を右から10px離して下寄せで表示したい。

AIRNovel:

  1. [lay layer=r_man fn=man1 s_right=10 s_bottom=0]

pos=で指定するには(画面サイズ – 10 – 画像横幅 / 2)の計算値を指定する必要があります。

上から落ちてくる表現をしたいので、まずは画面の上に隠れる様に配置する。

AIRNovel:

  1. [lay layer=r_man fn=man1 bottom=left=...]

bottom=0とすることで、画面の上部に隠れた状態で配置できます。"top=-画像高さ"と同じです。

表情差分を利用する

立ち絵の表情を顔の土台とパーツに分けて用意し、ゲームでは重ねて見せるという方法があります。
パーツごとにレイヤを用意するという方法もあるのですが、それでは毎度位置指定をしなければなりませんし、立ち絵の位置毎にパーツの位置も変化します。
AIRNovelには事前にどの画像を親画像からどれだけずらして表示するのかを登録しておいて、その情報を利用して画像を表示するという機能があります。

まずは、土台とパーツを分けて画像ファイルを用意します。
add_face1
そして、差分ファイルの登録を行います。

AIRNovel:

  1. [add_face name=happy_eye fn=happy_eye1 dx=dy=20]

[add_face]:差分登録用のタグです。
name=:後で呼び出すための名前です。設定必須。重複不可。
fn=:差分で使う様のファイル名です。省略するとname=で指定した名前のファイルを使用します。
dx=:親画像から右へどれだけずらして表示するか。省略すると0。
dy=:親画像から下へどれだけずらして表示するか。省略すると0。
add_face2

[lay]を利用しますと、画面上での位置ですので、親画像の位置によって子画像の指定位置も変化します。
[add_face]を利用しますと、親画像からの相対位置ですので、親画像の位置にかかわらず、一定の値です。
name=の指定を変えますと、同じ画像ファイルで異なるdx=, dy=を指定することも可能です。ですので、親画像のポーズが変わって子画像の相対位置が変わるというときにも対応でします。

[add_face]はあくまで事前に登録するだけで、それだけでは表示されません。
実際に表示するには[lay]タグでface=で指定を行います。複数指定する場合は、半角カンマ区切りで、奥に表示される物から順に指定します。
なお、親画像からはみ出た分ははみ出て表示されます。

使用例:

AIRNovel:

  1. [add_lay layer=bg class=grp]
  2. [add_lay layer=man class=grp]
  3. [add_face name=eye dx=68 dy=25]
  4. [add_face name=mouth dx=68 dy=55]
  5. [add_face name=hair dx=64 dy=5]
  6. [lay layer=bg fn=bg1 page=fore visible=true]
  7. [lay layer=man fn=cha1 page=fore visible=true face="eye,mouth,hair" s_bottom=center=0.75]

add_face3
わかりやすくするため、差分画像は枠線を入れています。

表情差分という言葉を使っていますが、表情以外にも使用することができます。
そこはもうアイデア次第です。

Photoshopを利用されている場合、レイヤ毎にパーツとして保存、[add_face]の記述を行ってくれるスクリプトが用意されています。
そちらの利用も考えてみてください。

AIRNovel開発者向け情報:立ち絵表情差分
電子演劇部 ツール:レイヤ切り出し.jsx

段階:

関連項目: