BB Theme - Show video at game launch

[la vache qui rit]

Hi! I run competitions using Big Box, and I edited the default startup theme to show custom images of the controls before games start (using the Arcade Controls Information folder across all platforms). Sometimes, images alone aren't enough to explain how to play or what controls do. 

My goal is to show a custom video from the Videos/[platform]/Theme folder and fallback to the controls information where a video does not exist. I've read through the included theme documentation on video playback, but I'm not sure which bindings or controls to use. 

 

Here's how it looks now:

Canvas Name="Canvas">
        <Image Source="{Binding SelectedGame.ArcadeControlsInformationImagePath}" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality"
            Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />
        <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">

 

 

Edited Thursday at 07:19 AM by la vache qui rit
attach video - rephrase request

[faeran]

8 hours ago, la vache qui rit said:

Hi! I run competitions using Big Box, and I edited the default startup theme to show custom images of the controls before games start (using the Arcade Controls Information folder across all platforms). Sometimes, images alone aren't enough to explain how to play or what controls do. 

My goal is to show a custom video from the Videos/[platform]/Theme folder and fallback to the controls information where a video does not exist. I've read through the included theme documentation on video playback, but I'm not sure which bindings or controls to use. 

 

Here's how it looks now:

Canvas Name="Canvas">
        <Image Source="{Binding SelectedGame.ArcadeControlsInformationImagePath}" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality"
            Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />
        <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">

 

 

Hi there.

Something to note, make sure you are using our online theme documentation, as it has the latest changes: https://feedback.launchbox.gg/help/collections/8448047-theming

Since you only pasted part of the top part of a Canvas, I'm not entirely sure how to handled this. See if you can paste in your full startup theme code and I can take a look at it when I have time.

The goal from what you've written is:

• Play game theme video
• If game has no video, fall back to an arcade controls image

[la vache qui rit]

<UserControl 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:d="http://schemas.microsoft.com/expression/blend/2008"
	     xmlns:converters="clr-namespace:Unbroken.LaunchBox.Windows.Converters;assembly=Unbroken.LaunchBox.Windows"
	     xmlns:videos="clr-namespace:Unbroken.LaunchBox.Windows.BigBox.Controls;assembly=BigBox"
             mc:Ignorable="d"
             d:DesignHeight="562"
             d:DesignWidth="1000"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             FocusVisualStyle="{x:Null}"
             BorderThickness="0"
             Margin="0"
             Padding="0"
             Background="#000">
    <Canvas Name="Canvas">
	
        <Image Source="{Binding SelectedGame.ArcadeControlsInformationImagePath}" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality"
            Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />
        <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
            <Grid.RowDefinitions>
                <RowDefinition Height="10*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="16*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="10*" />
                <RowDefinition Height="20*" />
                <RowDefinition Height="40*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="31*" />
                <ColumnDefinition Width="30*" />
                <ColumnDefinition Width="31*" />
                <ColumnDefinition Width="4*" />
            </Grid.ColumnDefinitions>
            
        </Grid>
    </Canvas>
</UserControl>

Above is the entirety of the code from the theme file.