intro sounds and outro FLIGHT

CREDITS.md

@@ -0,0 +1,21 @@
+Intro Scream: https://freesound.org/people/analogchill/sounds/35716/ (MaderaDelEste Films)
+Dramatic Hit: https://freesound.org/people/qubodup/sounds/222517/
+Nature Ambience: https://freesound.org/people/michorvath/sounds/427601/
+Grass Footstep 1: https://freesound.org/people/morganpurkis/sounds/384651/
+Grass Footstep 2: https://freesound.org/people/morganpurkis/sounds/384643/
+Eating a Sandwich: https://freesound.org/people/dleverett/sounds/441906/
+Search a Bag: https://freesound.org/people/Tristan_Lohengrin/sounds/233441/
+Whoosh: https://freesound.org/people/crackles04/sounds/369698/
+Empty Room Ambience: https://freesound.org/people/kyles/sounds/451616/
+Ball Bounce: https://freesound.org/people/13GPanska_Lakota_Jan/sounds/378355/
+Faucet: https://freesound.org/people/calivintage/sounds/95709/
+Pop: https://freesound.org/people/onikage22/sounds/240566/
+Angry Scream: https://freesound.org/people/cdrk/sounds/21324/
+Explosion: https://freesound.org/people/Link-Boy/sounds/156615/
+
+Various Assets from Kenney's packs:
+Beebee's & Hong's voice from: https://kenney.nl/assets/digital-audio
+Narrator's voice is from: https://kenney.nl/assets/rpg-audio
+
+Music:
+http://freemusicarchive.org/music/Komiku/Captain_Glouglous_Incredible_Week_Soundtrack/pog

index.html

@@ -18,6 +18,10 @@
 			<div>click anywhere to keep freaking out</div>
 		</div>
 	</div>
+	<div id="loading" onclick="publish('START_GAME')">
+		<div id="loading_progress"></div>
+		<div id="loading_done">play!</div>
+	</div>
 </div>
 	
 </body>

scenes/act1.md

@@ -193,7 +193,7 @@ n: GOOD LUCK
 
 # act1c
 
-`music('battle', 0.5)`
+`music('battle', {volume:0.5})`
 
 n: ROUND ONE: *FIGHT!*
 
@@ -1256,7 +1256,7 @@ attack("100p", "bad");
 
 ```
 bb({mouth:"smile_lock", eyes:"smile"});
-music('battle', 0.5);
+music('battle', {volume:0.5});
 ```
 
 n: CONGRATULATIONS
@@ -1265,6 +1265,8 @@ n: YOU HAVE SUCCESSFULLY PROTECTED YOUR HUMAN
 
 n: LOOK HOW GRATEFUL THEY ARE
 
+(...500)
+
 n: NOW THAT THEIR ENERGY IS ZERO, YOU CAN DIRECTLY CONTROL THEIR ACTIONS!
 
 `bb({mouth:"smile", eyes:"normal"});`
@@ -1275,7 +1277,7 @@ n: PICK YOUR ENDING MOVE
 
 n: *FINISH THEM*
 
-[< FIGHT: Destroy your phone! >](#act1i_phone) `Game.OVERRIDE_CHOICE_LINE=true`
+[< FIGHT: Punish your phone! >](#act1i_phone) `Game.OVERRIDE_CHOICE_LINE=true`
 
 [< FLIGHT: Curl up in a ball and cry! >](#act1i_cry) `Game.OVERRIDE_CHOICE_LINE=true`
 

scenes/intro.md

@@ -4,17 +4,15 @@
 
 # intro-play-button
 
-[Play!](#intro-start)
-
-[GAHHHH!](#meow)
-
-[GAHHHHHHH!](#meow)
+[Play!](#intro-start) `publish("intro-to-game-1")`
 
 # intro-start
 
-`publish("intro-to-game-1")`
+(...300)
 
-n: THIS IS A HUMAN
+`clearText()`
+
+m: THIS IS A HUMAN
 
 (...600)
 

scripts/act1/Act1_Outro_BG.js

@@ -2,6 +2,16 @@ Loader.addImages([
 	{ id:"act1_end", src:"sprites/act1/act1_end.png" }
 ]);
 
+Loader.addSounds([
+
+	{ id:"pop", src:"sounds/sfx/pop.mp3" },
+	{ id:"bounce1", src:"sounds/sfx/bounce1.mp3" },
+	{ id:"bounce2", src:"sounds/sfx/bounce2.mp3" },
+	{ id:"bounce3", src:"sounds/sfx/bounce3.mp3" },
+	{ id:"faucet", src:"sounds/sfx/faucet.mp3" }
+
+]);
+
 function BG_Act1_Outro(){
 
 	var self = this;
@@ -101,6 +111,7 @@ function BG_Act1_Outro(){
 	var ticker = 0;
 	var frameTicker = ticker;
 	var parallaxTicker = 1;
+	var thePreviousFrame = -1;
 
 	self.draw = function(ctx){
 
@@ -128,19 +139,30 @@ function BG_Act1_Outro(){
 
 		// Smoking crater & Hong frame
 		frameTicker += 1/60;
+		var results;
 		if(ANIM_TO_USE == "fight"){
 			
-			var frame = findFrameOnTicker(SMOKING_CRATER, frameTicker);
-			craterSprite.gotoFrame(frame);
-			var frame = findFrameOnTicker(HONG_FRAMES_FIGHT, frameTicker);
-			hongSprite.gotoFrame(frame);
+			results = findOnTicker(SMOKING_CRATER, frameTicker);
+			craterSprite.gotoFrame(results.frame);
+
+			// Hong's frame
+			results = findOnTicker(HONG_FRAMES_FIGHT, frameTicker);
 
 		}else{
-
 			craterSprite.visible = false;
-			var frame = findFrameOnTicker(HONG_FRAMES_FLIGHT, frameTicker);
-			hongSprite.gotoFrame(frame);
 
+			// Hong's frame
+			results = findOnTicker(HONG_FRAMES_FLIGHT, frameTicker);
+		}
+
+		// Is Hong on a new frame?
+		thePreviousFrame = hongSprite.currentFrame;
+		var isNewFrame = (thePreviousFrame!=results.frame);
+		hongSprite.gotoFrame(results.frame);
+
+		// SFX if new frame
+		if(isNewFrame && results.sfx){
+			sfx(results.sfx, {volume: results.sfxVolume} );
 		}
 
 		// If pre frameTicker=90/30, Hong is shaking like Beebee!
@@ -175,18 +197,38 @@ function BG_Act1_Outro(){
 	//////////////////////////////////////////////////////////////////////////////
 
 	// Find it!
-	var findFrameOnTicker = function(frameArray, ticker){
+	/*var findFrameOnTicker = function(frameArray, ticker){
 		var lastFrame;
 		for(var i=0; i<frameArray.length; i++){
 			var f = frameArray[i];
 			if(f[1]<=ticker) lastFrame = f[0];
 		}
 		return lastFrame;
+	};*/
+	var findOnTicker = function(frameArray, ticker){
+		var lastConfig;
+		for(var i=0; i<frameArray.length; i++){
+			var f = frameArray[i];
+			if(f[1]<=ticker){
+				lastConfig = f;
+			}
+		}
+		return {
+			frame: lastConfig[0],
+			sfx: lastConfig[2],
+			sfxVolume: lastConfig[3]
+		};
 	};
 	var convertFrames = function(frameArray){
 		return frameArray.map(function(frame){
+
 			var f = frame.split("-");
-			return [parseInt(f[0])-1, parseInt(f[1])/30]; // subtract 1 from frame, convert to seconds
+			var frame = parseInt(f[0])-1; // subtract 1 from frame
+			var ticker = parseInt(f[1])/30; // convert to seconds
+			var sfx = f[2] ? f[2] : null;
+			var sfxVolume = f[3] ? f[3] : 1;
+			return [frame, ticker, sfx, sfxVolume];
+
 		});
 	};
 	var addLoop = function(frameArray, startF, startS, frameLength, interval){
@@ -230,18 +272,18 @@ function BG_Act1_Outro(){
 		"2-3",
 		"3-5",
 		"4-7",
-		"5-90",
+		"5-90-pop",
 		"6-120",
-		"7-122",
+		"7-122-bounce1",
 		"8-124",
 		"9-126",
 		"10-129",
 		"11-132",
 		"12-134",
-		"13-136",
+		"13-136-bounce2",
 		"14-138",
 		"15-140",
-		"16-143",
+		"16-143-bounce3",
 		"17-145",
 		"18-147",
 		"19-149",
@@ -263,7 +305,7 @@ function BG_Act1_Outro(){
 		"22-179",
 		"23-181",
 
-		"24-183",
+		"24-183-faucet-0.8",
 		"25-185",
 		"26-187",
 

scripts/act1/Act1_SceneSetup.js

@@ -1,3 +1,7 @@
+Loader.addSounds([
+	{ id:"music_battle", src:"sounds/music/battle.mp3" }
+]);
+
 SceneSetup.act1 = function(){
 
 	Game.resetScene();
@@ -18,11 +22,13 @@ SceneSetup.act1 = function(){
 SceneSetup.act1_outro = function(){
 
 	HP.hide();
-	clearText();
-	music(false);
-	
+	clearText();	
 	Game.resetScene();
 
+	// WHOOSH
+	sfx("whoosh");
+	music('campus', {volume:0.5, fade:2});
+
 	// Background
 	var bg = new BG_Act1_Outro();
 	Game.scene.children.push(bg);

scripts/game/Game.js

@@ -272,6 +272,9 @@ Game.executeText = function(line){
 			case "n":
 				div.className = "narrator-bubble";
 				break;
+			case "m": // narrator 2
+				div.className = "narrator-bubble-2";
+				break;
 		}
 		requestAnimationFrame(function(){
 			requestAnimationFrame(function(){
@@ -285,12 +288,10 @@ Game.executeText = function(line){
 		clearBoth.className = "clear-both";
 		Game.wordsDOM.appendChild(clearBoth);
 
-		// TODO: BOLD LETTER BY LETTER...
-
 		// Add the text
 		var interval = 0;
 		var SPEED = Math.round(Game.TEXT_SPEED / Game.OVERRIDE_TEXT_SPEED);
-		if(speaker!="n"){
+		if(speaker!="n" && speaker!="m"){
 
 			// Put in the text, each character a DIFFERENT SPAN...
 			var span, chr;
@@ -332,10 +333,10 @@ Game.executeText = function(line){
 						var chr = div.children[index].innerHTML;
 						if(chr!=" "){
 							if(speaker=="h"){
-								voice("hong", 0.3);
+								voice("hong", {volume:0.3});
 							}
 							if(speaker=="b"){
-								voice("beebee", 0.3);
+								voice("beebee", {volume:0.3});
 							}
 						}
 

scripts/game/Sounds.js

@@ -1,7 +1,3 @@
-Loader.addSounds([
-	{ id:"music_battle", src:"sounds/music/battle.mp3" }
-]);
-
 Loader.addSounds([
 	{ id:"voice_hong", src:"sounds/voices/hong.mp3" },
 	{ id:"voice_beebee", src:"sounds/voices/beebee.mp3" },
@@ -9,37 +5,55 @@ Loader.addSounds([
 	{ id:"voice_narrator_emphasis", src:"sounds/voices/narrator_emphasis.mp3" }
 ]);
 
-window.sfx = function(sound, volume, pan){
+window.sfx = function(sound, options){
 
-	volume = volume===undefined ? 1 : volume;
-	pan = pan===undefined ? 0 : pan;
+	options = options || {};
+	options.volume = options.volume===undefined ? 1 : options.volume;
+	options.pan = options.pan===undefined ? 0 : options.pan;
 
 	var sfx = Library.sounds[sound];
-	sfx.volume(volume);
-	sfx.stereo(pan);
+	sfx.volume(options.volume);
+	sfx.stereo(options.pan);
 	sfx.play();
 
 };
 
-window.voice = function(name, volume, pan){
-	sfx("voice_"+name, volume, pan);
+window.voice = function(name, options){
+	options = options || {};
+	sfx("voice_"+name, options);
 }
 
 window.CURRENT_MUSIC = null;
-window.music = function(song, volume){
+window.music = function(song, options){
 
+	options = options || {};
+	options.volume = options.volume===undefined ? 1 : options.volume;
+	options.fade = options.fade===undefined ? 0 : options.fade;
+
+	// Fade out or cut previous?
+	if(options.fade==0){
+		if(window.CURRENT_MUSIC) window.CURRENT_MUSIC.stop();
+	}else{
+		var currentVolume = window.CURRENT_MUSIC.volume();
+		window.CURRENT_MUSIC.fade(currentVolume, 0, options.fade);
+	}
+
+	// Play new song (if any)
 	if(!song){
-
-		window.CURRENT_MUSIC.stop();
 		window.CURRENT_MUSIC = null;
-
 	}else{
 
 		var song = Library.sounds["music_"+song];
-		song.volume(volume);
 		song.loop(true);
-		song.play();
+
+		if(options.fade==0){
+			song.volume(options.volume);
+		}else{
+			song.fade(0, options.volume, options.fade);
+		}
+		
 		window.CURRENT_MUSIC = song;
+		song.play();
 
 	}
 

scripts/intro/Intro_BG.js

@@ -4,6 +4,20 @@ Loader.addImages([
 	{ id:"intro_anim", src:"sprites/intro/intro_anim.png" }
 ]);
 
+Loader.addSounds([
+	
+	{ id:"whoosh", src:"sounds/sfx/whoosh.mp3" },
+	{ id:"intro_scream", src:"sounds/sfx/intro_scream.mp3" },
+
+	{ id:"grass_step1", src:"sounds/sfx/grass_step1.mp3" },
+	{ id:"grass_step2", src:"sounds/sfx/grass_step2.mp3" },
+	{ id:"bag_short", src:"sounds/sfx/bag_short.mp3" },
+	{ id:"bag_search", src:"sounds/sfx/bag_search.mp3" },
+	{ id:"bag_kick", src:"sounds/sfx/bag_kick.mp3" },
+	{ id:"sandwich", src:"sounds/sfx/sandwich.mp3" },
+
+]);
+
 function BG_Intro(){
 
 	var self = this;
@@ -95,15 +109,12 @@ function BG_Intro(){
 	var parallaxTicker = 0;
 	var SHOWN_PLAY_BUTTON = false;
 	var SHOWN_LOGO = false;
+	var thePreviousFrame;
 	self.draw = function(ctx){
 
 		// TICKER
 		ticker += 1/60;
 
-		/*if(Math.random()<0.01){
-			Library.sounds.test.play();
-		}*/
-
 		// CLOUD OFFSET
 		OFFSETS[1] = -80 + ticker*3;
 
@@ -129,9 +140,19 @@ function BG_Intro(){
 
 		}
 
-		// Hong frame
-		var frame = findFrameOnTicker(frameTicker);
+		// Find... on ticker!
+		var results = findOnTicker(frameTicker);
+
+		// Frame, new frame?
+		var frame = results.frame;
+		thePreviousFrame = hongSprite.currentFrame;
+		var isNewFrame = (thePreviousFrame!=frame);
 		hongSprite.gotoFrame(frame);
+
+		// SFX if new frame
+		if(isNewFrame && results.sfx){
+			sfx(results.sfx, {volume: results.sfxVolume} );
+		}
 		
 		// Draw all!
 		for(var i=0; i<self.layers.length; i++){
@@ -141,13 +162,14 @@ function BG_Intro(){
 		}
 		if(!SHOWN_LOGO && ticker>=530/30){
 			SHOWN_LOGO = true;
+			sfx("intro_scream");
 		}
 		if(GAME_TRANSITION==0 && SHOWN_LOGO){
 			self.logoSprite.draw(ctx);
 		}
 
 		// Show Play Button
-		if(!SHOWN_PLAY_BUTTON && ticker>=590/30){
+		if(!SHOWN_PLAY_BUTTON && ticker>=645/30){
 			SHOWN_PLAY_BUTTON = true;
 			Game.goto("intro-play-button");
 		}
@@ -170,6 +192,13 @@ function BG_Intro(){
 		subscribe("intro-to-game-2", function(){
 			frameTicker = 600/30;
 			GAME_TRANSITION = 2; // START PARALLAXING
+
+			// WHOOSH
+			sfx("whoosh");
+			
+			// Music
+			music("hum", {fade:2, volume:0.6});
+
 		})
 	);
 
@@ -181,21 +210,21 @@ function BG_Intro(){
 
 	var HONG_FRAMES = [
 		"0-0",
-		"1-59",
-		"2-79",
-		"3-99",
-		"4-119",
-		"5-139",
-		"6-199",
-		"7-234",
+		"1-59-grass_step1-0.1",
+		"2-79-grass_step2-0.2",
+		"3-99-grass_step1-0.25",
+		"4-119-grass_step2-0.3",
+		"5-139-grass_step1-0.35",
+		"6-199-bag_short",
+		"7-234-bag_search",
 		"8-244",
 		"9-254",
 		"8-264",
 		"9-274",
-		"10-299",
-		"11-336",
+		"10-299-bag_short",
+		"11-336-bag_kick",
 		"12-346",
-		"13-381",
+		"13-381-sandwich",
 		"14-400",
 		"15-410",
 		"14-420",
@@ -217,17 +246,25 @@ function BG_Intro(){
 	];
 	HONG_FRAMES = HONG_FRAMES.map(function(frame){
 		var f = frame.split("-");
-		return [parseInt(f[0]), parseInt(f[1])/30];
+		var frame = parseInt(f[0]);
+		var ticker = parseInt(f[1])/30;
+		var sfx = f[2] ? f[2] : null;
+		var sfxVolume = f[3] ? f[3] : 1;
+		return [frame, ticker, sfx, sfxVolume];
 	});
-	var findFrameOnTicker = function(ticker){
-		var lastFrame;
+	var findOnTicker = function(ticker){
+		var lastConfig;
 		for(var i=0; i<HONG_FRAMES.length; i++){
 			var f = HONG_FRAMES[i];
 			if(f[1]<=ticker){
-				lastFrame = f[0];
+				lastConfig = f;
 			}
 		}
-		return lastFrame;
+		return {
+			frame: lastConfig[0],
+			sfx: lastConfig[2],
+			sfxVolume: lastConfig[3]
+		};
 	};
 
 	//////////////////////////////////////////////////////////////////////////////

scripts/intro/Intro_SceneSetup.js

@@ -1,7 +1,15 @@
+Loader.addSounds([
+	{ id:"music_hum", src:"sounds/music/hum.mp3" },
+	{ id:"music_campus", src:"sounds/music/campus.mp3" }
+]);
+
 SceneSetup.intro = function(){
 
 	Game.resetScene();
 
+	// Music
+	music('campus', {volume:0.6});
+
 	// Background
 	var bg = new BG_Intro();
 	Game.scene.children.push(bg);

scripts/main.js

@@ -6,7 +6,7 @@ Loader.addScenes([
 Loader.load().then(function(){
 
 	Game.init();
-	Game.start();
+	/*Game.start();
 
 	Game.pause(); // just for sounds
 
@@ -19,6 +19,17 @@ Loader.load().then(function(){
 	// GO!
 	//music('battle', 0.5);
 	//Game.goto("act1f");
-	Game.goto("intro");
+	//Game.goto("intro");
+
+});
+
+subscribe("START_GAME", function(){
+	
+	$("#loading").style.display = "none";
+	Game.start();
+
+	SceneSetup.act1();
+	Game.goto("act1i");
+	//Game.goto("intro");
 
 });

styles/game.css

@@ -39,7 +39,7 @@ body{
 	overflow: hidden;
 }
 
-#paused{
+#paused, #loading{
 	display: none;
 
 	width: 100%;
@@ -52,7 +52,7 @@ body{
 	font-weight: bold;
 	text-align: center;
 }
-#paused > div{
+#paused > div, #loading > div{
 	position: absolute;
 	margin: auto;
 	top: 0;
@@ -71,11 +71,24 @@ body{
 	margin: 15px auto;
 }
 
+#loading{
+	display:block;
+	background: #333;
+	cursor: pointer;
+}
+#loading:hover{
+	background: #444;
+}
+#loading > div{
+	height: 50px;
+    font-size: 30px;
+}
+
 .clear-both{
 	clear:both;
 }
 
-.narrator-bubble{
+.narrator-bubble, .narrator-bubble-2{
 	position: relative;
 	color: #FFFFFF;
 	text-align: center;
@@ -84,7 +97,7 @@ body{
 	margin: 25px 15px;
 	font-weight: bold;
 }
-.narrator-bubble:before{
+.narrator-bubble:before, .narrator-bubble-2:before{
 
 	content: '';
 	
@@ -99,7 +112,7 @@ body{
 	height: calc(100% + 4px);
 	
 } 
-.narrator-bubble:after{
+.narrator-bubble:after, .narrator-bubble-2:after{
 
 	content: '';
 	
@@ -114,10 +127,16 @@ body{
 	height: calc(100% + 4px);
 	
 } 
-.narrator-bubble i{
+.narrator-bubble i, .narrator-bubble-2 i{
 	font-style: normal;
 	color: #ff4040;
 }
+.narrator-bubble-2{
+	color: #000;
+}
+.narrator-bubble-2:before, .narrator-bubble-2:after{
+	border-color: #000;
+}
 
 .hong-bubble {
 	position: relative;