忍者ブログ

日記帳の裏側で。

自分が思ったことや興味を持ったことを中心に日記として書いています。

Canvas で画像がちらつくと思ったら

こんにちは。

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

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

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

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

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

画像を描画する処理で

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

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・・・音楽・・・?

拍手

連休最終日

こんにちは。

今日も天気がよくて、良い日でした。

結局この休み中はアスファルト9をプレイし、
Twitter で上げていますが、なんかベルを鳴らす人の GIF を作成し、
YouTube 動画見る

みたいな、感じでした。

3D 写真や動画については何もしていなくて、
人が少ない時にまた撮影していきたいと思います。

あとは実況とかではなく、垂れ流しでとりあえず
アスファルト9のプレイ動画とかライブ配信してみたいな
という気持ちはありますし、
この間の OBS Studio も少し探ってみて、
なんとなくできそうな気がしてきたので、
目下検討中という感じですね。

とりあえず、いろいろ試してみています。

拍手

【ASPHALT9】11月22日

こんにちは。

今週の 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回目の締め切りですね。これが最終なのか?
よくわかっていませんemoji

アスファルト9の YouTube チャンネル登録者 70 万人突破記念?の
カードパックで FERRARI J50 がアンロックできました。

アンロック

  • FERRARI J50

スターアップ

  • ASTON MARTIN DB11 ★2
  • JAGUAR F-TYPE SVR ★2
  • FORD GT ★3


拍手

今日は過ごしやすい一日だ

こんにちは。

昨日は暑くて、風邪でもひいたのかと思ったくらいだったのですが、
今日はちょうどよい気温で、過ごしやすかったです。


最近自分で作ったもぐらたたきを遊んでいるのですが、
なかなか得点が稼げないですね。

よくあるキータイピングのアプリというのは、
画面に出てくる文字に対して、キー入力の速度や正確さを測って練習していくようなゲームですが、

このゲームの場合はアルファベットも入力する文字も書いていない、
画面上にキーボードの配列に合わせてもぐらの穴が配置されていて、
ブラインドタッチできる人が速く打ち込めるのか?
というところが気になって、作ってみました。

自分は全然ダメで、
最初トータルでは14万点くらいでしたが、
2回目やったらトータル7万点くらいでしたemoji

気楽にながらでもぐらたたきしていますが、
集中して、ミスタッチを減らせば
コンボポイントでいくらでもスコアは伸ばせますねemoji




拍手