ウォッチフェイスのカスタマイズ
チュートリアルの前のページでは、新しい Pebble プロジェクトを作成し、基本的なウォッチフェイスとして設定して、TickTimerServiceを使用して現在の時刻を表示する方法を学びました。しかし、デザインはかなり基本的なものだったので、カスタマイズして改善していきましょう！
これを行うために、次のような新しい Pebble SDK の概念を使用します:
- リソース管理
- カスタムフォント（
GFontを使用） - 画像（
GBitmapとBitmapLayerを使用）
これらにより、ウォッチフェイスのルックアンドフィールを完全に変更できます。使用するサンプル素材を提供しますが、プロセスを理解したら、これらを自分のものに置き換えて、本当に自分だけのものにしてください！完成すると、次のようなウォッチフェイスになります:
aplite
basalt
chalk
最初のステップ
前回のパートから続けるには、既存の Pebble プロジェクトを変更するか、新しいプロジェクトを作成して、そのプロジェクトのメイン.cファイルのコードを開始テンプレートとして使用できます。参考までに、このようなものになっているはずです。
最初のパートの結果は、次のような基本的な時刻表示になっているはずです:
aplite
basalt
chalk
改善していきましょう！
カスタムフォントの追加
アプリリソース（フォントや画像など）は、App Resourcesで詳しく説明されているように、プロジェクトのルートディレクトリにあるpackage.jsonファイルで管理されます。すべての画像ファイルとフォントは、プロジェクトの/resourcesフォルダのサブフォルダに配置する必要があります。以下はmedia配列のエントリの例です:
"media": [
{
"type": "font",
"name": "FONT_PERFECT_DOS_48",
"file": "fonts/perfect-dos-vga.ttf",
"compatibility":"2.7"
}
]
上記の例では、perfect-dos-vga.ttfファイルをプロジェクトの/resources/fonts/フォルダに配置します。
カスタムフォントファイルは、.ttfファイル形式のTrueTypeフォントである必要があります。
使用するフォントの例はこちらです
(ソース)。
それでは、以前使用したシステムフォント（FONT_KEY_BITHAM_42_BOLD）を、新しくインポートしたフォントに置き換えます。
これを行うには、GFontをグローバルに宣言します。
// Declare globally
static GFont s_time_font;
次に、main_window_load()内の既存のtext_layer_set_font()の呼び出しに、新しいGFontの作成と置き換えを追加します。以下は、以前にフォントをアップロードする際に使用した識別子の例であるFONT_PERFECT_DOS_48を示しています。これは常にRESOURCE_ID_というプレフィックスが付きます:
void main_window_load() {
// ...
// Create GFont
s_time_font = fonts_load_custom_font(resource_get_handle(RESOURCE_ID_FONT_PERFECT_DOS_48));
// Apply to TextLayer
text_layer_set_font(s_time_layer, s_time_font);
// ...
}
そして最後に、main_window_unload()でGFontを安全に破棄します:
void main_window_unload() {
// ...
// Unload GFont
fonts_unload_custom_font(s_time_font);
// ...
}
pebble build && pebble installで再コンパイルして再インストールすると、ウォッチフェイスにもっと面白いフォントが表示されるはずです。
スクリーンショットの例を以下に示します:
aplite
basalt
chalk
ビットマップの追加
Pebble SDK では、ウォッチフェイスプロジェクトで 2 色（黒と白）のビットマップ画像を使用することもできます。この要件を満たすには、グラフィックパッケージのエクスポート設定を確認するか、画像の作成で白（#FFFFFF）と黒（#000000）のみを使用します。別の方法として、HyperDitherなどのディザリングツールを使用することもできます。これは、ウォッチフェイスのリソースからGBitmapデータ構造にロードされ、BitmapLayer要素を使用して表示されます。これら 2 つはGFontとTextLayerと同様の方法で動作するので、始めましょう。
ビットマップをpackage.jsonファイルに追加する方法は、フォントと同じ方法ですが、新しいmedia配列オブジェクトのtypeがbitmapになります。以下は例です:
{
"type": "bitmap",
"name": "IMAGE_BACKGROUND",
"file": "images/background.png"
}
前回と同様に、使用するために作成したビットマップの例を以下に示します:
これをプロジェクトに追加したら、.cファイルに戻り、ファイルの上部近くにGBitmapとBitmapLayerそれぞれのポインタをさらに 2 つ宣言します:
static BitmapLayer *s_background_layer;
static GBitmap *s_background_bitmap;
次に、main_window_load()でこれら両方を作成します。両方の要素が作成されたら、BitmapLayerがGBitmapを使用するように設定し、TextLayerで行ったようにメインWindowの子として追加します。
ただし、BitmapLayerはTextLayerの前にWindowに追加する必要があることに注意してください。これにより、テキストが画像の上に描画されるようになります。そうでない場合、テキストは画像の後ろに描画され、見えなくなってしまいます。できるだけ明確にするために、そのプロセス全体を以下に示します:
// Create GBitmap
s_background_bitmap = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_BACKGROUND);
// Create BitmapLayer to display the GBitmap
s_background_layer = bitmap_layer_create(bounds);
// Set the bitmap onto the layer and add to the window
bitmap_layer_set_bitmap(s_background_layer, s_background_bitmap);
layer_add_child(window_layer, bitmap_layer_get_layer(s_background_layer));
いつものように、最後のステップは、main_window_unload()でこれらの新しい要素によって消費されたメモリを必ず解放することです:
// Destroy GBitmap
gbitmap_destroy(s_background_bitmap);
// Destroy BitmapLayer
bitmap_layer_destroy(s_background_layer);
最後のステップは、メインWindowの背景色を背景画像に合わせて設定することです。これをinit()で行います:
window_set_background_color(s_main_window, GColorBlack);
これらすべてを配置すると、サンプルの背景画像が時刻をうまくフレーミングし、新しいカスタムフォントのスタイルと一致するはずです。もちろん、独自のフォントとビットマップを使用した場合（強く推奨！）、ウォッチフェイスは正確にはこのようには見えません。
aplite
basalt
chalk
まとめ
カスタムフォントと背景画像を追加した後、新しいウォッチフェイスははるかに見栄えが良くなりました。さらに進めたい場合は、時刻表示と同じ方法で新しいTextLayerを追加して、現在の日付を表示してみてください（ヒント: strftime()で使用可能なフォーマットオプションを見てください！）
前回と同様に、以下のボタンを使用して、自分のコードをサンプルソースコードと比較できます。
次のステップ
チュートリアルの次のセクションでは、ウォッチフェイスに Web ベースのコンテンツを追加するための PebbleKit JS を紹介します。