ST0RM - Tile & Icon Composer - Einfaches Online-Tool um Rastergrafiken neu zusammenzustellen. Pixelgenau per Klick. Kein fummeliges Verschieben. Raster frei wählbar.

  • ST0RM Tile & Icon Composer

    Link:

    ST0RM Tile & Icon Composer


    Hintergrund:

    Dieses Tool habe ich geschrieben, weil ich keine Lust hatte, beim Zusammenstellen von Icon-Sets oder Tile-Sheets

    per GIMP jeden Block einzeln zu kopieren und an die richtige Position zu fummeln.


    Es handelt sich um ein Online-Tool, welches keinerlei Installation benötigt. Auch eine Registrierung ist nicht erforderlich.


    Das Tool ist somit sofort einsatzbereit!


    Es werden keine Daten auf den Server kopiert, sondern alles läuft im eigenen Browser ab (per JavaScript).


    Features:

    • Einfach!
    • Laden von Quellgrafiken mit beliebiger Größe
    • Frei wählbares Block-Raster (z.B. 32x32 oder 48x48 oder 48x96, etc...)
    • Laden einer Zielgrafik, um einzelne Elemente verändern zu können
    • ...oder Erstellen eines neuen leeren Zielgrafik mit einstellbarer Blockanzahl (Höhe und Breite)
    • Einstellbarer pixelgenauer Offset beim Einfügen (z.B. wenn der Block etwas verschoben oder auf 2 Blöcke aufgeteilt werden soll)
    • Mehrere aneinander liegende Blöcke können gemeinsam kopiert werden
    • Anzeige von Block-ID und / oder Hilfsgitter in Blockgröße ein-/ausschaltbar
    • Beim Speichern wird nichts überschrieben! Es wird stattdessen immer eine Datei mit dem Namen "result.png" heruntergeladen (eigentlich nur aus dem Browser heraus gespeichert)


    Screenshots:


    Einstellbare Blockgröße:


    Zielgrafik laden oder neu erstellen:


    Auswahlanzeige:


    Gesamtüberblick:



    Lizenz:

    Frei nutzbar, solange der Link funktioniert.

    Das Tool selbst darf nicht kopiert oder verändert oder werden.

    (Aber der Link darf gerne weitergegeben werden)

    Die Nutzung ist gleichzeitig eine Einverständniserklärung, dass keinerlei Haftung übernommen wird.

    Wenn Teile des Programmcodes benötigt werden, ist direkt bei mir anzufragen.


    Viel Spaß damit!

    Euer ST0RMTiger

    - Part of the Team -

    41aabebd-0fed-4e21-90ab-60dcfc4b6c3f_rw_600.png?h=55db7decfd7088194d812413fe524b23


    1791_Challenge_BurgMap.png1791_Event_Hallow21.png

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von ST0RMTiger ()

  • Richtig cooles tool.


    Wobei ne Version auch als offline Version bestimmt gefragt wäre, da es einige gibt die Mal unterwegs mit dem Laptop bissl machen hier und da, und da ist mal auch Mal ohne Internet



    Das beste ist ja die Entstehungsgeschichte.

    Er kommt in Discord, fragt ob sowas gibt. Bekommt Nein als Antwort, zack macht ers einfach selbst. Awesome

    Wenn du mich unterstützen willst, kaufe mir gern einen

    kofi2.png

  • Danke für eure lieben Kommentare :)


    Ich hab mal die verrückten Dateianhänge gelöscht. Das ist mir vorhin gar nicht aufgefallen.


    Cosmo : Wenn einer mich nach ner Offline-Version fragt, würde er sie sicher bekommen.


    Da ich keine Frameworks benutze, kann man zur Not auch mit dem kurzen Hotspot die App laden. Für die Funktion ist kein Netz notwendig.


    Ich habe aber wirklich nichts auf dem Server laufen, daher schätze ich, dass man die sogar einfach runterladen könnte mit "Seite Speichern unter" (Option "Website vollständig" wählen) ;)


    - Part of the Team -

    41aabebd-0fed-4e21-90ab-60dcfc4b6c3f_rw_600.png?h=55db7decfd7088194d812413fe524b23


    1791_Challenge_BurgMap.png1791_Event_Hallow21.png

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von ST0RMTiger ()

  • Mal ein Beispiel:

    Sagen wir mal, ich möchte ein Tileset jede Grafik in 16x16px zerstückeln und diese dann um jede 16x16px breite Spalte und Zeile jeweils in einem Abstand von 16px in der x-Richtung und in der y-Richtung versetzen.

    Also quasi ein Tileset in seiner Grafik komplett auseinanderziehen mit genügend Abstand (leerer Raum).

    Wäre dies tatsächlich möglich?

  • Sagen wir mal, ich möchte ein Tileset jede Grafik in 16x16px zerstückeln und diese dann um jede 16x16px breite Spalte und Zeile jeweils in einem Abstand von 16px in der x-Richtung und in der y-Richtung versetzen.

    Also quasi ein Tileset in seiner Grafik komplett auseinanderziehen mit genügend Abstand (leerer Raum).

    Wäre dies tatsächlich möglich?

    Wenn ich den Bandwurmsatz mit meiner beschränkten Kapazität an RAM im Kopf richtig verstehe: Ja, du musst aber ne Menge klicken.


    Im Grunde nur das Raster auf 16x16 einstellen und die Zieldatei mit doppelt so vielen Blöcken ausstatten und dann immer schön eins nach dem anderen hinsetzen ;)


    [EDIT]: Du könntest das Klicken drastisch reduzieren (Aufwand in Abhängigkeit der Größe von quadratisch auf linear), indem du erst alle Zeilen im Abstand von 1 Block versetzt, das Bild runterlädst und dann nochmal die Spalten in Angriff nimmst. Dann kannst du jeweils ganze Spalten/Zeilen mit der Multiauswahl kopieren und ins neue Bild setzen.

    - Part of the Team -

    41aabebd-0fed-4e21-90ab-60dcfc4b6c3f_rw_600.png?h=55db7decfd7088194d812413fe524b23


    1791_Challenge_BurgMap.png1791_Event_Hallow21.png

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von ST0RMTiger () aus folgendem Grund: Verbesserung

  • Kurzes Update:


    Habe soeben einen Bug beseitigt, der dazu führte, dass das Gitter bei der Reduzierung der Block-Größe unter 32x32 nicht über das ganze Bild reichte (die Reihen- und Spalten-Anzahl wurde einfach nicht neu berechnet).


    Komisch, dass das bisher niemanden gestört hat :/


    Also jetzt kann man jedenfalls zum Beispiel auch 16x16 Tiles vernünftig bearbeiten :)


    ANMERKUNG: Da die meisten Browser den Chache aktiviert haben und daher das Programm aus dem Speicher laden, anstatt neu von der Homepage, müsst ihr einmal den Chache leeren oder deaktivieren, um die neue Version zu sehen. Kann man zum Beispiel in Chrome mit Strg.+I machen, dann werden die Entwicklertools geladen, wo der Chache deaktiviert sein sollte. Währenddessen das offen ist, einfach die Seite neu laden. Dann kann man die Entwicklertools wieder schließen und hat das neue Programm. Oder in den Browsereinstellungen irgendwo suchen. Wo das da ist, weiß ich aber nicht ;)


    Viele Grüße!

    ST0RMTiger

    - Part of the Team -

    41aabebd-0fed-4e21-90ab-60dcfc4b6c3f_rw_600.png?h=55db7decfd7088194d812413fe524b23


    1791_Challenge_BurgMap.png1791_Event_Hallow21.png

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von ST0RMTiger () aus folgendem Grund: Ergänzung

  • Wollte das jetzt auch mal probieren, allerdings komm ich nicht so richtig klar :/

    Mein Vorhaben:

    Sprites mit 24 x 32 so neu anordnen, dass ich sie auf ein 48 x 48 Tileset kriege.

    Ich hab bei Block Width/Height die 24 x 32 angeben, die Source Datei geladen und kann nun jeden Sprite einzeln anklicken - das ist schon mal echt hammer!

    Aber ich kriege die Zieldatei nicht auf 48. Er zeigt mir das Raster auf beiden Seiten in 24 x 32 und die Zieldatei ist auch ungefähr viermal so groß wie die Source.

    Was mach ich falsch?

  • Hey Zion ,


    eigentlich machst du alles richtig. Die Größe, also Blockanzahl in Breite und Höhe, der Zieldatei kannst du gesondert einstellen (X Block Count und Y Block Count).


    Die Blockgröße selbst kannst du in der Zieldatei aber tatsächlich nicht anders setzen als die der Source. Das liegt daran, dass dafür das Tool bisher nicht gedacht war. Du machst also nichts falsch in dem Sinne.


    Bisher ging es immer um das reine neu Anordnen (im selben Format oder ganze Vielfache von diesem Format).



    ABER:

    Ich verwende das Tool trotzdem so wie du es auch machen willst.


    Ich klicke dazu einfach auf einen Ziel-Block mit genügend Abstand und verwende die Offset-Funktion.


    Also wenn du z.B. ein Tile aus 24x32 mittig in das 48x48 Raster bringen willst, würdest du einen Offset X von 12 und Y von 8 einstellen und irgendwo in die Zieldatei einfügen, wo genug Platz ist.


    In dem aktuellen Raster liegt das Bild dann auf mehreren Blöcken.

    Um dann alles im neuen Raster von 48x48 richtig anzuordnen, lädst du das Ergebnis erstmal runter und öffnest das wiederum als Source. Jetzt kannst du das Raster auf 48x48 umstellen und solltest die Tiles nun in die endgültige Position bringen können.


    Alternativ geht es auch anders rum, vielleicht sogar ein wenig intuitiver: Setze einfach direkt das Raster auf 48x48 und nutze die Offset-Funktion, um die Tiles in die Zieldatei einzufügen. Dabei musst du nur auffassen, dass du auch da erstmal genug Abstand verwendest, um nicht Bereiche in benachbarten Blöcken zu überschreiben. Du hast in diesem Fall mehrere (z.B. angeschnittene) Tiles in deinem Zielblock, das kannst du dann in einem einfachen Grafikprogramm aber leicht wegraddieren. (Oder du fügst leere Blöcke mit negativem Offset daneben so ein, dass die leeren Bereiche gerade so den Überhang abschneiden. Das ist aber vielleicht etwas fummelig. Aber so mache ich es meistens).


    Klingt vielleicht umständlich, aber wenn ich das Programm erweitern würde, müsste das Programm wissen, was es mit den 24x32 Tiles machen soll, wenn du sie in einem 48x48 Raster anordnen willst.


    Du könntest ja auch wollen, dass es skaliert wird, oder dass es oben links ausgerichtet ins neue Raster eingefügt werden soll, oder rechts unten, etc. Verstehst? Da gäbe es 1000 Möglichkeiten.


    Aber es wäre vielleicht ein Gedanke für ein (sehr großes) Update. Also Danke für dein Feedback!

  • Danke für die Aufklärung :)

    Da ich für das aktuelle Vorhaben keine großen Ansprüche hatte, hab ich es mittlerweile selber gelöst. Tatsächlich war auch ein Skalieren mit im Vorgang drin, das habe ich über Gimp vorgenommen.

    Stimmt schon, dein Tool weiß ja nicht, wo die Pixel hinsollen. Von daher wohl etwas umständlich zu lösen, wenn du das mit einprogrammieren wolltest.

    Ich hab halt auch immer so ausgefallene Zwecke :D:D Tut mich sorry.

    Dein Tool ist super :)

    Ich bin selber schuld, wenn ich immer alles zweckentfremden will :D

  • Haha ^^


    Nein nein, das ist ja verständlich und ich habe es mir wirklich vorgenommen, sowas auch mit einzubauen :) Wird nur etwas dauern, weil es eben auch etwas umfangreicher ist.


    Viele Grüße!