Tutorials/Farben: Unterschied zwischen den Versionen
(created) |
K |
||
(12 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
− | {{ | + | {{DISPLAYTITLE:Tutorial: Farben}} |
== Ziel des Tutorials == | == Ziel des Tutorials == | ||
− | Nach diesem Tutorial kennst du alle <code>String</code>-Codierungen der Engine für Farben und kannst beliebige Farben in der Engine durch | + | Nach diesem Tutorial kennst du alle <code>String</code>-Codierungen der Engine für Farben und kannst beliebige Farben in der Engine durch RGB- bzw. RGBA-Werte beschreiben. |
Zeile 10: | Zeile 10: | ||
Folgende Strings repräsentieren die entsprechende Farbe in der Engine: | Folgende Strings repräsentieren die entsprechende Farbe in der Engine: | ||
− | < | + | * <code>"Gelb"</code> |
− | "Gelb" | + | * <code>"Orange"</code> |
− | "Magenta"/"Lila" | + | * <code>"Weiss"</code> / <code>"Weiß"</code> |
− | "Schwarz" | + | * <code>"Grau"</code> |
− | </ | + | * <code>"Gruen"</code> / <code>"Grün"</code> |
− | + | * <code>"Blau"</code> | |
+ | * <code>"Rot"</code> | ||
+ | * <code>"Pink"</code>, | ||
+ | * <code>"Magenta"</code> / <code>"Lila"</code> | ||
+ | * <code>"Cyan"</code> / <code>"Tuerkis"</code> / <code>"Türkis"</code> | ||
+ | * <code>"Dunkelgrau"</code> | ||
+ | * <code>"Hellgrau"</code> | ||
+ | * <code>"Schwarz"</code> | ||
== Farben über RGB == | == Farben über RGB == | ||
Zeile 22: | Zeile 29: | ||
beschreiben. Dieser kann zwischen 0 und 100% liegen. | beschreiben. Dieser kann zwischen 0 und 100% liegen. | ||
− | Das kann man als digitales Farbenmischen betrachten, indem man verschiedene Anteile der Grundfarben zusammenmischt um den gewünschten Farbton zu erhalten. | + | Das kann man als digitales Farbenmischen betrachten, indem man verschiedene Anteile der Grundfarben zusammenmischt, um den gewünschten Farbton zu erhalten. |
Angegeben werden diese Anteile jedoch nicht in Prozent sondern in '''Zahlen zwischen 0 (≙ 0% | Angegeben werden diese Anteile jedoch nicht in Prozent sondern in '''Zahlen zwischen 0 (≙ 0% | ||
Anteil) und 255 (≙ 100% Anteil)'''. | Anteil) und 255 (≙ 100% Anteil)'''. | ||
Zeile 29: | Zeile 36: | ||
− | + | {{Doc|ea/Farbe}} ist eine Klasse in der Engine Alpha. Sie beschreibt eine Farbe und lässt sich sehr leicht instanzieren. Nachfolgend der Konstruktor der Klasse Farbe: | |
<source> | <source> | ||
Zeile 56: | Zeile 63: | ||
− | + | Alle färbbaren Klassen ({{Doc|ea/Text}} und alle {{Doc|ea/Geometrie}}-Klassen) verfügen zum Festlegen der Farbe über nachfolgende zwei Methoden: | |
<source> | <source> | ||
Zeile 65: | Zeile 72: | ||
Die zweite Methode ist dir vielleicht neu. Hierbei muss ein <code>Farbe</code>-Objekt als Parameter übergeben werden und ab diesem Moment füllt genau diese Farbe das Objekt aus. | Die zweite Methode ist dir vielleicht neu. Hierbei muss ein <code>Farbe</code>-Objekt als Parameter übergeben werden und ab diesem Moment füllt genau diese Farbe das Objekt aus. | ||
− | |||
== Alpha-Werte == | == Alpha-Werte == | ||
Ein weiterer Vorteil der Klasse Farbe ist die Möglichkeit, Farben zu einem gewissen Anteil durchsichtig machen zu können. Die "Nichtdurchsichtigkeit" (oder auch ''Opacity'') einer Farbe wird als ''Alpha-Helligkeit'' bezeichnet. Auch diese lässt sich mit einem Wert zwischen 0 und 255 beschreiben. | Ein weiterer Vorteil der Klasse Farbe ist die Möglichkeit, Farben zu einem gewissen Anteil durchsichtig machen zu können. Die "Nichtdurchsichtigkeit" (oder auch ''Opacity'') einer Farbe wird als ''Alpha-Helligkeit'' bezeichnet. Auch diese lässt sich mit einem Wert zwischen 0 und 255 beschreiben. | ||
− | + | Bei einem Wert von 255 ist die Farbe gänzlich sichtbar und bei einem Wert von 0 absolut durchsichtig, d. h. unsichtbar. Alle Werte dazwischen sorgen für eine unterschiedlich stark durchsichtige, geister- oder glasartige Farbe. | |
− | Hierfür gibt es dann den vollen Konstruktor der Klasse | + | Hierfür gibt es dann den vollen Konstruktor der Klasse {{Doc|ea/Farbe}}: |
<source> | <source> | ||
Zeile 82: | Zeile 88: | ||
<source> | <source> | ||
− | /*In der spielsteuernden Klasse ( | + | /* In der spielsteuernden Klasse (wegen der “wurzel“) */ |
− | //Erstelle | + | // Erstelle in der linken oberen Bildecke ein Quadrat mit der Seitenlänge 200 |
− | |||
Rechteck recht = new Rechteck(0, 0 200, 200); | Rechteck recht = new Rechteck(0, 0 200, 200); | ||
− | //Erstelle der Fuellfarbe | + | // Erstelle der Fuellfarbe |
Farbe fuellFarbe = new Farbe(178, 255, 255, 200); | Farbe fuellFarbe = new Farbe(178, 255, 255, 200); | ||
− | //Dem | + | // Dem Quadrat die Füllfarbe zuweisen |
recht.farbeSetzen(fuellFarbe); | recht.farbeSetzen(fuellFarbe); | ||
− | //Das Rechteck an der Wurzel anmelden | + | // Das Rechteck an der Wurzel anmelden, um es sichtbar zu machen |
wurzel.add(recht); | wurzel.add(recht); | ||
</source> | </source> |
Aktuelle Version vom 28. Mai 2016, 16:56 Uhr
Inhaltsverzeichnis
Ziel des Tutorials
Nach diesem Tutorial kennst du alle String
-Codierungen der Engine für Farben und kannst beliebige Farben in der Engine durch RGB- bzw. RGBA-Werte beschreiben.
String-Codierung von Farben
Folgende Strings repräsentieren die entsprechende Farbe in der Engine:
"Gelb"
"Orange"
"Weiss"
/"Weiß"
"Grau"
"Gruen"
/"Grün"
"Blau"
"Rot"
"Pink"
,"Magenta"
/"Lila"
"Cyan"
/"Tuerkis"
/"Türkis"
"Dunkelgrau"
"Hellgrau"
"Schwarz"
Farben über RGB
Zu der Darstellung von Farben als Strings gibt es natürlich eine Alternative, mit der sich jede Farbe für jeden Zweck exakt maßschneidern lässt. Ein Farbton lässt sich über die Anteile der drei Komplementärfarben Rot, Grün und Blau beschreiben. Dieser kann zwischen 0 und 100% liegen.
Das kann man als digitales Farbenmischen betrachten, indem man verschiedene Anteile der Grundfarben zusammenmischt, um den gewünschten Farbton zu erhalten. Angegeben werden diese Anteile jedoch nicht in Prozent sondern in Zahlen zwischen 0 (≙ 0% Anteil) und 255 (≙ 100% Anteil). Nun lässt sich eine Farbe also durch 3 Zahlen beschreiben, den Rot/Grün/Blau-Anteilen. Dies wird mit R/G/B abgekürzt.
Farbe
ist eine Klasse in der Engine Alpha. Sie beschreibt eine Farbe und lässt sich sehr leicht instanzieren. Nachfolgend der Konstruktor der Klasse Farbe:
public Farbe(int r, int g, int b)
Die drei Zahlenwerte müssen Zahlen zwischen 0 und 255 liegen und entsprechen den Anteilen der entsprechenden Grundfarbe, die zum "Mischen" verwendet werden soll.
So erhält man zum Beispiel:
Schwarz | new Farbe(0, 0, 0); |
Weiß | new Farbe(255, 255, 255); |
Orange | new Farbe(255, 200, 0); |
Cyan/Türkis | new Farbe(0, 255, 255); |
Natürlich sind auch alle anderen Zahlenkombinationen mit Werten zwischen 0 und 255 möglich.
Alle färbbaren Klassen (Text
und alle Geometrie
-Klassen) verfügen zum Festlegen der Farbe über nachfolgende zwei Methoden:
public void farbeSetzen(String farbName)
public void farbeSetzen(Farbe farbe)
Die zweite Methode ist dir vielleicht neu. Hierbei muss ein Farbe
-Objekt als Parameter übergeben werden und ab diesem Moment füllt genau diese Farbe das Objekt aus.
Alpha-Werte
Ein weiterer Vorteil der Klasse Farbe ist die Möglichkeit, Farben zu einem gewissen Anteil durchsichtig machen zu können. Die "Nichtdurchsichtigkeit" (oder auch Opacity) einer Farbe wird als Alpha-Helligkeit bezeichnet. Auch diese lässt sich mit einem Wert zwischen 0 und 255 beschreiben. Bei einem Wert von 255 ist die Farbe gänzlich sichtbar und bei einem Wert von 0 absolut durchsichtig, d. h. unsichtbar. Alle Werte dazwischen sorgen für eine unterschiedlich stark durchsichtige, geister- oder glasartige Farbe.
Hierfür gibt es dann den vollen Konstruktor der Klasse Farbe
:
public Farbe(int r, int g, int b, int alpha)
Ein sehr einfaches Beispiel, es wird ein halbdurchsichtiges Rechteck erstellt:
/* In der spielsteuernden Klasse (wegen der “wurzel“) */
// Erstelle in der linken oberen Bildecke ein Quadrat mit der Seitenlänge 200
Rechteck recht = new Rechteck(0, 0 200, 200);
// Erstelle der Fuellfarbe
Farbe fuellFarbe = new Farbe(178, 255, 255, 200);
// Dem Quadrat die Füllfarbe zuweisen
recht.farbeSetzen(fuellFarbe);
// Das Rechteck an der Wurzel anmelden, um es sichtbar zu machen
wurzel.add(recht);