Universal Windows Platform – Tutorial Insider – Light Effect

Standard

Overview

comentsys.wordpress.com today features a Universal Windows Platform tutorial showing a Light Effect. This allows you to create a light effect on an element – in this case it’s the Visual Studio logo and uses an animation to demonstrate the effect passing over the logo. The light effect is triggered with Accept and cleared with Clear.

Details

This tutorial uses the new Composition features in Windows 10 available since the November and Anniversary updates, in this case it uses a PointLight. The first thing to do is to get the Visual which is the Visual Studio logo then a Compositor is used which is based on this to create a point light with a given colour – in the example it’s White then the CoordinateSpace is set to the Visual that defines the bounds for the point light and the Targets is set to to logo plus an Offset is then set. An animation is set up which wil cause the point light to seem to pass over the logo and this happens in a loop.

Behind the Scenes

This tutorial didn’t use an animation initially but this made the Point Light more difficult to see especially if a different source graphic was ever used but the Visual Studio logo made for a good one as it’s recognisable in it’s normal state so made the animation and the point light stand out much more. There’s a new design system from Microsoft that was announced in May 2017 which makes good use of the Composition features like using Point Lights so is a useful to thing to learn for the future.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s