UserInterface with TextMessages implemented.

This commit is contained in:
Mal
2020-02-24 21:09:21 +01:00
parent 88d1c0db87
commit 479a150f9d
9 changed files with 167 additions and 41 deletions

View File

@@ -12,7 +12,9 @@ import ImageLoader from "./ImageLoader.js";
import Level from "./Level.js";
import InterfaceEvent from "./events/InterfaceEvent.js";
import UrlParam from "./UrlParam.js";
import TextBox from "./TextBox.js";
import UserInterface from "./ui/UserInterface.js";
import TextMessageGisela from "./ui/TextMessageGisela.js";
import TextMessageMrCroc from "./ui/TextMessageMrCroc.js";
function MainLoop(timestamp)
{
@@ -105,10 +107,7 @@ function MainLoop(timestamp)
architecture.draw(context, camera);
mrCroc.draw(context, camera);
gisela.draw(context, camera);
if (gameFinished) {
textBoxGameFinished.draw(context, window.innerWidth * 0.5, window.innerHeight - 100);
}
userInterface.draw(context);
lastRendered = timestamp;
}
@@ -123,7 +122,8 @@ function MainLoop(timestamp)
lastTimestamp = undefined;
lastRendered = undefined;
textBoxGameFinished.updateLines(window.innerWidth - 40, context);
textBoxGameFinished.animate();
textBoxGameFinished.animate(75);
userInterface.addTextBox(textBoxGameFinished);
}
window.requestAnimationFrame(MainLoop);
@@ -157,7 +157,9 @@ let mrCroc, gisela, architecture;
let camera = new Camera();
let gameFinished = false;
let hasPlayerLeftArchitecture = false;
let textBoxGameStart;
let textBoxGameFinished;
let userInterface = new UserInterface();
let KeyLeft = new Key('ArrowLeft');
let KeyRight = new Key('ArrowRight');
@@ -197,19 +199,16 @@ window.addEventListener(
);
context = canvas.getContext('2d');
textBoxGameFinished = new TextBox(
textBoxGameFinished = new TextMessageGisela(
'Gisela: "Thanks for showing up, Mr. Croc, but I\'m not in danger."',
window.innerWidth - 40,
context
);
textBoxGameFinished.font = 'Silkscreen';
textBoxGameFinished.verticalAlignment = 'bottom';
textBoxGameFinished.alignment = 1;
textBoxGameFinished.hasShadow = true;
textBoxGameFinished.textSize = 48;
textBoxGameFinished.hasBorder = true;
textBoxGameFinished.colorText = 'yellow';
textBoxGameFinished.colorBorder = 'black';
textBoxGameStart = new TextMessageMrCroc('Mr. Croc: "Where is Gisela? I have to find her!"', context);
textBoxGameStart.animate(75, 1000);
textBoxGameStart.show(1000);
textBoxGameStart.hide(10000);
userInterface.addTextBox(textBoxGameStart);
architecture = RetroArchitecture.createFromData(level);
camera.borderRight = architecture.columns * architecture.tileWidth;