Wie teilen Sie das Bild in mehrere Teile? Tilemap

Mache ich ein Spiel, wo die Karte der Welt erstellt werden Blöcke genannt Fliesen. Alle Fliesen sind gespeichert in einzelne PNG-Datei, ähnlich wie unten geschrieben:

Muss ich unterteilen Sie das Bild und speichern Sie alle diese Blöcke im Speicher getrennt, damit könnte ich zeichnen die Fliesen auf dem Bildschirm in der gewünschten Reihenfolge.

Was ist der beste Weg, dies zu tun, so wird es sein, die gut funktioniert in jedem web-browser?

InformationsquelleAutor Piotrek | 2013-06-05

javascript

einfach mal auf die drawImage-Funktion von der Leinwand : bei der Verwendung alle seine Argumente, die es schon erlaubt zu kopieren selektiv einen Teil des Bildes.

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

InformationsquelleAutor GameAlchemist

1

Können Sie Ihre anzeigen auf Fliesen-Map-Editor Es unterstützt TMX map-format, das Sie können, dann machen Sie in Ihrem Spiel mit einigen der HTML rendert hier beschrieben HTML 5 TMX-Unterstützung Sie zu zwingen, etwas zu finden, die HTML-Liste.

InformationsquelleAutor thinklinux

Gibt es einige nützliche frameworks wie Pixi.js. Aber wenn Sie vermeiden wollen, Leinwand oder großen Rahmen, Sie können auch arbeiten mit CSS.

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

HTML:

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

InformationsquelleAutor tomatentobi

Blick auf dieses Beispiel, kann Euch das helfen wird. 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();

InformationsquelleAutor Rubyist

0

können Sie die Verwendung des Begriffs der "Bild " sprite" mit css zu tun.

WENN Ihr Spiel hat 4 x 4-raster, dann müssen Sie zum erstellen von 16 <div> und die einzelnen div-legen Sie die background-image: url(image.jpg) und background-position:-left -top.

Bitte Lesen Sie über background-position um es besser zu verstehen. (http://www.csslessons.com/)

Dann alles, was Sie tun müssen ist, halten die änderung der <div> position, wenn der Benutzer klickt auf den Fliesen.

InformationsquelleAutor Rahul Goyal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.