Styled logo, title, tutorial and gameover screens

css/game.css

@@ -1,3 +1,8 @@
+@font-face {
+    font-family: 'Minecraft';
+    src: url('../res/fonts/Minecraft.ttf');
+}
+
 html, body {
     margin: 0;
     padding: 0;
@@ -46,4 +51,8 @@ div#menu > ul {
 div#menu > ul > li {
     padding-top: 10px;
     cursor: pointer;
+}
+
+div#board > canvas {
+    letter-spacing: 2px;
 }

res/lang/default.js

@@ -11,7 +11,7 @@ module.exports = {
     "Press Ctrl to sprint, but watch your stamina!",
     "Press space to interact with objects",
     "If the arrow above an object is red, you cannot interact with it",
-    "You might be missing key or have already interacted with it",
+    "You might be missing a key or have already interacted with it",
     "Press space to return"
   ],
   gameOver: {

src/entities/chest.js

@@ -5,7 +5,7 @@ const { Texture, Sound, TileSprite, entity } = asdf;
 const texture = new Texture(__dirname + "/../../res/images/tilemap.png");
 const sounds = {
   forbidden: new Sound(__dirname + "/../../res/sounds/forbidden.wav"),
-  obtain: new Sound(__dirname + "/../../res/sounds/obtain.wav")
+  obtain: new Sound(__dirname + "/../../res/sounds/obtain.wav", { volume: 0.1 })
 };
 
 const Pointer = require("./pointer.js");
@@ -67,7 +67,7 @@ class Chest extends TileSprite {
         if (this.state == state.closed) {
           this.state = state.open;
           this.pressed = true;
-          this.action();
+          this.action();          
           sounds.obtain.play();
         } else {
           if (!sounds.forbidden.playing && !this.pressed) {

src/helpers/stats.js

@@ -5,7 +5,7 @@ const tilemap = new Texture("../res/images/tilemap.png");
 const tileSize = 32;
 
 const text = require(__dirname + "/../../res/lang/default.js");
-const fillStyle = {fill: "#ffffff", font: "24px Arial"};
+const fillStyle = {fill: "#ffffff", font: "24px Minecraft"};
 
 class Stats extends Container {
   constructor(player) {
@@ -20,14 +20,14 @@ class Stats extends Container {
     livesText.pos = {x: 10, y: 310};
 
     const livesCounter = new Text(player.lives, fillStyle);
-    livesCounter.pos = {x: 90, y: 310};
+    livesCounter.pos = {x: 100, y: 310};
 
     const heart = new TileSprite(tilemap, tileSize, tileSize);
     heart.frame = {x: tilemapFrames[42].x / tileSize, y:  tilemapFrames[42].y / tileSize};
-    heart.pos = {x: 104, y: 284};
+    heart.pos = {x: 120, y: 284};
 
-    const staminaText = new Text("| " + text.game.stamina + ":", fillStyle);
-    staminaText.pos = {x: 140, y: 310};
+    const staminaText = new Text(text.game.stamina + ":", fillStyle);
+    staminaText.pos = {x: 160, y: 310};
 
     this.children = [
       background,
@@ -41,7 +41,7 @@ class Stats extends Container {
     Array(5).fill().forEach((_val, index) => {
       const sprite = new TileSprite(tilemap, tileSize, tileSize);
       sprite.frame = {x: tilemapFrames[44].x / tileSize, y: tilemapFrames[44].y / tileSize};
-      sprite.pos = {x: index * 26 + 270, y: 286};
+      sprite.pos = {x: index * 26 + 290, y: 286};
       this.children.push(sprite);
     });
   }

src/screens/gameover.js

@@ -1,9 +1,9 @@
 const asdf = require("asdf-games");
 // eslint-disable-next-line no-unused-vars
-const { Texture, Text, Container, Sprite } = asdf;
+const { Text, Container, Rect } = asdf;
 
 const text = require(__dirname + "/../../res/lang/default.js");
-const fillStyle = {fill: "#ffffff", font: "24px Arial"};
+const fillStyle = {fill: "#ffffff", font: "24px Minecraft"};
 
 class GameOver extends Container {
   constructor(game, keys, onEnd) {
@@ -14,12 +14,14 @@ class GameOver extends Container {
 
     this.children = [];
     
-    var gameover = new Text(text.gameOver.dead, {fill: "#ffffff", font: "32px Arial"});
-    gameover.pos = { x: 200, y: 200 };
+    this.add(new Rect(this.game.w, this.game.h, { fill: "#333333" }));
+    
+    var gameover = new Text(text.gameOver.dead, {fill: "#bb0a1e", font: "60px Minecraft"});
+    gameover.pos = { x: 188, y: 150 };
     this.add(gameover);
 
     var instruction = new Text(text.gameOver.instruction, fillStyle);
-    instruction.pos = { x: 200, y: 236 };
+    instruction.pos = { x: 125, y: 216 };
     this.add(instruction);
   }
 

src/screens/logo.js

@@ -1,9 +1,8 @@
 const asdf = require("asdf-games");
 // eslint-disable-next-line no-unused-vars
-const { Texture, Text, Container, Sprite } = asdf;
+const { Texture, Container, Sprite } = asdf;
 
-const text = require(__dirname + "/../../res/lang/default.js");
-const fillStyle = {fill: "#ffffff", font: "24px Arial"};
+var logo = new Texture("../res/images/asdf-logo.png");
 
 class Logo extends Container {
   constructor(game, onEnd) {
@@ -12,16 +11,8 @@ class Logo extends Container {
     this.onEnd = onEnd;
             
     this.children = [];
-        
-    const textPos = { x: 200, y: 150 };
-    for (let index = 0; index < text.logoScreen.length; index++) {
-      const element = new Text(text.logoScreen[index], fillStyle);
-      element.pos = {
-        x: textPos.x,
-        y: textPos.y + 24 * index
-      };
-      this.add(element);
-    }
+    
+    this.add(new Sprite(logo));
 
     this.lifetime = 2; 
   }

src/screens/title.js

@@ -1,9 +1,16 @@
 const asdf = require("asdf-games");
 // eslint-disable-next-line no-unused-vars
-const { Texture, Container, Sprite, Text } = asdf;
+const { Texture, Container, TileSprite, Text, AnimManager, Rect, Sprite } = asdf;
 
 const text = require(__dirname + "/../../res/lang/default.js");
-const fillStyle = {fill: "#ffffff", font: "24px Arial"};
+const fillStyle = {fill: "#ffffff", font: "24px Minecraft"};
+
+const textures = {
+  space: new Texture("../res/images/keys/space.png"),
+  t: new Texture("../res/images/keys/t.png"),
+  q: new Texture("../res/images/keys/q.png"),
+  logo: new Texture("../res/images/logo.png")
+};
 
 class Title extends Container {
   constructor(game, keys, onStart, onTutorial, onQuit) {
@@ -19,13 +26,46 @@ class Title extends Container {
 
     this.children = [];
 
-    const textPos = { x: 200, y: 200 };
+    this.add(new Rect(this.game.w, this.game.h, { fill: "#333333" }));
+
+    this.add(new Sprite(textures.logo));
+
+    this.keyCaps = [
+      new TileSprite(textures.space, 64, 16),
+      new TileSprite(textures.t, 16, 16),
+      new TileSprite(textures.q, 16, 16)
+    ];
+
+    this.keyCaps.forEach(element => {
+      element.scale = { x: 1.5, y: 1.5 };
+      element.anims = new AnimManager(element);
+      element.anims.add("press", [0, 1].map(y => ({ x: 0, y })), 0.50);
+      element.anims.play("press");
+      console.log(element);
+    });
+
+    const textPos = { x: 220, y: 240 };
     for (let index = 0; index < text.titleScreen.instructions.length; index++) {
+      const keyCap = this.keyCaps[index];
+      if (index == 0) {
+        keyCap.pos = {
+          x: textPos.x - 120,
+          y: textPos.y + (28 * index) - 18
+        };
+      } else {
+        keyCap.pos = {
+          x: textPos.x - 56,
+          y: textPos.y + (28 * index) - 20
+        };
+      }
+
       const element = new Text(text.titleScreen.instructions[index], fillStyle);
       element.pos = {
         x: textPos.x,
         y: textPos.y + 28 * index
       };
+
+      this.add(keyCap);
       this.add(element);
     }
   }

src/screens/tutorial.js

@@ -1,9 +1,16 @@
 const asdf = require("asdf-games");
 // eslint-disable-next-line no-unused-vars
-const { Texture, Container, Text,  Sprite } = asdf;
+const { Texture, Rect, Container, Text, TileSprite } = asdf;
 
 const text = require(__dirname + "/../../res/lang/default.js");
-const fillStyle = {fill: "#ffffff", font: "20px Arial"};
+const fillStyle = {fill: "#ffffff", font: "16px Minecraft"};
+
+const textures = {
+  space: new Texture("../res/images/keys/space.png"),
+  arrows: new Texture("../res/images/keys/arrows.png"),
+  ctrl: new Texture("../res/images/keys/ctrl.png"),
+  interact: new Texture("../res/images/tutorial/interact.png")
+};
 
 class Tutorial extends Container {
   constructor(game, keys, onEnd) {
@@ -12,16 +19,52 @@ class Tutorial extends Container {
     this.keys = keys;
     this.onEnd = onEnd;
     
+    this.pos = { x: 0, y: 0 };
     this.children = [];
 
-    const textPos = { x: 50, y: 150 };
+    this.add(new Rect(this.game.w, this.game.h, { fill: "#333333" }));
+
+    const title = new Text("Tutorial", {fill: "#ffffff", font: "36px Minecraft"});
+    title.pos = { x: 12, y: 44 };
+    this.add(title);
+
+    this.images = [
+      new TileSprite(textures.arrows, 48, 32),
+      new TileSprite(textures.ctrl, 21, 16),
+      new TileSprite(textures.space, 64, 16),
+      new TileSprite(textures.interact, 64, 39)
+    ];
+
+    this.instructions = [];
     for (let index = 0; index < text.tutorial.length; index++) {
-      const element = new Text(text.tutorial[index], fillStyle);
-      element.pos = {
-        x: textPos.x,
-        y: textPos.y + 24 * index
-      };
-      this.add(element);
+      this.instructions.push(new Text(text.tutorial[index], fillStyle));
+    }
+
+    // Controls direction
+    this.images[0].pos = { x: 24, y: 60 };
+    this.instructions[0].pos = { x: 12, y: 108 };
+
+    // Controls sprint
+    this.images[1].pos = { x: 24, y: 116 };
+    this.instructions[1].pos = { x: 12, y: 148 };
+
+    // Controls action
+    this.images[2].pos = { x: 24, y: 156 };
+    this.instructions[2].pos = { x: 12, y: 188 };
+
+    // Interact
+    this.images[3].pos = { x: 24, y: 196 };
+    this.instructions[3].pos = { x: 12, y: 254 };
+    this.instructions[4].pos = { x: 12, y: 274 };
+
+    // Back to menu
+    this.instructions[5].pos = { x: 12, y: 308 };
+  
+    for (let index = 0; index < this.instructions.length; index++) {
+      if (this.images[index]) {
+        this.add(this.images[index]);
+      }
+      this.add(this.instructions[index]);
     }
   }