PCやタブレットとは異なり、ほとんどの組み込みデバイスには、グラフィックスコンテンツを保存するためのメモリスペースが限られています。 これらのハードウェアの制約により、高品質のグラフィカルユーザーインターフェイス(GUI)の設計は設計者にとって困難な作業になります。 このAltiaDeveloperBlog Seriesの記事では、GUIエディターであるAltia Designで作成されたいくつかのデザイン手法とサンプルデザインを提供し、組み込みデバイスのGUIに効率的なフォントの使用法を組み込む方法を示します。

フォントの取り扱い方法

AltiaはXNUMXつの異なる方法でフォントを処理します。 最初の方法では、フォントグリフを生成し、コード生成時に再フラッシュファイルに保存できます。 XNUMX番目の方法では、実行時に必要なフォントグリフを生成する実行時フォントを使用してコードを生成できます。

最初に、コード生成時にデザインに必要なすべてのフォントグリフを生成するより簡単なオプションについて説明します。 これらの生成されたフォント文字は、事前レンダリングされたグリフとも呼ばれます。 デザインで使用されるすべてのフォントでは、アセットを再フラッシュするために文字の完全なカタログを追加する必要があります。 さらに、すべてのフォントのすべてのサイズで、このデータを再フラッシュデータに追加する必要があります。 これは、すべてのフォントのすべてのサイズのすべての太字、すべてのフォントのすべてのサイズのすべてのイタリックについて同じです...あなたは絵を手に入れます。

reflash / fontsフォルダーを見ると、デザインで使用しているフォントの数、サイズ、バリエーションを確認できます。 下の画像では、このデザインでArial Bold Italic 18、Arial Bold 17、Arial Italic 16、Arial Italic 17、ArialNormal17が使用されていることがわかります。

フォントファイル

ランタイムフォントを使用するXNUMX番目のフォント処理方法では、デザインで使用されるフォントエンジンのソースコードが生成され、ハードウェアに読み込まれます。 次に、文字が必要になると、このコードからフォントグリフが生成されます。 これは、数万文字が必要な中国語などの言語を使用している場合に特に役立ちます。 本番GUIで必要になる可能性のあるすべての文字をロードする代わりに、必要に応じて各文字が生成されます。

では、どの方法を選びますか? 正直なところ、それは異なります。 フォントエンジンとシェーパーコードのサイズが生成されたグリフフォントファイルのサイズよりも小さい場合は、ランタイムフォントが一般的に推奨されます。 これらが等しい場合は、事前にレンダリングされたグリフ(最初の方法)を使用することをお勧めします。事前にレンダリングされたグリフには、ランタイムフォントエンジンと同じCPUおよびRAM要件がないためです。 また、適切なレンダリングパイプラインが使用されている特殊なケースでは、事前にレンダリングされたグリフのエンコード形式と圧縮形式は、ランタイムオプションよりも小さくなります。

フォント範囲

ハードウェアのスペースを節約するもうXNUMXつの優れた方法は、コード生成用に.genファイルを変更して、特定のフォント範囲のみをロードすることです。 単一のフォントサイズを使用するデザインがある場合、またはスプラッシュ画面にXNUMX回だけ入力する場合は、UnicodeフォントのASCII英字セクションのみをロードするようにソフトウェアをプログラムできます。 これにより、ハードウェアのスペースを大幅に節約できます。

画面上のフォントコード

上記の例では、フォント範囲の操作がいかに簡単であるかがわかります。 最初の行では、文字範囲[\ 32-\127]のみをロードしています。 170行目では、文字範囲がプロジェクト内の特定の指定されたフォントに適用されます。 -Arial-medium-r-normal –_-1024。 これは影響を受ける唯一のフォントであるため、このフォントには、ハードウェアにロードされる所定の印刷可能な文字のみが含まれます。 1024行目は、特定のファミリのすべてのフォントに制限を適用します。上記のフォントは含まれています。 %FONTRANGEFLAG%は、最大XNUMXの選択(例からXNUMXの異なる括弧で囲まれた範囲)をサポートし、それらの選択は文字または文字コードにすることができます。 これらの行は、同じ.genファイルで一緒に使用されることはありません。 これは、XNUMXつの単一行の例にすぎません。

フォント最適化の結果

次の再フラッシュファイルサイズは、この記事の非常に単純なテストデザインに適用されることに注意してください。 それらが設計にどのように影響するかを知る唯一の方法は、独自のGUIプロジェクトでこれらのテストを使用することです。

例Aでは、13種類のフォントが表示されます。 73番目のデザインである例Bは、単一のフォントを使用しています。 例Aの再フラッシュ.binファイルサイズは24kBです。 例Bは、32つのフォントのみを使用し、太字や斜体を含まず、.binサイズは2kBです。 例Bのコードを生成し、.genファイルで%FONTRANGEFLAG%* [\ XNUMX-〜]を使用すると、.binサイズがXNUMXkBになります。

フォント特殊画像
例A
フォントスペシャル
例B

この規模の最適化は、GUIの全体的なユーザーエクスペリエンスに影響を与える可能性があることに注意することが重要です。 デザインとメモリ使用量の適切なバランスをとることが不可欠なので、必ず早期に頻繁にテストしてください。 そのテストの一部には、デザインで使用されているすべてのフォントが必要かどうかを理解することが含まれる場合があります。 Altiaを使用すると、開発中にユーザーテストを簡単に行えるため、ハードウェアに到達する前にそのバランスを見つけることができます。 フィードバックの実装も高速です。

フォントレンジングを使用すると、.binファイルのサイズにも大きな違いが生じる可能性があります。 これも慎重に行う必要があります。 指定されたフォント範囲に含まれていない文字をGUIで使用すると、エラーが発生します。 テストを開発プロセスの一部にするもうXNUMXつの理由!

最後に、GUIデザインを最小限のフォント数に減らすことで、RAMを大幅に節約できます。 この例のようにフォント使用量をXNUMXつに減らすことは意味がないかもしれませんが、これは設計チームが実際にメモリ使用量に影響を与えることができる領域です。

まとめ

組み込みデバイス用の高品質GUIを設計する際に、設計者がRAMスペースやCPU使用率の問題に遭遇するのを防ぐのに役立つ多くの方法があります。 組み込みGUIのこれらのフォント設計手法は、考慮すべきほんの数例です。

Altiaは、インパクトのあるグラフィックを可能な限り低いハードウェアに取り込むことを専門としています。 私たちのGUIエキスパートは、より少ない時間と労力で高品質のグラフィックスを作成および実装するための強力な技術を持っています。 お気軽に デモをリクエストする 私たちのチームと一緒に、メモリに制約のあるハードウェア用にエキサイティングでリッチなGUIを作成する方法について話し合います。