3

タイルセット画像（タイプ.png）を配列に解析しようとしています。最初に描画するために使用しているテストキャンバスがあり、次にそこから画像情報を抽出しています。このコードを実行すると、「Uncaught TypeError：Typeerror」がスローされます。this.mainTilesが空であることをログに記録できました。何か案は？Canvasの微妙な点をまだすべて知らないので、行き詰まっています。助けてくれてありがとう！（また、最後の最後の行は無視してかまいません。私はそれをテストに使用していましたが、機能しないことを説明したかったのです）。

function TileSet() {
    this.tileSheets = [];
    this.mainTiles = [];
    this.tileHeight = 32;
    this.tileWidth = 32;




    this.addSpriteSheet = function (spriteSheetLoc, name) {

        var tileSheet = new Image();
        try {
            tileSheet.src = spriteSheetLoc;
        }
        catch(err) {
            dMode.Log("Invalid TileSheet Src ( TileSet.setSpriteSheet() Failed ); ERR: " +  err);
        }


        tempContext.drawImage(tileSheet, 0, 0);


        var tilesX = tempContext.width / this.tileWidth;
        var tilesY = tempContext.height / this.tileHeight;

        for(var i=0; i<tilesY; i++) {
            for(var j=0; j<tilesX; j++) {
                // Store the image data of each tile in the array.
                this.mainTiles.push(tempContext.getImageData(j*this.tileWidth, i*this.tileHeight, this.tileWidth, this.tileHeight));
            }
        }


        context.putImageData(this.mainTiles[0], 5, 5);



    }

編集：キャンバスなどの定義方法は次のとおりです。

var tempCanvas = document.getElementById("tempCanvas");
var tempContext = tempCanvas.getContext("2d");

var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");


var Tiles = new TileSet;
//this is the line it gets stuck at


Tiles.addSpriteSheet("resources/tiles/tilea2.png");

編集2：markEの回答の後、最新のアップデートがあります。それでも、.onloadに関する基本的なプロパティが欠落しているように感じます。

function TileSet() {
    this.Tiles = [];
    this.tileHeight = 32;
    this.tileWidth = 32;
    this.tileCount = 4;




    this.addSpriteSheet = function (spriteSheetLoc, name) {

        var tileSheet = new Image();
        tileSheet.onload = function() {
            tempCanvas.width = tileSheet.width;
            tempCanvas.height = tileSheet.height;
            tempContext.drawImage(tileSheet, 0, 0);



           for (var t=0;t<this.tileCount;t++) {
       this.Tiles[t]=tempContext.getImageData(t*this.tileWidth,t*32,this.tileWidth,tileSheet.height);
               dMode.Log(this.Tiles);
           }


            context.putImageData(this.Tiles[this.Tiles.length-1],0,0);
            dMode.Log(this.Tiles);
        }

        tileSheet.src = spriteSheetLoc;
}
4

2 に答える 2

1

tempContext.widthとtempContext.heightをそれぞれtempCanvas.widthとに置き換えてみてくださいtempCanvas.height。コンテキストに幅/高さがあるとは思いません。

于 2013-03-16T20:59:35.877 に答える