Getting ImageSprite Pictures from a Spritesheet

[Scott Ferguson]

Spritesheets are used in many games to store tiled images in one image file.

The spritesheet file typically contains rows and columns of these tiled images in a grid pattern -- all with the same width and height.

When needed, one of the tiled images is copied from the spritesheet into an ImageSprite to form it's Picture.

A Typical Spritesheet:

This project uses a method to copy a part of the spritesheet into a Canvas, then save that Canvas on the device.

The saved image can then be assigned to an ImageSprite Picture.

Screen shot:

In the example above, the user had uploaded a spritesheet to the Media list.

He then entered the name of the spritesheet (tiles_spritesheet.png) into the textbox.

He entered the width (790) and height (934) of the spritesheet, then touched the Load Spritesheet button.

This displays a preview of the entire spritesheet and part of a full-size spritesheet is shown below it.

The preview image lets the user see all of the spritesheet as a reference.

The full-size spritesheet image is used for copying specified tiled images.

There is a 2 pixel gap between the images in spritesheet so the tiles spacing value is set to 2.

Each tile is 70 px wide and 70 px tall, so the tile width and tile height values are set to 70.

The user provides a name for the image to be copied from the spritesheet.

In the example above it is called cornice.png.

The image he wants is located at column 3 and row 4 in the spritesheet.

That corresponds to this image:

When the user touches the Copy Tile button, the area containing the above image is copied pixel-by-pixel to another Canvas that is 70x70 pixels.

That smaller canvas is then saved to the device using the name specified by the user with the Canvas SaveAs block.

The user can then assign that saved image to an ImageSprite.

Blocks:

---

sf

[phe...@gmail.com]

Hi Scott, 

nice tutorials and templates on your site ;)

I saw the sidescroller post and was wondering about your hard work to devide the spritesheet. Not bad !

But in that case i would not do that, because you can download most of CC0 sprites/arts online with single pictures packed in a zip.

That one from yours you can find in Kennys Gallery, all with a CC0 license.

http://www.kenney.nl/assets/platformer-art-deluxe

http://opengameart.org/users/kenney

or for all...

http://www.kenney.nl/assets      (be sure to check license before downloading any asset pack )

thx....maybe it helps someone ;)

[Scott Ferguson]

Thanks, pheedev!

I had not seen the links that you provided and was not aware the the images are available separately.

That simplifies things :)

For my project I used GIMP image editor to manually copy the images to separate files which was time consuming.

---

sf