![見出し画像](https://assets.st-note.com/production/uploads/images/126890233/rectangle_large_type_2_b39a8fa7bc5ebf3fb83346501edf41b6.png?width=1200)
その7 カスタムフォントをGarminWacthFaceで表示する。
その6でまんまとTrueTypeFontを作ってしまったあなた!
いよいよ、GarminのWatchFaceで出しますよ!
という事で何を使えばいいかはGarminのご本尊SDKのサイトに書かれています。BMFontってソフトウェアを使って作ります。
■このページで達成すること
1.BMFontでフォントを生成する
2.ソースを修正して表示させる
■BMFontを使う
特に難しい事はないんですが、ダウンロードして解凍して、bmfont64.exe
起動するとこんな画面が表示されるかと思います。
![](https://assets.st-note.com/img/1704602619607-TAuyhTQbvs.png?width=1200)
では使い方。[Option]-[Font settings]を選びます。
![](https://assets.st-note.com/img/1704602654282-ICDDxCNZ70.png)
自分で作ったフォントをFontのドロップダウンリストから見つけます。
フォントのサイズは普通に文字盤に出すサイズはまぁとりあえず50くらいにしまして、Font smoothingをONにして、Super samplingをまぁ最大のLevel4にしまして、OK!
![](https://assets.st-note.com/img/1704602726784-YuSPKb5zhW.png)
フォントが表示されますので出力したい文字をクリックします。
こんな感じっすかね。
![](https://assets.st-note.com/img/1704602869984-XfFqfoKOUm.png?width=1200)
したら次に[option]-[Save bitmap font as…]を選択して・・・。
こんな感じで保存します・・・。
![](https://assets.st-note.com/img/1704603035682-9Ew08MNqTQ.png)
これでとりあえずFontは出来上がり。サイズの微調整があるので、まだBMfontは使いますので消さないでね・・・。
■オリジナルフォントをWacthFaceに入れる
エクスプローラでresourcesフォルダにfontsというフォルダを作りましょう。
![](https://assets.st-note.com/img/1704603194129-DpBrTM7unA.png)
そこに先ほど出力した2つのファイルというか先にフォルダ作っておいてBMFontでそこに出力すればよかったんですが、出力します。
![](https://assets.st-note.com/img/1704603284780-gP3oOex70R.png)
Visual Studio Codeでfontsフォルダにfonts.xmlを作成して・・・。
![](https://assets.st-note.com/img/1704603347279-3Mycy3SMB3.png)
こんな感じで書きます。
<fonts>
<font id="tegakiFont" filename="tegakiFont.fnt" />
</fonts>
次にlayout.xmlに・・・今までfont="Graphics.FONT_NUMBER_HOT"と書いてあったのを、font="@Fonts.tegakiFont"という風に書いてみます。
<layout id="WatchFace">
<drawable class="Background" />
<bitmap id="myBitmap" filename="../drawables/backGround.png" />
<label id="TimeHourLabel" x="44%" y="29%" font="@Fonts.tegakiFont" justification="Graphics.TEXT_JUSTIFY_RIGHT" color="Graphics.COLOR_RED" />
</layout>
これで完成です。では実行してみましょう!
![](https://assets.st-note.com/img/1704603927936-3PmsYx1cAC.png)
できた~・・・って事で、おいらのオリジナリティフォントできました~!
ということでほかの数字にも適用していきます。
その際に先ほどのBMFontのサイズを変えて保存をしていきそれを指定するると・・・。
![](https://assets.st-note.com/img/1704604130256-DEvaAtnKer.png)
・・・・という感じでした。ぐっとオリジナリティ感が出てきていい感じです(笑)
見やすいフォント作ろうかなー(笑)って事でこの辺で―・・・。
この記事が気に入ったらサポートをしてみませんか?