Game Development Community

Joining a bunch of tile files into a big one

by Joel Reymont · in Torque Game Builder · 05/10/2005 (7:13 am) · 11 replies

Folks,

I have a whole bunch of small images that represent card faces in my poker game. Is there a simple way to join them into one big image for use with T2D? I'm on Mac OSX.

I would hate to manually join 52 images in Photoshop but I think that creating a single image will increase loading performance.

Thanks in advance, Joel

#1
05/10/2005 (7:32 am)
I still haven't found a satisfactory tool for doing that job under Windows. There have been a couple of Windows apps posted in the T2D forums, but they don't deal with PNGs :(

Also, as a side note, I ran into a minor problem when trying to string a load of images together. T2D isn't happy if they're larger than 2048 in one direction. Maybe using a chunked image would get around that error, but I didn't bother checking, I just turned my long strip into a grid (by hand).
#2
05/10/2005 (9:56 pm)
OK guys I made a little Python proggy for ya all that will stitch pictures in about any picture format to one nice large PNG image, named output.png. For this script you will need to have installed: (a) Python and (b) The Python Image Library. It should work on about any platform but I only tested it on my win Box.

Put the code below into a file named stitch.py and put it into a directory that only contains the images you want to put together. Run it and enter the number of rows and colums so that it knows how to stack m. It will fill up the colums (x) first before before moving to the next row (y)

I did not do any sorting on the files; on my Win box it seems to take m sorted by name. Also, it will take the size of the first picture and ignore all subsequent pictures that do not have the same size. It also ignores the output.png and itself.

import os
import Image

cols = eval(raw_input('cols(x):'))
rows = eval(raw_input('rows(y):'))

filelist = os.listdir(os.getcwd())
col = row = found = 0

for file in filelist:
    if file == 'output.png' or file == 'stitch.py' : continue
    try:
        pic = Image.open(file)
        if not found:
            xsize = pic.size[0]
            ysize = pic.size[1]
            output = Image.new( 'RGBA',( xsize*cols, ysize*rows) )
        else:
            if ( xsize != pic.size[0] or ysize != pic.size[1] ):
                print 'Ignoring', file, '- size:', pic.size
                continue

        print 'Adding:',file, pic.size, pic.mode
        output.paste(pic,(col*xsize,row*ysize))

        found += 1
        col += 1
        if col >= cols:
            col = 0
            row += 1

    except IOError:
        print 'Ignoring', file,'- unknown image format'

output.save('output.png',format = "PNG")
print '--> ',found,' pictures saved as output.png', output.size, output.mode

A typical output will then look like this:

cols(x):1
rows(y):4
Adding: back1.png (256, 128) RGBA
Adding: back2.png (256, 128) RGBA
Adding: back3.png (256, 128) RGBA
Adding: back4.png (256, 128) RGBA
-->  4  pictures saved as output.png (256, 512) RGBA
>>>
#3
05/11/2005 (9:05 am)
Well I know there was an entire thread devoted to this topic, but I couldn't find it.
Here's what I use on OS X:
Spriteliner
www.smoonstore.com/silverstreaksoftware/spriteLiner.shtml
#4
03/21/2006 (11:55 am)
Here's updated source code for stitch.py. I had to fix a few minor things in order to get it to run properly on my machine.

import os
import sys
import Image

cols = eval(raw_input('cols(x):'))
rows = eval(raw_input('rows(y):'))

filelist = os.listdir(os.getcwd())
col = row = found = 0

for file in filelist:
    if file == 'output.png' or file == 'stitch.py' or file == 'Thumbs.db': continue
    try:
        pic = Image.open(file)
        if not found:
            xsize = pic.size[0]
            ysize = pic.size[1]
            output = Image.new( "RGBA",( xsize*cols, ysize*rows) )
        else:
            if ( xsize != pic.size[0] or ysize != pic.size[1] ):
                print 'Ignoring', file, - 'size:', pic.size
                continue

        print 'Adding:',file, pic.size, pic.mode
        output.paste(pic,(col*xsize,row*ysize))

        found += 1
        col += 1
        if col >= cols:
            col = 0
            row += 1

    except IOError:
        print 'Ignoring', file,- 'unknown image format'

output.save("output.png", "PNG")
print '-->' ,found, 'pictures saved as output.png', output.size, output.mode
#5
03/21/2006 (3:05 pm)
I am not able to get this to work. I get an output.png image of the right size, but it says 0 files found. I am trying to add 56 images for a deck of cards. They are all *.png files. Am using Python 2.42
Any ideas?
#6
03/21/2006 (3:30 pm)
Joining them all would not speed up the loading, as it would have to be split again in torque, because graphic cards only accept maximum sizes of 1024x1024 or 2048x2048/4096x4096 on newer cards.
#7
03/21/2006 (3:53 pm)
There is an error on the script:
change
print 'Ignoring', file,- 'unknown image format'
to
print 'Ignoring', file, 'unknown image format'
apart of this it's working for me (Python 2.4.1)
#8
03/21/2006 (4:49 pm)
Never mind, my fault. I can't copy and paste today.
#9
03/22/2006 (4:17 am)
Nice job, Edo!

But doesn't T2D (alpha/beta) already do this for us when it loads images? I'm pretty sure it optimizes and groups them automatically even if you give it a bunch of separate image files.

Melv, can you confirm or deny this for me, please?
#10
03/22/2006 (9:58 pm)
I think that any image over 256x256 is split into chunks, for better compatibility with older hardware..
So what's the more efficient way to handle sprites with lots of animation frames?
#11
03/24/2006 (4:47 am)
What I mean is that T2D automatically packs the frames optimally from any source you give it. I don't think putting it into a big spritesheet will necessarily make a difference. Read the plan for the detailed explanation. :)

I'm not saying don't do it--just that it may not be necessary since the engine does it for you.