Up-in-the-Air – commitdiff

Clone
You can use Git to clone the repository via the web URL. Download snapshot (zip)
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 90fa226)
Add title screen animation
authorJulian Fietkau <git@fietkau.software>
Fri, 27 Sep 2024 17:16:16 +0000 (19:16 +0200)
committerJulian Fietkau <git@fietkau.software>
Fri, 27 Sep 2024 17:16:16 +0000 (19:16 +0200)
index.html patch | blob | history
main.js patch | blob | history

diff --git a/index.html b/index.html
index fc69a38ef5e5464769b38859f92ccea9d24e5ed0..a207b355350ae69847fee32c59ec352c2258889f 100644 (file)
--- a/index.html
+++ b/index.html
@@ -77,6 +77,7 @@
     font-size-adjust: 0.4;
     image-rendering: pixelated;
     box-shadow: 1px 1px 3px #000a;
+    overflow: hidden;
   }
   .virtual-input-widget {
     box-sizing: border-box;
@@ -378,6 +379,7 @@
   .ui-page > button {
     padding: 0;
     width: 8em;
+    color: #000;
     font-family: Cookie;
     font-size: 2.5em;
     line-height: 1em;
diff --git a/main.js b/main.js
index f9f8baf3d21693eda368a5ab242d9dc7ddaed6ac..0f81ed57a8d26c0cee49586b7697b13c3a4db2b2 100644 (file)
--- a/main.js
+++ b/main.js
@@ -635,6 +635,7 @@ function animate(game, renderer, scene) {
       cameraSwayFactor = 0;
     }
     let cameraX = -5;
+    let cameraY = 0;
     if(game.ui.currentPage == 'title') {
       if(!game.ui.reachedEnd) {
         game.objects.feather.position.set(cameraX - 8.45, -game.courseRadius - 6.4, -9.9);
@@ -642,6 +643,39 @@ function animate(game, renderer, scene) {
       } else {
         cameraX = 5;
       }
+      if(!game.ui.reachedStart) {
+        if(game.timeProgress < 1) {
+          game.ui.root.querySelector('.ui-page.title h1').style.opacity = '0';
+          game.ui.root.querySelectorAll('.ui-page.title button').forEach((btn) => {
+            btn.disabled = true;
+            btn.style.position = 'relative';
+            btn.style.left = '10em';
+            btn.style.opacity = '0';
+          });
+          game.ui.root.querySelector('.ui-page.title .footer').style.opacity = '0';
+          cameraX += Math.max(0.0, 1 - easeInOut(0.5 + game.timeProgress / 2));
+          cameraY += Math.max(0.0, 10 * Math.pow(0.5 - game.timeProgress / 2, 2));
+        } else if(game.timeProgress >= 1.0 && game.timeProgress <= 2.1) {
+          game.ui.root.querySelector('.ui-page.title h1').style.opacity = Math.min(1.0, game.timeProgress - 1.0).toFixed(2);
+        }
+        if(game.timeProgress >= 1.5 && game.timeProgress <= 3.0) {
+          game.ui.root.querySelectorAll('.ui-page.title button').forEach((btn) => {
+            let timeOffset = Array.from(btn.parentNode.children).indexOf(btn) - 2;
+            btn.style.left = 10 * easeInOut(Math.max(0.0, Math.min(1.0, 0.3 * timeOffset + 2.5 - game.timeProgress))).toFixed(2) + 'em';
+            let opacity = easeInOut(Math.max(0.0, Math.min(1.0, -0.3 * timeOffset + game.timeProgress - 1.5)));
+            btn.style.opacity = opacity.toFixed(2);
+            if(opacity == 1.0) {
+              btn.disabled = false;
+            }
+          });
+        }
+        if(game.timeProgress >= 3.0 && game.timeProgress <= 4.0) {
+          game.ui.root.querySelector('.ui-page.title .footer').style.opacity = easeInOut(Math.max(0.0, Math.min(1.0, game.timeProgress - 3.0))).toFixed(2);
+        }
+        if(game.timeProgress > 4.0) {
+          game.ui.reachedStart = true;
+        }
+      }
     } else if(game.ui.currentPage == 'openingcutscene') {
       if(game.ui.reachedEnd) {
         reset(game);
@@ -710,7 +744,7 @@ function animate(game, renderer, scene) {
     } else if(game.ui.reachedEnd) {
       cameraX = 5;
     }
-    game.view.camera.position.setY(-game.courseRadius + 0.07 * cameraSwayFactor * Math.sin(game.view.clock.getElapsedTime() * 0.5));
+    game.view.camera.position.setY(cameraY - game.courseRadius + 0.07 * cameraSwayFactor * Math.sin(game.view.clock.getElapsedTime() * 0.5));
     game.view.camera.position.setX(cameraX + 0.05 * cameraSwayFactor * Math.sin(game.view.clock.getElapsedTime() * 0.7));
     renderer.render(scene, game.view.camera);
     return;
@@ -1465,6 +1499,14 @@ game.ui.moveToPage = (target, skipFade = false) => {
       page.style.display = 'none';
     }, fadeDuration, page);
   });
+  if(game.ui.currentPage == 'title' && !game.ui.reachedStart) {
+    setTimeout(() => {
+      game.ui.root.querySelector('.ui-page.title h1').removeAttribute('style');
+      game.ui.root.querySelectorAll('.ui-page.title button').forEach(btn => { btn.disabled = false; btn.removeAttribute('style'); });
+      game.ui.root.querySelector('.ui-page.title .footer').removeAttribute('style');
+      game.ui.reachedStart = true;
+    }, fadeDuration);
+  }
   if(target == 'title' && game.view && game.view.music.isPlaying) {
     game.view.music.stop();
     if(game.view.music.timeoutID) {