Sprites - Generating CSS

[Dayo]

I was trying to think of the most efficient way to generate the css needed for sprites today as im working on a small side project that requires them.

Currently i have made a JavaScript object to make the CSS from the options i send i.e.

[js] var map = new sprite({

className: "main-map",

image: "images/sprites/map.png",

columns: 8,

rows: 8,

size: 128,

newSize: 32,

names: [

["sand", "grass-top-1", "sand-top-1", "grass-top-2", "sand-top-2", "grass-top-left", "sand-top-left-1", "grass-right-1"],

["grass", "sand-right-1", "sand-right-2", "grass-right-1", "grass-right-2", "sand-right-3", "grass-bottom-right-1", "sand-bottom-right-1"],

["grass-top-right-1", "grass-right-3", "grass-top-right-1", "grass-left-1", "sand-left-1", "grass-left-2", "sand-left-1", "grass-left-2"],

["sand-top-right-1", "sand-right-4", "sand-top-right-1", "sand-left-2", "grass-top-left-2", "sand-top-right-1", "grass-bottom-right-2", "sand-bottom-right-2"],

["grass-top-3", "grass-right-4", "grass-top-right-2", "grass-left-3", "grass-bottom-1", "grass-bottom-2", "sand-bottom-1", "grass-bottom-3"],

["sand-top-3", "sand-right-5", "sand-top-right-2", "sand-left-3", "sand-bottom-2", "sand-bottom-3", "grass-bottom-left-1", "sand-bottom-left-1"],

["grass-top-4", "grass-right-5", "grass-bottom-right-3", "grass-top-left-3", "grass-bottom-4", "grass-bottom-5", "blank", null],

["sand-top-4", "sand-right-6", "sand-bottom-left-2", " sand-top-left-2", "sand-bottom-4", "sand-bottom-5", null, null]

]

});[/js]

This will then generate the CSS then add it to the DOM in <style> tags.

[css].main-map {

background-image: url('images/sprites/map.png');

background-size: 256px;

height: 32px;

width: 32px;

float: left;

}

.main-map.sand {

background-position: 256px 256px;

}

.main-map.grass-top-1 {

background-position: 224px 256px;

}

.main-map.sand-top-1 {

background-position: 192px 256px;

}

.main-map.grass-top-2 {

background-position: 160px 256px;

}

.main-map.sand-top-2 {

background-position: 128px 256px;

}

.main-map.grass-top-left {

background-position: 96px 256px;

}

.main-map.sand-top-left-1 {

background-position: 64px 256px;

}

.main-map.grass-right-1 {

background-position: 160px 224px;

}

.main-map.grass {

background-position: 256px 224px;

}

.main-map.sand-right-1 {

background-position: 224px 224px;

}

.main-map.sand-right-2 {

background-position: 192px 224px;

}

.main-map.grass-right-2 {

background-position: 128px 224px;

}

.main-map.sand-right-3 {

background-position: 96px 224px;

}

.main-map.grass-bottom-right-1 {

background-position: 64px 224px;

}

.main-map.sand-bottom-right-1 {

background-position: 32px 224px;

}

.main-map.grass-top-right-1 {

background-position: 192px 192px;

}

.main-map.grass-right-3 {

background-position: 224px 192px;

}

.main-map.grass-left-1 {

background-position: 160px 192px;

}

.main-map.sand-left-1 {

background-position: 64px 192px;

}

.main-map.grass-left-2 {

background-position: 32px 192px;

}

.main-map.sand-top-right-1 {

background-position: 96px 160px;

}

.main-map.sand-right-4 {

background-position: 224px 160px;

}

.main-map.sand-left-2 {

background-position: 160px 160px;

}

.main-map.grass-top-left-2 {

background-position: 128px 160px;

}

.main-map.grass-bottom-right-2 {

background-position: 64px 160px;

}

.main-map.sand-bottom-right-2 {

background-position: 32px 160px;

}

.main-map.grass-top-3 {

background-position: 256px 128px;

}

.main-map.grass-right-4 {

background-position: 224px 128px;

}

.main-map.grass-top-right-2 {

background-position: 192px 128px;

}

.main-map.grass-left-3 {

background-position: 160px 128px;

}

.main-map.grass-bottom-1 {

background-position: 128px 128px;

}

.main-map.grass-bottom-2 {

background-position: 96px 128px;

}

.main-map.sand-bottom-1 {

background-position: 64px 128px;

}

.main-map.grass-bottom-3 {

background-position: 32px 128px;

}

.main-map.sand-top-3 {

background-position: 256px 96px;

}

.main-map.sand-right-5 {

background-position: 224px 96px;

}

.main-map.sand-top-right-2 {

background-position: 192px 96px;

}

.main-map.sand-left-3 {

background-position: 160px 96px;

}

.main-map.sand-bottom-2 {

background-position: 128px 96px;

}

.main-map.sand-bottom-3 {

background-position: 96px 96px;

}

.main-map.grass-bottom-left-1 {

background-position: 64px 96px;

}

.main-map.sand-bottom-left-1 {

background-position: 32px 96px;

}

.main-map.grass-top-4 {

background-position: 256px 64px;

}

.main-map.grass-right-5 {

background-position: 224px 64px;

}

.main-map.grass-bottom-right-3 {

background-position: 192px 64px;

}

.main-map.grass-top-left-3 {

background-position: 160px 64px;

}

.main-map.grass-bottom-4 {

background-position: 128px 64px;

}

.main-map.grass-bottom-5 {

background-position: 96px 64px;

}

.main-map.blank {

background-position: 64px 64px;

}

.main-map.sand-top-4 {

background-position: 256px 32px;

}

.main-map.sand-right-6 {

background-position: 224px 32px;

}

.main-map.sand-bottom-left-2 {

background-position: 192px 32px;

}

.main-map. sand-top-left-2 {

background-position: 160px 32px;

}

.main-map.sand-bottom-4 {

background-position: 128px 32px;

}

.main-map.sand-bottom-5 {

background-position: 96px 32px;

}[/css]

How do others go about making the CSS for your sprites?

[ags_cs4]

reviving this topic just to add this site i'v been using

https://www.toptal.com/developers/css/sprite-generator/

tho i dont recommend having lot of sprites in ur site or game, but if it for small size img why not

sure some one will find this helpfull