Styled logo, title, tutorial and gameover screens

This commit is contained in:
Arne van Iterson 2020-04-14 17:50:53 +02:00
parent 082dca9bd4
commit 237dc36a62
16 changed files with 124 additions and 39 deletions

View File

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

BIN
res/images/asdf-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
res/images/keys/arrows.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 437 B

BIN
res/images/keys/ctrl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 372 B

BIN
res/images/keys/q.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 383 B

BIN
res/images/keys/space.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 B

BIN
res/images/keys/t.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 339 B

BIN
res/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 672 B

View File

@ -11,7 +11,7 @@ module.exports = {
"Press Ctrl to sprint, but watch your stamina!", "Press Ctrl to sprint, but watch your stamina!",
"Press space to interact with objects", "Press space to interact with objects",
"If the arrow above an object is red, you cannot interact with it", "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" "Press space to return"
], ],
gameOver: { gameOver: {

View File

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

View File

@ -5,7 +5,7 @@ const tilemap = new Texture("../res/images/tilemap.png");
const tileSize = 32; const tileSize = 32;
const text = require(__dirname + "/../../res/lang/default.js"); 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 { class Stats extends Container {
constructor(player) { constructor(player) {
@ -20,14 +20,14 @@ class Stats extends Container {
livesText.pos = {x: 10, y: 310}; livesText.pos = {x: 10, y: 310};
const livesCounter = new Text(player.lives, fillStyle); 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); const heart = new TileSprite(tilemap, tileSize, tileSize);
heart.frame = {x: tilemapFrames[42].x / tileSize, y: tilemapFrames[42].y / 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); const staminaText = new Text(text.game.stamina + ":", fillStyle);
staminaText.pos = {x: 140, y: 310}; staminaText.pos = {x: 160, y: 310};
this.children = [ this.children = [
background, background,
@ -41,7 +41,7 @@ class Stats extends Container {
Array(5).fill().forEach((_val, index) => { Array(5).fill().forEach((_val, index) => {
const sprite = new TileSprite(tilemap, tileSize, tileSize); const sprite = new TileSprite(tilemap, tileSize, tileSize);
sprite.frame = {x: tilemapFrames[44].x / tileSize, y: tilemapFrames[44].y / 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); this.children.push(sprite);
}); });
} }

View File

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

View File

@ -1,9 +1,8 @@
const asdf = require("asdf-games"); const asdf = require("asdf-games");
// eslint-disable-next-line no-unused-vars // 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"); var logo = new Texture("../res/images/asdf-logo.png");
const fillStyle = {fill: "#ffffff", font: "24px Arial"};
class Logo extends Container { class Logo extends Container {
constructor(game, onEnd) { constructor(game, onEnd) {
@ -12,16 +11,8 @@ class Logo extends Container {
this.onEnd = onEnd; this.onEnd = onEnd;
this.children = []; this.children = [];
const textPos = { x: 200, y: 150 }; this.add(new Sprite(logo));
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.lifetime = 2; this.lifetime = 2;
} }

View File

@ -1,9 +1,16 @@
const asdf = require("asdf-games"); const asdf = require("asdf-games");
// eslint-disable-next-line no-unused-vars // 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 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 { class Title extends Container {
constructor(game, keys, onStart, onTutorial, onQuit) { constructor(game, keys, onStart, onTutorial, onQuit) {
@ -19,13 +26,46 @@ class Title extends Container {
this.children = []; 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++) { 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); const element = new Text(text.titleScreen.instructions[index], fillStyle);
element.pos = { element.pos = {
x: textPos.x, x: textPos.x,
y: textPos.y + 28 * index y: textPos.y + 28 * index
}; };
this.add(keyCap);
this.add(element); this.add(element);
} }
} }

View File

@ -1,9 +1,16 @@
const asdf = require("asdf-games"); const asdf = require("asdf-games");
// eslint-disable-next-line no-unused-vars // 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 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 { class Tutorial extends Container {
constructor(game, keys, onEnd) { constructor(game, keys, onEnd) {
@ -12,16 +19,52 @@ class Tutorial extends Container {
this.keys = keys; this.keys = keys;
this.onEnd = onEnd; this.onEnd = onEnd;
this.pos = { x: 0, y: 0 };
this.children = []; 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++) { for (let index = 0; index < text.tutorial.length; index++) {
const element = new Text(text.tutorial[index], fillStyle); this.instructions.push(new Text(text.tutorial[index], fillStyle));
element.pos = { }
x: textPos.x,
y: textPos.y + 24 * index // Controls direction
}; this.images[0].pos = { x: 24, y: 60 };
this.add(element); 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]);
} }
} }