画像について

画像の形式

O₂ Engine コンテンツは、以下の形式の画像を使用することができます。

また、グリフ画像に限っては、以下の形式の画像も使用することができます。

GIF 画像をグリフ画像以外の用途で使うと正しく動作しませんので、グリフ画像以外の画像は、PNG 形式か JPEG 形式のいずれかの形式で用意するようにしてください。

グリフ画像について、詳しくは「テキストについて」の「クリック待ち」を参照してください。

また、拡張子は必ず上記のものを使用してください。

画像の描画

画像の描画には[image]タグを使用します。

特に重要な指定は、「どの画像を描画するか」、「どのレイヤに描画するか」、「どのページに描画するか」の3点です。これらはそれぞれ storage 属性、layer 属性、page 属性で指定します。

また、画像を描画しても、描画先のレイヤが非表示になっていたり、不透明度が 0 となっていたり、描画先が back ページであれば実際に画面上には現れませんので注意してください。

[image storage="hoge" layer="0" page="fore"]

storage 属性

描画したい画像のファイル名を指定します。

ファイル名は拡張子を省略した形で指定してください。また、ファイルパスを含めてはいけません。詳しくは「文法について」の「ファイル名の扱いについて」を参照してください。

layer 属性

画像を描画する先のレイヤ名を指定します。

画像を描画できるのは "base"、"0"、"1"、"2"、"3" のいずれかです。もし Makefile 中でイメージレイヤの数を5枚以上に設定すれば、"4"、"5"、"6" …という連番の形で、指定できるレイヤが増えていきます。

メッセージレイヤを指定することはできません。

page 属性

画像を描画する先のレイヤのページを指定します。

ページの概念については「トランジションについて」で説明します。

"fore" か "back" のいずれかを指定することになりますが、page 属性は省略することができます。その場合には "fore" が指定されたとみなされます。

イメージレイヤの操作

描画された画像が実際にどのように表示されるかは、描画先のレイヤの状態に依存します。

レイヤの状態は[layopt]タグで操作できます。

また、一部の状態に限り、画像を描画する際に[image]タグから直接操作することができます。ここではこの方法を説明します。以下がその例です。

[image storage="hoge" layer="0" page="fore" visible="true" opacity="127" left="100" top="40"]

visible 属性

画像を描画する先のレイヤの可視／不可視を切り換えます。

この属性は[layopt]タグからも変更することができます。

opacity 属性

画像を描画する先のレイヤの不透明度を指定します。

この属性は[layopt]タグからも変更することができます。

left 属性および top 属性

画像を描画する先のレイヤの左端位置と上端位置をそれぞれ指定します。

画像を読み込むと、そのレイヤのサイズは必ず画像のサイズと一致するようになっているため、レイヤの左端位置と上端位置を指定することは、画像の表示される位置を指定することを意味します。

この属性は[layopt]タグからも変更することができます。

また、画像の位置を指定するには、left 属性や top 属性を用いる以外にも、以下に挙げる pos 属性を用いる方法があります。

pos 属性

以下は、pos 属性を用いてレイヤの位置を指定した場合の例です。

[image storage="hoge" layer="0" page="fore" pos="left"]

pos 属性には、"left"、"left_center"、"center"、"right_center"、"right" の5つの値のいずれかを指定することができます。

pos 属性を使用すると、Makefile で指定した情報をもとに、画像を描画する先のレイヤの左端位置が自動的に計算されます。

Makefile に scPositionX_left=100 と記述した上で "left" を指定した場合のことを考えてみます。

この場合、そのレイヤの中央位置が 100 となるようにレイヤの左端座標が算出されます。例えば、読み込んだ画像の横幅が 150 ピクセルの場合、100 - (150 ÷ 2) = 25 がそのレイヤの左端位置となります。

Makefile 中における位置情報の指定方法は「Makefile リファレンス」を参照してください。

なお、レイヤの上端位置は、その画像の下端がコンテンツの画面の下端と一致する位置に、自動的に決定されます。

pos 属性を用いた場合には、top 属性と left 属性は無視されます。

ノベルゲームコンテンツを制作するにあたって、いわゆる立ち絵を表示する際に便利です。

透過画像の扱い

PNG 形式の画像を用いた場合、その画像にはαチャネル（いわゆる透明情報）を持たせることができます。

αチャネルを持った画像を読み込んだ場合にも、O₂ Engine はその部分を透明なピクセルとして表示することができますので、その部分にはそのレイヤより奥のレイヤの画像が透けて表示されます。

ベースレイヤはコンテンツ全体の背景としての役割を果たす必要があるので、αチャネルを持った画像や、画面サイズに満たないサイズの画像を描画しないでください。