tutorial

docs/assets/js/UI/ui.js

@@ -3,16 +3,22 @@ function drawTitleScreenUI() {
 }
 
 
+var playingUIOffsets = {
+    heart: 100,
+    breath: 100,
+    blink: 100
+};
+
 // UI for playing
 function drawPlayingUI() {
 
     // cartesianRect(0,ch/3*2, cw, ch/3, "#333333")
 
     //Heart Rate Monitor
-    heartBeatUI(cw/4*3-8,ch/8*7-8,cw/4,ch/8);
+    heartBeatUI(cw / 4 * 3 - 8, ch / 8 * 7 - 8 + playingUIOffsets.heart, cw / 4, ch / 8);
 
     //Respiration Monitor
-    respiratoryUI(cw/8*5,ch/8*7-8, cw/16, ch/8);
+    respiratoryUI(cw / 8 * 5, ch / 8 * 7 - 8 + playingUIOffsets.breath, cw / 16, ch / 8);
 
     //Blink eye and overlay
     blinkUI();
@@ -87,7 +93,7 @@ function heartBeatUI(x, y, width, height){
         BackdropColor = "#260505";
     }
     rect(x + width / 2, y + height / 2, width, height, BackdropColor);
-    img(sprites.heartBack,cw-107,ch-46);
+    img(sprites.heartBack, cw - 107, ch - 46 + playingUIOffsets.heart);
 
     //Pressure Meter
     rect(x + width - 8, y + height / 2, 16, height, "red");
@@ -104,7 +110,7 @@ function heartBeatUI(x, y, width, height){
     }
 
     // cover
-    img(sprites.heartCover,cw-107,ch-46);
+    img(sprites.heartCover, cw - 107, ch - 46 + playingUIOffsets.heart);
 }
 
 //Determine next value to be added to the graph
@@ -145,10 +151,10 @@ function pushNextBeatValue(){
 
 function blinkUI() {
     // eye
-    img(sprites.eye,cw-350,ch-40,0,2,2);
+    img(sprites.eye, cw - 350, ch - 40 + playingUIOffsets.blink, 0, 2, 2);
     var alpha = clamp(eyeDryness / constants.lifeFuncs.blink.dryTime, 0, 1);
     curCtx.globalAlpha = alpha;
-    img(sprites.eyeDry,cw-350,ch-40,0,2,2);
+    img(sprites.eyeDry, cw - 350, ch - 40 + playingUIOffsets.blink, 0, 2, 2);
 
     // dry overlay
     if (eyeDryness > constants.lifeFuncs.blink.dryTime) {

docs/assets/js/constants.js

@@ -58,7 +58,7 @@ var constants = {
             offset_x: 20,
             offset_y: 35
         },
-        defaultX: 500,
+        defaultX: 600,
         defaultY: -170
     }
 

docs/assets/js/index.js

@@ -10,7 +10,13 @@ images = [
     "heartBack.png",
     "blinkOverlay.png",
     "eye.png",
-    "eyeDry.png"
+    "eyeDry.png",
+    "tutSelect0.png",
+    "tutSelect1.png",
+    "tutArrow.png",
+    "tutKeyZ.png",
+    "tutKeyX.png",
+    "tutKeyC.png"
 ];
 
 audio = [
@@ -77,17 +83,7 @@ function draw() {
             break;
         // playing
         case globalStates.playing:
-            if(!justBlinked) {
-
-                camera.zoom = 1;
-                imgIgnoreCutoff(sprites.epic,0,0);
-                drawWorldBlocks();
-                player.draw();
-
-            } else {
-                rect(-camera.x - difx + cw/2,-camera.y - dify + ch/2,cw,ch,"black");
-                justBlinked = false;
-            }
+            drawPlaying();
             break;
         // paused
         case globalStates.paused:

docs/assets/js/player/lifeFunctions.js

@@ -1,8 +1,8 @@
 
-let breath = 180;
+let breath = 200;
 let fullBreathTimer = 0;
 let noBreathTimer = 0;
-let pressure = 50;
+let pressure = 55;
 
 let heartBeat = false;
 
@@ -11,33 +11,54 @@ var breathMode = {
     exhale: 1
 };
 
-let currentBreathMode = breathMode.exhale;
+let currentBreathMode = breathMode.inhale;
 
 let eyeDryness = 0;
 let justBlinked = false;
 
 function updateLife() {
 
+    if (playingUIOffsets.breath === 0) {
         if (keyDown[k.x]) {
             if (breath === 0) currentBreathMode = breathMode.inhale;
             else if (breath === constants.lifeFuncs.breath.fullBreath) currentBreathMode = breathMode.exhale;
+            if(Date.now() - keyPromptTime > 3000) {
+                --keyPrompts.breath;
+                if(keyPrompts.breath > 0) {
+                    keyPromptTime = Date.now();
+                }
+            }
         }
 
         breathe();
+    }
 
+    if (playingUIOffsets.heart === 0) {
         if (keyPress[k.c]) {
             heartbeat();
+            if(Date.now() - keyPromptTime > 1250) {
+                --keyPrompts.beat;
+                if(keyPrompts.beat > 0) {
+                    keyPromptTime = Date.now();
+                }
+            }
         }
 
         pressure -= 0.1;
         if (pressure <= 0) {
             pressure = 0;
         }
+    }
 
+    if(playingUIOffsets.blink === 0) {
         eyeDryness++;
 
         if (keyPress[k.z]) {
             blink();
+            if(Date.now() - keyPromptTime > 1250) {
+                --keyPrompts.blink;
+            }
+        }
     }
 };
 

docs/assets/js/playing/playing.js

@@ -1,8 +1,126 @@
+var tutorialStates = {
+    selectLeg:0,
+    placeOnGround:1,
+    goDownStairs:2,
+    getCereal: 3,
+    getMail: 4
+};
+
+var tutState = tutorialStates.selectLeg;
+
+// how many times 
+var keyPrompts = {
+    beat: 2,
+    breath: 2,
+    blink: 1
+};
+
+var keyPromptTime;
+
+var frameCount = 0;
+
 function handlePlaying() {
     // enter build mode
     if(keyPress[k.BACKSLASH]) {
         globalState = globalStates.building;
     }
 
+    switch(tutState) {
+        case tutorialStates.selectLeg:
+            if(player.shouldMoveLeg) {
+                tutState = tutorialStates.placeOnGround;
+            }
+            break;
+        case tutorialStates.placeOnGround:
+            if(!player.shouldMoveLeg) {
+                tutState = tutorialStates.goDownStairs;
+            }
+            break;
+        case tutorialStates.goDownStairs:
+            if(player.y > -55) {
+                tutState = tutorialStates.getCereal;
+                keyPromptTime = Date.now();
+            }
+            break;
+        case tutorialStates.getCereal:
+            break;
+        case tutorialStates.getMail:
+
+            break;
+    }
+
+    // rise heart ui
+    if(player.y > -55) {
+        if(playingUIOffsets.heart > 0) {
+            --playingUIOffsets.heart;
+        }
+    }
+
+    // rise breath ui
+    if(player.y > 135) {
+        if(playingUIOffsets.breath > 0) {
+            --playingUIOffsets.breath;
+        }
+    }
+
+    // rise blink ui
+    if(player.x < -290) {
+        if(playingUIOffsets.blink > 0) {
+            --playingUIOffsets.blink;
+        }
+    }
+
     updateLife();
 }
+
+function drawPlaying() {
+    frameCount++;
+    if(!justBlinked) {
+
+        imgIgnoreCutoff(sprites.epic,0,0);
+        // drawWorldBlocks();
+        player.draw();
+
+        // beat key
+        if(keyPrompts.beat > 0 && playingUIOffsets.heart === 0) {
+            if(Date.now() - keyPromptTime > 1250) {
+                img(sprites.tutKeyC,player.x + 70, player.y + (~~(frameCount/10)%2) * 2,0,2,2);
+            }
+        }
+
+        // breath key
+        if(keyPrompts.breath > 0 && playingUIOffsets.breath === 0) {
+            if(Date.now() - keyPromptTime > 3000) {
+                img(sprites.tutKeyX,player.x + 70, player.y + (~~(frameCount/10)%2) * 2,0,2,2);
+            }
+        }
+
+        // blink key
+        if(keyPrompts.blink > 0 && playingUIOffsets.blink === 0) {
+            if(Date.now() - keyPromptTime > 4000) {
+                img(sprites.tutKeyZ,player.x + 70, player.y + (~~(frameCount/10)%2) * 2,0,2,2);
+            }
+        }
+        switch(tutState) {
+            case tutorialStates.selectLeg:
+                img(sprites["tutSelect"+~~(frameCount/10)%2],(player.leftLeg.x+player.leftLeg.x2)/2,(player.leftLeg.y+player.leftLeg.y2)/2,0,2,2);
+                break;
+            case tutorialStates.placeOnGround:
+                img(sprites["tutSelect"+~~(frameCount/10)%2],500,-40,2,2);
+                break;
+            case tutorialStates.goDownStairs:
+                img(sprites.tutArrow,360+~~(frameCount/10)%2,-30-~~(frameCount/10)%2,0,2,2);
+                break;
+            case tutorialStates.getCereal:
+    
+                break;
+            case tutorialStates.getMail:
+    
+                break;
+        }
+    } else {
+        rect(-camera.x - difx + cw/2,-camera.y - dify + ch/2,cw,ch,"black");
+        justBlinked = false;
+    }
+    
+}