［ヤンデレル］画像の差替方法
※ネタバレの可能性もあるサンプルプログラム解説記事なので、まず「ヤンデレル ～記憶喪失からはじまる脱出ゲーム～」総合案内を読んでからこの記事を読んでください。
このサンプルプログラムで使用している画像はすべて画像フォルダ（imgフォルダ）に入っています。
元の画像をベースに変更して、同じファイル名で差し替え・上書きすれば簡単に画像を差し替えれます。
画像は大きく分けて6種類あります。
- ホーム画面に表示するゲームタイトル
- ホーム画面の背景
- プロローグの背景
- 部屋の背景
- アイテム「スマホ」のロック解除後のイメージ
- エンディングの背景
サンプルプログラムではホーム画面とプロローグの背景は同じものをつかっており、その背景は部屋の背景を流用しぼかし処理を入れただけです。
少なくともオリジナル版ホーム画面に表示するゲームタイトル画像を作成することを推奨します。
サンプルプログラムで使用している背景（部屋）はシンプルで中性的ですし、ゲームの背景などはフリー画像素材などを使うことも珍しくなく、他のゲームと被ることもあります。
しかしゲームのロゴはゲームの顔とも言え、せめてゲームタイトルやサブタイトルが違ってないと別ゲーだと気がつかない恐れがあります。
画像作成の注意点
サンプルプログラムは画面が小さいスマホでも画面が大きいパソコンでもプレイできます。
そしてスマホだと特に画面比率や縦横で画像の表示のされ方が異なります。
画像を作成する時は、差し替える画像と同じ画像サイズで作るようにすると、特にCSSなどで調整することなく画像の差し替えができるかと思います。
簡単なのは、画像編集ソフトで元の画像を開いて、それに上から塗りつぶしていくとサイズや文字・ドアの位置などもズレにくいと思います。
画像編集ソフトを使い慣れている方なら、別レイヤーに元の画像を貼り付けて半透明化して作成する方が良いかもしれません。
ちなみにPhotopeaなどのサービスを利用することでブラウザ上で登録・インストールすることなく画像編集することも可能です。
部屋の背景の注意点
サンプルプログラムの仕様上、部屋の背景は要点を押さえて作成する必要があります。
部屋では常に東西南北のいづれかの方向を向いており、常に左右90度に振り向くことが可能です（左右にボタンを表示））。
正面（向いている方向）に移動できるドアがある場合にのみ、自動的に移動ボタンが上部に表示されます。
そのためサンプルプログラムの画像を参考に、正面（中央）にドアが描かれているる画像には、正面にドアを描いた画像を差し替えてください。
部屋の背景画像のファイル名について
参考までに、サンプルプログラムの部屋の背景画像のファイル名は「Room_A_xxx.jpg」のようになっており、「xxx」の箇所は「0」と「1」でドアの有無を表しています。
サンプルプログラムをプレイされた方はわかるかと思いますが、部屋の背景は正面と左右の壁が表示され、ドアがある壁には正面や左右の壁にドアが描かれています。 そしてその3方の壁のドアの有無でファイル名の「xxx」の箇所が変わります。
例えば、右の壁のみにドアがある場合は「Room_A_001.jpg」となり、左と中央の壁にドアがある場合は「Room_A_110.jpg」となります。
ちなみにドアがない「Room_A_000.jpg」という画像は通常ゲーム内では表示されませんが、ゲーム全体の共通の背景として設定しています。
理由はスマホなどで回線速度が遅い時に、背景画像の読み込みが遅い場合でもその間の代用として表示させるためです。
