All aboard the Metro UI Principles Windows Phone 7 Xbox Windows 8 Play time.
Build 2016 - P492 - The Power of the EffectBrush in Windows UI
-
Upload
windows-developer -
Category
Technology
-
view
253 -
download
1
Transcript of Build 2016 - P492 - The Power of the EffectBrush in Windows UI
![Page 1: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/1.jpg)
#Build2016
Effects in the Visual LayerWindows Composition: The Windows 10 EffectBrushChris RaubacherSenior Dev LeadKelly RennerSenior Program Manager
![Page 2: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/2.jpg)
Effects designed and developed for UI
Click icon to add picture
![Page 3: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/3.jpg)
Effect feature principlesEffect graphs can support multiple effects that can refer to one and other Wherever possible effects support animatable effect propertiesPerformance is a high priority - Effect rendering must maintain high and consistent framerates, no glitchesDevelopers can use the power of graphics and rendering without extensive knowledge of D3D or D2DRequirements are driven by both developers and designers so designs can be realized in code
What is a Composition Effect?A composition effect supports real time UI processing to create or manipulate imagery
![Page 4: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/4.jpg)
• Visuals - How your tree structured• Visual Tree – A hierarchical collection of visual objects• SpriteVisual - The visual that is used to draw content on screen
• Brushes - CompositionEffectBrush paints a visual with the contents of a composition effect
• UWP - Where possible use Win2D (OSS graphics C# runtime) packages for effect descriptions
Key Concepts
![Page 5: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/5.jpg)
Simple Effect Recipe Create a SurfaceBrush to hold your source content
CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();LoadImage(surfaceBrush, new Uri("ms-appx:///Assets/cat.png"));
Describe your effectvar graphicsEffect = new SaturationEffect
Saturation = 0.0f, Source = new CompositionEffectSourceParameter("mySource")
Compile your effect var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
var myEffect = effectFactory.CreateBrush(); myEffect.SetSourceParameter("mySource", surfaceBrush);
Apply your effectvar myVisual = _compositor.CreateSpriteVisual()myVisual.Brush = myEffect; myVisual.Size = new Vector2(220, 300);
_root.Children.InsertAtBottom(myVisual);
![Page 6: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/6.jpg)
Simple Effect Recipe Chain an effect At the description step – Add another effect as source input to the effect
var graphicsEffect = new CompositeEffect { Mode = CanvasComposite.DestinationIn, Sources = { new SaturationEffect { Saturation = 0, Source = new CompositionEffectSourceParameter("image") }, new Transform2DEffect { Name = "maskTransform", Source = new CompositionEffectSourceParameter("mask") } }
![Page 7: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/7.jpg)
Simple Effect Recipe Add AnimationAt the compile step - specify animatable properties
var effectFactory = _compositor.CreateEffectFactory(graphicsEffect, new[] { "SaturationEffect.Saturation" });
var myEffect = effectFactory.CreateBrush(); myEffect.SetSourceParameter("mySource", surfaceBrush);
myEffect.Properties.InsertScalar("saturationEffect.Saturation", 0f);
Create your animationScalarKeyFrameAnimation 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_myEffect.Properties.StartAnimation("saturationEffect.Saturation", effectAnimation);
![Page 8: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/8.jpg)
Demo Chaining and Animating Effects
![Page 9: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/9.jpg)
Image Lighting
![Page 10: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/10.jpg)
Light TypesPoint Point lights have color and position within a scene, but no single direction. They give off light equally in all directions. Like a lightbulb Directional lights have only color and direction, not position. They emit parallel light. This means that all light generated by directional lights travels through a scene in the same direction. Like the sunSpot Spotlights have color, position, and direction in which they emit light. Light emitted from a spotlight is made up of a bright inner cone and a larger outer cone. Like a flashlight.
![Page 11: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/11.jpg)
Image Reflection Diffused Diffused light appears to be a non-reflective surface and the light is scattered in all directionsSpecular Specular lighting effect appears to be a reflective surface Height Maps Height maps create an image with surface and elevation information to create an illusion of light falling on the textures of an image.
![Page 12: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/12.jpg)
Demo Animating Image Light with Heightmaps
![Page 13: Build 2016 - P492 - The Power of the EffectBrush in Windows UI](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ec13d61a28abe03c8b469f/html5/thumbnails/13.jpg)
How to get started with the Visual Layer and EffectsSamples: github.com/microsoft/compositionRe-visit Build on Channel 9MSDN: search for windows.ui.compositionEffects System Overviewhttps://msdn.microsoft.com/en-us/windows/uwp/graphics/composition-effects
Questions? Feedback?External, general questions: [email protected]
Follow us on Twitter@wincomposition