AnnoZone Forum

Tutorial: Wie man den Bienen den Stachel anmalt!
Bitte hier vorerst nichts posten! Für alle jene unter uns, die den ersten Teil des Tutorials [Wie man den Bienen das Summen verleiht!] bis zum Schluss verfolgt haben, könnte auch dieses Tutorial von Nutzen sein. Ich werde nun ein kurzen Überblick darüber geben, wie man die Icons in Anno 1404 / IAAM oder was weiß ich anpassen kann. Ohne viel auszuholen komme ich gleich zum Wesentlichen und erläutere Euch mal wie Ihr den Bienen den Stachel anmalen könnt!

1. Was haben Icons mit Bienen zu tun? Grundlegendes:
Wenn Ihr in Anno 1404 Icons modden / verändern / hinzufügen möchtet, benötigt Ihr zwei wichtige Programme:
- Das Notepad++
- Paint Shop Pro Photo, Photoshop oder ähnliche Bildbearbeitungsprogramme die das DDS-Plugin installiert haben (das DDS-Plugin für Photoshop ist bei NVIDIA zum Download verfügbar, das DDS-Plugin für Paint Shop Pro Photo X1 oder höher ist nicht so leicht zu besorgen)

WICHTIG: Ihr benötigt leider auch etwas Umgang mit diesen Bildbearbeitungsprogrammen, sprich wie man neue Bilder erstellt, wie man andere öffnet, wie man mit Ebenen umgeht, wie man mit den Auswahlwerkzeugen hantieren kann usw.. Ich kann Euch das unmöglich alles hier erklären!

Der Download für das Notepad++ findet ihr durch Google, Photoshop oder Paint Shop Pro sind kostenpflichtige Programme, das DDS-Plugin dazu natürlich nicht. Wie Ihr das DDS-Plugin installiert, könnt Ihr auch durch Google leicht rausfinden (z.B. für Photoshop). Die Installation für Paint Shop Pro erfolgt im Verzeichnis „Programme / Corel / Corel Paint Shop Pro Photo X2 / Languages / DE / Plugins“ in dieses die Datei „dds.8bi“ einfach eingefügt wird.

Und somit kann der zweite Teil des Tutorials starten, alle anderen Sachen (z.B. der Umgang mit dem RDA-Explorer) könnt Ihr im ersten Tutorial nachlesen.

Vorerst wird diese Tutorialreihe für manche keinen Sinn ergeben. Was will der Autor uns mit diesem Zeug da beibringen? Wenn Ihr diese Frage noch nicht beantworten könnt müsst Ihr einfach noch etwas warten und die kommenden Tutorials mitverfolgen. Aber was haben nun Icons mit unseren Bienen schon wieder zu tun? Ganz einfach, warum sollte man ein Bienenfeld bauen, wenn es keinen Zweck erfüllt? Eben! Die Bienen summen nun auf dem Feld, dann will doch der Adel auch davon profitieren! Deswegen:

2. Das flüssige Gold muss her!
Das spannende an dieser Tutorialreihe ist, dass nur jene belohnt werden, die auch das letzte bis zum Schluss mit verfolgt haben. Denn es fehlt noch so viel Wissen und Können um beispielsweise ein eigenes Anno zu basteln. Ein kleines Stückchen wird jedoch durch diesen Teil der Tutorialreihe wieder preisgegeben. Ich hoffe Ihr habt den ersten Teil des Tutorials durchgeführt und habt nun ein Bienenfeld zur Verfügung. Das wird im späteren Verlauf noch weiter modifiziert. Doch vorerst kümmern wir uns nicht um spieltechnische sondern um graphische Sachen.

Das flüssige Gold war im 15 Jahrhundert wertvoll und ausschließlich dem Adel vorbehalten. Die Rede ist von Honig, einem Produkt das so in Anno1404 nicht wirklich vorhanden ist. Macht nichts, wir werden es im späteren Verlauf der Tutorialreihe hinzufügen und dem Adel als Nahrungsbedürfnis vorschreiben. Im Spiel hat jedes Produkt ein Icon. Fische hat eines, Stein, Werkzeuge, ja sogar das Bienenwachs hat ein niedlich designtes Icon von den Anno-Schöpfern erhalten. Doch wir können in den originalen Dateien von Anno suchen und suchen, wir werden nie ein Icon finden, das unseren Honig darstellt. Da kommen wir ins Spiel!

3. Ist ein Stachel nun gestreift?
Spielt ja überhaupt keine Rolle. Wir brauchen erst einmal ein Bild. Wir wechseln in das Bildbearbeitungsprogramm und kreieren ein neues, kubisches Bild mit transparentem Hintergrund. Die Größe des Bildes soll 1,621 x 1,621 Zentimeter (46 x 46 Pixel) mit einer Auflösung von 72,0 Pixel pro Zoll sein.

Farbetiefe sollte 16Bit sein (für das Zusammenfassen von Ebenen sehr wichtig, da sonst ein transparenter Hintergrund plötzlich weiß wird). Speichert es sofort unter dem Namen „layout.png“ z.B. auf dem Desktop ab. Könnt Ihr einen Raster in Eurem Bildbearbeitungsprogramm erzeugen, erzeugt einen bei 1,621 Zentimeter mit einer Ausrichtungstoleranz von 100 Pixel. Diesen Raster werden wir später unbedingt brauchen. Bei Paint Shop Pro findet Ihr diese zwei Schritte unter:
- Menü / Datei / Neu (um ein neues Bild zu erstellen)
- Menü / Ansicht / Raster, Hilfslinien und Ausrichtungseigenschaften ändern (um die Rastereigenschaften zu deklarieren)
- Menü / Ansicht / Raster (um den Raster auf dem Bild sichtbar zu machen)

4. Auch ein Bär klaut ab und zu Honig!
Nun müssen wir das Icon bemalen! Das kann eigentlich aussehen wie Ihr das gestalten wollt. Einfach die 46x46 Pixel Vorlage hernehmen und sich künstlerisch austoben oder von anderen künstlerisch ab kopieren.

Zeichnet beispielsweise ein Honigtopf wie Ihr ihn im dritten Eintrag von Google Bilder unter dem Stichwort „honig.gif“ findet. Wichtig ist dabei nur, dass der Hintergrund transparent bleibt, somit könnt Ihr im späteren Verlauf dieses Bildchen sowie jedes andere Icon-Bildchen, das Ihr zaubert in unsere Icon-Sammlung kopieren.

Es soll beispielsweise wie unten aussehen bei 10facher Vergrößerung:

5. Ein guter Start in den Tag beginnt beim Frühstück!
Das dachte sich wahrscheinlich auch der Adel im 15. Jahrhundert. Da Honig später ein Bedürfnis darstellen soll, kann dieses auch plötzlich dem Adel nicht mehr zur Verfügung stehen, da keine Waren mehr im Kontor vorhanden sind oder der Spieler so gemein ist und dem Adel komplett den Honig verbietet. Deswegen müssen zwei Icons für den Honig her. Basteln wir ein Icon mit dem berühmten roten „X“.

Wir speichern unser Icon deswegen einmal ab unter dem Namen „honey.png“. Somit ist es ein leichtes es später wiederzufinden. Das Verzeichnis spielt keine Rolle, wählt beispielsweise vorerst den Desktop aus. Nun müssen wir uns aber wirklich bei Anno1404 bedienen und die originalen Dateien durchstöbern um so ein „X“ zu kommen. Wir wollen ja bei unserem Honig das gleiche haben, wie die anderen originalen Icons auch. Wir finden so ein „X“ in folgender Datei, „Anno / maindata / data2 / data / graphics / ui / icons / gui_icon_maps_anno4_sorted_0.dds“, die wir im Bildbearbeitungsprogramm öffnen. Diese DDS-Datei kann durch das Plugin geöffnet werden.

AAAAHHHHHCCCHHHHSSOOOOO, hier sind also ein paar Icons aus dem Spiel versteckt. Und schon haben wir ja das rote „X“ an mehreren Icons gefunden. Wir öffnen zudem nun wieder die Datei „layout.png“ die wir abgespeichert haben.

Schon können wir so ein „X“ kopieren und in unsere Datei „layout.png“ mittels „Als neue Ebene einfügen“ oder „Als neue Auswahl einfügen“ einfügen. Schiebt es an den rechten unteren Rand des Bildes und speichert das ganze unter dem Namen „layoutx.png“ ab, somit können wir jederzeit auf das rote „X“ zugreifen, und können dieses in jedes mögliche Bild hineinkopieren.

Das ganze sollte ca. so aussehen (die Bilder sind in 1000% Darstellung):

6. X + Y = Honig -1
Jetzt haben wir ein „X“ in einer Datei und unseren Honigtopf in einer anderen Datei. Jetzt müssen wir diese beiden zusammenfügen. Habt Ihr schon einmal bemerkt, dass die Icons mit dem roten „X“ kaum mehr Farbe besitzen oder irgendwie getönt sind? Deswegen tönen wir nun unseren Honigtopf mittels der Einstellung „Menü / Effekte / Fotoeffekte / Sepiatönung“ und schrauben da den Alterungsgrad auf 100 rauf. Danach kopieren wir das „X“ in der Datei „layoutx.png“ und fügen es ganz einfach in unser Honigtopfbildchen ein. Falls es nicht richtig ausgerichtet ist, richtet es aus, anhand der Kästchen im Hintergrund wird dies kein Problem darstellen. Nun alle Ebenen zusammenfassen unter dem Menüpunkt „Menü / Ebenen / Einbinden / Alle zusammenfassen“.

Das ganze sollte dann so aussehen und wird unter dem Namen „honeyx.png“ abgespeichert. Es muss ja alles seine Ordnung haben:

...
So haben wir nun alle Icons dir wir brauchen für den Honig. Doch wir können das Bildbearbeitungsprogramm immer noch nicht verlassen. Nun müssen wir wieder ein neues Bild erstellen, die Icon-Sammlung die später die Dateiendungen .png, .dds und .abm tragen soll.

Das ganze Bild sollte 36,133 x 36,133 Zentimeter mit 28,350 Pixel/Zoll groß sein, ergo 1024 x 1024 Pixel.

7. Aerodynamik, Bienen im Alpha-Wind-Kanal
Die Bienen haben ja schon in Teil 1 das Fliegen gelernt, doch waren sie noch nicht im Alpha-Wind-Kanal unterwegs. Doch da kommen wir nun hin. Nun hängt es wahrscheinlich vom Programm ab mit dem Ihr arbeitet. Bei Paint Shop Pro Photo X2 geht das ganz einfach in 10 kleinen Schritten! (Wenn Ihr keinerlei Erfahrung mit Eurem Bildbearbeitungsprogramm habt, werdet Ihr wahrscheinlich verzweifeln, weil ich Euch die Menüpunkte etc. für andere Programme nicht nennen kann; das Prinzip ist jedoch überall das gleiche.)

1. Schritt: Raster im Bild anzeigen lassen mit den vordefinierten Werten (Menü / Ansicht / Raster)

2. Schritt: Honigtöpfe kopieren und mittels „als neue Auswahl einfügen“ (STRG+C danach RechteMausTaste / Einfügen / Als neue Auswahl einfügen)



3. Schritt: Farbtiefe auf 16Bit erhöhen (wenn noch nicht 16Bit; Menü / Bild / Farbtiefe erhöhen / RGB 16Bit/Kanal)

4. Schritt: Sichtbare Ebenen zusammenfassen (der Hintergrund darf dabei nicht weiß werden, er muss transparent bleiben; Menü / Ebenen / Einbinden / Sichtbare zusammenfassen)

5. Schritt: Hintergrund mit dem Zauberstab auswählen

6. Schritt: Auswahl umkehren (Menü / Auswahl / Auswahl umkehren)

7. Schritt: Auswahl maskieren (Menü / Ebenen / Neue Maskenebene / Auswahl maskieren)


8. Schritt: Farbtiefe wieder auf 8Bit verringern (Menü / Bild / Farbtiefe verringern / RGB 8Bit/Kanal)

9. Schritt: Bild als honig.png abspeichern (Menü / Datei / Speichern unter)

10. Schritt: Bild als honig.dds abspeichern (DDS auswählen dann DXT5 auswählen)

8. Ich war noch nie künstlerisch begabt!
Macht nichts! Wir sind ja schon fertig mit dem ganzen graphischen Kram. Wir haben nun eine honig.png und eine honig.dds … es fehlt uns eine honig.abm die wir ganz einfach erstellen. Wir kopieren einfach eine andere .abm-Datei und benennen sie um in honig.abm.

Die zu kopierende .abm-Datei findet Ihr unter „Anno 1404 / maindata / data2 / data / graphics / ui / icons / gui_icon_maps_sorted_0.abm“.

Alle drei Dateien sollten nun in folgendes Verzeichnis verschoben werden „Anno 1404 / data / graphics / ui / icons“ oder für IAAM „IAAM 1404 / data / graphics / iaam / icons“. Ist das Verzeichnis noch nicht angelegt, legt es einfach an.

9. Endspurt! Gleich gibt’s Honig!
Ob es derzeit Sinn macht oder nicht sei dahingestellt, aber wir wollen doch wissen, ob unser Icon auch in Anno angezeigt werden kann und wenn ja auch richtig. Wir haben zwar noch das Produkt „Honig“ in Anno nirgends deklariert, weder irgendwo als Bedürfnis angeführt, doch wir können einfach mal das Icon ausprobieren.

Dazu benötigt Ihr nur zwei Dateien, und dieser Schritt ist wohl der leichteste in diesem Tutorial. Hat man erst die graphische Tortur überstanden, ist die programmiertechnische wirklich ein Klacks. Wir benötigen die Dateien:
- iconfilemap.xml (maindata / patch2 / config / gui)
- icons.xml (maindata / patch2 / config / game)

Es kommt wieder auf Eure Patch-Version an, wo Ihr die Dateien schlussendlich finden werdet. Aber das Prinzip kennt Ihr ja bereits. Nun öffnen wir erst mal die iconfilemap.xml mit dem Notepad++. Wir scrollen ganz runter und kopieren einfach einen vorhandenen Eintrag und fügen diesen wieder ein:
<IconFile>
<IconFilename>data/graphics/iaam/icons/honig.png</IconFilename>
<IconWidth>46</IconWidth>
<IconHeight>46</IconHeight>
<IconFileID>505</IconFileID>
<IsPreloadForced>0</IsPreloadForced>
</IconFile>

Wir laden die honig.png und vergeben dem File eine eindeutige ID, in meinem Fall die Nummer 505. Der Code-Block startet mit <IconFile> und endet mit </IconFile>. Bei <IconFilename> gebt Ihr einfach das Verzeichnis an wo sich Eure Datei befindet und den Dateinamen. Das wars auch schon!

Nun kommen wir zur icons.xml. Für all jene die IAAM spielen, sucht mittels „STRG+F“ den Eintrag „74402“, es ist die GUID für die Ware Stoffe. Für alle die ohne IAAM spielen sucht den Eintrag „50008“, es ist die GUID für die Ware Fisch.

Nun verändern wir einfach die IconFileID bei dem Eintrag und ändern die IconID um auf 0 (für den Honigtopf ohne "X") oder 1 (für den mit dem "X"). Das ganze kann so aussehen:
<i>
<GUID>74402</GUID>
<Icons>
<i>
<IconFileID>505</IconFileID>
<IconIndex>1</IconIndex>
</i>
<i>
<IconFileID>505</IconFileID>
<IconIndex>1</IconIndex>
<VariationID>64</VariationID>
</i>
<i>
<IconFileID>505</IconFileID>
<IconIndex>1</IconIndex>
<VariationID>192</VariationID>
</i>
</Icons>
</i>

10. Im Spiel!
Nun schauen wir einfach ins Spiel rein, ob es geklappt hat. Spiel öffnen … lange warten … und ???? JAAAAA!!! Wir haben Honig!!! Oder tun zumindest im Moment als ob!

Probiert es einfach mal aus!

Viel Spaß und liebe Grüße
Ricco

--> jetzt kann wieder gepostet werden

@Markus1566:

Wart einmal ab, man kann doch nicht gleich alles auf einmal machen und erklären. Das Tutorial ist ja erst im zweiten Teil, bis der Adel den Honig genießen kann, dauert's noch!

Doch bis dahin, lernt einfach mal schöne Icons zu erstellen, den dies ist ein wirklich wichtiger Part für das Spiel, immerhin muss man sie ja fast überall sehen, auf den Schiffen, im Kontor, beim Verladen und manchmal sogar in der Bedürfnispyramide.

Wenn man einmal die Icons erstellen und mit den .cfg-Dateien hantieren kann, dann steht einem völlig neuen Anno nichts mehr im Wege! Du kannst dann das ganze Bedürfnissystem auf den Kopf stellen, komplett neue, einzigartige Waren produzieren und sogar Gebäude errichten die du so in Anno noch nie gesehen hast. Aber das werdet Ihr mit dieser Tutorialreihe alles noch lernen!

lg
Ricco

@Markus1566

Danke! P.s: da du ja anscheinend graphisch nicht gut unterwegs bist, nach eigenen Angaben, habe ich hier was vorbereitet, wie das so aussehen könnte in Anno.



lg
Ricco

so ähnlich, aber da darf ich noch nicht all zu viel verraten gehört alles zu meinem masterplan ^^

@sometimes99

Nein, im zweiten Teil vom Tutorial geht es nur um die Vorbereitungen um später einmal das Warensystem umzustellen.

Es ist sozusagen nur ein Icon-mach-Tutorial, nichts anderes.