TimTheToad
Topic Author
Posts: 4
Joined: 02 Nov 2020, 09:27

Changing Image Opacity Not Working As Expected

06 Nov 2020, 10:43

Hello guys!

I have a usercontrol which has a Storyboard changing the opacity of an Image(png).
When going through the different keyframes nothing happens in-between the different keyframes; the opacity changes from 0 to 1 instantly(when the set duration has passed) instead of smoothly interpolating/transitioning between the two given values.
xaml code:
<UserControl x:Class="CrazyCanvas.DamageIndicatorGUI"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:CrazyCanvasNoesisGUI"
             mc:Ignorable="d" 
             TextElement.FontFamily="gogono_cocoa_mochi.ttf#Gogono Cocoa Mochi"
             d:DesignHeight="100" d:DesignWidth="100"
             x:Name="DAMAGE_INDICATOR_CONTAINER">
    <UserControl.Resources>
        <Storyboard x:Key="DamageIndicatorStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DamageIndicator">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="test">

        <Image x:Name="DamageIndicator" Source="HitIndicator.png" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1">
        </Image> 
    </Grid>
</UserControl>
Storyboard begin being called from code:
void DamageIndicatorGUI::DisplayIndicator()
{
	m_pDamageIndicatorStoryboard->Begin();
}
Also if I set the opacity of the image to 0.5 the image disappears which makes me believe it handles image opacity differently from other UIElements.
Because when I use the same storyboard for changing the opacity of a grid/rectangle it behaves as expected; smooth transition between 0 and 1.

I've tried using the ImageMagick tool to convert the png to have premultiplied alpha but without good results.
I have also tried changing the TargetProperty and use (Image.opacity).

Also, the png has transparent areas which do appear transparent in our project.

Any hint is much appreciated as this problem is making my hair turn grey ^^

Tags:
 
User avatar
jsantos
Site Admin
Posts: 2959
Joined: 20 Jan 2012, 17:18
Contact:

Re: Changing Image Opacity Not Working As Expected

06 Nov 2020, 10:52

Are you able to reproduce this using XamlPlayer or are you using a custom renderer?
 
TimTheToad
Topic Author
Posts: 4
Joined: 02 Nov 2020, 09:27

Re: Changing Image Opacity Not Working As Expected

06 Nov 2020, 11:14

Are you able to reproduce this using XamlPlayer or are you using a custom renderer?

I did try but get this error: *Directory*/DamageIndicatorGUI.xaml(23): invalid token.

so it doesn't do much for me sadly.

However, it does work as intended using the Microsoft Blend.
 
User avatar
jsantos
Site Admin
Posts: 2959
Joined: 20 Jan 2012, 17:18
Contact:

Re: Changing Image Opacity Not Working As Expected

06 Nov 2020, 11:17

is this using a custom renderer or own renderers?
 
TimTheToad
Topic Author
Posts: 4
Joined: 02 Nov 2020, 09:27

Re: Changing Image Opacity Not Working As Expected

06 Nov 2020, 11:21

is this using a custom renderer or own renderers?
Sorry, we're using custom renderers. We've implemented NoesisGUI in our Vulkan renderer.
 
User avatar
jsantos
Site Admin
Posts: 2959
Joined: 20 Jan 2012, 17:18
Contact:

Re: Changing Image Opacity Not Working As Expected

06 Nov 2020, 11:31

Thanks for the answer. The issue is related to the integration. I recommend reproducing a minimal example (probably a simple image with opacity is enough) that fails in your integration and works in XamlPlayer. That way you can capture the frame and analyze the GPU commands side by side.

When opacity is being used (opacity < 1), the offscreen phase is being activated (when calling RenderOffscreen()), that phase may change the active render target and current viewport so first thing i would try is making sure those parameters are restored.

You can see this in our integration sample.

I recommend reading the render section of our Integration Tutorial.
 
TimTheToad
Topic Author
Posts: 4
Joined: 02 Nov 2020, 09:27

Re: Changing Image Opacity Not Working As Expected

06 Nov 2020, 11:36

Thanks for the answer. The issue is related to the integration. I recommend reproducing a minimal example (probably a simple image with opacity is enough) that fails in your integration and works in XamlPlayer. That way you can capture the frame and analyze the GPU commands side by side.

When opacity is being used (opacity < 1), the offscreen phase is being activated (when calling RenderOffscreen()), that phase may change the active render target and current viewport so first thing i would try is making sure those parameters are restored.

You can see this in our integration sample.

I recommend reading the render section of our Integration Tutorial.
Thank you for such quick response! I'll go back to our team with this information and if we get any other issues I'll come back to you guys :)

Who is online

Users browsing this forum: No registered users and 12 guests