Add fullscreen video background

gulp/image-resources.js

@@ -2,7 +2,7 @@
 const path = require("path");
 
 // Globs for non-ui resources
-const nonImageResourcesGlobs = ["../res/**/*.woff2", "../res/*.ico"];
+const nonImageResourcesGlobs = ["../res/**/*.woff2", "../res/*.ico", "../res/**/*.webm"];
 
 // Globs for ui resources
 const imageResourcesGlobs = ["../res/**/*.png", "../res/**/*.svg", "../res/**/*.jpg"];

src/css/ingame_hud/game_menu.scss

@@ -22,9 +22,11 @@
             cursor: pointer;
             transition: all 0.12s ease-in-out;
             transition-property: opacity, transform;
+            opacity: 0.9;
+            @include S(margin-left, 5px);
 
             &:hover {
-                opacity: 0.9;
+                opacity: 0.8;
                 transform: translateY(3px);
             }
             &.music {

src/css/states/main_menu.scss

@@ -4,9 +4,38 @@
     justify-content: center;
     flex-direction: column;
 
-    background: rgb(99, 212, 169) uiResource("main_menu/bg.noinline.jpg") center center / cover !important;
+    background: rgb(140, 165, 194) center center / cover !important;
     // background: $colorGreenBright !important;
 
+    .fullscreenBackgroundVideo {
+        z-index: -1;
+        position: fixed;
+        right: 50%;
+        bottom: 50%;
+        min-width: 100%;
+        min-height: 100%;
+
+        opacity: 0;
+        display: none;
+        transform: translate(50%, 50%);
+        filter: blur(10px);
+
+        $opacity: 0.2;
+        &.loaded {
+            display: block;
+            opacity: $opacity;
+
+            @include InlineAnimation(0.1s ease-in-out) {
+                0% {
+                    opacity: 0;
+                }
+                100% {
+                    opacity: $opacity;
+                }
+            }
+        }
+    }
+
     .logo {
         display: flex;
         flex-grow: 1;
@@ -17,6 +46,17 @@
         }
     }
 
+    .betaWarning {
+        @include S(width, 400px);
+        @include PlainText;
+        background: $colorRedBright;
+        @include S(padding, 10px);
+        @include S(border-radius, 4px);
+        color: #fff;
+        @include S(margin-bottom, 10px);
+        border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
+    }
+
     .mainContainer {
         @include S(margin-top, 40px);
         display: flex;
@@ -28,24 +68,18 @@
         @include S(border-radius, 4px);
         // border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
 
-        .betaWarning {
-            @include S(width, 400px);
-            @include PlainText;
-            background: $colorRedBright;
-            @include S(padding, 10px);
-            @include S(border-radius, 4px);
-            color: #fff;
-            @include S(margin-bottom, 10px);
-        }
-
         .playButton {
             @include SuperHeading;
             @include S(width, 130px);
             @include S(padding, 15px, 20px);
             letter-spacing: 0.3em !important;
             color: #fff;
-            background-color: #55585a;
+            background-color: $colorGreenBright;
             text-shadow: #{D(1px)} #{D(2px)} 0 rgba(0, 0, 0, 0.1);
+            transition: transform 0.12s ease-in-out;
+            &:hover {
+                transform: scale(1.02);
+            }
         }
     }
 

src/js/core/config.js

@@ -66,7 +66,7 @@ export const globalConfig = {
 
     debug: {
         /* dev:start */
-        fastGameEnter: true,
+        fastGameEnter: false,
         noArtificialDelays: true,
         disableSavegameWrite: false,
         showEntityBounds: false,

src/js/states/main_menu.js

@@ -9,15 +9,20 @@ export class MainMenuState extends GameState {
 
     getInnerHTML() {
         return `
+
+            <video autoplay muted loop class="fullscreenBackgroundVideo">
+                <source src="${cachebust("res/bg_render.webm")}" type="video/webm">
+            </video>
+
             <div class="logo">
                 <img src="${cachebust("res/logo.png")}" alt="shapez.io Logo">
             </div>
-
+        
+            <div class="betaWarning">
+                This game is still under development - Please report any issues!
+            </div>
 
             <div class="mainContainer">
-                <div class="betaWarning">
-                    This game is still in BETA - Please report any issues!
-                </div>
 
                   <button class="playButton styledButton">Play</button>
             </div>
@@ -53,6 +58,17 @@ export class MainMenuState extends GameState {
         if (G_IS_DEV && globalConfig.debug.fastGameEnter) {
             this.onPlayButtonClicked();
         }
+
+        // Initialize video
+        this.videoElement = this.htmlElement.querySelector("video");
+        if (this.videoElement) {
+            this.videoElement.playbackRate = 0.9;
+            this.videoElement.addEventListener("canplay", () => {
+                if (this.videoElement) {
+                    this.videoElement.classList.add("loaded");
+                }
+            });
+        }
     }
 
     onPlayButtonClicked() {