はじめに
GarminのWatchFaceを開発する際にサンプルとして開発したときの手順をまとめます。
今回は以前の記事「GarminのWatchFaceアプリでHello,world!」を使った内容になります。
前提条件
- 「GarminのWatchFaceアプリでHello,world!」の動作確認までできる状態であること
手順
表示させたいフォントを用意する
フォントにも利用規約が存在するので問題ないことを確認してください。
今回はたちばなフォントをお借りして作っていきます。
2023年の立花裕大さん(俳優)が作成した手書き系フォントです。
個人利用、商用利用に関わらず、使用用途を問わず無料で利用可能となっています。(2024/05時点)
詳細なライセンスはSIL Open Font License Version 1.1となります。
フォントの変換
GarminはOpenType,TrueTypeフォントに対応していません。
BMP（やPNG）で画像として保存して、表示の時に呼び出すという手法になります。
変換用として「BMFont」というツールが用意されているのでそちらを使います。
https://www.angelcode.com/products/bmfont/
私が見たときには「Downloads」に2種類ありましたが好みの方をダウンロードし、解凍してください。
展開後、「bmfont64.exe」を起動してください。
今回は時刻と最低限必要なテキストだけ用意します。
[Options]>[Font Settings]を選択します。
（もしくはキーボードの「F」キーを押下）
用意したフォントを選びます。
フォントのサイズは暫定として50を選びました。
「OK」を押すと画面の読み込みが入り、選択したフォントの文字に変わります。
この中から使用する文字を選択します。
[Options]>[Save bitmap font as...]を選択し、任意の名前で保存してください。
.fnt形式と.png形式のファイルができていれば問題ありません。
.png形式のファイルが作られなかった場合、
[Options]>[Export Options]を開いてください。
画面下部にあるTexturesの中から「png」を選択し、「OK」ボタンを押下後、再度[Options]>[Save bitmap font as...]での保存を試してください。
フォントを配置して確認する
[resources]>[fonts] フォルダを作成し、先ほど作成した.fnt形式と.png形式のファイルを配置します。
同一フォルダにfonts.xmlを新規作成し、fntファイルと紐づけるよう記載します。
<fonts>
<font id="yutatachibana" filename="yutatachibana.fnt" />
</fonts>
layout.xmlで設定した内では今までfont="Graphics.FONT_NUMBER_HOT"となっていましたが、
font="@Fonts.【自分で設定したID】"という書き方へ変更します。
<layout id="WatchFace">
<drawable class="Background" />
<label id="TimeLabel" x="center" y="center" font="@Fonts.yutatachibana" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_BLUE" />
<label id="Hello" x="50%" y="60%" font="@Fonts.yutatachibana" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_BLUE" />
</layout>
ビルドを実行すると、下記エミュレータ結果になりました。
((選択する文字を間違えてやり直したのはココだけの話))
終わりに
今回はここまでにします。
次回は状況に応じたアイコン表示を目標にしたいと思います。
参考リンク