コンポジション効果Composition effects

Windows.UI.Composition API により、アニメーション化可能な効果プロパティを持つ画像と UI にリアルタイムの効果を適用できます。The Windows.UI.Composition APIs allows real-time effects to be applied to images and UI with animatable effect properties. この概要では、コンポジションのビジュアルに効果を適用するために使用できる機能に目を通します。In this overview, we’ll run through the functionality available that allows effects to be applied to a composition visual.

アプリケーションの効果を記述する開発者に対して ユニバーサル Windows プラットフォーム (UWP) との整合性をサポートするには、コンポジション効果で Win2D の IGraphicsEffect インターフェイスを活用し、Microsoft.Graphics.Canvas.Effects 名前空間を介して効果記述子を使用します。To support Universal Windows Platform (UWP) consistency for developers describing effects in their applications, composition effects leverage Win2D’s IGraphicsEffect interface to use effect descriptions via the Microsoft.Graphics.Canvas.Effects Namespace.

ブラシ効果は、一連の既存画像に効果を適用することでアプリケーションの領域をペイントするために使用されます。Brush effects are used to paint areas of an application by applying effects to a set of existing images. Windows 10 のコンポジション効果 API ではスプライト ビジュアルが重視されます。Windows 10 composition effect APIs are focused on Sprite Visuals. SpriteVisual を使うと、色、画像、効果の作成で柔軟性と関係性を得られます。The SpriteVisual allows for flexibility and interplay in color, image and effect creation. SpriteVisual は、2D の四角形をブラシで埋めることができるコンポジション ビジュアル タイプです。The SpriteVisual is a composition visual type that can fill a 2D rectangle with a brush. ビジュアルは四角形の境界を定義し、ブラシは四角形のペイントに使用されるピクセルを定義します。The visual defines the bounds of the rectangle and the brush defines the pixels used to paint the rectangle.

効果ブラシは、コンテンツが効果グラフの出力に基づくコンポジション ツリー ビジュアルで使用されます。Effect brushes are used on composition tree visuals whose content comes from the output of an effect graph. 効果は既存のサーフェスとテクスチャを参照できますが、他のコンポジション ツリーの出力は参照できません。Effects can reference existing surfaces/textures, but not the output of other composition trees.

XamlCompositionBrushBase で効果ブラシを使って、XAML UIElement に効果を適用することもできます。Effects can also be applied to XAML UIElements using an effect brush with XamlCompositionBrushBase.

効果機能Effect Features

効果ライブラリEffect Library

現在、コンポジションでは次の効果がサポートされています。Currently composition supports the following effects:

効果Effect 説明Description
2D アフィン変換2D affine transform 画像に 2D アフィン変換マトリックスを適用します。Applies a 2D affine transform matrix to an image. 効果の サンプル では、アルファ マスクのアニメーション化にこの効果が使われています。We used this effect to animate alpha mask in our effect samples.
算術コンポジットArithmetic composite 柔軟な方程式を使って 2 つの画像を組み合わせます。Combines two images using a flexible equation. サンプル では、クロスフェード効果の作成に算術コンポジットが使われています。We used arithmetic composite to create a crossfade effect in our samples.
ブレンド効果Blend effect 2 つの画像を組み合わせるブレンド効果を作成します。Creates a blend effect that combines two images. コンポジションでは、Win2D でサポートされている 26 個の ブレンド モード のうち 21 個が用意されています。Composition provides 21 of the 26 blend modes supported in Win2D.
カラー ソースColor source 単色が含まれている画像を生成します。Generates an image containing a solid color.
コンポジットComposite 2 つの画像を組み合わせます。Combines two images. コンポジションでは、Win2D でサポートされている 13 個の コンポジット モード がすべて用意されています。Composition provides all 13 composite modes supported in Win2D.
ContrastContrast 画像のコントラストを増減します。Increases or decreases the contrast of an image.
露出Exposure 画像の露出を増減します。Increases or decreases the exposure of an image.
グレースケールGrayscale 画像を灰色のモノクロ画像に変換します。Converts an image to monochromatic gray.
ガンマ伝達Gamma transfer チャネルあたりのガンマ伝達関数を適用することで、画像の色を変更します。Alters the colors of an image by applying a per-channel gamma transfer function.
色相回転Hue rotate 色相値を回転することで、画像の色を変更します。Alters the color of an image by rotating its hue values.
InvertInvert 画像の色を反転します。Inverts the colors of an image.
彩度Saturate 画像の彩度を変更します。Alters the saturation of an image.
セピアSepia 画像をセピア調に変換します。Converts an image to sepia tones.
色温度と濃淡Temperature and tint 画像の色温度および濃淡を調整します。Adjusts the temperature and/or tint of an image.

詳しくは、Win2D の Microsoft.Graphics.Canvas.Effects 名前空間をご覧ください。See Win2D’s Microsoft.Graphics.Canvas.Effects Namespace for more detailed information. 効果の合成でサポートされていませんとして示されている[NoComposition]します。Effects not supported in composition are noted as [NoComposition].

チェーン効果Chaining Effects

効果をチェーンして、アプリケーションの画像で複数の効果を同時に使用できます。Effects can be chained, allowing an application to simultaneously use multiple effects on an image. 効果グラフは、相互に参照できる複数の効果をサポートできます。Effect graphs can support multiple effects that can refer to one and other. 効果を記述するときは、効果に対する入力として効果を追加します。When describing your effect, simply add an effect as input to your effect.

IGraphicsEffect graphicsEffect =
new Microsoft.Graphics.Canvas.Effects.ArithmeticCompositeEffect
{
  Source1 = new CompositionEffectSourceParameter("source1"),
  Source2 = new SaturationEffect
  {
    Saturation = 0,
    Source = new CompositionEffectSourceParameter("source2")
  },
  MultiplyAmount = 0,
  Source1Amount = 0.5f,
  Source2Amount = 0.5f,
  Offset = 0
}

先ほどの例では、2 つの入力を受け取る算術コンポジット効果について説明しています。The example above describes an arithmetic composite effect which has two inputs. 2 番目の入力の彩度効果では、彩度プロパティを 0.5 に設定しています。The second input has a saturation effect with a .5 saturation property.

アニメーションのサポートAnimation Support

効果プロパティはアニメーション化をサポートしています。効果のコンパイル時に、効果プロパティをアニメーション化するか、定数として固定するかを指定できます。Effect properties support animation, during effect compilation you can specify effect properties can be animated and which can be "baked in" as constants. アニメーション化可能なプロパティは、「効果名.プロパティ名」という形式の文字列で指定されます。The animatable properties are specified through strings of the form “effect name.property name”. これらのプロパティは、効果の複数のインスタンスで個別にアニメーション化できます。These properties can be animated independently over multiple instantiations of the effect.

効果プロパティ: 固定とアニメーション化Constant vs Animated Effect Properties

効果のコンパイル時に、効果プロパティを動的に設定されるようにするか、定数として固定されるようにするかを指定できます。During effect compilation you can specify effect properties as dynamic or as properties that are "baked in" as constants. 動的プロパティは「.」という形式の文字列で指定します。The dynamic properties are specified through strings of the form “.”. 動的プロパティを特定の値に設定するか、コンポジションのアニメーション システムを使ってアニメーション化できます。The dynamic properties can be set to a specific value or can be animated using the composition animation system.

先ほどの効果のコンパイル時、彩度を 0.5 に固定するか、動的に設定される (アニメーション化される) ようにするか、柔軟に選べます。When compiling the effect description above, you have the flexibility of either baking in saturation to be equal to 0.5 or making it dynamic and setting it dynamically or animating it.

固定の彩度で効果をコンパイル:Compiling an effect with saturation baked in:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

動的な彩度で効果をコンパイル:Compiling an effect with dynamic saturation:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect, new[]{"SaturationEffect.Saturation"});
_catEffect = effectFactory.CreateBrush();
_catEffect.SetSourceParameter("mySource", surfaceBrush);
_catEffect.Properties.InsertScalar("saturationEffect.Saturation", 0f);

その後、先ほどの効果の彩度プロパティを静的な値に設定するか、式または ScalarKeyFrame アニメーションのいずれかを使ってアニメーション化できます。The saturation property of the effect above can then be either set to a static value or animated using either Expression or ScalarKeyFrame animations.

次のように、効果の彩度プロパティのアニメーション化に使われる ScalarKeyFrame を作成できます。You can create a ScalarKeyFrame that will be used to animate the Saturation property of an effect like this:

ScalarKeyFrameAnimation effectAnimation = _compositor.CreateScalarKeyFrameAnimation();
            effectAnimation.InsertKeyFrame(0f, 0f);
            effectAnimation.InsertKeyFrame(0.50f, 1f);
            effectAnimation.InsertKeyFrame(1.0f, 0f);
            effectAnimation.Duration = TimeSpan.FromMilliseconds(2500);
            effectAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

次のように、効果の彩度プロパティのアニメーション化を始めます。Start the animation on the Saturation property of the effect like this:

catEffect.Properties.StartAnimation("saturationEffect.Saturation", effectAnimation);

キー フレームを使った効果プロパティのアニメーション化については、彩度を下げるアニメーション サンプル を、効果や式の使用については、AlphaMask サンプル をご覧ください。See the Desaturation - Animation sample for effect properties animated with key frames and the AlphaMask sample for use of effects and expressions.

独立したプロパティを持つ複数の効果インスタンスMultiple Effect Instances with Independent Properties

効果のコンパイル時にパラメーターが動的であることを指定することにより、パラメーターを効果インスタンスごとに変更できます。By specifying that a parameter should be dynamic during effect compilation, the parameter can then be changed on a per-effect instance basis. これにより、2 つのビジュアルに同じ効果を使用しても、異なる効果プロパティを使って表示できます。This allows two Visuals to use the same effect but be rendered with different effect properties. 詳しくは、ColorSource と Blend の サンプル をご覧ください。See the ColorSource and Blend sample for more information.

コンポジション効果の概要Getting Started with Composition Effects

このクイック スタート チュートリアルでは、効果のいくつかの基本機能の使用方法を示します。This quick start tutorial shows you how to make use of some of the basic capabilities of effects.

Visual Studio のインストールInstalling Visual Studio

  • サポートされている Visual Studio バージョンがインストールされていない場合は、「Visual Studio ダウンロード」ページをご覧ください。If you don't have a supported version of Visual Studio installed, go to the Visual Studio Downloads page here.

新しいプロジェクトを作成します。Creating a new project

  • [ファイル]、[新規]、[プロジェクト] の順にクリックします。Go to File->New->Project...
  • [Visual C#] を選択します。Select 'Visual C#'
  • 「空のアプリ (Windows ユニバーサル)」を作成します (Visual Studio 2015)。Create a 'Blank App (Windows Universal)' (Visual Studio 2015)
  • 選択したプロジェクト名を入力します。Enter a project name of your choosing
  • [OK] をクリックします。Click 'OK'

Win2D のインストールInstalling Win2D

Win2D は Nuget.org パッケージとしてリリースされており、効果を使用する前にインストールする必要があります。Win2D is released as a Nuget.org package and needs to be installed before you can use effects.

Windows 10 用と Windows 8.1 用の 2 つのパッケージ バージョンがあります。There are two package versions, one for Windows 10 and one for Windows 8.1. コンポジション効果の場合、Windows 10 バージョンを使います。For Composition effects you’ll use the Windows 10 version.

  • [ツール]、[NuGet パッケージ マネージャー]、[ソリューションの NuGet パッケージの管理] の順にクリックして、NuGet パッケージ マネージャーを起動します。Launch the NuGet Package Manager by going to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
  • 「Win2D」を検索し、Windows のターゲット バージョンに適したパッケージを選択します。Search for "Win2D" and select the appropriate package for your target version of Windows. Windows.UI.Composition はBecause Windows.UI. Windows 10 (8.1 ではない) をサポートするため、Win2D.uwp を選択します。Composition supports Windows 10 (not 8.1), select Win2D.uwp.
  • 使用許諾契約書に同意します。Accept the license agreement
  • [閉じる] をクリックします。Click 'Close'

次のいくつかの手順では、コンポジション API を使って、すべての彩度を除去する彩度効果をこの猫の画像に適用します。In the next few steps we will use composition API’s to apply a saturation effect to this cat image which will remove all saturation. このモデルでは効果が作成され、画像に適用されます。In this model the effect is created and then applied to an image.

ソース画像

コンポジション設定の基本Setting your Composition Basics

Windows.UI.Composition コンポジターとルート ContainerVisual の設定方法、およびコア ウィンドウとの関連付け方法の例については、GitHub で コンポジション ビジュアル ツリーのサンプル をご覧ください。See the Composition Visual Tree Sample on our GitHub for an example of how to set up Windows.UI.Composition Compositor, root ContainerVisual, and associate with the Core Window.

_compositor = new Compositor();
_root = _compositor.CreateContainerVisual();
_target = _compositor.CreateTargetForCurrentView();
_target.Root = _root;
_imageFactory = new CompositionImageFactory(_compositor)
Desaturate();

CompositionSurface ブラシの作成Creating a CompositionSurface Brush

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadImage(surfaceBrush);

効果の作成、コンパイル、および適用Creating, Compiling and Applying Effects

  1. グラフィックス効果を作成するCreate the graphics effect

    var graphicsEffect = new SaturationEffect
    {
      Saturation = 0.0f,
      Source = new CompositionEffectSourceParameter("mySource")
    };
    
  2. 効果をコンパイルし、効果ブラシを作成するCompile the effect and create effect brush

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
    
    var catEffect = effectFactory.CreateBrush();
    catEffect.SetSourceParameter("mySource", surfaceBrush);
    
  3. コンポジション ツリーに SpriteVisual を作成し、効果を適用するCreate a SpriteVisual in the composition tree and apply the effect

    var catVisual = _compositor.CreateSpriteVisual();
      catVisual.Brush = catEffect;
      catVisual.Size = new Vector2(219, 300);
      _root.Children.InsertAtBottom(catVisual);
    }
    
  4. 読み込む画像ソースを作成する。Create your image source to load.

    CompositionImage imageSource = _imageFactory.CreateImageFromUri(new Uri("ms-appx:///Assets/cat.png"));
    CompositionImageLoadResult result = await imageSource.CompleteLoadAsync();
    if (result.Status == CompositionImageLoadStatus.Success)
    
  5. SpriteVisual のサーフェスのサイズとブラシSize and brush the surface on the SpriteVisual

    brush.Surface = imageSource.Surface;
    
  6. アプリを実行する – 結果は彩度を下げた猫になるはずです。Run your app – your results should be a desaturated cat:

彩度を下げた画像

詳細情報More Information