Maladin
Welt-Boss
- Mitglied seit
- 17.06.2007
- Beiträge
- 3.069
- Reaktionspunkte
- 26
- Kommentare
- 73
- Buffs erhalten
- 10
In der Betaphase von BLASC 2.5, an der ich teilnehmen durfte, habe ich zum Test eine BLASC Skin erstellt. Ich frage mich immer noch, warum es nicht mehr Bastler gibt. Daher habe ich mich an eine Anleitung zum Bau eigener Designs gemacht. Ich hoffe es inspiriert euch.
Als erstes eine Warnung: Krawatten können in drehenden Walzen der Werkhalle zu ernsten Erwürgungen führen.
1. Vorbereitung
Das Ziel dieser Anleitung ist, euch zu zeigen, was nötig ist, um eine eigene BLASC Skin zu erstellen. Das Ergebnis sieht dann wie folgt aus.
BLASC Skins bestehen aus 5 Dateien.
Der Name des Unterordner (in diesem Fall "tutorial") ist auch der Name des Designs in der BLASC Skin Verwaltung.
Für alle Farbdefinitionen wird eine hexadezimale Schreibweise verwendet. Manche kennen das aus Beschreibungssprachen wie HTML (fast genauso).
Zum Beispiel:
Eingeleitet werden die Farbdefinitionen vom color Tag und beginnen mit einem $. Jetzt folgen 4 Hexadezimale Ziffernpaare hier: 00F0F0F0
Das erste Paar steht für Alpha, eine Funktion die noch nicht eingebaut ist - deshalb hier mit 00 definiert. Es folgen Blau, Grün und Rot. Danach wird der color Tag wieder geschlossen.
Am Ende dieses Beitrages, findet ihr einige Links zu Helferlein, für die Umrechnung der Farbwerte.
2. Die Grafiken
Wir beginnen mit der Skin (links) und einer Maske (rechts), so das wir die megaheftig General Transparenz nutzen können. Warum machen wir das? Weil wir es können
Um eine transparente Skin zu erstellen, nehme man ein Bild (wie das vom freundlichen Goblin) und erstelle davon eine Kopie. Diese bearbeiten wir so, das alle transparenten Bereiche weiß und alle sichtbaren Teile des Bildes schwarz sind. Diese Kopie speichern wir im Bitmap Format ab (unsere Maske) - die Skin selbst ist eine JPG Datei.
In dem Tutorial Dateipaket ist auch eine XCF Datei. Diese ist meine Grundlage zur Bearbeitung gewesen. Sie kann mit GIMP geöffnet werden.
Die Fortschrittsanzeige ist eine seeeehr kleine Datei. In diesem Beispiel ist sie 1 * 5 Pixel groß. Stark vergrößert, sieht sie dann wie folgt aus.
Der Fortschrittsbalken wird dann im Betrieb von links nach rechts, in die Länge gezogen.
Last but not least - wir benötigen ein Vorschaubild. Dieses wird dann im BLASC Client angezeigt, damit jeder weiss, wie toll unsere Skin aussieht.
Wenn wir das alles beisammen haben, können wir uns an die nackten Zahlen machen (das Wort nackt ist prima, um eure Aufmerksamkeit wach zu halten).
3. Die XML Datei
Ich behaupte, das selbst Leute ohne HTML XML Wissen mit der Konfiguration der Skin in der XML Datei, klar kommen. Die Formatierungen unserer BLASC Skin stehen immer in einer Datei, die skin.xml heisst - bitte achtet darauf.
Zur Bearbeitung der skin.xml reicht ein einfacher Texteditor (In Windows Starmenü -> Ausführen -> "notepad"). Öffnet unsere XML Datei und schaut sie euch an. Am besten lest ihr die Texte hier in der Anleitung, die Code Schnipsel und dann schaut ihr es euch in der skin.xml an
3.1. Der Kopf der Skin Datei
Eingeleitet wird die skin.xml mit dem skin Tag.
Danach schreiben wir mal, das diese Skin von uns erstellt wurde, um welche Version es sich handelt und runden das Ganze mit einer kleinen Beschreibung ab.
Jetzt brauchen wir unser Vorschaubildchen, welches in diesem Fall die prev.jpg ist.
Nun kommen wir zum Layout. Dieses wird in der skin.xml mit deim layout Tag eröffnet.
Beginnen wir mit den Bildern, welche die Grundlage unseres Designs sein sollen. Zwischen dem öffnenden und schliessenden form Tag definieren wir, wie groß unser Skin Bild ist (hier 400 * 190 Pixel), mit <width> und <height>. Wir geben an, wie unser Grundbild (hier skin.jpg) heißt und die dazugehörige Maske (mask.bmp).
Die Skin selbst kann auch im GIF Format gespeichert werden, aber die Maske muss eine Bitmap (BMP) sein.
Der Grundstein ist gesetzt. Jetzt kommen wir zu den Texten.
3.2. Die Textmodule
Als nächstes folgen 3 XML Container, welche die Textmodule definieren.
Diese sind alle gleich aufgebaut. Sie beginnen mit der Definition der Schrifart, Größe und Farbe (hier die Schriftart "Arial", 13 Points groß und hellgrau) - beachtet diesen Teil mit </font> zu beenden.
Jetzt wird definiert, wo der Text in unserer Skin platziert ist und seine Maximalgröße (hier 300 Pixel).
Die Position des Textes, ist in diesem Beispiel 10 Pixel vom linken Rand der Skin und 8 Pixel von oberen Rand.
In unserem Beispiel, sieht es dann wie folgt aus.
3.3. Der Fortschrittsbalken
Unsere kleine Datei progress.jpg soll sich jetzt für unsere Skin strecken. Das ganze wird in der skin.xml zwischen den progressbar Tags definiert.
Wir müssen jetzt wissen, wie hoch unser Fortschrittsbalken ist (hier 5 Pixel), wo er in unserer Skin platziert werden soll (mit "wo" ist die Position der oberen linken Ecke des Fortschrittsbalkens gemeint - hier 5 Pixel vom linken Rand und 140 Pixel vom oberen Rand der Skin) und wie weit er sich für uns strecken soll (hier 250 Pixel). Als letztes dann der <image> Tag, der definiert, wie unser Fortschrittsanzeigebild heißt (hier progress.jpg).
NACKT (und - wieder wach?)
3.4. Einmal Popupt - nie mehr ...
Reimen war noch nie meine Stärke.
Einen Teil der BLASC Skin, kennen meist nur die News Plugin Nutzer unter euch, weil er so schnell wieder verschwunden ist. Das kleine Popup, welches bei Neuigkeiten oder nach dem Updaten eurer Charaktere auf buffed, kurz aus der unteren rechten Ecke hopst.
Zwischen den <popup> Tags kann man definieren in welcher Farbe es erstrahlen soll.
Das Popup besteht aus 2 Teilen - dem sogenannten Caption (auf dem Bild der dunkle Balken am oberen Rand) und dem Window. Beginnen wir mit der Farbdefinition der Caption. Es werden 2 Farben definiert die einen Verlauf bilden <PopupCaptionFrom> und <PopupCaptionTo>. Die Farbe, definiert für "From", ist am oberen Rand und verläuft nach unten, zu der Farbe definiert für "To".
Das selbe machen wir jetzt noch für das Window. Das ist der Teil, in dem der Text steht, die News oder die Meldung des Uploads.
Der Rahmen am rechten Rand des Popups wird dann noch wie folgt definiert:
Jetzt definieren wir, wie lange das Popup sichtbar sein soll (Angabe in tausendstel Sekunden).
Jetzt ist es gleich soweit. Wir haben die skin.xml abgearbeitet. Vorher definieren wir aber noch die Schriftart, Schriftgröße und Schriftfarbe im Popup - für Headerfont (also die Überschrift des Popups) und Font (dem Text des Popups).
3.5. Der letzte Schliff
Jetzt schliessen wir das Layout und die Skin.
Die skin.xml kann jetzt gespeichert und geschlossen werden. Anhang anzeigen 2472
4. Fehlerquellen
Wenn wir einen Tag nicht geschlossen haben, kann es zu Fehlern kommen, die sehr lästig werden. Es ist sehr schwer, solche Fehler zu finden. Ich nutze einen normalen Texteditor zum Bearbeiten meiner skin.xml. Er ist klein und genügt völlig - professionelle Werkzeuge sind nicht von Nöten.
Beachtet bitte das alle Bilddateien wirklich in dem Ordner der BLASC Skin sind und das die Namen richtig geschrieben wurden.
Die Farbdefinitionen bestehen aus vier Hexadezimalzahlen mit je zwei Ziffern. Eine Ziffer zuviel oder zu wenig kann zu Fehler führen. Die ersten zwei Ziffern sind mit 00 zu definieren, da diese noch keinen funktionellen Wert haben.
Bearbeitet die skin.xml immer in kleinen Schritten. Testet zwischendurch ob eure Änderungen funktionieren. Nehmt euch immer eine vorhandene XML Datei und erstellt eure daraus.
5. Nützliche Links
Ich bitte um Lob und konstruktive Kritik.
Danke und Viel Spaß beim Basteln
Maladin
Als erstes eine Warnung: Krawatten können in drehenden Walzen der Werkhalle zu ernsten Erwürgungen führen.
1. Vorbereitung
Das Ziel dieser Anleitung ist, euch zu zeigen, was nötig ist, um eine eigene BLASC Skin zu erstellen. Das Ergebnis sieht dann wie folgt aus.
BLASC Skins bestehen aus 5 Dateien.
- die Skin Maske (im Bitmap Format)
- die Skin selbst
- die Fortschrittsanzeige
- die Formatierungsdatei (im xml Format)
- ein Vorschaubild
Code:
C:\Programme\buffed\SkinsDer Name des Unterordner (in diesem Fall "tutorial") ist auch der Name des Designs in der BLASC Skin Verwaltung.
Für alle Farbdefinitionen wird eine hexadezimale Schreibweise verwendet. Manche kennen das aus Beschreibungssprachen wie HTML (fast genauso).
Zum Beispiel:
HTML:
<color>$00F0F0F0</color>Eingeleitet werden die Farbdefinitionen vom color Tag und beginnen mit einem $. Jetzt folgen 4 Hexadezimale Ziffernpaare hier: 00F0F0F0
Das erste Paar steht für Alpha, eine Funktion die noch nicht eingebaut ist - deshalb hier mit 00 definiert. Es folgen Blau, Grün und Rot. Danach wird der color Tag wieder geschlossen.
Am Ende dieses Beitrages, findet ihr einige Links zu Helferlein, für die Umrechnung der Farbwerte.
2. Die Grafiken
Wir beginnen mit der Skin (links) und einer Maske (rechts), so das wir die megaheftig General Transparenz nutzen können. Warum machen wir das? Weil wir es können
Um eine transparente Skin zu erstellen, nehme man ein Bild (wie das vom freundlichen Goblin) und erstelle davon eine Kopie. Diese bearbeiten wir so, das alle transparenten Bereiche weiß und alle sichtbaren Teile des Bildes schwarz sind. Diese Kopie speichern wir im Bitmap Format ab (unsere Maske) - die Skin selbst ist eine JPG Datei.
In dem Tutorial Dateipaket ist auch eine XCF Datei. Diese ist meine Grundlage zur Bearbeitung gewesen. Sie kann mit GIMP geöffnet werden.
Die Fortschrittsanzeige ist eine seeeehr kleine Datei. In diesem Beispiel ist sie 1 * 5 Pixel groß. Stark vergrößert, sieht sie dann wie folgt aus.
Der Fortschrittsbalken wird dann im Betrieb von links nach rechts, in die Länge gezogen.
Last but not least - wir benötigen ein Vorschaubild. Dieses wird dann im BLASC Client angezeigt, damit jeder weiss, wie toll unsere Skin aussieht.
Wenn wir das alles beisammen haben, können wir uns an die nackten Zahlen machen (das Wort nackt ist prima, um eure Aufmerksamkeit wach zu halten).
3. Die XML Datei
Ich behaupte, das selbst Leute ohne HTML XML Wissen mit der Konfiguration der Skin in der XML Datei, klar kommen. Die Formatierungen unserer BLASC Skin stehen immer in einer Datei, die skin.xml heisst - bitte achtet darauf.
Zur Bearbeitung der skin.xml reicht ein einfacher Texteditor (In Windows Starmenü -> Ausführen -> "notepad"). Öffnet unsere XML Datei und schaut sie euch an. Am besten lest ihr die Texte hier in der Anleitung, die Code Schnipsel und dann schaut ihr es euch in der skin.xml an
3.1. Der Kopf der Skin Datei
Eingeleitet wird die skin.xml mit dem skin Tag.
HTML:
<skin>
[...]Danach schreiben wir mal, das diese Skin von uns erstellt wurde, um welche Version es sich handelt und runden das Ganze mit einer kleinen Beschreibung ab.
HTML:
<version>0.5</version>
<author>Maladin</author>
<comment>BLASC Goblins working</comment>Jetzt brauchen wir unser Vorschaubildchen, welches in diesem Fall die prev.jpg ist.
HTML:
<preview>prev.jpg</preview>Nun kommen wir zum Layout. Dieses wird in der skin.xml mit deim layout Tag eröffnet.
HTML:
<layout>
[...]Beginnen wir mit den Bildern, welche die Grundlage unseres Designs sein sollen. Zwischen dem öffnenden und schliessenden form Tag definieren wir, wie groß unser Skin Bild ist (hier 400 * 190 Pixel), mit <width> und <height>. Wir geben an, wie unser Grundbild (hier skin.jpg) heißt und die dazugehörige Maske (mask.bmp).
Die Skin selbst kann auch im GIF Format gespeichert werden, aber die Maske muss eine Bitmap (BMP) sein.
HTML:
<form>
<width>400</width>
<height>190</height>
<image>skin.jpg</image>
<mask>mask.bmp</mask>
</form>Der Grundstein ist gesetzt. Jetzt kommen wir zu den Texten.
3.2. Die Textmodule
Als nächstes folgen 3 XML Container, welche die Textmodule definieren.
HTML:
<statusmodulname>
[...]
</statusmodulname>
<statusmaintext>
[...]
</statusmaintext>
<statussubtext>
[...]
</statussubtext>Diese sind alle gleich aufgebaut. Sie beginnen mit der Definition der Schrifart, Größe und Farbe (hier die Schriftart "Arial", 13 Points groß und hellgrau) - beachtet diesen Teil mit </font> zu beenden.
HTML:
<font name="Arial">
<size>13</size>
<color>$00F0F0F0</color>
</font>Jetzt wird definiert, wo der Text in unserer Skin platziert ist und seine Maximalgröße (hier 300 Pixel).
HTML:
<left>10</left>
<top>8</top>
<width>300</width>Die Position des Textes, ist in diesem Beispiel 10 Pixel vom linken Rand der Skin und 8 Pixel von oberen Rand.
In unserem Beispiel, sieht es dann wie folgt aus.
HTML:
<statusmodulname>
<font name="Arial">
<size>13</size>
<color>$00F0F0F0</color>
</font>
<left>10</left>
<top>8</top>
<width>300</width>
</statusmodulname>
<statusmaintext>
<font name="Tahoma">
<size>10</size>
<color>$00D0D0D0</color>
</font>
<left>20</left>
<top>35</top>
<width>300</width>
</statusmaintext>
<statussubtext>
<font name="Tahoma">
<size>10</size>
<color>$00D0D0D0</color>
</font>
<left>20</left>
<top>50</top>
<width>300</width>
</statussubtext>3.3. Der Fortschrittsbalken
Unsere kleine Datei progress.jpg soll sich jetzt für unsere Skin strecken. Das ganze wird in der skin.xml zwischen den progressbar Tags definiert.
HTML:
<progressbar>
[..]
</progressbar>Wir müssen jetzt wissen, wie hoch unser Fortschrittsbalken ist (hier 5 Pixel), wo er in unserer Skin platziert werden soll (mit "wo" ist die Position der oberen linken Ecke des Fortschrittsbalkens gemeint - hier 5 Pixel vom linken Rand und 140 Pixel vom oberen Rand der Skin) und wie weit er sich für uns strecken soll (hier 250 Pixel). Als letztes dann der <image> Tag, der definiert, wie unser Fortschrittsanzeigebild heißt (hier progress.jpg).
HTML:
<top>140</top>
<left>5</left>
<height>5</height>
<width>250</width>
<image>progress.jpg</image>NACKT (und - wieder wach?)
3.4. Einmal Popupt - nie mehr ...
Reimen war noch nie meine Stärke.
Einen Teil der BLASC Skin, kennen meist nur die News Plugin Nutzer unter euch, weil er so schnell wieder verschwunden ist. Das kleine Popup, welches bei Neuigkeiten oder nach dem Updaten eurer Charaktere auf buffed, kurz aus der unteren rechten Ecke hopst.
Zwischen den <popup> Tags kann man definieren in welcher Farbe es erstrahlen soll.
HTML:
<popup>
[...]
</popup>Das Popup besteht aus 2 Teilen - dem sogenannten Caption (auf dem Bild der dunkle Balken am oberen Rand) und dem Window. Beginnen wir mit der Farbdefinition der Caption. Es werden 2 Farben definiert die einen Verlauf bilden <PopupCaptionFrom> und <PopupCaptionTo>. Die Farbe, definiert für "From", ist am oberen Rand und verläuft nach unten, zu der Farbe definiert für "To".
HTML:
<PopupCaptionFrom>$00767676</PopupCaptionFrom>
<PopupCaptionTo>$0000000</PopupCaptionTo>Das selbe machen wir jetzt noch für das Window. Das ist der Teil, in dem der Text steht, die News oder die Meldung des Uploads.
HTML:
<PopupWindowFrom>$00FFFFFF</PopupWindowFrom>
<PopupWindowTo>$00D0D0D0</PopupWindowTo>Der Rahmen am rechten Rand des Popups wird dann noch wie folgt definiert:
HTML:
<PopupFrame>$00AC0000</PopupFrame>Jetzt definieren wir, wie lange das Popup sichtbar sein soll (Angabe in tausendstel Sekunden).
HTML:
<PopupDisplayDuration>5000</PopupDisplayDuration>Jetzt ist es gleich soweit. Wir haben die skin.xml abgearbeitet. Vorher definieren wir aber noch die Schriftart, Schriftgröße und Schriftfarbe im Popup - für Headerfont (also die Überschrift des Popups) und Font (dem Text des Popups).
HTML:
<Headerfontname>Tahoma</Headerfontname>
<Headerfontsize>8</Headerfontsize>
<Headerfontcolor>$00000000</Headerfontcolor>
<Fontname>Tahoma</Fontname>
<Fontsize>8</Fontsize>
<Fontcolor>$00000000</Fontcolor>3.5. Der letzte Schliff
Jetzt schliessen wir das Layout und die Skin.
HTML:
[...]
</layout>
</skin>Die skin.xml kann jetzt gespeichert und geschlossen werden. Anhang anzeigen 2472
4. Fehlerquellen
Wenn wir einen Tag nicht geschlossen haben, kann es zu Fehlern kommen, die sehr lästig werden. Es ist sehr schwer, solche Fehler zu finden. Ich nutze einen normalen Texteditor zum Bearbeiten meiner skin.xml. Er ist klein und genügt völlig - professionelle Werkzeuge sind nicht von Nöten.
Beachtet bitte das alle Bilddateien wirklich in dem Ordner der BLASC Skin sind und das die Namen richtig geschrieben wurden.
Die Farbdefinitionen bestehen aus vier Hexadezimalzahlen mit je zwei Ziffern. Eine Ziffer zuviel oder zu wenig kann zu Fehler führen. Die ersten zwei Ziffern sind mit 00 zu definieren, da diese noch keinen funktionellen Wert haben.
Bearbeitet die skin.xml immer in kleinen Schritten. Testet zwischendurch ob eure Änderungen funktionieren. Nehmt euch immer eine vorhandene XML Datei und erstellt eure daraus.
5. Nützliche Links
- BLASC Client http://www.buffed.de/page/403/blasc-2-download
- Webtoolbox Farbwähler http://www.web-toolbox.net/webtoolbox/farben/farbwaehler.htm
- GIMP - Eine freie Grafikbearbeitungssoftware http://gimp.org/
- Notepad++ - für den der schon alles hat
http://notepad-plus.sourceforge.net/de/site.htm
Ich bitte um Lob und konstruktive Kritik.
Danke und Viel Spaß beim Basteln
Maladin
Zuletzt bearbeitet von einem Moderator:
