1

将来使用するアイソメトリック ゲーム用の単純なエンジンを作成しています。

問題は、キャンバスに描画するのに問題があることです。たとえば、次のコードを見てください。

function pre_load() {
    var imgs = ['1', '1000','1010','1011','1012','1013'];
    var preload_image_object = new Image();
    $.each(imgs,function(i,c){
        preload_image_object.src='img/sprites/'+c.logo+'.png';
    })
}

function GameWorld() {
    //[...]
    this.render = function() {
        this.draw(1000, this.center);
        this.draw(1013, this.center);
        this.draw(1010, this.center);
    }

    this.draw = function(id, pixel_position) {
        draw_position_x = pixel_position[0] - this.tile_center[0];
        draw_position_y = pixel_position[1] - this.tile_center[1];

        inst = this;
        var img = new Image();
        img.onload = function () {
            inst.ctx.drawImage(img, draw_position_x, draw_position_y);
            console.log('Drawn: ' + id);
        }
        img.src = "img/sprites/"+id+".png";
    }

}

画像は既に読み込まれているため、ID 1000、ID 1013、ID 1010 の順に描画されると予想されるかもしれません (そうでない場合でも、現在ローカル サーバーで作業しています)。

しかし、ページを数回更新すると、異なる結果が得られます。

ケース1

1

ケース 2

2

ケース 3

3

(他の順列が発生する可能性があります)

私が考えることができる唯一の解決策は、onload イベントが呼び出されるまで関数を「ハング」させてから、次の .draw() 呼び出しに進むことです。これは正しいアプローチでしょうか？どうすればそれを行うことができますか？より良い解決策はありますか？

ありがとう！

4

1 に答える 1

1

あなたの直感は正しいです...イメージローダーが必要です。

イメージ ローダーのパターンはたくさんありますが、その 1 つを次に示します。

すべての画像が完全にロードされると、下の imgs[] 配列にスプライトが適切な順序で配置されます。

var imgURLs = ['1', '1000','1010','1011','1012','1013'];
var imgs=[];
var imgCount=0;

function pre_load(){

    for(var i=0;i<imgURLs.length;i++){

        var img=new Image();
        imgs.push(img);
        img.onload=function(){
            if(++imgCount>=imgs.length){ 

                // imgs[] now contains all your images in imgURLs[] order

                render(); 

            }
        }
        img.src= "img/sprites/"+imgURLs[i]+".png";
    }

}
于 2013-07-02T03:36:51.540 に答える