Sprite-Generator gesucht. Empfehlungen?

Hallo Ralph,

versuchs mal mit dem SpritePad.

Beste Grüße,
Matthias

Hallo Ralph

Also öffentlich kenne ich keinen solchen Generator.

Das müsste ich mir selbst auch erstmal programmieren.

Oder halt eben auch händisch setzen, wenn es ein einmaliger Vorgang sein sollte.

Mit den Funktionen zu den normalen Bildformaten ist theorethisch alles möglich.

Ãœber diese Theorie hatte ich mich mit Oskar schon mal unterhalten. Möglich das er sowas parat hat und er nur noch wissen müsste welche Bilder da alle rein sollen.

Reduzieren oder halt eben mit Ajax auf einen späteren Zeitpunkt verlagern wäre auch noch eine Möglichkeit den ersten Datentransfer zu minimieren.

Händisch hatte ich so ein Sprite vor längeren mal erstellt. Hat zumindest den kleinen Vorteil du hast dann für das CSS die betreffenden Koordinaten auch parat.

<?php
header(\'Content-Type: image/jpeg\');

$prsks = imagecreatetruecolor(720,360);

$farbe = ImageColorAllocate ($prsks,255,255,255);
imagefill($prsks,0,0,$farbe);

$width = 110;
$height = 78;

$image = imagecreatefromjpeg(\'heft_50_der_einsame_der_zeit_v_ak.jpg\');
imagecopy($prsks,$image,0,0,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_51_jagd_nach_dem_leben_v_ak.jpg\');
imagecopy($prsks,$image,120,0,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_52_der_falsche_inspekteur_v_ak.jpg\');
imagecopy($prsks,$image,240,0,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_53_die_verdammten_von_isan_v_ak.jpg\');
imagecopy($prsks,$image,360,0,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_54_der_zweikampf_v_ak.jpg\');
imagecopy($prsks,$image,480,0,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_55_der_schatten_des_overhead_v_ak.jpg\');
imagecopy($prsks,$image,600,0,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_56_die_toten_leben_v_ak.jpg\');
imagecopy($prsks,$image,0,90,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_57_die_attentaeter_v_ak.jpg\');
imagecopy($prsks,$image,120,90,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_58_attacke_aus_dem_unsichtbaren_v_ak.jpg\');
imagecopy($prsks,$image,240,90,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_59_rueckkehr_aus_dem_nichts_v_ak.jpg\');
imagecopy($prsks,$image,360,90,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_60_festung_atlantis_v_ak.jpg\');
imagecopy($prsks,$image,480,90,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_61_der_robot_spion_v_ak.jpg\');
imagecopy($prsks,$image,600,90,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_62_die_blauen_zwerge_v_ak.jpg\');
imagecopy($prsks,$image,0,180,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_63_die_mikro_techniker_v_ak.jpg\');
imagecopy($prsks,$image,120,180,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_64_im_zeit_gefaengnis_v_ak.jpg\');
imagecopy($prsks,$image,240,180,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_65_ein_hauch_ewigkeit_v_ak.jpg\');
imagecopy($prsks,$image,360,180,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_66_waechter_der_verbannten_v_ak.jpg\');
imagecopy($prsks,$image,480,180,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_67_zwischenspiel_auf_siliko_v_v_ak.jpg\');
imagecopy($prsks,$image,600,180,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_68_hetzjagd_durch_die_dimensionen_v_ak.jpg\');
imagecopy($prsks,$image,0,270,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_69_im_halbraum_lauert_der_tod_v_ak.jpg\');
imagecopy($prsks,$image,120,270,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_70_die_letzten_tage_von_atlantis_v_ak.jpg\');
imagecopy($prsks,$image,240,270,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_71_fehlsprung_der_tigris_v_ak.jpg\');
imagecopy($prsks,$image,360,270,0,0,$width,$height);
$image = imagecreatefromjpeg(\'heft_72_die_gesandten_von_aurigel_v_ak.jpg\');
imagecopy($prsks,$image,480,270,0,0,$width,$height);

imagejpeg($prsks);
imagedestroy($prsks);
?>

Wenn ich sowas jetzt händisch machen würde wäre wohl der Ansatz das ich SVG einsetze um das alles zu positionieren. Und mir es danach in das betreffende Bildformat umwandeln würde.

Das könnte man dann auch automatisieren.

Um wieviel Dateien geht es denn überhaupt? Vielleicht kann ich mich morgen mal kurz hinsetzen und dir das Sprite auf diesem Weg bauen.

Eigentlich ist dann nicht mehr nötig als ein Array was die URL und die gewünschten Koordinaten enthält.

Wenn man das dann noch automatisieren wollte müsste man die Weite oder Höhe des Sprites zumindest vorgeben auch etwaige Abstände und auch einen gewünschten Hintergrund.

Langsam reizt mich der Gedanke ohne Dateien per Formular zu laden sondern nur Urls diese in einem SVG automatisch zu positionieren und in dem betreffenden Format was ausgegeben werden soll als dataurl einfach auszugaben.

Dann könnte der andere danach sich diesen String holen.

Gruß
Jörg

Hallo Matthias, hallo Jörk,

danke für euere prompte Unterstützung!

@Matthias
"SpritePpad" habe ich mal probiert, aber ich bekomme Drag\'n Drop nicht hin! Sicherlich mein Fehler.

@Jörg
Ich denke Dein Ansatz hat durchaus was für sich. Wenn man dann z.B. ein Verzeichnis als angeben kann, welches abzuarbeiten ist, klappt das sicher. Aber für die komprimierte Positionierung, bei unterschiedlichen Grafik-Größen, brauchst Du dann wieder etwas Logik. In Deinem Beispiel hattest Du einheitliche Image-Größen, da ist es dann etwas einfacher.

Ich werde mich jetzt mal an Jörg\'s Beispiel orientieren und versuchen, meine Grafiken von der Größe her einheitlicher zu gestalten. Denn dann kann man 2-3 Sprite-Files machen und einheitlich dimensionierte Bilder zusammenfassen und verschwendet keinen Platz.

Alternativ schaue ich aber auch mal noch spritegenerator.codeplex.com an. Denn dieser Generator unterstützt variable Größen - "Nachteil", es ist ein Tool, welches man auf dem PC installieren muß.

Hallo Ralph

Du wenn du mich noch etwas basteln lässt dann denke ich das ich schon einen guten Ansatz gefunden habe.

Deshalb hatte ich auch geschrieben das ich das Ganze mit SVG aufbauen würde.

Vielleicht hilft dir ja auf die schnelle folgendes Beispiel.

Wenn du das entsprechend modifiziert hast so wie du dir das vorstellst kann ich es dir immer noch in ein Format deiner Wahl verwandeln.

Also die Bilder waren nur ein einem einheitlichem Format weil sie so bereits vorlagen. Sonst hätte ich das Ganze halt entsprechend modifiziert.

<?php$weite = \'1000\';
$hoehe = \'1000\';

$test = \'/bild/ich.jpg,100,100,100,100
/bild/ich.jpg,200,150,100,200
/bild/ich.jpg,100,300,200,100
/artikel/seo/mammuthanull.svg,100,300,200,100
/bild/ich.jpg,500,100,100,100
/artikel/seo/mammuthanull.svg,500,500,300,300\';

$bild = preg_match_all(\'#([^\\s]+),([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})#\',$test,$treffer);

$u = $treffer[1];
$x = $treffer[2];
$y = $treffer[3];
$w = $treffer[4];
$h = $treffer[5];

$anzahl = count($x);

$sprite = \'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 \'.$weite.\' \'.$hoehe.\'" xml:lang="de">\';
$sprite .= \'<rect fill="rgba(100,100,100,0.2)" x="0" y="0" width="\'.$weite.\'" height="\'.$hoehe.\'" />\';
for ($i = 0;$i<$anzahl;$i++) {
$sprite .= \'<image x="\'.$x[$i].\'" y="\'.$y[$i].\'" width="\'.$w[$i].\'" height="\'.$h[$i].\'" xlink:href="\'.$u[$i].\'" />\';}
$sprite .= \'</svg>\';
?>

Vorteil des Ganzen für mich ich kann damit dann nicht nur positionieren sondern auch gleichzeitig strecken.

Als Angabe brauche ich halt dabei eine Komma separierte Liste momentan die als erste Angabe die URL enthält. Dann die Position X und Y koordinaten und dann die Weite und Hoehe des Bildes.

Dann könnte man auch Textpassagen drüberlegen und einen Hintergrund bestimmen momentan zuerst mal farblich und mit Angaben zur Transparenz aber da ist noch mehr möglich.

Momentan schränke ich das Ganze darauf ein maximale Werte von 999 in der Hoehe und der Breite zu haben.

Die Idee hat etwas mal sehen wie weit ich sie entwickle. Wer das Beispiel jetzt nachvollziehen möchte müsste halt eben die URL entsprechend modifizieren.
Also ich habe jetzt nicht geschaut wo ich an Performance noch gewinnen kann.

Zumindest sollte dabei dann jedes Graphikformat theorethisch möglich sein einzubinden.

Und ich kann mir vorher anschauen welche Formate ich erlaube oder auch nicht.

Gruß
Jörg

Hallo Ralph,

gut bewertet:

de.spritegen.website-performance.org

css-sprit.es

csssprites.com

spriteme.org

Hm Ralph,
im Photoshop selber basteln ist keine Alternative? Das ist das, was mir jetzt so einfällt. Hat man ständig dieselben kleinen Grafiken, dann kann man Sprite und dazugehöriges CSS immer wieder einsetzen.

Gruß. Petra