0

最初に、私の英語で申し訳ありません:(

キャンバス要素を楽しんでいて、ゲームブラウザを作ろうとしていますが、この問題を解決できません。

  1. マップ タイルを 2 次元配列で取得します。

  2. 位置プレーヤーを取得し、コンテキストを変換して (キャンバスの中央に描画する)、マップ内の絶対位置を考慮してマップを再描画します。しかし、プレーヤーを移動すると、マップが約 1 秒 (clearRect キャンバスだと思います) 表示された後にマップが消えます。

だから、私の問題は、キャンバスが黒のこの厄介な秒です。

コード。

function pinta(){
    var mirror = renderToCanvas(canvas.width, canvas.height, function (ctx) {
    ctx.clearRect(0,0,canvas.width,canvas.height);

    //antes de pintar debemos calcular la traslacion
    ////////////////////////////////////////////////
        var moverX=canvas.width/2-players[yo].x;
        var moverY=canvas.height/2-players[yo].y;
        ctx.translate(moverX,moverY);
        pinta_terreno();
        pinta_players();

    function pinta_players()
    {
        for( var player in players ) {
            var i=player,
            x=players[i].x;
            y=players[i].y;
            var img=new Image(25,25);
            if(i==2)img.src="/img/player2.png";
            else img.src="/img/player1.png";
            ctx.drawImage(img,x,y);
        }
    }   

    function pinta_terreno()
    {
        // donde estoy en tiles
        var min_x=(-canvas.width+players[yo].x)/TAM_TILE;
        var max_x=(canvas.width+players[yo].x)/TAM_TILE;
        var min_y=(-canvas.width+players[yo].y)/TAM_TILE;
        var max_y=(canvas.width+players[yo].y)/TAM_TILE;
        ///////////////////////
            for(var i=min_x;i<=max_x;i++)
                    for(var j=min_y;j<=max_x;j++)
                    {
                            var x=i*TAM_TILE;
                            var y=j*TAM_TILE;

                            try
                            {
                                if(mapa[i][j]!=null && mapa[i][j]!="undefined")
                                {
                                    var terreno=new Image(25,25);
                                    terreno.src="/img/terrain/"+mapa[i][j]+".png";
                                    ctx.drawImage(terreno,x,y);
                                }
                            }catch(e)
                            {

                            }
                    } // del for(var j=0;j<(canvas.height/TAM_TILE);j++)

    } // del pintaterreno
}); 

context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(mirror, 0, 0);
}
4

1 に答える 1

0

私はキャンバス (静的グラフのみ) でアニメーションを行ったことはありませんが、確認すべきヒントがいくつかあると思います (心配する必要はありません。

  • 最初に、ワンセグ ラグの原因となっているコード内の正確な関数を特定します。console.log()への呼び出しの前後に a を追加しctx.clearRect()ます。ctx.translate()また、 、pinta_players()およびの前後pinta_terreno()。最後の 1 つは私の主な容疑者です。
  • 内部の可視領域全体をペイントしている場合pinta_terreno()、ctx.clearRect()最初の部分mirror()は必要ありません。
  • 2 人のプレーヤーとタイトルの画像をプリロードして保存することもできます (もちろん、タイトルの数によって異なります)。そのため、この手順はペイント関数内では行われません。このようにして、ctx.drawImage(player1,x,y);代わりにctx.drawImage(img,x,y);とctx.drawImage(terreno[i,j],x,y);の代わりに を使用する必要がありctx.drawImage(terreno,x,y);ます。
  • paintまた、ループ/タイマー内で関数を呼び出している場合は、キャンバスを 2 回クリアしていることにも注意してください。
  • これは私が理解できない部分です:関数に関数を渡していcontext.drawImage()ますか? の最初のパラメータはdrawImage、画像、ビデオ、キャンバス、または別のコンテキストにする必要があります。
于 2012-12-08T17:15:57.773 に答える