アウトラインフォントとドローシェイプツールの使い方

SUPPORT

アウトラインフォントとドローシェイプツールの使い方

はじめに

このシリーズでは、Arduinoに7インチタッチディスプレイGT-SPシリーズを接続し、様々なプロジェクトを進める過程を解説しています。

今回はGT Design Studioのドアウトラインフォント埋め込み機能とドローシェイプツールを使用し、視覚的に優れたインターフェースを作成していきましょう。アウトラインフォントを埋め込むことでテキストのサイズ変更が容易になり、従来のフォントの変更方法よりもよりデザインに集中できます。ドローシェイプツールは直感的な操作で形状の作成を実現します。インターフェースのサンプルとして、遊園地アトラクションの操作盤のようなデザインを行っていきます。

アウトラインフォントの使用方法

アウトラインフォントの特徴と注意点、GT Design Studioでの設定方法について説明します。

アウトラインフォントの概要

アウトラインフォントはサイズを自由に変更でき、視認性の高い文字表示が可能です。また、アンチエイリアスのある綺麗な文字表示ができます。

利点

サイズ変更の容易さ：アウトラインフォントを使うと、テキストオブジェクトのプロパティから簡単にフォントサイズを変更できます。

高解像度対応：アウトラインフォントは、どんな解像度でも美しく表示されるため、ディスプレイの性能を最大限に活用できます。

注意点: フォントデータのライセンス

アウトラインフォントを使用する際は、フォントデータをプロジェクトファイル内に埋め込んで使用するため、フォントデータのライセンスを確認することが重要です。商用プロジェクトや共有プロジェクトでは、使用するフォントデータのライセンスが適切にカバーされているかを確認してください。

アウトラインフォントの形式

GT Design Studioでは、現在TTF（TrueTypeフォント）のみが対応しています。使用するフォントがTTF形式であることを確認し、適切に設定してください。

これまで使用してきたユーザーフォントは「USER_0」などにフォントを登録していました。登録の際にはフォントのサイズや高さ、Margin Rightなどを設定しなければなりませんでした。今回は、その項目よりも下にある「OUTLINE」にフォントを設定します。

上記画像では、実際に「OUTLINE_0」にMontserrat Mediumフォントを設定しています。

アウトラインフォントはフォントサイズや高さをここでは設定せず、テキストオブジェクトのプロパティでフォントサイズの変更が可能になります。

Montserratフォント：

https://fonts.google.com/specimen/Montserrat

アウトラインフォントの実際の使い方

アウトラインフォントを実際に使ってみましょう。上記の画像は「OUTLINE」というテキストオブジェクトのフォントサイズに「OUTLINE_0」を設定し、大きさを「80p」にしています。

Text0 > Text0 sizeを開き、「80p 」を別の大きさにすれば大きさを変更できます。

ドローシェイプツールの使用方法

使用できるドローシェイプツールのシェイプ一覧と形状設定方法を紹介します。

ドローシェイプツールのオブジェクトの種類

ドローシェイプツールには様々な形状が用意されています。GT Design Studioで使用できるシェイプの種類は以下の通りです。

シェイプ一覧

LINE ：線

RECT ：四角形

CIRCLE ：円

ARC ：弧

PIE ：扇形

TRIANGLE 1 ：（二等辺）三角形

TRIANGLE 2 ：（直角）三角形

PENTAGON ：五角形

HEXAGON ：六角形

RHOMBUS ：ひし形

PARALLELOGRAM ：平行四辺形

TRAPEZOID ：台形

ARROW ：矢印

特別なスタイルの設定方法

以下に、特に特徴的な設定が可能なシェイプについて詳しく説明します。

アーチ (ARC)

弧の調整: アーチの曲率や角度を自由に調整できます。

プロパティ設定:

Start Angle：弧の開始角度を設定します。

End Angle：弧の終了角度を設定します。

平行四辺形／台形 (PARALLELOGRAM/TRAPEZOID)

形状のカスタマイズ: 形状の角度やサイズを精密に設定することで、独自のデザインを作成できます。

プロパティ設定:

Top Length：上辺の長さを設定します。値が0だと自動になります。

矢印 (ARROW)

形状のカスタマイズ: 矢印の頭部や尾部のスタイルを細かく設定できます。

プロパティ設定:

Shape Type2：矢印の形状を選択します。

Top Length：矢印の頭部の長さを設定します。値が0だと自動になります。

Bar Width：矢印の太さを設定します。値が0だと自動になります。

GT Design Studioでの画面の作成

ここから実際の画面の作成を開始に入ります。

ドローシェイプツールを使用する際は、まず基本的な形状を配置してから細かい調整を行うとスムーズに進められます。また、各オブジェクトのプロパティ設定を適切に行うことが重要です。

あらかじめノートなどに下書きを書いておくとイメージしやすいです。

作成の流れ

1. テキストの作成・配置

テキストオブジェクトを作成してアウトラインフォントを設定します。

2. デザインの作成・配置

ドローシェイプツールで必要な形状を作成して配置します。今回は下記の用途で使用します。

　RECT：操作盤の背景や枠を作成するために使用します

　CIRCLE：ボタンオブジェクトの装飾に使用します

　TRIANGLE：操作盤内の操作の流れ（STEP）を示すために使用します

3. 操作部分の作成・配置

実際に操作に使用する部分はボタンオブジェクト、スライダーオブジェクトで作成します。今回はボタンオブジェクトとスライダーオブジェクトを使用します。

上段中央の箇所

上段中心のテキストオブジェクト、Tea Cup Rides Attractionの設定を見てみましょう。

Text0 Sizeに「OUTLINE_0_28p」を設定しました。

また、Text0 Align Xを「CENTER」に、Text0 Align Yを「MIDDLE」にすることでオブジェクトの中央にテキストを配置します。

上段左の箇所

操作盤の左上に位置する白い四角はドローシェイプツールのRECTで作られています。

サイズを調整し、プロパティにて、Style -> Radiusを「10」に、Color -> Fill Colorを「白色（#FFFFFF）」に変更しました。

その上に「POWER」というテキストオブジェクト、ドローシェイプツール「RECT」の黒色の四角（#000000）、その上に「ON」「OFF」のテキストオブジェクトが設置されています。

2 つの丸は操作部分のため、ボタンオブジェクトで作成します。緑色（#007F00）のボタン、赤色（#FF007F）のボタンを配置します。サイズ（General -> Size X と Size Y）の値に対して、Style -> Radius の値を半分にすると円形になります。例、サイズ 60×60 の場合、Radius は 30 になります。

また、Style -> Contents Style を「FLAT」にすることで、ボタンオブジェクトの立体感がなくなります。