Question

我正在制作一款游戏，世界地图将通过名为Tiles的块创建。所有Tiles都保存在单个PNG文件中，类似于下面发布的文件：

enter image description here

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

最好的方法是什么，所以它会在每个网络浏览器中都运行良好？

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。但是如果你想避免使用canvas或庞大的框架，你也可以使用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

您可以在Tiled Map Editor上制作地图它支持TMX地图格式，然后您可以在游戏中使用此处描述的一些HTML渲染进行渲染HTML 5 TMX support您需要滚动一点才能找到HTML列表。

Answer 4

看看这个例子，可能会对你有帮助。 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();

Answer 5

你可以使用css的“图像精灵”这个概念来做到这一点。

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

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

如何将图像分成几个部分？ tilemap的

5 个答案: