whoosh in and out with alpha

index.html

@@ -268,7 +268,8 @@
 <script src="scripts/intro/Intro_BG.js"></script>
 
 <!--
-<script src="scripts/act1/Act1_SceneSetup.js?v=2"></script>
+ACT I
+<script src="scripts/act1/Act1_SceneSetup.js"></script>
 <script src="scripts/act1/Act1_Hong.js"></script>
 <script src="scripts/act1/Act1_Beebee.js"></script>
 <script src="scripts/act1/Act1_Outro_BG.js"></script>

scenes/act2.md

@@ -8,6 +8,8 @@ n: party words party words party words
 
 n: // callback: retweet news story, or subtweet, or Tinder serial killer (or: fallback - anxiety in general)
 
+`publish("act2-out-1");`
+
 [Oh god they all hate you!](#act2a_social)
 
 [Ogling the host, you pervert?](#act2a_perv)
@@ -18,6 +20,8 @@ n: // callback: retweet news story, or subtweet, or Tinder serial killer (or: fa
 
 b: They're secretly gossiping about you!
 
+`publish("act2-in-2");`
+
 b: They're talking behind your back IN FRONT OF YOUR BACK
 
 b: We're just bringing this party down by being around here. Human, we have to leave *now* before--

scripts/act2/Act2_BG.js

@@ -20,39 +20,109 @@ function BG_Party(){
 		y: 189
 	});
 
-	// 
+	// Anxiety BG
+	self.anxiety = new BG_Anxiety();
 
+	// LAYERS
+	self.layers = [
+		self.bgSprite,
+		self.anxiety,
+		self.actionSprite
+	];
+	var PARALLAXES = [
+		0.5, // party bg
+		0.0, // anxiety bg
+		1.0, // hong & hunter
+	];
+	var ALPHAS = [
+		1.0, // party bg
+		0.0, // anxiety bg
+		1.0, // hong & hunter
+	];
+
+	var parallax = 0;
+	var parallaxTicker = 0;
+	var PARALLAXING = null;
 	self.update = function(){
 
+		// START PARALLAXING IN / OUT
+		if(PARALLAXING!=null){
+			
+			if(PARALLAXING=="out"){
+				parallaxTicker += 1/60; // 0 to 1 in one second
+			}
+			if(PARALLAXING=="in"){
+				parallaxTicker -= 1/60; // 1 to 0 in one second
+			}
+			if(parallaxTicker>1) parallaxTicker = 1;
+			if(parallaxTicker<0) parallaxTicker = 0;
+
+			// 0 to -180 in one second, smoothed
+			var t = Math.cos(parallaxTicker*Math.TAU/2); // 1 to -1
+			t = (1-t)/2; // 0 to 1
+			parallax = -t*200;
+
+			// Anxiety Alpha
+			ALPHAS[1] = t;
+
+			// DONE
+			if(t==1 || t==0){
+				PARALLAXING = null;
+			}
+
+		}
+
+		// Anxiety BG
+		if(ALPHAS[1]>0){
+			self.anxiety.update(ALPHAS[1]);
+			if(ALPHAS[1]==1){ // if fully visible...
+				ALPHAS[0] = 0; // hide everything under
+			}else{
+				ALPHAS[0] = 1; // show everything under
+			}
+		}
+
 	};
 
 	self.draw = function(ctx){
-		self.bgSprite.draw(ctx);
-		self.actionSprite.draw(ctx);
+
+		ctx.save();
+
+		for(var i=0; i<self.layers.length; i++){
+			var layer = self.layers[i];
+			layer.x = PARALLAXES[i] * parallax;// - OFFSETS[i];
+			if(ALPHAS[i]>0){
+				ctx.globalAlpha = ALPHAS[i];
+				layer.draw(ctx);
+			}
+		}
+
+		ctx.restore();
+
 	};
 
 	var _subscriptions = [];
 	_subscriptions.push(
 		subscribe("act2-out-1", function(){
-			// WHOOSH
-			sfx("whoosh");
-		});
+			PARALLAXING = "out";
+			sfx("whoosh"); // WHOOSH
+		}),
 		subscribe("act2-in-2", function(){
-			// WHOOSH
-			sfx("whoosh");
-		});
+			PARALLAXING = "in";
+			sfx("whoosh"); // WHOOSH
+		}),
 		subscribe("act2-out-3", function(){
 			// WHOOSH
 			sfx("whoosh");
-		});
+		}),
 		subscribe("act2-in-4", function(){
 			// WHOOSH
 			sfx("whoosh");
-		});
+		}),
 		subscribe("act2-out-5", function(){
 			// WHOOSH
 			sfx("whoosh");
-		});
+		})
 	);
 
 }

scripts/act2/Act2_SceneSetup.js

@@ -15,11 +15,11 @@ SceneSetup.act2 = function(){
 	Game.scene.children.push(bg);
 
 	// Hong
-	var hong = new Act1_Hong();
+	/*var hong = new Act1_Hong();
 	Game.scene.children.push(hong);
 
 	// Beebee
 	var beebee = new Act1_Beebee();
-	Game.scene.children.push(beebee);
+	Game.scene.children.push(beebee);*/
 
 };

scripts/game/BG_Anxiety.js

@@ -90,6 +90,12 @@ function BG_Anxiety(){
 	}
 
 	var allBoxAlpha = 0;
+	self.update = function(alpha){
+		allBoxAlpha = alpha;
+		self.boxes.forEach(function(box){
+			self.updateBox(box);
+		});
+	};
 	self.draw = function(ctx){
 
 		// A big ol' black box
@@ -97,14 +103,11 @@ function BG_Anxiety(){
 		ctx.fillRect(0,0, BG_WIDTH, BG_HEIGHT);
 
 		// All-box alpha
-		allBoxAlpha += 1/30;
-		if(allBoxAlpha>1) allBoxAlpha=1;
+		// allBoxAlpha += 1/30;
+		// if(allBoxAlpha>1) allBoxAlpha=1;
 
 		// Moving white boxes
 		ctx.globalAlpha = allBoxAlpha;
-		self.boxes.forEach(function(box){
-			self.updateBox(box);
-		});
 		self.boxes.forEach(function(box){
 			self.drawBox(box, ctx);
 		});

scripts/game/Game.js

@@ -863,6 +863,9 @@ Game.updateCanvas = function(){
 	ctx.scale(2,2);
 	
 	// Update/Draw all kids
+	Game.scene.children.forEach(function(child){
+		if(child.update) child.update();
+	});
 	Game.scene.children.forEach(function(child){
 		child.draw(ctx);
 	});