Canvas で画像がちらつくと思ったら
こんにちは。
もぐら。で遊んでいて、いつも画像のちらつきが気になっていました。
ロゴとか、もぐらがちかちか、とたまにちらつくな、と。
したら単純なミスでした。
1つの画像内にいくつかもぐらのしぐさによって、
絵をかき分けて書いています。
(プログラム上で画像を分割して使用する)

事前に見えないウインドウなどを作って、描画する絵を作っておいて、
必要な時に作った絵をコピーして、見えるウインドウに貼り付ける
ダブルバッファリングというみたいな処理が必要なのかと思っていたのですが、
結果何も変わらない・・・。チカチカー
。
この関数は描画するたびに呼ばれます。
例えば、もぐらの穴を描画したいとき、
穴は26個あるので、26回呼ばれます。
このコードで問題なのは new Image() を毎回しているところで、
ここで画像を管理する仕組みを呼び出して、画像管理.src (ソース)にて、
画像のパスを指定します。ここで画像がパスから読み込まれます。
これをだいたい 30 fps (1秒間に30回画面の書き換え) を行うため、
画像を毎回パスから読み込んで表示していたようです。。。
これは、ブラウザーでよく F12 キーを押すと出てくる開発者ツールの、
ネットワークの通信内容を確認する機能があり、
そこで確認するとその画像が毎回ではないにしろ、
点滅する時点で読み込まれているのがわかりました。
結局は、
と、先に、画像を読み込んでおいてから、
画像を描画することで開発者ツールも1度の読み込みのみになりました。
初歩的なミスでしたが、本日プログラムをアップデートしました。
ネットで探しても改善するわけないよなーという事例でした。
(自分用・・・)
2020.11.27 addEventListener のコードの記述ミスを修正
もぐら。で遊んでいて、いつも画像のちらつきが気になっていました。
ロゴとか、もぐらがちかちか、とたまにちらつくな、と。
したら単純なミスでした。
そもそもどう描画しているのか
もぐら。は JavaScript の Canvas で描画していて、1つの画像内にいくつかもぐらのしぐさによって、
絵をかき分けて書いています。
(プログラム上で画像を分割して使用する)
単純にバッファの問題かと思った
他のゲーム制作とかだと、事前に見えないウインドウなどを作って、描画する絵を作っておいて、
必要な時に作った絵をコピーして、見えるウインドウに貼り付ける
ダブルバッファリングというみたいな処理が必要なのかと思っていたのですが、
結果何も変わらない・・・。チカチカー
画像を描画する処理で
こんな書き方していました。function drawimg() {
let img = new Image();
img.src="画像のパス";
drawImage(img, ...);
}この関数は描画するたびに呼ばれます。
例えば、もぐらの穴を描画したいとき、
穴は26個あるので、26回呼ばれます。
このコードで問題なのは new Image() を毎回しているところで、
ここで画像を管理する仕組みを呼び出して、画像管理.src (ソース)にて、
画像のパスを指定します。ここで画像がパスから読み込まれます。
これをだいたい 30 fps (1秒間に30回画面の書き換え) を行うため、
画像を毎回パスから読み込んで表示していたようです。。。
これは、ブラウザーでよく F12 キーを押すと出てくる開発者ツールの、
ネットワークの通信内容を確認する機能があり、
そこで確認するとその画像が毎回ではないにしろ、
点滅する時点で読み込まれているのがわかりました。
結局は、
let img;
// drawImg が呼ばれたら実行
function drawImg() {
drawImage(img, ...);
}
// ページ読み込み時に発火
window.addEventListener('load', function {
// 先に画像を読み込んで
img = new Image();
img.src = "画像パス";
// 描画処理をする (ここでは3枚)
drawImg();
drawImg();
drawImg();
}
);と、先に、画像を読み込んでおいてから、
画像を描画することで開発者ツールも1度の読み込みのみになりました。
初歩的なミスでしたが、本日プログラムをアップデートしました。
ネットで探しても改善するわけないよなーという事例でした。
(自分用・・・)
2020.11.27 addEventListener のコードの記述ミスを修正
PR
2日経った思ったら
こんにちは。
今日は何曜日でしょうか?
月曜日が勤労感謝の日、ということで、
曜日感覚がちょっと鈍りますね。
今週はなんか寒くなって、
何にもやる気が起きない。
3連休あたりからひたすら画像を作っています。
主にもぐら。の画像をもう少し凝りたいからです。
引っ込んだりする時のアニメーション画像をもう少しなんとかできないかな?とも思っています。
拡大しても劣化しない、ベクター形式の画像の作成が
最近自分の中でのトレンドです。
プログラムも画像もなんとか上達したいですが、自分の中の世界が狭いのか、
どうしても自力でがんばろうとしてしまいます。
でも、自力だと時間はかかるし、うまくいかないとあきらめてしまうので、
インターネットで探してみたり、本がないか探してみたりしています。
BGM・・・SE・・・音楽・・・?
今日は何曜日でしょうか?
月曜日が勤労感謝の日、ということで、
曜日感覚がちょっと鈍りますね。
今週はなんか寒くなって、
何にもやる気が起きない。
3連休あたりからひたすら画像を作っています。
主にもぐら。の画像をもう少し凝りたいからです。
引っ込んだりする時のアニメーション画像をもう少しなんとかできないかな?とも思っています。
拡大しても劣化しない、ベクター形式の画像の作成が
最近自分の中でのトレンドです。
プログラムも画像もなんとか上達したいですが、自分の中の世界が狭いのか、
どうしても自力でがんばろうとしてしまいます。
でも、自力だと時間はかかるし、うまくいかないとあきらめてしまうので、
インターネットで探してみたり、本がないか探してみたりしています。
BGM・・・SE・・・音楽・・・?
【ASPHALT9】11月22日
こんにちは。
今週の Asphalt 9 プレイ記録です。
定期的にくる EXCLUSIVE でもないので、逃すとしばらく取得できないかな、と思ったので。
とりあえず★3までアップできました。
残りは EXCLUSIVE (BEAST X、NEMESIS) イベントと
LOTUS EVIJA に関連するイベントっぽい、EPIC HUNT: HIGH VOLTAGE をやってました。
インポートパーツ出るようなこと書いてありながら、全く出ないんですけど・・・。
予選はなんとか4位で通過し、今日2回目の締め切りですね。これが最終なのか?
よくわかっていません
アスファルト9の YouTube チャンネル登録者 70 万人突破記念?の
カードパックで FERRARI J50 がアンロックできました。

今週の Asphalt 9 プレイ記録です。
Switch 版
GINETTA G60 のスターアップをがんばってみました。定期的にくる EXCLUSIVE でもないので、逃すとしばらく取得できないかな、と思ったので。
とりあえず★3までアップできました。
残りは EXCLUSIVE (BEAST X、NEMESIS) イベントと
LOTUS EVIJA に関連するイベントっぽい、EPIC HUNT: HIGH VOLTAGE をやってました。
インポートパーツ出るようなこと書いてありながら、全く出ないんですけど・・・。
スターアップ
- PORSCHE 718 CAYMAN ★3
- ASTON MARTIN DB11 MAX
- FERRARI LAFERRARI ★3
- GINETTA G60 ★3
- NISSAN GT-R NISMO MAX
- PININFARINA H2 SPEED ★3
PC 版
こちらはスペシャルイベントの FERRARI 599XX EVO が出てたのでプレイ。予選はなんとか4位で通過し、今日2回目の締め切りですね。これが最終なのか?
よくわかっていません
アスファルト9の YouTube チャンネル登録者 70 万人突破記念?の
カードパックで FERRARI J50 がアンロックできました。
アンロック
- FERRARI J50
スターアップ
- ASTON MARTIN DB11 ★2
- JAGUAR F-TYPE SVR ★2
- FORD GT ★3
今日は過ごしやすい一日だ
こんにちは。
昨日は暑くて、風邪でもひいたのかと思ったくらいだったのですが、
今日はちょうどよい気温で、過ごしやすかったです。
最近自分で作ったもぐらたたきを遊んでいるのですが、
なかなか得点が稼げないですね。
よくあるキータイピングのアプリというのは、
画面に出てくる文字に対して、キー入力の速度や正確さを測って練習していくようなゲームですが、
このゲームの場合はアルファベットも入力する文字も書いていない、
画面上にキーボードの配列に合わせてもぐらの穴が配置されていて、
ブラインドタッチできる人が速く打ち込めるのか?
というところが気になって、作ってみました。
自分は全然ダメで、
最初トータルでは14万点くらいでしたが、
2回目やったらトータル7万点くらいでした
気楽にながらでもぐらたたきしていますが、
集中して、ミスタッチを減らせば
コンボポイントでいくらでもスコアは伸ばせますね
昨日は暑くて、風邪でもひいたのかと思ったくらいだったのですが、
今日はちょうどよい気温で、過ごしやすかったです。
最近自分で作ったもぐらたたきを遊んでいるのですが、
なかなか得点が稼げないですね。
よくあるキータイピングのアプリというのは、
画面に出てくる文字に対して、キー入力の速度や正確さを測って練習していくようなゲームですが、
このゲームの場合はアルファベットも入力する文字も書いていない、
画面上にキーボードの配列に合わせてもぐらの穴が配置されていて、
ブラインドタッチできる人が速く打ち込めるのか?
というところが気になって、作ってみました。
自分は全然ダメで、
最初トータルでは14万点くらいでしたが、
2回目やったらトータル7万点くらいでした
気楽にながらでもぐらたたきしていますが、
集中して、ミスタッチを減らせば
コンボポイントでいくらでもスコアは伸ばせますね
