super rough beebee animation

index.html

@@ -15,7 +15,7 @@
 	<div id="paused">
 		<div>
 			paused
-			<div>click anywhere to continue suffering</div>
+			<div>click anywhere to continue the pain</div>
 		</div>
 	</div>
 </div>
@@ -33,6 +33,8 @@
 <script src="scripts/game/HP.js"></script>
 <script src="scripts/game/BG_Anxiety.js"></script>
 
+<script src="scripts/intro/Intro_SceneSetup.js"></script>
+
 <script src="scripts/act1/Act1_SceneSetup.js"></script>
 <script src="scripts/act1/Act1_Hong.js"></script>
 <script src="scripts/act1/Act1_Beebee.js"></script>

scenes/act1.md

@@ -34,14 +34,20 @@ h: Thanks for citing your sources but--
 
 `Game.OVERRIDE_TEXT_SPEED = 2;`
 
+`bb("fear", "normal", "fear")`
+
 b: Which means if you don't hang out with someone *right now* you're gonna-
 
+`bb("panic")`
+
 b: DIEEEEEEEEEEEEEEEEEEE
 
 `HP.attackHong("20p")`
 
 (...1000)
 
+`bb("normal", "normal", "normal")`
+
 `_.fifteencigs = true`
 
 n: YOU USED *FEAR OF BEING UNLOVED*
@@ -56,7 +62,7 @@ h: I'd rather not get crumbs on my textbo--
 
 b: If you don't study you'll be expelled from college and you'll waste your parents' money and then they'll say
 
-b: “you have brought dishonor to our family now we'll all have to commit seppuku”
+b: “you have brought dishonor to our family, now we'll all have to commit seppuku”
 
 `Game.OVERRIDE_TEXT_SPEED = 2.0;`
 
@@ -90,7 +96,7 @@ b: DIEEEEEEEEEEEEEEEEEEE
 
 `_.whitebread = true`
 
-n: YOU USED *FEAR OF BEING HURT*
+n: YOU USED *FEAR OF BEING HARMED*
 
 (#act1b)
 
@@ -104,7 +110,7 @@ n: BUT YOU'RE NOT DONE SAVING YOUR HUMAN YET
 
 n: GET YOUR HUMAN'S "WILLPOWER BAR" TO ZERO
 
-n: YOUR MOVES ARE: FEAR OF *BEING HURT,* *BEING UNLOVED,* AND *BEING A BAD PERSON*
+n: YOUR MOVES ARE: FEAR OF *BEING HARMED,* *BEING UNLOVED,* AND *BEING A BAD PERSON*
 
 n: (PRO TIP: TRY PLAYING THE CHOICES THAT MOST HIT YOUR DEEPEST, DARKEST FEARS!)
 
@@ -130,7 +136,9 @@ n: ROUND ONE: *FIGHT!*
 
 h: Huh. Facebook feed says there's a party happening this weekend.
 
-b: Doesn't that weirdo throw a party *every* weekend? Must be some kind of underlying neurosis there.
+b: Doesn't that weirdo throw a party *every* weekend?
+
+b: Must be some kind of underlying neurosis there.
 
 h: Also, I got an invite?
 
@@ -377,7 +385,9 @@ h: Shut up shut up I'll keep it as yes!
 
 `Game.OVERRIDE_TEXT_SPEED = 1.5;`
 
-b: Don't you know about human stampedes? In 2003 a nightclub in Rhode Island had a fire and the ensuing panic caused people to jam the exits and so 100 people were crushed or burned to death-
+b: Don't you know about human stampedes?
+
+b: In 2003 a nightclub in Rhode Island had a fire and the ensuing panic caused people to jam the exits and so 100 people were crushed or burned to death-
 
 `Game.OVERRIDE_TEXT_SPEED = 2.0;`
 
@@ -520,19 +530,13 @@ b: It's too crowded. Crowds are dangerous.
 
 h: Whatever. New Tinder notification.
 
-h: Oh I got a match!
+h: Oh I got a match! They're cute!
 
-b: Is that so, human who I should clarify is an 18+ *college* student?
+b: Is that so, human whom I should clarify is 18+?
 
 h: Please, please don't ruin this for m--
 
-b: DANGER-
+b: DANGER DANGER DANGER DANGER
-
-b: DANGER-
-
-b: DANGER-
-
-b: DANGER-
 
 [You're being *used* by other people.](#act1f_used_by_others)
 
@@ -627,15 +631,15 @@ h: i'm so sick of this game.
 `Game.OVERRIDE_TEXT_SPEED = 1.5;`
 
 h:
-{{if _.fifteencigs}}"loneliness will kill you"...{{/if}}
+{{if _.fifteencigs}}"loneliness will kill you"... {{/if}}
-{{if _.seppuku}}"study or your parents will hate you"...{{/if}}
+{{if _.seppuku}}"study or your parents will hate you"... {{/if}}
-{{if _.whitebread}}"don't eat that, it'll kill you"...{{/if}}
+{{if _.whitebread}}"don't eat that, it'll kill you"... {{/if}}
-{{if _.subtweet}}"they're talking behind your back"...{{/if}}
+{{if _.subtweet}}"they're talking behind your back"... {{/if}}
-{{if _.badnews}}"the world is burning"...{{/if}}
+{{if _.badnews}}"the world is burning"... {{/if}}
-{{if _.hookuphole}}"you'll die alone"...{{/if}}
+{{if _.hookuphole}}"you'll die alone"... {{/if}}
-{{if _.serialkiller}}"they're a serial killer"...{{/if}}
+{{if _.serialkiller}}"they're a serial killer"... {{/if}}
-{{if _.catmilk}}"cats can't digest milk"...{{/if}}
+{{if _.catmilk}}"cats can't digest milk"... {{/if}}
-{{if _.pokemon}}a crappy parody song...{{/if}}
+{{if _.pokemon}}a crappy parody song... {{/if}}
 
 h: i just want to live my life.
 

scenes/intro.md

@@ -0,0 +1,3 @@
+# intro
+
+`SceneSetup.intro();`

scenes/test.md

@@ -0,0 +1,53 @@
+# act1
+
+`SceneSetup.act1();`
+
+`publish("scene", ["add_beebee"])`
+
+n: QUICK, WARN THEM!
+
+[You're eating alone for lunch! Again!](#act1a_alone)
+
+# act1a_alone
+
+`bb("normal", "normal", "narrow")`
+
+b: Don't you know loneliness is associated with premature death as much as smoking 15 cigarettes a day?-
+
+`Game.OVERRIDE_TEXT_SPEED = 2;`
+
+`bb("normal", "normal", "normal_right")`
+
+b: (Holt-Lunstad et al, 2010, PLoS Medicine)
+
+h: Thanks for citing your sources but--
+
+`Game.OVERRIDE_TEXT_SPEED = 2;`
+
+`bb("fear", "normal", "fear")`
+
+b: Which means if you don't hang out with someone *right now* you're gonna-
+
+`bb("panic")`
+
+b: DIEEEEEEEEEEEEEEEEEEE
+
+`HP.attackHong("20p")`
+
+(...1000)
+
+`bb("normal", "normal", "normal")`
+
+`_.fifteencigs = true`
+
+n: YOU USED *FEAR OF BEING UNLOVED*
+
+(#act1b)
+
+# act1b
+
+n: IT'S SUPER EFFECTIVE
+
+b: I am best protector!
+
+n: GOOD LUCK

scripts/act1/Act1_Beebee.js

@@ -3,41 +3,152 @@ function Act1_Beebee(){
 	var self = this;
 
 	// Sprite!
-	self.sprite = new Sprite({
+	var spriteConfig = {
 		image: Library.images.act1_beebee,
 		grid:{
-			width: 2,
+			width: 4,
-			height: 3
+			height: 8
 		},
 		frame:{
-			width: 600,
+			width: 720,
-			height: 400
+			height: 500
 		},
 		anchor:{
-			x: 425/2,
+			x: 546/2,
-			y: 325/2
+			y: 400/2
 		},
 		frameNames:[
-			"normal",
+			
-			"normal_down",
+			"body_normal",
-			"normal_down_vexed",
+			"body_fear",
-			"normal_speak",
+			"body_point_crotch",
-			"scream",
+			"body_point_heart",
-			"scream_2"
+			"body_point_sing",
+
+			"head_normal",
+			"head_normal_2",
+			"head_small",
+			"head_small_2",
+
+			"eyes_normal",
+			"eyes_normal_right",
+			"eyes_uncertain",
+			"eyes_uncertain_right",
+			"eyes_narrow",
+			"eyes_narrow_eyebrow",
+			"eyes_fear",
+			"eyes_pretty",
+			"eyes_wat",
+
+			"blank",
+
+			"body_panic",
+			"body_panic_2",
+			"body_scream_anger",
+			"body_scream_anger_2",
+			"body_scream",
+			"body_scream_2",
+
+			"body_flail",
+			"body_flail_2",
+			"body_flail_3",
+			"body_flail_4",
+
 		],
 		x: 270,
-		y: 405
+		y: 390
+	};
+
+	self.body = new Sprite(spriteConfig);
+	self.head = new Sprite(spriteConfig);
+	self.eyes = new Sprite(spriteConfig);
+
+	self.gotoFrames = function(bodyName, headName, eyesName){
+
+		// Body
+		bodyName = "body_"+bodyName;
+		self.body.gotoFrameByName(bodyName);
+
+		// Head
+		headName = headName ? "head_"+headName : "blank";
+		self.head.gotoFrameByName(headName); // TODO: DON'T RESET MOUTH
+
+		// Eyes
+		eyesName = eyesName ? "eyes_"+eyesName : "blank";
+		self.eyes.gotoFrameByName(eyesName);
+
+	};
+
+	self.gotoFrames("normal", "normal", "normal");
+
+	subscribe("bb", function(bodyName, headName, eyesName){
+		self.gotoFrames(bodyName, headName, eyesName);
 	});
 
+	/**
+
+	bb("point_heart", "normal_talk", "pretty")
+
+	**/
+
 	// First frame
-	self.sprite.gotoFrameByName("normal");
+	// self.sprite.gotoFrameByName("normal");
 
 	// Draw
 	var ticker = 0;
 	self.draw = function(ctx){
 
-		var fname = self.sprite.currentFrameName;
+		self.body.draw(ctx);
+		self.head.draw(ctx);
+		self.eyes.draw(ctx);
 
+		// TALKING
+		if(self.body.currentFrameName=="body_normal" || self.body.currentFrameName=="body_fear"){
+			if(Game.WHO_IS_SPEAKING=="b"){
+
+				if(ticker<=0){
+					if(self.head.currentFrameName=="head_normal") self.head.gotoFrameByName("head_normal_2");
+					else if(self.head.currentFrameName=="head_normal_2") self.head.gotoFrameByName("head_normal");
+					ticker = 10;
+				}
+				
+				ticker -= (Game.TEXT_SPEED/40) * Game.CURRENT_SPEAKING_SPEED;
+
+			}else{
+				if(self.head.currentFrameName=="head_normal_2") self.head.gotoFrameByName("head_normal");
+				ticker = 0;
+			}
+			if(self.head.currentFrameName=="head_normal_2"){
+				self.eyes.x = 270+1;
+				self.eyes.y = 390-2;
+			}else{
+				self.eyes.x = 270;
+				self.eyes.y = 390;
+			}
+		}
+
+		// PANICKING
+		if(self.body.currentFrameName=="body_panic" || self.body.currentFrameName=="body_panic_2"){
+
+			if(ticker<=0){
+				if(self.body.currentFrameName=="body_panic") self.body.gotoFrameByName("body_panic_2");
+				else if(self.body.currentFrameName=="body_panic_2") self.body.gotoFrameByName("body_panic");
+				ticker = 4;
+			}
+
+			ticker -= 1;
+
+		}
+
+		// SHIVERING
+		self.body.breatheSpeed = 0.8;
+		self.body.breatheAmp = 0.01;
+		self.head.breatheSpeed = 0.8;
+		self.head.breatheAmp = 0.01;
+		self.eyes.breatheSpeed = 0.8;
+		self.eyes.breatheAmp = 0.01;
+
+		/*
 		// Normal: Breathe fast!
 		if(fname.substr(0,6) == "normal"){
 			self.sprite.breatheSpeed = 0.8;
@@ -59,13 +170,14 @@ function Act1_Beebee(){
 
 		// Draw me!
 		self.sprite.draw(ctx);
+		*/
 
 	};
 
 	// When going to frames...
 	subscribe("beebee", function(fname){
 
-		self.sprite.gotoFrameByName(fname);
+		/*self.sprite.gotoFrameByName(fname);
 
 		// Bounce transition
 		if(fname=="normal_speak"){
@@ -73,7 +185,7 @@ function Act1_Beebee(){
 		}
 		if(fname=="scream"){
 			self.sprite.bounce = 1.6;
-		}
+		}*/
 
 	});
 

scripts/game/Game.js

@@ -18,6 +18,11 @@ window.SceneSetup = {}; // A big ol' singleton class that just makes it easy to
 window.attack = function(){};
 window.miss = function(){};
 
+// HELPER FUNCS
+window.bb = function(){
+	publish("bb", arguments);
+};
+
 // Init
 Game.init = function(){
 
@@ -234,6 +239,8 @@ Game.clearText = function(){
 // Execute text! Just add it to text DOM.
 Game.TEXT_SPEED = 40;
 Game.OVERRIDE_TEXT_SPEED = 1;
+Game.WHO_IS_SPEAKING = null; // "h", "b", "n" etc...
+Game.CURRENT_SPEAKING_SPEED = 1;
 Game.executeText = function(line){
 
 	return new RSVP.Promise(function(resolve){
@@ -247,6 +254,8 @@ Game.executeText = function(line){
 		// Add the bubble, with animation
 		var div = document.createElement("div");
 		Game.wordsDOM.appendChild(div);
+		Game.WHO_IS_SPEAKING = speaker; // WHO'S SPEAKING?!
+		Game.CURRENT_SPEAKING_SPEED = Game.OVERRIDE_TEXT_SPEED;
 		switch(speaker){
 			case "b":
 				div.className = "beebee-bubble";
@@ -265,6 +274,11 @@ Game.executeText = function(line){
 			});
 		});
 
+		// Clear both
+		var clearBoth = document.createElement("div");
+		clearBoth.className = "clear-both";
+		Game.wordsDOM.appendChild(clearBoth);
+
 		// TODO: BOLD LETTER BY LETTER...
 
 		// Add the text
@@ -272,7 +286,28 @@ Game.executeText = function(line){
 		var SPEED = Math.round(Game.TEXT_SPEED / Game.OVERRIDE_TEXT_SPEED);
 		if(speaker!="n"){
 
-			// If not narrator, add letter by letter...
+			// Put in the text, each character a DIFFERENT SPAN...
+			var span, chr;
+			var isItalicized = false;
+			for(var i=0; i<dialogue.length; i++){
+
+				// Is it italicized?
+				chr = dialogue[i];
+				if(chr=="*") isItalicized = !isItalicized; // toggle!
+
+				// Add letter span
+				span = document.createElement("span");
+				if(chr=="*"){
+					// else, empty. can't NOT add span, coz screws up indexing.
+				}else{
+					span.innerHTML = isItalicized ? "<i>"+chr+"</i>" : chr;
+				}
+				span.style.opacity = 0;
+				div.appendChild(span);
+
+			}
+
+			// Then REVEAL letters one-by-one
 			for(var i=0; i<dialogue.length; i++){
 
 				var chr = dialogue[i];
@@ -281,11 +316,12 @@ Game.executeText = function(line){
 				if(i==dialogue.length-1 && chr=="-") break;
 
 				// for scopin'
-				(function(chr, interval){
+				(function(index, interval){
 					Game.setTimeout(function(){
-						div.innerHTML += chr;
+						div.children[index].style.opacity = 1;
+						//div.innerHTML += chr;
 					}, interval);
-				})(chr, interval);
+				})(i, interval);
 
 				// Bigger interval
 				if(i!=dialogue.length-1){ // NOT last
@@ -325,39 +361,46 @@ Game.executeText = function(line){
 
 			}
 
-			// Add word by word
+			// Put in the text, each word a DIFFERENT SPAN
+			var span;
 			var dialogueWords = dialogue.split(" ");
 			for(var i=0; i<dialogueWords.length; i++){
 
+				// Is it an emphasized word?
 				var word = dialogueWords[i];
-				var bareWord = word;
+				if(/\*(.*)\*/.test(word)){ // is 
-				if(/\*(.*)\*/.test(bareWord)){
+					word = "<i>" + word.match(/\*(.*)\*/)[1].trim() + "</i>";
-					bareWord = word.match(/\*(.*)\*/)[1].trim();
 				}
 
+				// Add the span
+				span = document.createElement("span");
+				span.innerHTML = word+" ";
+				span.style.opacity = 0;
+				div.appendChild(span);
+
+			}
+
+			// Then REVEAL words one-by-one
+			for(var i=0; i<dialogueWords.length; i++){
+
+				var word = dialogueWords[i];
+
 				// for scopin'
-				(function(word, interval){
+				(function(index, interval){
 					Game.setTimeout(function(){
-						
+						div.children[index].style.opacity = 1;
-						// if emphasize, emphasize!
-						if(/\*(.*)\*/.test(word)){
-							word = "<i>" + word.match(/\*(.*)\*/)[1].trim() + "</i>"
-						}
-
-						// add word
-						div.innerHTML += word+" ";
-
 					}, interval);
-				})(word, interval);
+				})(i, interval);
 
 				// Interval
 				interval += SPEED*6;
 
 				// Larger interval if punctuation...
-				var chr = bareWord.slice(-1)
+				var chr = word.slice(-1);
+				if(chr=="*") chr = word[word.length-2]; // coz emphasis
 				if(chr=="," || chr==":") interval += SPEED*5;
 				if(chr=="." || chr=="?" || chr=="!") interval += SPEED*10;
-				if(bareWord.slice(-3)=="...") interval += SPEED*15;
+				if(word.slice(-3)=="...") interval += SPEED*15;
 
 			}
 
@@ -370,7 +413,10 @@ Game.executeText = function(line){
 		// Return promise
 		var nextLineDelay = SPEED*7;
 		if(dialogue.slice(-1)=="-") nextLineDelay=0; // sudden interrupt!
-		Game.setTimeout(resolve, interval+nextLineDelay);
+		Game.setTimeout(function(){
+			Game.WHO_IS_SPEAKING = null; // DONE WITH IT.
+			resolve();
+		}, interval+nextLineDelay);
 
 	});
 

scripts/intro/Intro_SceneSetup.js

@@ -0,0 +1,23 @@
+SceneSetup.intro = function(){
+
+	Game.resetScene();
+
+	// Background
+	var bg = new BG_Anxiety();
+	Game.scene.children.push(bg);
+
+	// Hong
+	var hong = new Act1_Hong();
+	Game.scene.children.push(hong);
+
+	// Beebee
+	var beebee = new Act1_Beebee();
+	subscribe("scene", function(command){
+		switch(command){
+			case "add_beebee":
+				Game.scene.children.push(beebee);
+				break;
+		}
+	});
+
+};

scripts/main.js

@@ -1,6 +1,7 @@
 // Load assets
 Loader.addScenes([
-	"scenes/act1.md"
+	//"scenes/intro.md"
+	"scenes/test.md"
 ]);
 Loader.addImages([
 	{ id:"act1_beebee", src:"sprites/act1/act1_beebee.png" },

styles/game.css

@@ -36,7 +36,9 @@ body{
 	width: auto;
 	position: relative;
 	top: 80px;
+	overflow: hidden;
 }
+
 #paused{
 	display: none;
 
@@ -69,6 +71,10 @@ body{
 	margin: 15px auto;
 }
 
+.clear-both{
+	clear:both;
+}
+
 .narrator-bubble{
 	position: relative;
 	color: #FFFFFF;
@@ -119,11 +125,15 @@ body{
 	color: #000000;
 	border-radius: .4em;
 	padding: 15px;
-	margin: 10px 30px;
+	margin: 5px 30px;
 
 	opacity: 0;
 	left: -15px;
 	transition: all 0.3s ease-in-out;
+
+	display: inline-block;
+	float: left;
+
 }
 .hong-bubble:after {
 	content: '';
@@ -145,11 +155,15 @@ body{
 	color: #ffffff;
 	border-radius: .4em;
 	padding: 15px;
-	margin: 10px 30px;
+	margin: 5px 30px;
 
 	opacity: 0;
 	left: 15px;
 	transition: all 0.3s ease-in-out;
+
+	display: inline-block;
+	float: right;
+
 }
 .beebee-bubble:after {
 	content: '';