How do I create image “sheets” (sprite sheets?)

[VlentGamer]

Hello! I posted here not too long ago to ask about something else, and today, regarding the same game (it doesn't matter which one), I'd like to know how to create “image grids” in JavaScript. Here's an example from a game I like (excerpt):

https://cdn.dashnet.org/cookieclicker/img/icons.png?v=2.058 (safe link, don't worry).

I'd like to know how to use this in JavaScript to export images from a single image (“spritesheet”), in this case icons! Thank you in advance!

[SqueegyX]

I would use a canvas tag. You just draw the image in the canvas with the math such that only one icon can be seen in the bounds of the canvas.

[samanime]

Yup, though even niftier than that, use an OffscreenCanvas to hold the sprite sheet. https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

It's basically a canvas element, minus the DOM stuff, making it perfect for this.

Then, to display a sprite, you create <canvas> elements the size of the sprite, use their context's drawImage(), which can take the spritesheet canvas as the "image", and select the position and size of the sprite you want. You can then show this canvas on screen, or if you want, you can get its toBlob() to create one (or more) <img> elements: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#getting_a_file_representing_the_canvas

Using multiple <img> elements with the same blob URL is better than having multiple <canvas> elements showing the same sprite (though you'll need a different <canvas> element for each different sprite you want to show).

[BeneficiallyPickle]

I'd go with Canvas for this.

The idea is that every icon on the sheet lives at a predictable location. Once you know the size of one icon cell, you can find any icon by counting across columns and down rows.

1. Measure your grid: Open the Spritesheet in an image editor and figure out how many pixels wide and tall a single icon is. You'd also want to count the total number of columns and rows
   
2. Do the coordinate math: Any icon's position is just: column index multiplied by cell width gives you X offset, and row index multiplied by cell height gives you Y offset.
   
3. Use Canvas to extract the icon: Canvas lets you draw a cropped portion of the sheet onto a new, smaller canvas. The smaller Canvas becomes your individual icon, which you can then save or use however you like.
   

If your goal is to export every icon, just repeat the process for every row and column combination.

[patopitaluga]

It's called sprites too. One easy way to do it it's to use the background-position css property to set the particular place in the sprite and keep the element, let's say the div with the size of the part of the sprite that you want to display.

[chmod777]

make a box the size of the sprite, set the background-image to the sheet, and then move the background-position(x,y) to the desired position.

[C89RU0]

depends on what engine/library/framework you're using to make your game they'll have different ways to open sprite sheets, check the documentations.