javascript - 如何将图像分成几个部分？瓦片地图

Question

我正在制作一个游戏，其中世界地图将由称为 Tiles 的块创建。所有瓷砖都保存在单个 PNG 文件中，类似于下面发布的内容：

我需要分割这个图像并将所有这些块分别存储在内存中，这样我就可以按所需的顺序在屏幕上绘制这些图块。

最好的方法是什么，所以它在每个网络浏览器中都能正常工作？

Answer 1

简单地看一下画布的 drawImage 函数：当使用它的所有参数时，它已经允许有选择地复制图像的一部分。

var tileIndex   = 3; // index of the tile within the texture image 
var tileWidth=16, tileHeight = 16;
var tilePerLine = 6;
var offsetX     = (tileIndex % tilePerLine)*tileWidth;  
var offsetY     = Math.floor(tileIndex / tilePerLine) * tileHeight;

ctx.drawImage(thisImage, offsetX, offsetY, tileWidth, tileHeight, x, y);

Answer 2

有一些有用的框架，比如Pixi.js。但是，如果您想避免使用画布或大型框架，您也可以使用 CSS。

.tile {
    width: 64px;
    height: 64px;
    background-image: url(http://i.stack.imgur.com/TO5jy.png);
    float: left;
}

.tile.tile-floor {
    background-position: 0px 0px;
}

.tile.tile-wall { 
    background-position: -64px 0px;
}

.tile.tile-blue {
    background-position: -192px -192px;
}

<div class="tile tile-blue"></div>
<div class="tile tile-floor"></div>
<div class="tile tile-wall"></div>

Answer 3

您可以在平铺地图编辑器上制作地图它支持 TMX 地图格式，然后您可以使用此处描述的一些 HTML 渲染在游戏中渲染HTML 5 TMX 支持您必须滚动一点才能找到 HTML 列表。

Answer 4

您可以使用 css 使用“图像精灵”的概念来执行此操作。

如果您的游戏有 4 x 4 网格，那么您将必须创建 16 个<div>并且每个 div 设置background-image: url(image.jpg)和background-position:-left -top.
请阅读background-position以更好地理解它。( http://www.csslessons.com/ )

然后，您所要做的就是<div>在用户单击图块时不断更改位置。

Answer 5

看看这个例子，可能会对你有所帮助。http://jsfiddle.net/elclanrs/HmpGx/

(function( $, window ) {

  var _defaults = {
    x : 3, // tiles in x axis
    y : 3, // tiles in y axis
    gap: 2
  };

  $.fn.splitInTiles = function( options ) {

    var o = $.extend( {}, _defaults, options );

    return this.each(function() {

      var $container = $(this),
          width = $container.width(),
          height = $container.height(),
          $img = $container.find('img'),
          n_tiles = o.x * o.y,
          wraps = [], $wraps;

      for ( var i = 0; i < n_tiles; i++ ) {
        wraps.push('<div class="tile"/>');
      }

      $wraps = $( wraps.join('') );

      // Hide original image and insert tiles in DOM
      $img.hide().after( $wraps );

      // Set background
      $wraps.css({
        width: (width / o.x) - o.gap,
        height: (height / o.y) - o.gap,
        marginBottom: o.gap +'px',
        marginRight: o.gap +'px',
        backgroundImage: 'url('+ $img.attr('src') +')'
      });

      // Adjust position
      $wraps.each(function() {
        var pos = $(this).position();
        $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
      });

    });

  };

}( jQuery, window ));

$('div').splitInTiles();