Spritesheet spacing

[volkans80]

Hi,

How can i setup a new spritesheet for below example image file? There is a one pixel spacing for every sprites right and down.

Thanks,

[eonarheim]

Hi @volkans80,

This looks like the kenny rouge like rpg pack right? https://www.kenney.nl/assets/roguelike-rpg-pack I've taken a stab at what I think the arguments would be for this sprite sheet.

In the currently released version (v0.24.5) you can define a margin of 1 pixel (v0.24.5 docs https://excaliburjs.com/docs/api/v0.24.5/classes/_drawing_spritesheet_.spritesheet.html):

const tex = new Texture('./path/to/tileset.png');
const spriteSheet = new SpriteSheet({
  image: text,
  rows: 31,
  columns: 57,
  spWidth: 16,
  spHeight: 16,
  spacing: 1
});

The latest alpha release (0.25.0-alpha.225) (soon to be released as v0.25.0 final documentation is in progress) allows an offset for the top left of the sheet and margin in between each sprite. (Current alpha docs https://excaliburjs.com/docs/api/edge/classes/SpriteSheet.html)

const imageSource = new ImageSource('./path/to/tileset.png')
const spriteSheet = SpriteSheet.fromImageSource({
  image: imageSource,
  grid: {
    rows: 31,
    columns: 57,
    spriteWidth: 16, // pixels
    spriteHeight: 16 // pixels
  },
  // Optionally specify spacing
  spacing: {
    // pixels from the top left to start the sprite parsing
    originOffset: {
      x: 0,
      y: 0
    },
    // Optionally specify pixels between each sprite while parsing
    margin: {
      x: 1,
      y: 1
    }
  }
})

Hope this helps!
Erik

[volkans80]

v0.24.5
I tried this before posting here, but the result is as follows.

0.25.0-alpha.225
I can't try this because TileSprite removed and Cell methods changed. I can't figure out how to add sprites to tilemap cells.

Thanks,

[eonarheim]

Hi @volkans80

For the latest excalibur, I posted a quick example snippet (which will be going into the docs soon!)

https://github.com/excaliburjs/excalibur-snippets/blob/main/src/tilemap/main.ts

Example running live https://excaliburjs.com/excalibur-snippets/tilemap/

For v0.24.5 I can definitely reproduce the bug.

I think adding spacing: -1 will function as a workaround

const kennyRougeLikePack = new ex.Texture(rougeLikeImageSrc);
const rougeLikeSpriteSheet = new ex.SpriteSheet({
    image: kennyRougeLikePack,
    rows: 31,
    columns: 51,
    spHeight: 16,
    spWidth: 16,
    spacing: -1
});

const tilemap = new ex.TileMap({
    x: 0,
    y: 0,
    rows: 10,
    cols: 10,
    cellWidth: 16,
    cellHeight: 16,
});
tilemap.registerSpriteSheet('default', rougeLikeSpriteSheet);

for (let cell of tilemap.data) {
    cell.pushSprite(new ex.TileSprite('default', 0));
}

[eonarheim]

Hi @volkans80

We just released v0.25.0 with an example

https://excaliburjs.com/docs/tilemap#tilemap

Thanks again for reaching out!

[volkans80]

Thanks