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: 278d129)
Placeholder intro cutscene
authorJulian Fietkau <git@fietkau.software>
Sun, 22 Sep 2024 02:43:28 +0000 (04:43 +0200)
committerJulian Fietkau <git@fietkau.software>
Sun, 22 Sep 2024 02:44:17 +0000 (04:44 +0200)
index.html patch | blob | history
main.js patch | blob | history
textures/windowsill1.png [moved from textures/windowsill-texture.png with 100% similarity] patch | blob | history

diff --git a/index.html b/index.html
index 32e957f3755469558b18f329e507c509a07890eb..ad15c8467d30744eacbac03e8149ab2a24c6b7cb 100644 (file)
--- a/index.html
+++ b/index.html
@@ -62,8 +62,8 @@
   canvas {
     box-sizing: border-box;
     display: block;
-    max-width: 100%;
-    max-height: 100%;
+    width: 100% !important;
+    height: 100% !important;
     border: 1px solid #000;
     margin: 0 auto;
     cursor: none;
@@ -99,6 +99,7 @@
 <span>Website: <a href="https://fietkau.media/up_in_the_air" target="_blank">fietkau.media/up_in_the_air</a></span>
 </div>
 </div>
+<div class="ui-page openingcutscene"></div>
 <div class="ui-page gameplay">
 <canvas width="800" height="800"></canvas>
 <div class="options" style="display: none">
diff --git a/main.js b/main.js
index e7ecf6937e4702c8d10635cbb68a8fbae142de15..c858c09020439a7174062fa31460703b24d473f1 100644 (file)
--- a/main.js
+++ b/main.js
@@ -62,7 +62,7 @@ function loadAllAssets(game, renderProgressCallback) {
       'textures/cloud5c.png': 2066,
       'textures/feather.png': 9196,
       'textures/pinwheel.png': 904,
-      'textures/windowsill-texture.png': 483119,
+      'textures/windowsill1.png': 483119,
     };
     let total = Object.keys(todoList).map(k => todoList[k]).reduce((a, b) => a + b, 0);
     let progress = {};
@@ -351,6 +351,15 @@ function init(game, canvas) {
     game.objects.clouds.push(cloud);
   }
 
+  const startingWindowsillMaterial = new THREE.MeshBasicMaterial({
+    map: game.assets.textures.windowsill1,
+    transparent: true,
+    alphaTest: 0.5,
+  });
+  game.objects.startingWindowsill = new THREE.Mesh(new THREE.PlaneGeometry(8, 12), startingWindowsillMaterial);
+  game.objects.startingWindowsill.position.set(-10.3, -game.courseRadius - 4, -7);
+  scene.add(game.objects.startingWindowsill);
+
   game.view.camera.position.set(-5, -game.courseRadius, game.view.camera.position.z);
 
   // All vectors used by the game loop (no allocations inside)
@@ -365,14 +374,38 @@ function init(game, canvas) {
 }
 
 function animate(game, renderer, scene) {
+  if(!('startTime' in game)) {
+    game.startTime = game.view.clock.getElapsedTime();
+  }
+  let delta = Math.min(game.view.clock.getDeltaTime(), 1 / 12);
+  game.timeProgress = (game.timeProgress + delta);
+
   if(game.ui.currentPage != 'gameplay') {
-    game.view.camera.position.setY(-game.courseRadius + 0.1 * Math.sin(game.view.clock.getElapsedTime() * 0.5));
+    let cameraSwayFactor = 1;
+    let cameraX = 0;
+    if(game.ui.currentPage == 'title') {
+      cameraX = -5;
+      game.objects.feather.position.set(cameraX - 6.45, -game.courseRadius - 4.2, -6.6);
+      game.objects.feather.rotation.set(Math.PI, 0, Math.PI / 2.1);
+    } else if(game.ui.currentPage == 'openingcutscene') {
+      cameraSwayFactor = 1 - (game.timeProgress / 8);
+      cameraX = -5 + Math.pow(Math.max(0, game.timeProgress - 3) / 5, 1.6) * 5;
+
+      game.objects.feather.position.setX(-11.45 + 12 * Math.min(1, easeInOut(Math.max(0, game.timeProgress - 4) / 4)));
+      game.objects.feather.position.setY(-game.courseRadius - 4.2 + 4 * Math.min(1, easeInOut(Math.max(0, game.timeProgress - 4) / 4)));
+      game.objects.feather.position.setZ(-6.6 + 6.6 * Math.min(1, easeInOut(Math.max(0, game.timeProgress - 4) / 4)));
+      if(game.timeProgress >= 8) {
+        game.ui.currentPage = 'gameplay';
+        game.timeProgress = 0;
+        start(game);
+      }
+    }
+    game.view.camera.position.setY(-game.courseRadius + 0.03 * cameraSwayFactor * Math.sin(game.view.clock.getElapsedTime() * 0.5));
+    game.view.camera.position.setX(cameraX + 0.015 * cameraSwayFactor * Math.sin(game.view.clock.getElapsedTime() * 0.7));
     renderer.render(scene, game.view.camera);
     return;
   }
-  let delta = Math.min(game.view.clock.getDeltaTime(), 1 / 12);
 
-  game.timeProgress = (game.timeProgress + delta) % game.timeTotal; // play infinitely for now
   const angle = 2 * Math.PI * (game.timeProgress / game.timeTotal);
   game.view.camera.position.x = game.courseRadius * Math.sin(angle);
   game.view.camera.position.y = - game.courseRadius * Math.cos(angle);
@@ -488,8 +521,7 @@ function animate(game, renderer, scene) {
 
 document.querySelector('#enableMusic').checked = false;
 document.querySelector('.startGame').addEventListener('click', () => {
-  game.ui.moveToPage('gameplay');
-  start(game);
+  game.ui.moveToPage('openingcutscene');
 });
 window['game'] = {
   state: 'loadingAssets',
@@ -520,6 +552,10 @@ game.ui.moveToPage = (target) => {
     }, fadeDuration, targetElem);
   }
   game.ui.currentPage = target;
+  game.timeProgress = 0;
+  if(game.view) {
+    game.startTime = game.view.clock.getElapsedTime();
+  }
 };
 loadAllAssets(game, (progress) => {
   let percentage = Math.floor(100 * progress);