画像について

画像の形式

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

• Portable Network Graphic (PNG) 形式 （拡張子は .png）
• JPEG 形式 （拡張子は .jpg もしくは .jpeg）

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

• Graphics Interchange Format (GIF) 形式 （アニメーション GIF 含む。拡張子は .gif）

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

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

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

画像の描画

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

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

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

storage 属性

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

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

layer 属性

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

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

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

page 属性

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

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

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

イメージレイヤの操作

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

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

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

visible 属性

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

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

opacity 属性

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

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

left 属性および top 属性

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

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

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

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

pos 属性

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

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

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

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

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

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

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

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

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

透過画像の扱い

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

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