I'm making a game, where map of the world will be created from blocks called Tiles. All Tiles are saved in single PNG file, similar to that posted below:

I need to divide this image and store all those blocks in memory separately, so I could draw those Tiles on screen in desired order.

What's the best way to do that, so it will be working well in every web browser?

I'm making a game, where map of the world will be created from blocks called Tiles. All Tiles are saved in single PNG file, similar to that posted below:

I need to divide this image and store all those blocks in memory separately, so I could draw those Tiles on screen in desired order.

What's the best way to do that, so it will be working well in every web browser?

• javascript

5 Answers 5

simply look at the drawImage function of the canvas : when using all its arguments it allready allows to copy selectively a part of the image.

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);

There are some useful frameworks like Pixi.js. But if you like to avoid canvas or huge frameworks, you can also work with CSS.

.tile {
    width: 64px;
    height: 64px;
    background-image: url(https://i.sstatic/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>

You can make your map on Tiled Map Editor It supports TMX map format that you can then render in your game with some of the HTML renders described here HTML 5 TMX support You have to scroll a little to find the HTML list.

Look at this example, may be this will help you. http://jsfiddle/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();

you can use the concept of "image sprite" using css to do this.

IF your game has 4 x 4 grid, then you will have to create 16 <div> and each div set the background-image: url(image.jpg) and background-position:-left -top.
Please read about background-position to understand it better. (http://www.csslessons./)

Then all you have to do is keep changing the <div> position when the user clicks of the tiles.