時刻を表す

ウォッチフェイスの主な役割は時間を表示することです。Watch Face Format では、AnalogClock 要素と DigitalClock 要素を使用して、アナログ時計とデジタル時計の両方を作成できます。

デジタル時計

基本的なデジタル時計は、ウォッチフェイス Scene 内の DigitalClock 要素と TimeText 要素を使用して定義できます。

<DigitalClock x="100" y="100" width="200" height="50">
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
</DigitalClock>

format 属性を使用すると、時、分、秒の組み合わせを使用して時刻の表示方法を制御できます。具体的なオプションは、使用している Watch Face Format のバージョンによって異なります。バージョン 2 では、ここでオプションが拡張されています。

上記の例では、システム フォントを使用するように [フォント] が設定されています。

世界中の他の場所の時刻（世界時計など）を表示することもできます。これは Localization 要素で実現できます。

<DigitalClock x="100" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    ...
</DigitalClock>

アナログ時計

アナログ時計を作成するには、AnalogClock 要素を使用します。各 HourHand, MinuteHand 子要素と SecondHand 子要素で、レンダリングに使用するリソースを指定します。

<AnalogClock x="0" y="0" width="200" height="200">
    <HourHand resource="hour_hand" ... />
    <MinuteHand resource="minute_hand" />
    <SecondHand resource="second_hand" />
    <!-- Optionally add a Tick or Sweep child element to define SecondHand behavior -->
</AnalogClock>

回転軸を指定する

時間、分、秒のリソースは時間の経過とともに回転しますが、各リソースを回転させる正しいポイントを指定することが重要です。

場合によっては、回転ポイントが手の下部ではなく、水平方向の中央にあることがあります。これは <HourHand … pivotY="(pivot_ratio)" /> として指定する必要があります。ここで、

$$ pivot\_ratio = \frac{pivot\_height}{full\_height} $$

時計の針に色を付ける

ユーザーがウォッチフェイスの外観をカスタマイズできるようにするには、通常、針の色を設定できるようにします。

これを実現する方法は、各手の tintColor を使用して各手を個別に色付けするか、AnalogClock を使用してすべての手を同じ色に色付けします。

ユーザーが特定の色を調整できるようにするだけでなく、tintColor に構成オプションを指定して、ユーザーが以下を選択できるようにすることもできます。

<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />

ドロップ シャドウ

現実的な時計の針の効果を出すには、各針の背後にドロップシャドウを使用して奥行きを表現します。これを実現するには、各手のタイプを 2 つ使用し、一方をもう一方の後ろにオフセットして、シャドウに別のリソースを指定します。

<!-- Offset the shadow by 5 units in both directions -->
<HourHand resource="hour_hand_shadow" ... x="105" y="105">
<!-- ... -->
<HourHand resource="hour_hand" ... x="100" y="100">

顔のデコレーション

アナログ ウォッチフェイスには、時間や分を表す装飾が文字盤の周囲に配置されていることがよくあります。これを行うには、次の 2 つの方法があります。

  1. 事前に描画されたウォッチフェイスを含む全画面の背景画像を含めます。画像の操作をご覧ください。

    <PartImage x="0" y="0" width="450" height="450" ...>
    <Image resource="watch_face_dial" />
</PartImage>

  2. 装飾を別々に描画し、回転を使用して顔の周りに配置します。

    <Group ... >
    <!-- Content for the "12" marker -->
</Group>
<Group pivotX="..." pivotY="..." angle="30">
    <!-- Content for the "1" marker -->
</Group>