System-Fonts bauen auf dem Font-Rendering des entsprechenden Betriebssystems auf und bieten die Möglichkeit, die System-Fonts zu verwenden ohne zusätzliche Ressourcen in der Applikation zu benötigen.
System-Fonts bieten den Vorteil, dass diese üblicherweise alle benötigten Zeichen beinhalten, z.B. bei Verwendung von globalen Online Highscore-Listen können Namen aus aller Welt in unterschiedlichsten Sprachen und Glyphen vorkommen.
Szenengraph
Das System-Font-Rendering ist von der jeweiligen Plattform-Komponente implementiert und wird im Knoten FlatTextTexture zur Verfügung gestellt.
<?xml version="1.0" ?>
<!-- Copyright 2013 Spraylight GmbH -->
<Graph>
<Namespace id="main">
<View id="view"/>
<Camera id="camera"
viewId="view"
fieldOfViewX="400"
nearPlane="400" farPlane="2500"
clearColorBuffer="yes"/>
<CameraTransform cameraId="camera"
posX="0" posY="0" posZ="800"/>
<CameraState cameraId="camera"/>
<FixedParameters id="screen_parameters"/>
<ParametersState parametersId="screen_parameters"/>
<Reference targetId="/materials/state_plain_tex_color"/>
<Transform id="position">
<FlatTextTexture
id="tex_edit_text"
systemFontName="TypewriterBold"
fontSize="20"
textColor="255i, 255i, 255i, 255i"
backgroundColor="39i, 133i, 197i, 255i"
text="Spraylight"
textAlignmentX="CENTER"
textAlignmentY="CENTER"
sizeX="512" sizeY="256"/>
<TextureState textureId="tex_edit_text"/>
<PlaneGeometry posX="0" posY="50"
frameSizeX="512" frameSizeY="256"/>
<FlatTextTexture
id="tex_info_text"
systemFontName="SansBold"
fontSize="24"
textColor="29i, 29i, 27i, 255i"
backgroundColor="225i, 200i, 63i, 255i"
textAlignmentX="LEFT"
textAlignmentY="CENTER"
sizeX="256" sizeY="64"/>
<TextureState textureId="tex_info_text"/>
<PlaneGeometry posX="0" posY="-150"
frameSizeX="256" frameSizeY="64"/>
</Transform>
</Namespace>
</Graph>
Definition der Text Textur
Der FlatTextTexture Knoten implementiert eine Textur, welche an die Grafik-Hardware gebunden ist, und muss dem "Power of 2" Prinzip entsprechen. In unserem Fall wird die Größe der ersten Textur mit den Attributen sizeX="512" sizeY="256" auf 512x256 Pixel festgelegt.
Schriftart und Schriftgröße werden mit den Attributen systemFontName="TypewriterBold" und fontSize="24" definiert.
Die Schriftfarbe wird mit dem Attribut textColor="…" und die Hintergrundfarbe der gesamten Textur mit dem Attribut backgroundColor="…" festgelegt.
Zur Textausrichtung in horizontaler Richtung (textAlignmentX) stehen folgende Werte zur Verfügung:
"CENTER"In der Mitte der Textur zentriert (Voreinstellung)."LEFT"Am linken Rand der Textur ausgerichtet."RIGHT"Am rechten Rand der Textur ausgerichtet.
Zur Textausrichtung in vertikaler Richtung (textAlignmentY) stehen folgende Werte zur Verfügung:
"CENTER"In der Mitte der Textur zentriert (Voreinstellung)."TOP"Am oberen Rand der Textur ausgerichtet."BOTTOM"Am unteren Rand der Textur ausgerichtet.
Der anzuzeigende Text kann mit dem Attribut text="…" direkt in der Graphen-Definition gesetzt oder aber auch nachträglich im Programmcode verändert werden.
Der FlatTextTexture Knoten kann nur verwendet werden, wenn das System-Font-Rendering von der Plattform-Komponente unterstützt wird.
Derzeit unterstützen alle mitgelieferten Plattformen folgende Systemschriften:
systemFontName="TypewriterRegular"systemFontName="SansRegular"systemFontName="TypewriterBold"systemFontName="SansBold"
Anzeige der Textur
Ein TextureState Knoten muss nun auf die Text-Textur zeigen und der Knoten PlaneGeometry zeichnet die Textur mit den entsprechenden Parametern.
In unserem Beispiel sind die PlaneGeometry Attribute frameSizeX="512" und frameSizeY="256" auf die Dimensionen der jeweiligen Text-Textur gesetzt worden um eine 1:1 Abbildung zu erhalten.
Applikation
Die System-Font Applikation verfügt über eine einfache Funtion zum Editieren eines Textes und zur Informationsanzeige.
Initialisierung der Logik
Bool App::SystemFontLogic::OnInit(const Logic::IState* state)
{
Graph::IRoot* root = state->GetGraphRoot();
if (state->GetPlatformConfiguration()->IsTargetClassMatching(IEnums::TARGET_CLASS_HANDHELD))
{
Logic::TransformNode position;
position.GetReference(root, "/main/position");
if (position.IsValid())
{
position->SetPositionY(200);
}
}
AddGraphNode(mEditTextNode.GetReference(root, "/main/tex_edit_text"));
AddGraphNode(mInfoTextNode.GetReference(root, "/main/tex_info_text"));
if (!AreGraphNodesValid())
{
return false;
}
mEditText = mEditTextNode->GetText();
UpdateText();
return true;
}
Im ersten Code-Block wird nur auf Mobilgeräten die Position aller Text-Texturen nach oben verschoben, um Platz für die On-Screen Tastatur zu schaffen.
Anschließend werden die Referenzen zu den beiden Text-Texturen Knoten hergestellt und der Prozessor Basisklasse hinzugefügt.
Die Sicherheitsabfrage if (!AreGraphNodesValid()) empfiehlt sich für den Fall, dass während der Initialisierung bereits auf Knoten zugegriffen wird. Ansonsten kommt es zu einem unschönen Absturz, wenn ein Knoten nicht gefunden werden kann, aber trotzdem verwendet wird.
Abschließend wird der anfängliche Editier-Text aus dem Text-Knoten ausgelesen und die Textanzeige aktualisiert.
Abarbeiten der Logik
void App::SystemFontLogic::OnProcessTick(const Logic::IState* state)
{
Logic::IDeviceHandler* deviceHandler = state->GetDeviceHandler();
if (!deviceHandler->IsKeyboardShowing())
{
state->GetDeviceHandler()->ShowKeyboard();
}
SInt32 action = deviceHandler->EditString(mEditText);
if (action != 0)
{
if (action < 0)
{
mEditText += "\n";
}
UpdateText();
}
}
Im ersten Code-Block wird sichergestellt, dass die On-Screen Tastatur sichtbar ist. Falls die Tastatur ausgeblendet ist, wird sie einfach wieder angezeigt.
Der zweite Block verwendet eine Methode aus der Logic::IDeviceHandler Klasse um eine simple Editor-Funktion zu erhalten. Es funktioniert lediglich die Eingabe von neuen Zeichen am Textende und das Löschen des letzten Zeichens.
Anzeige des Texts
void App::SystemFontLogic::UpdateText()
{
mEditTextNode->SetText(mEditText + "_");
String infoText;
infoText += " " + Util::UInt32ToString(mEditText.GetLengthUTF8());
infoText += " Characters\n";
infoText += " " + Util::UInt32ToString(mEditText.GetLength());
infoText += " Bytes";
mInfoTextNode->SetText(infoText);
}
Diese Hilfsfunktion zeigt den editierten Text mit angehängtem Unterstrich an.
Der letzte Block zeigt Informationen über den editierten Text an. Hier wird ersichtlich, dass alle Zeichen in UTF-8 Codierung gespeichert sind und nicht genau der Bytelänge des Texts entsprechen müssen z.B. durch Eingabe von Umlauten oder bestimmten Sonderzeichen.
