マスク、ブレンド エフェクト、色合いを適用する

Group 要素と Part* 要素には、ウォッチフェイスのセクションの外観を調整するための強力な方法である tintColor, renderMode 属性と blendMode 属性も用意されています。

レンダリング モードでクリッピング マスクを使用する

renderMode は、クリッピング マスクを実現するために WFF バージョン 1 で導入されました。

renderMode は、シーン階層内の Group 要素と Part* 要素に適用できます。この仕組みを理解するには、シーングラフのレンダリング方法について考えてみましょう。

<Group>
  <Group>
    <PartDraw />
    <PartText />
  </Group>
  <PartImage />
</Group>

ウォッチフェイス レンダラは、シーンツリーを走査しながら要素を順番に描画します。

renderMode がノードに適用されると、その効果はそのノードの親 Group 内にのみ適用されます。グラフ内の他のノードには影響しません。

renderMode が指定されていない場合、デフォルトは SOURCE です。つまり、要素は画面に直接描画されます。ただし、親ノードに MASK（または ALL）が指定された要素が 1 つ以上存在する場合は、別のアプローチが使用されます。

  1. 画面外のキャンバスが作成される
  2. SOURCE が設定されている（デフォルト）すべての子要素が描画されます。
    1. マスク（MASK, ALL）の一部であるすべての子要素がキャンバスに適用され、結果の画像がクリップされます。

つまり、親ノード内の要素の順序は考慮されません。

次の例では、Scene 親に 3 つの子があります。

  • 最初の要素と 3 番目の要素は MASK 要素であるため、組み合わせてマスクレイヤを形成します。
  • 2 つ目の要素は、マスクなしのレイヤのみです。
<WatchFace width="450" height="450">
  <Scene>
    <PartDraw x="175" y="50" width="100" height="100" renderMode="MASK">
      <Ellipse x="0" y="0" width="100" height="100">
        <Fill color="#FFFFFF"></Fill>
      </Ellipse>
    </PartDraw>

    <PartDraw x="0" y="0" width="450" height="450">
      <Rectangle x="0" y="0" width="450" height="450">
        <Fill color="#ff0000">
          <LinearGradient startX="0" startY="0" endX="450" endY="450"
            colors="..." positions="..." />
        </Fill>
      </Rectangle>
    </PartDraw>

    <PartText x="75" y="250" width="300" height="80" renderMode="MASK">
      <Text align="CENTER">
        <Font family="pacifico" size="72" weight="BOLD" color="#FFFFFF">Hello!</Font>
      </Text>
    </PartText>
  </Scene>
</WatchFace>

renderMode の 3 番目のオプションは、SOURCE と MASK に加えて ALL です。ALL は、要素を SOURCE と MASK の両方として扱う必要があることを指定します。これは、一部のシナリオで役立ちます。

ブレンド モードを使用する

注: この機能は、ウォッチフェイス フォーマットのバージョン 3 以降で利用できます。

バージョン 3 以降の Watch Face Format では、Part* 要素をコンポーズするときにブレンドモードを適用できます。

ソースとマスクをそれぞれ構築するための特別なメカニズムを導入する renderMode とは異なり、blendMode はすべての Android グラフィックのブレンドモード エフェクトに一般的なアクセスを提供し、要素がシーングラフに表示される順序でエフェクトを適用します。

通常の動作では、2 つの Part* 要素がシーンに配置されている場合、デフォルトの blendMode が SRC_OVER であるため、最上位の要素が下位の要素を完全にまたは部分的に隠します。

<PartDraw x="25" y="15" width="150" height="150">
  <Rectangle x="0" y="0" width="150" height="150">
    <Fill color="#ffd3ba" />
  </Rectangle>
</PartDraw>
<PartText x="35" y="60" width="300" height="120">
  <Text align="START">
    <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
  </Text>
</PartText>

ブレンドモードの使用を示す例として、[SRC_ATOP] を選択すると、宛先ピクセルを覆わないソースピクセルが破棄されます。つまり、PartText がソースで、PartDraw が宛先です。

そのため、テキストは長方形の上にのみ描画され、ウォッチフェイスの他の場所には描画されません。

<PartDraw x="25" y="15" width="150" height="150">
  <Rectangle x="0" y="0" width="150" height="150">
    <Fill color="#ffd3ba" />
  </Rectangle>
</PartDraw>
<PartText x="35" y="60" width="300" height="120" blendMode="SRC_ATOP">
  <Text align="START">
    <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
  </Text>
</PartText>

SRC_ATOP の代わりに COLOR_DODGE を使用するなど、より複雑なエフェクトを適用することもできます。これにより、ソースを反映してデスティネーションを明るくすることができます。

HUE ブレンド モードと COLOR_BURN ブレンド モードを使用して複数の Part* 要素を組み合わせる例を次に示します。

<Group name="container" x="75" y="100" width="300" height="300">
  <PartDraw x="25" y="15" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
      <Fill color="#ffd3ba" />
    </Rectangle>
  </PartDraw>
  <PartDraw x="100" y="15" width="150" height="150" blendMode="HUE">
    <Ellipse x="0" y="0" width="150" height="150">
      <Fill color="#219ebc" />
    </Ellipse>
  </PartDraw>
  <PartText x="35" y="60" width="300" height="120" blendMode="COLOR_BURN">
    <Text align="START">
      <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
  </PartText>
</Group>

考慮事項

以降のセクションでは、クリッピング エフェクトとブレンド エフェクトを使用する際の考慮事項について説明します。

ブレンドモードがレンダリング モードの前に適用される

ノードに blendMode を使用する Part 要素と、renderMode が MASK（または ALL）に設定された Part 要素の両方が含まれている場合は、次のアプローチが取られます。

  1. ソースが合成され、blendMode モードが適用されます。
  2. マスクは、rendermode="MASK を指定する要素から適用されます。

たとえば、前述の例で長方形のマスクを追加してみましょう。マスクされた要素の順序は重要ではありません。

<Group name="container" x="75" y="100" width="300" height="300">
  <PartDraw x="25" y="15" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
      <Fill color="#ffd3ba" />
    </Rectangle>
  </PartDraw>
  <PartDraw x="100" y="15" width="150" height="150" blendMode="HUE">
    <Ellipse x="0" y="0" width="150" height="150">
      <Fill color="#219ebc" />
    </Ellipse>
  </PartDraw>
  <PartDraw x="100" y="15" width="150" height="150" renderMode="MASK">
    <Rectangle x="0" y="0" width="150" height="150">
      <Fill color="#ffffff" />
    </Rectangle>
  </PartDraw>
  <PartText x="35" y="60" width="300" height="120" blendMode="COLOR_BURN">
    <Text align="START">
      <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
  </PartText>
</Group>

パフォーマンス

renderMode または blendMode を使用するには、追加の計算と描画の手順が必要です。ウォッチフェイスが実行されているデバイスによっては、一部の処理がサポートされているハードウェアで効率的に実行される場合がありますが、古いデバイスでは実行できない場合があります。

そのため、renderMode と blendMode は慎重に使用し、ウォッチフェイスの全体的なパフォーマンスに与える影響に注意してください。

色合いを使用する

tintColor は、Part* 要素全体、Group、または HourHand や MinuteHand などの個々の針に適用できます。次に例を示します。

<WatchFace width="450" height="450">
  <Scene>
    <Group x="75" y="100" width="350" height="350" name="group1" tintColor="#ffd3ba">
      <PartDraw x="25" y="0" width="100" height="100">
        <Rectangle x="0" y="0" width="100" height="100">
          <Fill color="#ffffff" />
        </Rectangle>
      </PartDraw>
      <PartDraw x="150" y="0" width="100" height="100">
        <Ellipse x="25" y="0" width="100" height="100">
          <Fill color="#ffffff" />
        </Ellipse>
      </PartDraw>
      <PartText x="0" y="150" width="300" height="80">
        <Text align="CENTER">
          <Font family="pacifico" size="72" weight="BOLD" color="#ffffff">Hello!</Font>
        </Text>
      </PartText>
    </Group>
  </Scene>
</WatchFace>

これは、ユーザー設定のスタイルの適用（tintcolor="[CONFIGURATION.myThemeColor.0]" など）など、ウォッチフェイスのセクション全体のスタイル設定に役立ちます。