HTML 5のキャンバスに静的な背景を描画する

Question

もっと明瞭にするために、私の質問を編集しました。

私は自分のゲームの背景を構築しています。私は、自分のゲームが2Dであることを除いて、FPSゲームのようなプレーヤオブジェクト以外の背景の上に描画するオブジェクトの同じ相対位置にとどまります。私はこれが何千回も行われたと確信していますが、解決策を見つける場所がわかりません。

私のゲームは、常にキャラクターを画面の中央に合わせ、他のオブジェクトをバックグラウンドの他の部分に描画するように設計されています。

私の背景が、以下に説明するように9フレームのサイズと同じ大きさであると仮定すると、1フレームはブラウザ画面の正確なサイズです。

私のキャラクターはフレーム9にフレーム1から行く場合は今、私の性格はいつも私の性格ので程度（frame.width/2、frame.height/2）である、中心部に滞在しますなんらかの形をしています。したがって、画面にはフレーム '1'の代わりにフレーム '9'が表示されます。移動中に、私のキャラクターから他のオブジェクトが「遠ざかる」のを見ることができます。

が、私は私の背景を描画するマップクラスを使用し、そのrender()方法は、このようなものです：

var drawBackground = function (callback) {  
    callback(this); 
} 

image.onload = drawBackground(() => { 
    var pattern = this.ctx.createPattern(image, 'repeat'); 
    this.ctx.fillStyle = pattern; 
    this.ctx.fillRect(0, 0, this.paintWidth, this.paintHeight); 
    // this.ctx.drawImage(image, 0, 0, 10000, 10000); 

}); 
image.src = require('../media/bg.jpg'); 

は今、私のコードに問題があります。私の背景（地図）図面は常にキャラクターの周りにスクリーンを再描画するので、私が見ている効果はキャラクターと一緒に動いているようなものですが、それ以外はすべて同じ場所にとどまります。これは自然に見えません。私はバックグラウンドと他のすべてのオブジェクトが同じ場所にとどまりたい。彼らは私のキャラクターと一緒に動かない。これどうやってするの？

アニメーションを表示するためにanimate（）関数を使用します。

function animate() { 

    map.clear(); // clearRect 

    ... Some code to track my character... 

    map.render(); 

    character.render(); 

    requestAnimationFrame(animate); 
} 

animiate(); 

EDIT：

一部の人々は、私は2つのキャンバスを使用することをお勧め。私は実際に2つのキャンバスを使用しています。

これはindex.htmlファイルの私の設定です：

<canvas id="background" style="z-index: 1;">You are viewing the Game Background Canvas -- Update your browser!</canvas> 
<canvas id="canvas" style="z-index: 2;">...</canvas> 

彼らは次のようにCSSスタイルがあります。

#canvas, #background {position: absolute;left: 0px; top: 0px;} 

をそして、私の背景が '背景' キャンバスを使用して、私の文字が 'キャンバス' を使用しますが、私の他のオブジェクトも '背景'のキャンバスを使用し、彼らは私のキャラクターと一緒に動かず、背景だけがキャラクターと一緒に動きます。

Answer 1

あなたが望むどのように背景を描くために、あなたは、単に文字位置が保存されているところがあると仮定し、-character.x, -character.yで描画される背景を配置する必要があります。これをキャンバスパターンで行うには、キャンバスをその位置に変換してから、原点+文字の位置にパターンを描画します。

キャンバスパターンの仕組みのせいで、あまりにも多くの手間が必要な理由があります。キャンバスグラデーションのようなものです。あなたが塗りつぶす場所は問題ではありません。それはあなたの下の隠れた色を明らかにする魔法のテクスチャを使用しているようなものです。 100,100,200,200位に記入しても問題ありません。パターンは常に0、0で始まります。したがって、0、0を負のプレーヤーの位置に変更し、正のプレーヤーの位置に描画します。 OPによって要求されたよう

image.onload = drawBackground(() => { 
    var pattern = this.ctx.createPattern(image, 'repeat'); 
    this.ctx.fillStyle = pattern; 
    this.ctx.save(); 
    this.ctx.translate(-character.x, -character.y); 
    this.ctx.fillRect(character.x, character.y, this.paintWidth, this.paintHeight); 
    this.ctx.restore(); 
}); 

、私が試してみて、より詳細にこの「魔法」を説明します。

キャンバスパターンは、プレーンカラーやキャンバスグラデーションのような一種の塗りつぶしスタイルです。他の面を明らかにするために、汚れた窓をふき取って窓のワイパーとしてのfillRectのようなメソッドを考えてみましょう。キャンバスパターンを使用する場合、その反対側は繰り返しタイル状のパターンです。さて、そのパターンが、窓から見える壁の壁紙を構成していると想像してください。 （壁が窓に接近していることを想像しやすくするために、壁に投影された窓の拭き取られた部分の形状しか見ることができません）窓の無作為な箱形をきれいに拭き取ったとしますパターンの後ろの部分を明らかにする。左上隅には、パターンのタイルの1つの左上隅が必ずしも表示されません。あなたは真ん中を見るかもしれない。または任意のランダムビット。さて、タイルの左上隅が、ウィンドウから消去されたボックスシェイプの左上隅にくるようにしたいとします。私たちは壁紙がタイル貼りされる場所を変更する必要があります。キャンバス上では、単にtranslateを使用します。キャンバスの原点（x = 0、y = 0）を必要なものに変換します（これは現在は関係ありません）。次にfillRectを実行します。ただし、その新しい原点でfillRectが実行されます。私たちはそれを望んでいません。そこで、xとyを、キャンバスの原点を平行移動した量と逆の値になるように設定します。次にキャンバスの原点を平行移動する量を変更するだけで、パターンのどの部分を見たいかわかります。

ここでは、文字のxとyの位置の負のバージョンで変換します。 （ネガティブなので、バックグラウンドがキャラクターのやり方に動くようになります）。-character.x + character.x = 0であるため、キャラクターの位置から始まるパターンを描画します。左上隅から始める画面のそしてあなたはそれを持っています！最後に、キャンバスの原点をスクリーンの左上隅に戻し、context.saveとcontext.restoreを使用して最終結果を得るだけです。

Answer 2

キャラクター用とキャンバス用の2つのキャンバスを使用し、背景を移動する場合は、絶対位置を使用して同じ位置に配置できます。

<div style="position: relative;"> 
    <canvas id="layer1" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
    <canvas id="layer2" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
</div>