Extracting sprites from a larger PNG file

On the Pharo mailing list there was a discussion about extracting sprites from the larger PNG files. The LPC Character Generation website offers an example of such a larger set of sprites organized in one large PNG. I take this opportunity to describe how using the GTInspector makes us quickly find the solution to our problem through continuous visual feedback.

Let’s start. First, we download and inspect a sprites.png file.

The preview tells us we have the correct file. Next, we load a form from the file.

self binaryReadStreamDo: [ :stream | PNGReadWriter formFromStream: stream ]

Now that we got the form loaded in memory, we want to split this form in smaller forms associated to individual sprites. To this end, we first need to learn the size of each sprite. One way to do that would be to count the amount of rows and columns in the matrix, but that is too boring. Instead, we explore a bit. Likely, the sprite has a power of 2 dimension. We try with 32x32 .

self copy: (0@0 corner: 32@32)

Nah, that is not it. What about:

self copy: (0@0 corner: 64@64)

This looks much better. We verify that the height and width are multiple of 64:

self width / 64 “==>13" self height / 64 “==>21"

Great. Now we can proceed with splitting the form:

sprites := OrderedCollection new. 0 to: (self width - 64) by: 64 do: [ :x | 0 to: (self height - 64) by: 64 do: [ :y | sprites add: (self copy: (x@y corner: (x+64)@(y+64)))]]. sprites

And we are done. You can try this scenario with the latest Pharo.