Added transparency to window builder (#3105)

Applogies, had to recreate this pr because of branching issue.
Old PR: https://github.com/bevyengine/bevy/pull/3033

# Objective

Fixes #3032

Allowing a user to create a transparent window 

## Solution

I've allowed the transparent bool to be passed to the winit window builder

Cargo.toml

@@ -523,6 +523,10 @@ path = "examples/window/multiple_windows.rs"
 name = "scale_factor_override"
 path = "examples/window/scale_factor_override.rs"
 
+[[example]]
+name = "transparent_window"
+path = "examples/window/transparent_window.rs"
+
 [[example]]
 name = "window_settings"
 path = "examples/window/window_settings.rs"

crates/bevy_window/src/window.rs

@@ -547,6 +547,13 @@ pub struct WindowDescriptor {
     pub cursor_visible: bool,
     pub cursor_locked: bool,
     pub mode: WindowMode,
+    /// Sets whether the background of the window should be transparent.
+    /// # Platform-specific
+    /// - iOS / Android / Web: Unsupported.
+    /// - OSX / Linux : Not working as expected.
+    /// OSX transparent works with winit out of the box, so this issue might be related to: https://github.com/gfx-rs/wgpu/issues/687
+    /// Linux now works with this pr merged in, which should work with the next release of winit : https://github.com/rust-windowing/winit/pull/2006
+    pub transparent: bool,
     #[cfg(target_arch = "wasm32")]
     pub canvas: Option<String>,
 }
@@ -566,6 +573,7 @@ impl Default for WindowDescriptor {
             cursor_locked: false,
             cursor_visible: true,
             mode: WindowMode::Windowed,
+            transparent: false,
             #[cfg(target_arch = "wasm32")]
             canvas: None,
         }

crates/bevy_winit/src/winit_windows.rs

@@ -79,7 +79,8 @@ impl WinitWindows {
                 }
             }
             .with_resizable(window_descriptor.resizable)
-            .with_decorations(window_descriptor.decorations),
+            .with_decorations(window_descriptor.decorations)
+            .with_transparent(window_descriptor.transparent),
         };
 
         let constraints = window_descriptor.resize_constraints.check_constraints();

examples/README.md

@@ -262,6 +262,7 @@ Example | File | Description
 `clear_color_pipelined` | [`window/clear_color_pipelined.rs`](./window/clear_color_pipelined.rs) | Creates a solid color window with the pipelined renderer
 `multiple_windows` | [`window/multiple_windows.rs`](./window/multiple_windows.rs) | Creates two windows and cameras viewing the same mesh
 `scale_factor_override` | [`window/scale_factor_override.rs`](./window/scale_factor_override.rs) | Illustrates how to customize the default window settings
+`transparent_window` | [`window/transparent_window.rs`](./window/transparent_window.rs) | Illustrates making the window transparent and hiding the window decoration
 `window_settings` | [`window/window_settings.rs`](./window/window_settings.rs) | Demonstrates customizing default window settings
 
 # Platform-Specific Examples

examples/window/transparent_window.rs

@@ -0,0 +1,32 @@
+/// An example of how to display a window in transparent mode
+/// [Documentation & Platform support.](https://docs.rs/bevy/latest/bevy/prelude/struct.WindowDescriptor.html#structfield.transparent)
+use bevy::{prelude::*, render::pass::ClearColor, window::WindowDescriptor};
+
+fn main() {
+    App::new()
+        // ClearColor must have 0 alpha, otherwise some color will bleed through
+        .insert_resource(ClearColor(Color::NONE))
+        .insert_resource(WindowDescriptor {
+            // Setting `transparent` allows the `ClearColor`'s alpha value to take effect
+            transparent: true,
+            // Disabling window decorations to make it feel more like a widget than a window
+            decorations: false,
+            ..Default::default()
+        })
+        .add_startup_system(setup)
+        .add_plugins(DefaultPlugins)
+        .run();
+}
+
+fn setup(
+    mut commands: Commands,
+    asset_server: Res<AssetServer>,
+    mut materials: ResMut<Assets<ColorMaterial>>,
+) {
+    let texture_handle = asset_server.load("branding/icon.png");
+    commands.spawn_bundle(OrthographicCameraBundle::new_2d());
+    commands.spawn_bundle(SpriteBundle {
+        material: materials.add(texture_handle.into()),
+        ..Default::default()
+    });
+}