部屋・方角を条件に背景画像を追加・指定する方法
※ネタバレの可能性もあるサンプルプログラム解説記事なので、まず「ヤンデレル ～記憶喪失からはじまる脱出ゲーム～」総合案内を読んでからこの記事を読んでください。
部屋の座標と方角を条件に背景画像を追加・指定する方法を解説します。
特定の部屋・方角の背景に暗号やヒントとなる絵などを表示することが可能になります。
手順は大きく2ステップにわかれます。
サンプルコードでは追加背景用にブランクのエリアを5枚分（#body.room > .backgrounds > .otherX）用意しています。
ここでは画像フォルダ（imgフォルダ）に追加の背景画像（Room_B_Hint001.jpg）を保存していて、これを「カスタマイズ用（その他1）」（#body.room > .backgrounds > .other1）として使用するケースで解説します。
追加背景画像の指定
CSSで部屋の背景画像を指定します。
サンプルコードでは以上のようになっていると思いますので、次のようにCSSで追加背景画像を指定します。
追加背景画像の表示条件を指定
カスタマイズ用の背景画像の表示を設定している箇所に、表示したい条件の部屋（X座標とY座標）と方角を指定します。
例えば、背景画像「カスタマイズ用（その他1）」を次の条件のいずれかを満たす時に表示させたいとします。
- Room 2-1（X座標:2 Y座標:1）南向き
- Room 2-4（X座標:2 Y座標:4）北向き
この場合は次のようにCSSを変更します。
ただこのままだとサンプロコードで予め指定している画像が追加背景の下に隠れて表示されているので、サンプルコード（c470321） 73～144行から追加背景を表示する条件の座標と方角の箇所を削除してください。
ただし慣れない内は誤って他の条件の背景も非表示にしてしまう恐れがあるため、無理に非表示にする必要はないかもしれません。
追加背景画像作成の注意点
スマホやパソコンなどで画面サイズが異なるため、背景画像に文字情報を含めるのは非推奨です。
また画像の差替と同様に、背景画像を追加する場合でもサンプルプログラムの背景画像の寸法などにあうように作成してください。
なお、サンプルプログラムのように背景に3方向の壁が表示されている場合は、正面の壁やドアに見えているものは左右を向いても横の壁に本来は見えることにはなります。
そのため、はじめから背景自体を正面の壁のみ表示するようにすることで、画像作成とカスタマイズの手間を削減することができます。
といっても、必ずしもリアリティを求める必要もありませんし、正面に近い入射角からしか見えないなどという設定で割り切るのも有りだとは思います。
