2

似乎某些瓷砖不会被绘制。我将瓦片集拆分为 32x32 方格，并使用 2D 100x100 数组将地图绘制到画布上。

然后它为播放器设置“视口”。由于这是一张大地图，玩家总是以边缘为中心，除非他们跑到边缘附近。

然而，这导致了绘制地图的问题。红块是“玩家”

在此处输入图像描述

我发现，更高的视口 (15x10) 将能够绘制一些以前未绘制的图块。

这是代码。您可以在 jsFiddle http://mystikrpg.com/images/all_tiles.png上下载瓷砖集以在 localhost 或以下位置进行测试

下面的所有内容都得到了很好的评论。

即使更改视口，我也确实看到绘制 了一些图块，而不是全部。http://pastebin.com/cBTum1aQ

这里是jsFiddle：http: //jsfiddle.net/weHXU/

4

1 回答 1

2

工作演示

基本上我采用了不同的方法来绘制瓷砖。使用putImageDataandgetImageData可能会导致性能问题，而且在开始时预先分配所有图像数据也会导致内存损失。您已经拥有图像形式的数据，您不妨直接引用它，它实际上应该更快。

这是我使用的方法

 for (y = 0; y <= vHeight; y++) {
     for (x = 0; x <= vWidth; x++) {
         theX = x * 32;
         theY = y * 32;

         var tile = (board[y+vY][x+vX]-1),
             tileY = Math.floor(tile/tilesX),
             tileX = Math.floor(tile%tilesX);

          context.drawImage(imageObj, tileX*tileWidth, tileY*tileHeight, tileWidth, tileHeight, theX, theY, tileWidth, tileHeight);
    }
}

它几乎相同，但我没有查看预先保存的数据数组，而是引用已加载图像的区域。

获取引用瓦片的说明

假设我有一个 4x4 的网格，我需要获得 7 号瓷砖，以获得y我会做 7/4，然后获得x我会使用 7/4 的剩余部分（7 mod 4）。

至于原来的问题..我真的不知道是什么导致了丢失的瓷砖，我只是把它改成了我的方法，所以我可以从那里测试，但它对我来说马上就起作用了。

于 2012-07-20T17:55:23.270 回答