multiple images to sprite combiner

For discussions about programming, programming questions/advice, and projects that don't really have anything to do with Puppy.
Post Reply
Message
Author
User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

multiple images to sprite combiner

#1 Post by technosaurus »

I wanted a smaller tool to make css sprites for faster page loading

usage: spritify image1 image2 ... >log.txt (output file is sprite.png)

Code: Select all

#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include <mtpixel.h>

int main( int argc, char *argv[] ){
int i=0,height=0,width=0,y=0;
mtpixel_init();
mtImage *imglist[argc];
argc--;
do{	imglist[i] = mtpixel_image_load( argv[i+1] );
	height+=imglist[i]->height;
	if (imglist[i]->width > width) width=imglist[i]->width;
} while (++i < argc);
imglist[argc]=mtpixel_image_new_rgb(width,height);
imglist[argc]->palette.trans=0;
i=0;
do{	if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED)
		mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y);
	else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y);
	printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y);
	y+=imglist[i]->height;
	mtpixel_image_destroy( imglist[i] );
}while (++i < argc);
	mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 );
mtpixel_quit();
return 0;
}
Attachments
spritify-0.2.pet
updated background to translucent
removed freetype dependency from the pet
(51.96 KiB) Downloaded 893 times
spritify-0.1.pet
(56.56 KiB) Downloaded 863 times
Last edited by technosaurus on Wed 07 Nov 2012, 15:12, edited 1 time in total.
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
Flash
Official Dog Handler
Posts: 13071
Joined: Wed 04 May 2005, 16:04
Location: Arizona USA

#2 Post by Flash »

Seems like this belongs in the Additional software section, perhaps under Graphics? I'll move it there if there's no objection.

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#3 Post by technosaurus »

It is a graphics tool, really one that game or web programmers would mostly use. I figured I would get more relevant feedback here... for instance I should probably output the printed results in proper css format, but I was too tired to Google it.
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
Flash
Official Dog Handler
Posts: 13071
Joined: Wed 04 May 2005, 16:04
Location: Arizona USA

#4 Post by Flash »

Okay, I'll leave it here for now. :)

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#5 Post by technosaurus »

Here is an example that reduced the overall download size 3 to 1 and the number of requests from 30 to 1.

just doing the first couple of images for demo (note that the first image does not require as many parameters - its a good idea to use your most common one first)

Code: Select all

<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"><title>test</title><style>

#i{height:24;width:24;background:url(sprite.png)}
#i.chat{background-position:0px -24px;}

</style></head><body>

<img id="i"><img id="i" class="chat">

</body></html>
Attachments
sprite.png
(28.27 KiB) Downloaded 1223 times
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

seaside
Posts: 934
Joined: Thu 12 Apr 2007, 00:19

#6 Post by seaside »

technosaurus,

That is a handy generator. Thanks.

Aside from Web programming, do you see any potential for using this in some way on the desktop?

Regards,
s

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#7 Post by technosaurus »

It is very common to use sprites in game programming and it _could_ be used on the desktop by generating svg images with a viewport (or is it viewbox? - I get them confused)... however it makes things more complicated, which is probably why I have never seen it on the desktop (it is used to some extent in web programming). It would be an interesting addition to my bashbox and multicall binary projects ... a distro with 1 binary, 1 script and 1 image, with everything generated on the fly. I wrote an really simple svg based game framework a while back that theoretically could use the sprites for character movements and such.

Currently the output (besides the sprite itself) is just the relevant image data: original image name, width, height and y offset in a shell parse-able format, but I am interested in feedback regarding a standard format for different use cases.

for css something like:
.img{float:left;padding:0 0 0 0;display:block;background:url(sprite.png)}
.image_name{height:image_height;width:image_width;background-position:0-y_offset}
and sample code for inclusion:
<div class="img image_name"></div>

possibly something else for svg or direct use in javascript

Code: Select all

fprintf(stdout, ".png{float:left;padding:0 0 0 0;display:block;background:url(sprite.png)}\n");
fprintf(stdout, ".%s{height:%d;width:%d;background-position:0-%d",spritename(argv[i]),height,width,yoffset};
fprintf(stderr, "<div class=\"png %s\"></div>",spritename(argv[i]));
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
greengeek
Posts: 5789
Joined: Tue 20 Jul 2010, 09:34
Location: Republic of Novo Zelande

#8 Post by greengeek »

I've often wondered if it's possible to make the desktop (or even a rox window) behave like a webpage so that when you hover over a directory (folder) something like a sprite or image or sticky note pops up to display/describe the owner or contents or purpose or copyright text of that folder. (rather than just a one line comment).

(just a wild idea out of left field...)

ps: this idea now copyrighted :-)

User avatar
Keef
Posts: 987
Joined: Thu 20 Dec 2007, 22:12
Location: Staffordshire

#9 Post by Keef »

You get that behaviour with Rox Apps.
Go to /usr/local/apps and have a hover.
You can put any old nonsense in the AppInfo.xml and it will be displayed.

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#10 Post by technosaurus »

rox does it on click, not hover
If you want to hack cool hover windows into your favorite gtk app, use
http://developer.gnome.org/gtk3/3.2/Gtk ... tip-window

you can add whatever image/effects you want to each window and tell gtk to use the custom window instead of the standard tooltip (btw - tooltips can already use Pango markup for color, font, size etc...)
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
Keef
Posts: 987
Joined: Thu 20 Dec 2007, 22:12
Location: Staffordshire

#11 Post by Keef »

I can hover to my heart's content, no clicking necessary. Don't have a magic carpet, jet-pack or mutant super-powers either.

User avatar
greengeek
Posts: 5789
Joined: Tue 20 Jul 2010, 09:34
Location: Republic of Novo Zelande

#12 Post by greengeek »

Keef wrote: Don't have a magic carpet, jet-pack or mutant super-powers either.
You have superpowers. I've noticed it before. (mind you everyone here has superpowers compared to me...). I wonder if there are different versions / setups of Rox?

I like the idea of the gtk-widget-set-tooltip-window - it sounds like that might be the thing I'm looking for. In my mind's eye I was visualising a semi-transparent hover-window showing an avatar of the directory owner and a blurb of text describing the general nature of the contents. ("You don't want to enter here Luke Skywalker..."). I'll add this to my list of things to tinker with. (it's getting to be a pretty long list...)

User avatar
GustavoYz
Posts: 883
Joined: Wed 07 Jul 2010, 05:11
Location: .ar

#13 Post by GustavoYz »

Hmmm...
I dont have mtpixel.h. Google isn't helping me out, so where can I get it?
Thanks.

User avatar
Keef
Posts: 987
Joined: Thu 20 Dec 2007, 22:12
Location: Staffordshire

#14 Post by Keef »


User avatar
GustavoYz
Posts: 883
Joined: Wed 07 Jul 2010, 05:11
Location: .ar

#15 Post by GustavoYz »

Keef wrote:It's in the mtcelledit src
http://code.google.com/p/mtcelledit/downloads/
Thanks!

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#16 Post by technosaurus »

@Gusto - have you done anything with the sources?
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
GustavoYz
Posts: 883
Joined: Wed 07 Jul 2010, 05:11
Location: .ar

#17 Post by GustavoYz »

No, I had no time yet...
Wanted code some svg/xml output (just pointing to web usage), but still a to-do.

Is a very nice little app.

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#18 Post by technosaurus »

here is a tarball of sprite of the tango icon theme. It contains 213 icons each of 16x16, 32x32 & 48x48 (639 total) in 130kb. The sprites are 19, 43 and 67kb respectively

The tarball also contains an ordered list of icons. You can use it for calculating offsets based on the line # and icon size

I need to figure out how to use the whole transparency layer rather than just setting a single transparency color
Attachments
tango.tar.gz
(130.02 KiB) Downloaded 309 times

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#19 Post by technosaurus »

here is the tango set as a single sprite sheet optimized with optipng-zopfli (zopfli compresses a bit better)
it _should_ follow the naming in the previous tarball for adding to your css ...x offset is 0, 48 or 64 and a y offset of 6846 for the 16px icons
Attachments
tango_i.tar.gz
16, 32 and 48 separated out
(96.83 KiB) Downloaded 224 times
tango.png
(135.21 KiB) Downloaded 234 times
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#20 Post by technosaurus »

With this you can get grayscale with a filter (this one also contains a viewBox to get the 2nd 48x48 sprite)

Code: Select all

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
<filter id="greyscale"><feColorMatrix type="saturate" values="0"/></filter>
<image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

Post Reply