3

我正在尝试将瓦片集图像（.png 类型）解析为数组。我有一个测试画布，我先用它来绘制它，然后我从中提取图像信息。当我运行此代码时，它会抛出“未捕获的 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

3

以下是如何将 spritesheet 解析为单独的画布 imageData 数组

我有一些工作代码可以做你想做的事情。

我没有你的“resources/tiles/tilea2.png”，所以我使用了我自己的“monstersArun.png”，它是 10 个 64x64 瓷砖的跨精灵表。

您可以修改此代码以适合您的 spritesheet 布局（行 x 列和图块大小）。

这是代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    var tileCount=10;
    var tiles=new Array();
    var tileWidth;
    var t;
    var img=new Image();
    img.onload=function(){
      canvas.width=img.width;
      canvas.height=img.height;
      tileWidth=img.width/tileCount;
      ctx.drawImage(img,0,0);

      for(var t=0;t<tileCount;t++){
            tiles[t]=ctx.getImageData(t*tileWidth,0,tileWidth,img.height);
      }

      // just a test
      // draw the last tiles[] into another canvas
      var canvasTile=document.getElementById("canvasTile");
      var ctxTile=canvasTile.getContext("2d");
      canvasTile.width=tileWidth;
      canvasTile.height=canvas.height;
      ctxTile.putImageData(tiles[tiles.length-1],0,0);
    }
    img.src="monsterarun.png";

}); // end $(function(){});
</script>

</head>

<body>

    <canvas id="canvas" width=300 height=300></canvas><br/>
    <canvas id="canvasTile" width=64 height=64></canvas>

</body>
</html>

[编辑——包括胡安·门德斯的好主意，为编码问题提供帮助]

另外，当我查看您的代码时……这里：

tileSheet.src = spriteSheetLoc;

这会导致您的图像加载。加载需要时间，因此 javascript 开始加载图像，但它也立即继续到您的下一行代码。因此，您下面的代码会尝试在图像可用之前使用它——不好！

因此，在处理其余代码之前，您应该让 javascript 有机会完全加载您的图像。您可以使用 Image 的 onload 方法执行此操作，如下所示：

var tileSheet = new Image();
tileSheet.onload=function(){

    // put ALL you code that depends on the image being fully loaded here

}
tileSheet.src = spriteSheetLoc;

注意你是如何将 tileSheet.src 放在onload 函数之后的。实际上，javascript 执行 tilesheet.src 然后返回执行 onload 块中的所有代码！

[再次编辑——完整代码]

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

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


    // create a new TileSet
    var Tiles = new TileSet();

    // parse a spritesheet into tiles
    //Tiles.addSpriteSheet("resources/tiles/tilea2.png","anyName");
    Tiles.addSpriteSheet("houseIcon.png","anyName");


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

        this.addSpriteSheet = function (spriteSheetLoc, name) {

            var me=this;  // me==this==TileSet

            var tileSheet = new Image();
            tileSheet.onload = function() {

                // calculate the rows/cols in the spritesheet
                // tilesX=rows, tilesY=cols
                var tilesX = tileSheet.width / me.tileWidth;
                var tilesY = tileSheet.height / me.tileHeight;

                // set the spritesheet canvas to spritesheet.png size
                // then draw spritesheet.png into the canvas
                tempCanvas.width = tileSheet.width;
                tempCanvas.height = tileSheet.height;
                tempContext.drawImage(tileSheet, 0, 0);
                for(var i=0; i<tilesY; i++) {

                    for(var j=0; j<tilesX; j++) {

                        // Store the image data of each tile in the array.
                        me.Tiles.push(tempContext.getImageData(j*me.tileWidth, i*me.tileHeight, me.tileWidth, me.tileHeight));
                    }
                }

                // this is just a test
                // display the last tile in a canvas
                context.putImageData(me.Tiles[me.Tiles.length-1],0,0);

            }
            // load the spritesheet .png into tileSheet Image()
            tileSheet.src = spriteSheetLoc;
        }
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="tempCanvas" width=300 height=300></canvas><br/>
    <canvas id="gameCanvas" width=300 height=300></canvas>
</body>
</html>
于 2013-03-16T03:53:30.047 回答
1

尝试分别用和替换tempContext.width和。我不相信上下文有宽度/高度。tempContext.heighttempCanvas.widthtempCanvas.height

于 2013-03-16T20:59:35.877 回答