Merge branch '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

@@ -51,15 +51,16 @@ var constants = {
         leg_speed: 0.1,
         movement_divider: 50,
         max_movement_speed: 3,
-        width: 30,
-        height: 50,
+        width: 40,
+        height: 75,
         select_range: 10,
+        leg_length: 75,
         hip: {
-            offset_x: 15,
-            offset_y: 25
+            offset_x: 20,
+            offset_y: 35
         },
-        defaultX: 500,
-        defaultY: -70
+        defaultX: 600,
+        defaultY: -170
     }
 
 };

docs/assets/js/index.js

@@ -5,12 +5,18 @@ page_preloader.show(true);
 images = [
     "assets/images/",
     "level.png",
-    "level_2.png",
+    "epic.png",
     "heartCover.png",
     "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;
-                drawWorldBlocks();
-                imgIgnoreCutoff(sprites.level_2,0,0,0,4,4);
-                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:
@@ -99,7 +95,7 @@ function draw() {
             break;
         //building - to be used only in development
         case globalStates.building:
-            
+            imgIgnoreCutoff(sprites.epic,0,0);
             buildDraw();
             break;
     }

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,39 +11,60 @@ 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)  {
-            soundAssets.inhale.play();
                 currentBreathMode = breathMode.inhale;
+                soundAssets.inhale.play();
             }
             else if (breath === constants.lifeFuncs.breath.fullBreath) {
-            soundAssets.exhale.play();
                 currentBreathMode = breathMode.exhale;
+                soundAssets.exhale.play();
+            }
+            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/player/player.js

@@ -6,8 +6,8 @@ class Player {
         this.h = constants.player.height;
         this.hipLeft = { x: this.x + constants.player.hip.offset_x, y: this.y + constants.player.hip.offset_y };
         this.hipRight = { x: this.x - constants.player.hip.offset_x, y: this.y + constants.player.hip.offset_y };
-        this.leftLeg = new Leg(this.hipLeft.x, this.hipLeft.y, 50, Math.PI*2.5);
-        this.rightLeg = new Leg(this.hipRight.x, this.hipRight.y, 50, Math.PI*2.5);
+        this.leftLeg = new Leg(this.hipLeft.x, this.hipLeft.y, constants.player.leg_length, Math.PI*2.5);
+        this.rightLeg = new Leg(this.hipRight.x, this.hipRight.y, constants.player.leg_length, Math.PI*2.5);
         this.legSelected = "R";
         this.shouldMoveLeg = false;
         this.collided = false;
@@ -76,7 +76,34 @@ Player.prototype.update = function() {
         }  
     }
 
+    // god mode
+    // if(keyDown[k.w]) {
+    //     this.y-=5;
+    // }
+    // if(keyDown[k.s]) {
+    //     this.y+=5;
+    // }
+    // if(keyDown[k.a]) {
+    //     this.x-=5;
+    // }
+    // if(keyDown[k.d]) {
+    //     this.x+=5;
+    // }
+    
     centerCameraOn(this.x,this.y);
+    // camera limits
+    if(camera.x > 898) {
+        camera.x = 898;
+    }
+    if(camera.x < -98) {
+        camera.x = -98;
+    }
+    if(camera.y < 245) {
+        camera.y = 245;
+    }
+    if(camera.y > 350) {
+        camera.y = 350;
+    }
 }
 
 

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;
+    }
+    
+}

docs/assets/js/transition/transition.js

@@ -24,7 +24,7 @@ function drawLevelTransitionUI() {
 
     // draws background sprites
     drawWorldBlocks();
-    imgIgnoreCutoff(sprites.level_2,0,0,0,4,4);
+    imgIgnoreCutoff(sprites.epic,0,0);
     player.draw();
 
     // sets alpha to calculated alpha for black

docs/assets/js/world/level.js

@@ -12,7 +12,7 @@ class block {
 }
 
 // create blocks
-var blockData = [942,-184,94,507,942,191,94,507,372,411,1054,67,-316,369,1214,152,-38,270,86,107,-166,243,125,127,238,320,45,127,273,284,45,127,309,248,45,127,341,215,45,127,377,179,45,127,412,143,45,127,450,107,45,127,603,105,285,196,777,27,285,196,-989,23,175,959,154,-441,2555,51];
+var blockData = [705,-8,491,64,460,27,74,64,425,64,74,64,389,99,74,64,352,135,74,64,321,167,74,64,285,203,74,64,249,239,74,64,-18,299,3314,111,-43,205,59,90,-44,207,80,63,-168,199,128,108,-168,144,158,25,-978,-101,158,984,14,-398,1958,85,928,-192,58,345,664,-101,25,133,867,-102,25,133,765,-97,185,67];
 for (let i = 0, l = blockData.length; i < l; i += 4) {
     collisionRects.push(new block(blockData[i], blockData[i + 1], blockData[i + 2], blockData[i + 3]));
 }