canvas 背景画像 毎フレーム+1 ちらつきなくす

Question

前提・やりたいこと

いま、htmlのcanvasを使って縦スクロールシューティングゲームを作成しています。
背景画像のy座標をを毎フレーム+1して、宇宙が流れるような描画を作りました。
しかし、画面がちらつきます。
ちらつきを回避する方法はありますか。

作成環境 chrome
canvasサイズ 横256　縦512
背景画像サイズ 横256 縦1023

該当のソースコード

var bgg = new Image();
bgg.src = "img/BGG.bmp";
(function(){
  // カウンタをインクリメント
  counter++;

  // screenクリア 
  ctx.clearRect(0, 0, screenCanvas.width, screenCanvas.height);
  
  // バックグラウンドグラフィックを表示
  ctx.drawImage(bgg, 0, -511 + counter % 512,  256, 1023);

  //弾や敵の描画処理が続きます。

}

Answer 1

Canvasアニメーションでは、毎回全てを描画するしかないですか？を読んでみて下さい

Comments

[Shonosuke]

お答えいただいたページを読ませていただきました。
が、しかし、save(),restore()メソッドは、
動かない背景画像にしか利用できないのではないでしょうか。
今回、私が作成した背景画像は毎フレームごとにY座標が+1、
つまり、毎フレームごとに徐々に下に下がって行きます。
したがって、毎フレーム再描画している状況なので、あまり利用できないのかなと思いました。

そもそも、背景画像のこういった使い方が的外れというか、論外な処理なのでしょうか。
縦スクロールシューティングを作成するにあたって、背景画像を下に下げて行けば、
自機がずーっと上に進んでいくような錯覚をプレイヤーに与えられるのかなと思い、
考えた結果の処理ですが、ほかに方法があれば教えていただきたいです。

[oikashinoa]

ベストアンサー以外のところも読むといいですよ（すみません、不親切でした）
チラツキはダブルバッファリングの方を読んでみて下さい。

古典的なやり方ですが、背景をスクロールするなら、
0.背景画像用のCanvasに背景をロード
1．Canvasサイズ分をCanvasRenderingContext2D.getImageData()でイメージ保存
2.1のImagedataをCanvasにCanvasRenderingContext2D.putImageData()
3.No1の画像取得座標を1PixelずらしてNo2、3を繰り返す

”js canvas scroll”とかで調べてみて下さい。

[oikashinoa]

enchant.jsとか既存のライブラリーを使うのも有りと思います。enchant.jsは解説本が出版もされていたと思います。
https://www.atmarkit.co.jp/ait/series/965/

[Shonosuke]

何度も回答ありがとうございます。
canvasを二つ用意する方法を行いましたが、
やはりちらつくようでした。enchant.jsの方も試してみます。
(ライブラリがさっぱりなので時間がかかります。何日か後にまたコメントするかと思いますが、
その時にもまたご教授いただけましたら幸いです。)
本当にありがとうございました。
いろいろと試行錯誤するうえで、canvasに対する理解が深まりました。

一応、今のJavascriptを張っておきます。
canvasを二つ用意する方法に勘違いがないことを祈ります。
bbgctxは画像読み込み用canvasの2Dコンテキスト
ctxはゲーム描画用のcanvasの2Dコンテキストです

(function(){
　　　// カウンタをインクリメント
counter++;

//Y座標を0→511→0にすることで、スクロールを表現
imageData = bggctx.getImageData( 0, counter % 512, 256, 512);

// screenクリア
ctx.clearRect(0, 0, screenCanvas.width, screenCanvas.height);

//bggctxでキャプチャしたImageをプット
ctx.putImageData(imageData, 0, 0);
　　 //この下にも処理があります。
})();

[oikashinoa]

1. // screenクリア
ctx.clearRect
無くても動きません？
2. ソースを見る限りダブルバッファリングを理解していないとおもいます。
表示作業用にcanvasを2つ(ダブルバッファリング)用意して、描画処理全て終わってから交互にcanvasを表示する事でチラツキを抑えます。

背景スクロール用のcanvasを用意する事とはは別の話です。

ダブルバッファリングとかで検索してみてください。