diff --git a/TODOS b/TODOS new file mode 100644 index 0000000..09b1b44 --- /dev/null +++ b/TODOS @@ -0,0 +1,4 @@ + +- Why's there a long pause between scene transitions? + +- black out, then show END SCREEN (for newsletter, patreon, in meantime my other games) diff --git a/index.html b/index.html index 9adc77a..984ef06 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@ + @@ -32,6 +33,7 @@ + @@ -39,5 +41,6 @@ + \ No newline at end of file diff --git a/scenes/intro.md b/scenes/intro.md index 84e92a8..a82c990 100644 --- a/scenes/intro.md +++ b/scenes/intro.md @@ -1,3 +1,25 @@ # intro -`SceneSetup.intro();` \ No newline at end of file +`SceneSetup.intro();` + +# intro-play-button + +[Play!](#intro-start) + +[GAHHHH!](#meow) + +[GAHHHHHHH!](#meow) + +# intro-start + +`publish("intro-to-game-1")` + +n: THIS IS A HUMAN + +(...600) + +`clearText()` + +(...300) + +`publish("intro-to-game-2")` \ No newline at end of file diff --git a/scenes/test-outro.md b/scenes/test-outro.md new file mode 100644 index 0000000..ea84029 --- /dev/null +++ b/scenes/test-outro.md @@ -0,0 +1,47 @@ +# act1i + +n: *FINISH THEM* + +[< FIGHT: Destroy your phone! >](#act1i_phone) `Game.OVERRIDE_CHOICE_LINE=true` + +[< FLIGHT: Curl up in a ball and cry! >](#act1i_cry) `Game.OVERRIDE_CHOICE_LINE=true` + +# act1i_phone + +b: Your phone's giving you a panic attack! + +`Game.OVERRIDE_TEXT_SPEED = 1.5;` + +b: Punish it! Destroy your phone! Kill it! + +``` +Game.OVERRIDE_TEXT_SPEED = 2.5; +bb({body:"flail"}); +_.act1_ending = "fight"; +``` + +b: KILL IT KILL IT KILL IT KILL IT KILL IT KILL IT KILL IT KILL IT KILL IT KILL IT KILL IT KILL IT KILL I-- + +(#act1j) + +# act1i_cry + +b: The whole world is filled with danger! + +`Game.OVERRIDE_TEXT_SPEED = 1.5;` + +b: Do like the armadillo! Curl up into a ball for self-defense! + +``` +Game.OVERRIDE_TEXT_SPEED = 2.5; +bb({body:"flail"}); +_.act1_ending = "flight"; +``` + +b: CURL UP AND CRY CURL UP AND CRY CURL UP AND CRY CURL UP AND CRY CURL UP AND CRY CURL UP AND CRY CURL UP AND CR-- + +(#act1j) + +# act1j + +`SceneSetup.act1_outro()` \ No newline at end of file diff --git a/scenes/test.md b/scenes/test.md index 36e8bc9..803fccc 100644 --- a/scenes/test.md +++ b/scenes/test.md @@ -1,35 +1,31 @@ # act1 -`SceneSetup.act1();` +`SceneSetup.act1()` -`publish("scene", ["add_beebee"])` +(...300) -n: QUICK, WARN THEM! +n: AND THIS IS YOU, THAT HUMAN'S ANXIETY [You're eating alone for lunch! Again!](#act1a_alone) +[You're not studying while eating!](#act1a_study) + +[That white bread's bad for you!](#act1a_bread) + # act1a_alone -b: DIEEEEEEEEEEEEEEEEEEE +`publish("hp_show")` -`HP.attackHong("20p", "alone")` - -`Game.clearText()` - -(...2000) - -`bb("normal", "normal", "normal")` - -`_.fifteencigs = true` +`attack("20p", "alone")` n: YOU USED *FEAR OF BEING UNLOVED* -(#act1b) - -# act1b - n: IT'S SUPER EFFECTIVE +`bb({eyes:"narrow", mouth:"normal"})` + b: I am best protector! -n: GOOD LUCK \ No newline at end of file +n: GOOD LUCK + +`hong({eyes:"annoyed", mouth:"smile"}, 0.05)` \ No newline at end of file diff --git a/scripts/act1/Act1_BG.js b/scripts/act1/Act1_BG.js deleted file mode 100644 index 27a2a08..0000000 --- a/scripts/act1/Act1_BG.js +++ /dev/null @@ -1,11 +0,0 @@ -/***************************** - -Draw the parallax... -and also have the Anxiety Battle Background in it? - -*****************************/ -function BG_Act1(){ - - // - -} \ No newline at end of file diff --git a/scripts/act1/Act1_Beebee.js b/scripts/act1/Act1_Beebee.js index f2d1831..13ddf0b 100644 --- a/scripts/act1/Act1_Beebee.js +++ b/scripts/act1/Act1_Beebee.js @@ -6,7 +6,7 @@ function Act1_Beebee(){ var self = this; - // Sprite! + // SPRITE CONFIG! var spriteConfig = { image: Library.images.act1_beebee, grid:{ @@ -29,10 +29,10 @@ function Act1_Beebee(){ "body_point_heart", "body_point_sing", - "head_normal", - "head_normal_2", - "head_small", - "head_small_2", + "mouth_normal", + "mouth_normal_talk", + "mouth_small", + "mouth_small_talk", "eyes_normal", "eyes_normal_right", @@ -44,25 +44,63 @@ function Act1_Beebee(){ "eyes_pretty", "eyes_wat", - "blank", + "body_panic*", + "body_panic_2*", + "body_scream_anger*", + "body_scream_anger_2*", + "body_scream*", + "body_scream_2*", - "body_panic", - "body_panic_2", - "body_scream_anger", - "body_scream_anger_2", - "body_scream", - "body_scream_2", + "body_flail*", + "body_flail2*", + "body_flail3*", + "body_flail4*", - "body_flail", - "body_flail_2", - "body_flail_3", - "body_flail_4", + // TODO: SMILE! "That's me!" ], - x: 270, - y: 390 + x: 270-7.5, + y: 390+4.5 }; + // ANIM LOOPS + var animLoops = [ + { target:"body", ifOnFrame:"flail*", wait:0.05, thenGoToFrame:"flail2*" }, + { target:"body", ifOnFrame:"flail2*", wait:0.05, thenGoToFrame:"flail3*" }, + { target:"body", ifOnFrame:"flail3*", wait:0.05, thenGoToFrame:"flail4*" }, + { target:"body", ifOnFrame:"flail4*", wait:0.05, thenGoToFrame:"flail*" } + ]; + + // Inherit from Character! + Character.apply(self, [spriteConfig, animLoops]); + + // Go To Frames! + self.gotoFrames({ + body: "normal", + mouth: "small", + eyes: "wat", + }); + var _subscriptions = []; + _subscriptions.push( subscribe("bb", self.gotoFrames) ); + + // Draw! Same as earlier except a lot of vibration + var ticker = 0; + var _oldDraw = self.draw; + self.characterSpeakerID = "b"; + self.bounceHookes = 0.25; // loose + self.bounceDamp = 0.9; // loose + self.draw = function(ctx){ + + // Vibration! + ticker += 1/60; + self.characterSquash = 1 + Math.sin(ticker*Math.TAU*7)*0.01; // seven vibes per second + + // Old Draw + _oldDraw.apply(self, arguments); + + }; + + /* self.body = new Sprite(spriteConfig); self.head = new Sprite(spriteConfig); self.eyes = new Sprite(spriteConfig); @@ -89,12 +127,6 @@ function Act1_Beebee(){ self.gotoFrames(bodyName, headName, eyesName); }); - /** - - bb("point_heart", "normal_talk", "pretty") - - **/ - // First frame // self.sprite.gotoFrameByName("normal"); @@ -178,7 +210,6 @@ function Act1_Beebee(){ // Draw me! self.sprite.draw(ctx); - */ }; @@ -193,12 +224,21 @@ function Act1_Beebee(){ } if(fname=="scream"){ self.sprite.bounce = 1.6; - }*/ + } }); // Kill self.kill = function(){ + };*/ + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + // Kill! + self.kill = function(){ + _subscriptions.forEach(unsubscribe); }; } \ No newline at end of file diff --git a/scripts/act1/Act1_Hong.js b/scripts/act1/Act1_Hong.js index f903214..ec87281 100644 --- a/scripts/act1/Act1_Hong.js +++ b/scripts/act1/Act1_Hong.js @@ -1,19 +1,13 @@ Loader.addImages([ - - { id:"act1_hong", src:"sprites/act1/act1_hong.png" }, - - { id:"fear_harm", src:"sprites/ui/fear_harm.png" }, - { id:"fear_alone", src:"sprites/ui/fear_alone.png" }, - { id:"fear_bad", src:"sprites/ui/fear_bad.png" } - + { id:"act1_hong", src:"sprites/act1/act1_hong.png" } ]); function Act1_Hong(){ var self = this; - // Sprite! - self.sprite = new Sprite({ + // SPRITE CONFIG! + var spriteConfig = { image: Library.images.act1_hong, grid:{ width: 4, @@ -29,18 +23,18 @@ function Act1_Hong(){ }, frameNames:[ - "0_body_sammich_no_outline", - "0_body_sammich", - "0_eyes_neutral", - "0_eyes_concerned", - "0_eyes_shock", - "0_mouth_neutral", - "0_mouth_chew1", - "0_mouth_chew2", - "0_mouth_neutral_talk", - "0_mouth_shock", + "body_0_sammich_no_outline", + "body_0_sammich", + "eyes_0_neutral", + "eyes_0_concerned", + "eyes_0_shock", + "mouth_0_neutral", + "mouth_0_chew1", + "mouth_0_chew2", + "mouth_0_neutral_talk", + "mouth_0_shock", - "body_putaway", + "body_putaway*", "body_phone1", "body_phone2", "eyes_neutral", @@ -60,48 +54,46 @@ function Act1_Hong(){ "mouth_anger", "mouth_anger_talk", - "2_body_tired", - "2_body_fuck", - "2_body_you", - "2_body_sammich_eat", - "2_body_sammich_eaten", + "body_2_tired*", + "body_2_fuck*", + "body_2_you*", + "body_2_sammich_eat*", + "body_2_sammich_eaten", - "3_body_defeated1", - "3_body_defeated2", - "3_body_defeated3", - "3_body_defeated3_no_outline" + "body_3_defeated1*", + "body_3_defeated2*", + "body_3_defeated3*", + "body_3_defeated3_no_outline*" ], x: 65, - y: 385 + y: 385+14 + }; + + // ANIM LOOPS + var animLoops = [ + { target:"body", ifOnFrame:"phone1", wait:0.5, thenGoToFrame:"phone2" }, + { target:"body", ifOnFrame:"phone2", wait:0.5, thenGoToFrame:"phone1" } + ]; + + // Inherit from Character! + Character.apply(self, [spriteConfig, animLoops]); + + // Go To Frames! + self.gotoFrames({ + body: "phone1", + mouth: "neutral", + eyes: "neutral", }); + var _subscriptions = []; + _subscriptions.push( subscribe("hong", self.gotoFrames) ); + _subscriptions.push( subscribe("attack_hong", self.showAttackedIcon) ); - // Breathe normally - //self.sprite.breatheSpeed = 0.017; - //self.sprite.breatheAmp = 0.014; + // Draw + self.bounceHookes = 0.2; // stiff + self.bounceDamp = 0.8; // stiff - // Bounce slow - //self.sprite.bounceHookes = 0.1; - //self.sprite.bounceDamp = 0.9; - - // First frame - self.sprite.gotoFrameByName("normal"); - - // Attack sprites - self.fears = {}; - ["harm","alone","bad"].forEach( function(fearName){ - self.fears[fearName] = new Sprite({ - image: Library.images["fear_"+fearName], - grid:{ width:1, height:1 }, - frame:{ width:200, height:200 }, - anchor:{ x:100/2, y:100/2 }, - scale:0.75 - }); - } ); - - // HACK: frames - var _mouth_frame = "mouth_smile"; - var _eyes_frame = "eyes_surprise"; + /* // Draw var ticker = 0; @@ -111,16 +103,16 @@ function Act1_Hong(){ // Draw body FIRST ticker++; - var bod_frame = (Math.floor(ticker/30)%2 == 0) ? "body_phone1" : "body_phone2"; // phone flickering - self.sprite.gotoFrameByName(bod_frame); + //var bod_frame = (Math.floor(ticker/30)%2 == 0) ? "body_phone1" : "body_phone2"; // phone flickering + self.sprite.gotoFrameByName("0_body_sammich"); self.sprite.draw(ctx); // Draw mouth next - self.sprite.gotoFrameByName(_mouth_frame); + self.sprite.gotoFrameByName("0_mouth_neutral"); self.sprite.draw(ctx); // Draw eyes finally - self.sprite.gotoFrameByName(_eyes_frame); + self.sprite.gotoFrameByName("0_eyes_neutral"); self.sprite.draw(ctx); // Draw attacked icon @@ -189,4 +181,15 @@ function Act1_Hong(){ self.kill = function(){ }; + */ + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + // Kill! + self.kill = function(){ + _subscriptions.forEach(unsubscribe); + }; + } \ No newline at end of file diff --git a/scripts/act1/Act1_Outro_BG.js b/scripts/act1/Act1_Outro_BG.js new file mode 100644 index 0000000..95cda16 --- /dev/null +++ b/scripts/act1/Act1_Outro_BG.js @@ -0,0 +1,299 @@ +Loader.addImages([ + { id:"act1_end", src:"sprites/act1/act1_end.png" } +]); + +function BG_Act1_Outro(){ + + var self = this; + + // Sprites! + self.logoSprite = new Sprite({ + image: Library.images.intro_logo, + grid:{ width:1, height:1 }, + frame:{ width:720, height:900 }, + }); + var spriteConfig = { + image: Library.images.intro_bg, + grid:{ + width: 2, + height: 3 + }, + frame:{ + width: 1200, + height: 900 + }, + anchor:{ + x: 0, + y: 0 + }, + frameNames:[ + "sky", + "clouds", + "buildings", + "grass", + "stump", + "blackout" + ], + x: 0, + y: 0 + }; + self.layers = []; + ["sky","clouds","buildings","grass","stump","blackout"].forEach(function(layerName){ + var sprite = new Sprite(spriteConfig); + sprite.gotoFrameByName(layerName); + self.layers.push(sprite); + }); + + // HONG + var hongSpriteConfig = { + image: Library.images.act1_end, + grid:{ + width: 4, + height: 12 + }, + frame:{ + width: 1100, + height: 480 + }, + anchor:{ + x: 560/2, + y: 370/2 + }, + x: 560/2, + y: 370/2 + }; + var craterSprite = new Sprite(hongSpriteConfig); + self.layers.push(craterSprite); + var hongSprite = new Sprite(hongSpriteConfig); + self.layers.push(hongSprite); + + // DRAW + var BG_WIDTH = 360; + var BG_HEIGHT = 450; + var PARALLAXES = [ + 0, // sky + 0.1, // clouds + 0.25, // buildings + 0.48, // grass + 1.0, // stump + 0, // blackout + 1.0, // crater + 1.0, // HONG + ]; + var OFFSETS = [ + 0, + 0, // clouds + 0, + 0, + 20, + 0, + 20, + 20 + ]; + + //////////////////////////////// + // WHICH ANIM CYCLE TO USE? //// + //////////////////////////////// + + var ANIM_TO_USE = _.act1_ending || "fight"; + + + var ticker = 0; + var frameTicker = ticker; + var parallaxTicker = 1; + + self.draw = function(ctx){ + + // TICKER + ticker += 1/60; + + // CLOUD OFFSET + OFFSETS[1] = -80 + ticker*3; + + // PARALLAX + var parallax = 0; + if(GAME_TRANSITION==0){ + + parallaxTicker -= 2/60; // 1 to 0 in 1/2 second + + if(parallaxTicker<0) parallaxTicker = 0; + self.layers[5].alpha = parallaxTicker; // blackout alpha + + // 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*215; + + } + + // Smoking crater & Hong frame + frameTicker += 1/60; + if(ANIM_TO_USE == "fight"){ + + var frame = findFrameOnTicker(SMOKING_CRATER, frameTicker); + craterSprite.gotoFrame(frame); + var frame = findFrameOnTicker(HONG_FRAMES_FIGHT, frameTicker); + hongSprite.gotoFrame(frame); + + }else{ + + craterSprite.visible = false; + var frame = findFrameOnTicker(HONG_FRAMES_FLIGHT, frameTicker); + hongSprite.gotoFrame(frame); + + } + + // If pre frameTicker=90/30, Hong is shaking like Beebee! + if(frameTicker<90/30){ + hongSprite.squash = 1 + Math.sin(ticker*Math.TAU*7)*0.01; // seven vibes per second + }else{ + hongSprite.squash = 1; + } + + // Draw all! + for(var i=0; i=6){ // the HONG & SMOKING layer + layer.x += 560/2 + 20; // Hack, don't know why. + layer.y = 210 + 370/2; + } + layer.draw(ctx); + } + + // NEXT SCENE? + /*if(frame==26){ + Game.goto("act1"); + }*/ + + }; + + var GAME_TRANSITION = 0; + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + // Find it! + var findFrameOnTicker = function(frameArray, ticker){ + var lastFrame; + for(var i=0; i1) 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); }); + ctx.globalAlpha = 1; }; diff --git a/scripts/game/Character.js b/scripts/game/Character.js new file mode 100644 index 0000000..08b179a --- /dev/null +++ b/scripts/game/Character.js @@ -0,0 +1,218 @@ +/******************************** + +Character Architecture: + +* Layers: Body + Mouth + Eyes +* Can animate each layer independently +* Alternate mouth when talking +* Short animation loops +* [star] in body means show no eyes/mouth + +*********************************/ + +Loader.addImages([ + + { id:"fear_harm", src:"sprites/ui/fear_harm.png" }, + { id:"fear_alone", src:"sprites/ui/fear_alone.png" }, + { id:"fear_bad", src:"sprites/ui/fear_bad.png" } + +]); + +function Character(spriteConfig, animLoops){ + + var self = this; + self.spriteConfig = spriteConfig; + self.animLoops = animLoops || []; + + // Sprite! + self.layers = {}; + ["body","mouth","eyes"].forEach(function(layerName){ + self.layers[layerName] = new Sprite(spriteConfig); + }); + + // Attack sprites (Hong only, really) + self.fears = {}; + ["harm","alone","bad"].forEach( function(fearName){ + self.fears[fearName] = new Sprite({ + image: Library.images["fear_"+fearName], + grid:{ width:1, height:1 }, + frame:{ width:200, height:200 }, + anchor:{ x:100/2, y:100/2 }, + scale:0.75 + }); + } ); + + // Go To Frames + self.bounce = 1; + self.bounceVel = 0; + self.bounceHookes = 0.2; + self.bounceDamp = 0.8; + self.characterFrames = {}; + self.gotoFrames = function(args, bounce){ + + // Bounce? + if(bounce!==undefined){ + self.bounce += bounce; + } + + // Gimme those args + if(args.body){ + if(!self.layers.body.doesFrameNameExist("body_"+args.body)) args.body+="*"; // add * if missing + self.characterFrames.body = args.body; + } + if(args.mouth) self.characterFrames.mouth = args.mouth; + if(args.eyes) self.characterFrames.eyes = args.eyes; + + if(args.body){ + var bodyName = "body_"+args.body; + self.layers.body.gotoFrameByName(bodyName); + self.characterFrames.body = args.body; + } + + if(args.mouth){ + var mouthName = "mouth_"+args.mouth; + self.layers.mouth.gotoFrameByName(mouthName); + } + + if(args.eyes){ + var eyesName = "eyes_"+args.eyes; + self.layers.eyes.gotoFrameByName(eyesName); + } + + // Go go go + var l = self.layers; + var c = self.characterFrames; + l.body.gotoFrameByName( "body_"+c.body ); + l.mouth.gotoFrameByName( "mouth_"+c.mouth ); + l.eyes.gotoFrameByName( "eyes_"+c.eyes ); + + }; + + // Draw + self.characterSpeakerID = "derp"; + self.characterSquash = 1; + self.draw = function(ctx){ + + var fname; + var l = self.layers; + var c = self.characterFrames; + + // Attacked? SHAKE WHOLE CONTEXT + ctx.save(); + if(IVE_BEEN_ATTACKED){ + var shakeDuration = 0.6; + if(attackedTimer=0); + if(isMyMouthTalking){ + l.mouth.gotoFrameByName( "mouth_"+c.mouth ); + } + } + l.mouth.draw(ctx); + + // Eyes + l.eyes.draw(ctx); + + } + + // Draw attacked icon + if(IVE_BEEN_ATTACKED){ + + var icon = self.fears[attackedIconShown]; + icon.draw(ctx); + + attackedTimer += 1/60; + if(attackedTimer>1.5){ // 1s + icon.y -= 1; + icon.alpha -= 1/15; + if(icon.alpha<0){ + attackedIconShown = null; + IVE_BEEN_ATTACKED = false; + } + } + + } + ctx.restore(); + + }; + + // Anim Loop logic! + self.animLoops.forEach(function(rule){ + rule.active = false; + rule.countdown = -1; + }); + self.runAnimLoopRules = function(){ + for(var i=0; i=0; + }; self.gotoFrame(0); // Other transformations @@ -65,44 +69,15 @@ function Sprite(config){ self.scale = config.scale || 1; self.squash = config.squash || 1; self.alpha = config.alpha || 1; + + // Visible at all? + self.visible = true; - // Helpers - self.breathe = 0; - self.breatheSpeed = 0; - self.breatheAmp = 0; - self.bounce = 1; - self.bounceVel = 0; - self.bounceDamp = 0.8; - self.bounceHookes = 0.4; - self.shake = 0; - self.shakeAmp = 0; - self.shakeSpeed = 0; - self.shakeTimer = 0; - - // Update breath/bounce, all that jazz. - self.update = function(){ - - // Breathe - self.breathe += self.breatheSpeed; - - // Bounce - self.bounce += self.bounceVel; - self.bounceVel -= (self.bounce-1) * self.bounceHookes; - self.bounceVel *= self.bounceDamp; - - // Shake - self.shakeTimer -= 1/60; - if(self.shakeTimer>0){ - self.shake = Math.sin(self.shakeTimer*self.shakeSpeed*Math.PI*2) * self.shakeAmp; - }else{ - self.shake = 0; - } - - }; - // Draw frame! self.draw = function(ctx){ + if(!self.visible) return; // nah + ctx.save(); // Which part of image to draw? @@ -112,15 +87,13 @@ function Sprite(config){ var fh = self.frame.height; // Translate... - var dx = self.x + self.shake; + var dx = self.x; var dy = self.y; ctx.translate(dx, dy); // Scale - var breatheSquash = 1 + Math.sin(self.breathe)*self.breatheAmp; - var totalSquash = self.squash * breatheSquash * self.bounce; - var scaleX = self.scale * totalSquash; - var scaleY = self.scale / totalSquash; + var scaleX = self.scale * self.squash; + var scaleY = self.scale / self.squash; ctx.scale(scaleX, scaleY); // Alpha diff --git a/scripts/intro/Intro_BG.js b/scripts/intro/Intro_BG.js index 712e8a4..b29859d 100644 --- a/scripts/intro/Intro_BG.js +++ b/scripts/intro/Intro_BG.js @@ -1,4 +1,5 @@ Loader.addImages([ + { id:"intro_logo", src:"sprites/intro/intro_logo.png" }, { id:"intro_bg", src:"sprites/intro/intro_bg.png" }, { id:"intro_anim", src:"sprites/intro/intro_anim.png" } ]); @@ -7,7 +8,12 @@ function BG_Intro(){ var self = this; - // Sprite! + // Sprites! + self.logoSprite = new Sprite({ + image: Library.images.intro_logo, + grid:{ width:1, height:1 }, + frame:{ width:720, height:900 }, + }); var spriteConfig = { image: Library.images.intro_bg, grid:{ @@ -28,17 +34,18 @@ function BG_Intro(){ "buildings", "grass", "stump", - "bag" + "blackout" ], x: 0, y: 0 }; self.layers = []; - ["sky","clouds","buildings","grass","stump"].forEach(function(layerName){ + ["sky","clouds","buildings","grass","stump","blackout"].forEach(function(layerName){ var sprite = new Sprite(spriteConfig); sprite.gotoFrameByName(layerName); self.layers.push(sprite); }); + self.layers[5].alpha = 0; // blackout alpha is ZERO at start. // HONG var hongSpriteConfig = { @@ -68,8 +75,9 @@ function BG_Intro(){ 0, // sky 0.1, // clouds 0.25, // buildings - 0.5, // grass + 0.48, // grass 1.0, // stump + 0, // blackout 1.0, // HONG ]; var OFFSETS = [ @@ -78,31 +86,92 @@ function BG_Intro(){ 0, 0, 20, + 0, 20 ] - // TODO: CLOUDS MOVE BY SELF - var ticker = 0; + + var ticker = 0; //16;//0; + var frameTicker = ticker; + var parallaxTicker = 0; + var SHOWN_PLAY_BUTTON = false; + var SHOWN_LOGO = false; self.draw = function(ctx){ - var parallax = 0; //= -(1+Math.sin(ticker))*90; + // TICKER ticker += 1/60; // CLOUD OFFSET - OFFSETS[1] = -80 + ticker*3 + OFFSETS[1] = -80 + ticker*3; + // Animate Hong: Which frame? + var parallax = 0; + frameTicker += 1/60; + if(GAME_TRANSITION==0 || GAME_TRANSITION==1){ + if(frameTicker>590/30){ + if(GAME_TRANSITION==0) frameTicker = 381/30; // LOOP to NOM. + if(GAME_TRANSITION==1) frameTicker = 590/30; // STOP. + } + } + if(GAME_TRANSITION==2){ + + parallaxTicker += 1/60; // 0 to 1 in one second + if(parallaxTicker>1) parallaxTicker = 1; + self.layers[5].alpha = parallaxTicker; // blackout alpha + + // 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*215; + + } + + // Hong frame + var frame = findFrameOnTicker(frameTicker); + hongSprite.gotoFrame(frame); + + // Draw all! for(var i=0; i=530/30){ + SHOWN_LOGO = true; + } + if(GAME_TRANSITION==0 && SHOWN_LOGO){ + self.logoSprite.draw(ctx); + } - // Animate Hong - var frame = findFrameOnTicker(ticker); - hongSprite.gotoFrame(frame); + // Show Play Button + if(!SHOWN_PLAY_BUTTON && ticker>=590/30){ + SHOWN_PLAY_BUTTON = true; + Game.goto("intro-play-button"); + } + + // NEXT SCENE? + if(frame==26){ + Game.goto("act1"); + } }; - //////////////////////////////////////////////////////// + var GAME_TRANSITION = 0; + var _subscriptions = []; + _subscriptions.push( + subscribe("intro-to-game-1", function(){ + GAME_TRANSITION = 1; // STOP LOOPING + }) + ); + _subscriptions.push( + subscribe("intro-to-game-2", function(){ + frameTicker = 600/30; + GAME_TRANSITION = 2; // START PARALLAXING + }) + ); + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// // ANIMATE HONG, THE FRAMES! @@ -129,7 +198,18 @@ function BG_Intro(){ "15-430", "14-440", "15-450", - "16-470" + "16-470", + + "17-600", + "18-603", + "19-606", + "20-609", + "21-612", + "22-615", + "23-618", + "24-621", + "25-624", + "26-627" ]; HONG_FRAMES = HONG_FRAMES.map(function(frame){ var f = frame.split("-"); @@ -146,5 +226,14 @@ function BG_Intro(){ return lastFrame; }; + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + // Kill! + self.kill = function(){ + _subscriptions.forEach(unsubscribe); + }; + } \ No newline at end of file diff --git a/scripts/intro/Intro_SceneSetup.js b/scripts/intro/Intro_SceneSetup.js index 3754a4b..4e6fadd 100644 --- a/scripts/intro/Intro_SceneSetup.js +++ b/scripts/intro/Intro_SceneSetup.js @@ -6,18 +6,4 @@ SceneSetup.intro = function(){ var bg = new BG_Intro(); 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; - } - });*/ - }; \ No newline at end of file diff --git a/scripts/lib/helpers.js b/scripts/lib/helpers.js new file mode 100644 index 0000000..cbae6bb --- /dev/null +++ b/scripts/lib/helpers.js @@ -0,0 +1,7 @@ +// I'm twice the number you'll ever be +Math.TAU = Math.PI*2; + +// The poor man's jQuery +function $(query){ + return document.querySelector(query); +} \ No newline at end of file diff --git a/scripts/lib/pinkyswear.min.js b/scripts/lib/pinkyswear.min.js deleted file mode 100644 index b132ee9..0000000 --- a/scripts/lib/pinkyswear.min.js +++ /dev/null @@ -1,2 +0,0 @@ -(function(e){function g(h){return"function"==typeof h}function k(h){"undefined"!=typeof setImmediate?setImmediate(h):"undefined"!=typeof process&&process.nextTick?process.nextTick(h):setTimeout(h,0)}e[0][e[1]]=function n(f){function a(a,g){null==b&&null!=a&&(b=a,l=g,c.length&&k(function(){for(var a=0;a div{ padding: 0.25em 0; cursor: pointer; + position: relative; + + /* Spring OUT only */ + -webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */ + -webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); + -moz-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); + -o-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); + transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */ + + -webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */ + -webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); + -moz-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); + -o-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); + transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */ } #game_choices > div:hover{ background: rgba(255,255,255,0.25); @@ -218,5 +232,7 @@ canvas{ position: absolute; width: 360px; height: 100px; - top:0; left:0; + top:-100px; + left:0; + transition: top 0.5s ease-in-out; }