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

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

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

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

renderMode は、シーン階層の Group 要素と Part* 要素に適用できます。ウォッチフェイス レンダラは、シーンツリーをトラバースしながら要素を順番に描画します。

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

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

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

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

次の例では、Scene 親に 3 つの子が含まれています。

• 最初と 3 番目の要素は MASK 要素であるため、組み合わされてマスキング レイヤを形成します。
• second 要素は、唯一の非マスキング レイヤです。

<PartDraw x="175" y="50" width="100" height="100" renderMode="MASK">
    <Ellipse x="0" y="0" width="100" height="100">
        <Fill color="#FFFFFF" />
    </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="#FFFF00 #00FFFF #FF00FF" positions="0.25 0.5 0.75" />
        </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>
watchface_effects.xml

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

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

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

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

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

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

<PartDraw x="125" y="115" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
        <Fill color="#ffd3ba" />
    </Rectangle>
</PartDraw>
<PartText x="135" y="160" width="300" height="120">
    <Text align="START">
        <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
</PartText>
watchface_effects.xml

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

その結果、テキストはウォッチフェイスの他の場所ではなく、長方形の上にのみ描画されます。

<PartDraw x="125" y="115" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
        <Fill color="#ffd3ba" />
    </Rectangle>
</PartDraw>
<PartText x="135" y="160" width="300" height="120" blendMode="SRC_ATOP">
    <Text align="START">
        <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
</PartText>
watchface_effects.xml

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>
watchface_effects.xml

考慮事項

以降のセクションでは、クリッピング効果とブレンド効果を使用する際に留意すべき考慮事項について説明します。

ブレンドモードはレンダリング モードの前に適用されます

ノードに blendMode を使用する Part 要素と、MASK（または ALL）に設定された renderMode を使用する 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>
watchface_effects.xml

パフォーマンス

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

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

色合いを使用する

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

<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>
watchface_effects.xml

これは、ウォッチフェイスのセクション全体をスタイル設定する場合に便利です。たとえば、ユーザー設定からスタイルを適用する場合（tintcolor="[CONFIGURATION.myThemeColor.0]" など）に使用できます。