日記帳の裏側で。

こんにちは。

もぐら。で遊んでいて、いつも画像のちらつきが気になっていました。
ロゴとか、もぐらがちかちか、とたまにちらつくな、と。
したら単純なミスでした。

そもそもどう描画しているのか

もぐら。は JavaScript の Canvas で描画していて、
１つの画像内にいくつかもぐらのしぐさによって、
絵をかき分けて書いています。
（プログラム上で画像を分割して使用する）

単純にバッファの問題かと思った

他のゲーム制作とかだと、
事前に見えないウインドウなどを作って、描画する絵を作っておいて、
必要な時に作った絵をコピーして、見えるウインドウに貼り付ける
ダブルバッファリングというみたいな処理が必要なのかと思っていたのですが、
結果何も変わらない・・・。チカチカー。

画像を描画する処理で

こんな書き方していました。

function drawimg() {
let img = new Image();
img.src="画像のパス";
drawImage(img, ...);
}
この関数は描画するたびに呼ばれます。
例えば、もぐらの穴を描画したいとき、
穴は26個あるので、26回呼ばれます。

このコードで問題なのは new Image() を毎回しているところで、
ここで画像を管理する仕組みを呼び出して、画像管理.src （ソース）にて、
画像のパスを指定します。ここで画像がパスから読み込まれます。

これをだいたい 30 fps (１秒間に30回画面の書き換え) を行うため、
画像を毎回パスから読み込んで表示していたようです。。。

これは、ブラウザーでよく F12 キーを押すと出てくる開発者ツールの、
ネットワークの通信内容を確認する機能があり、
そこで確認するとその画像が毎回ではないにしろ、
点滅する時点で読み込まれているのがわかりました。

結局は、
let img;
// drawImg が呼ばれたら実行
function drawImg() {
drawImage(img, ...);
}

// ページ読み込み時に発火
window.addEventListener('load', function {
// 先に画像を読み込んで
img = new Image();
img.src = "画像パス";
// 描画処理をする (ここでは3枚)
drawImg();
drawImg();
drawImg();
}
);
と、先に、画像を読み込んでおいてから、
画像を描画することで開発者ツールも１度の読み込みのみになりました。


初歩的なミスでしたが、本日プログラムをアップデートしました。
ネットで探しても改善するわけないよなーという事例でした。
（自分用・・・）

---

2020.11.27 addEventListener のコードの記述ミスを修正