如何將圖像分成幾個部分？ Tilemap

Question

我正在製作一個遊戲，世界地圖將從名爲Tiles的塊創建。所有瓷磚都保存在單個PNG文件，類似於下面貼：

我需要劃分這種圖像並單獨存放在內存中的所有這些塊，這樣我就可以在屏幕上繪製這些磚所需順序。

這樣做的最佳方式是什麼，所以它在每個Web瀏覽器中都能正常工作？

Answer 1

有一些有用的框架，如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 2

看看下面這個例子，可能是這將幫助你。 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 3

單純看畫布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 4

你可以讓你的地圖上Tiled Map Editor它支持TMX地圖格式，然後你可以在你的遊戲渲染一些HTML渲染的這裏所描述HTML 5 TMX support您必須滾動一點找到HTML列表。

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>的位置。