Add.messages

css/style.css

@@ -41,7 +41,6 @@ canvas {
 #main-layers {
     position: fixed;
     left: 50%;
-    outline: 1px solid red;
 }
 #main-layers canvas {
     position: absolute;
@@ -77,4 +76,9 @@ body {
 
 .no-pointer-events {
     pointer-events: none;
+}
+
+.messageBox {
+    z-index: 2;
+    border-radius: 1rem;
 }

src/character/tear.ts

@@ -43,7 +43,7 @@ export class TearBasic extends Tear {
 	public speed: number;
 	public range: number;
 
-	private static _basic_tear_firing_sound = new AudioFile("assets/sounds/pew.mp3");
+	private static _basic_tear_firing_sound = new AudioFile("assets/sounds/sfx/pew.mp3");
 	public get firing_sound(): AudioFile { return TearBasic._basic_tear_firing_sound; }
 
 	constructor(pos: Point, direction: Direction, id?: string, current_sprite?: Sprite, width?: number, height?: number) {

src/conversation.ts

@@ -0,0 +1,9 @@
+import { MessageBox } from "./message_box";
+
+export class Conversation {
+	public messages: Array<MessageBox>;
+
+	constructor(messages: Array<MessageBox>) {
+		this.messages = messages;
+	}
+}

src/environment/floors/one/temple_floor.ts

@@ -24,7 +24,7 @@ export class TempleFloor extends Floor {
 
 	constructor() {
 		super();
-		this._base_music = new AudioFile("assets/sounds/dungeon.mp3");
+		this._base_music = new AudioFile("assets/sounds/musics/dungeon.mp3");
 		this.base_music.loop = true;
 	}
 }

src/gamestate.ts

@@ -14,6 +14,7 @@ import { Timer } from "./timer";
 import { TIMERS } from "./timers";
 import { TouchHelper } from "./touch_helper";
 import { ArrayUtil, SetUtil } from "./util";
+import { MessageBox } from "./message_box";
 
 export class GameState {
 	public current_room: RoomMap;
@@ -25,6 +26,7 @@ export class GameState {
 	public tears: Tear[];
 	public joysticks: Joysticks;
 	public touches: TouchList;
+	public current_message: MessageBox;
 
 	constructor() {
 		this.current_floor = new TempleFloor();
@@ -231,8 +233,14 @@ export class GameState {
 
 		this.jays.draw(dynamic_ctx);
 
+		if(this.current_message != null) {
+			this.current_message.draw();
+		}
+
 		this.touch_move();
 
+		dynamic_ctx.restore();
+
 		const self = this;
 		window.requestAnimationFrame(() => self.update());
 	}

src/main.ts

@@ -3,6 +3,7 @@ import { ImageBank } from "./image_bank";
 import { Renderer } from "./renderer";
 import { KeyMapper } from "./settings/keymapper";
 import { Settings } from "./settings/settings";
+import { MessageBox } from "./message_box";
 
 export const canvas_W = 660;
 export const canvas_H = 480;
@@ -33,6 +34,15 @@ window.onload = () => {
 		renderer.autoScale();
 		gameState = new GameState();
 		Settings.init();
+
+		const msg = new MessageBox(new Array<string>(
+			"Twilight is shining through the barrier. It seems your journey is finally over. You're filled with DETERMINATION.",
+			"Welcome to The Blunder of JayS",
+			"This is the first test message",
+			"We're awesomes!"));
+
+		msg.start();
+
 		gameState.get_timer("tear").interval = gameState.jays.tear_delay;
 		gameState.update();
 	});

src/message_box.ts

@@ -0,0 +1,126 @@
+import { AudioFile } from "./audio_file";
+import { static_canvas, renderer, gameState } from "./main";
+
+/**
+ * TODO: Triggers, Next messages, Stop, Text scrolling, Storage
+ */
+export class MessageBox {
+	public canvas: HTMLCanvasElement;
+	public context: CanvasRenderingContext2D;
+	public character: string | null;
+	public characterFont: string;
+	public content: Array<string>;
+	public sound: AudioFile;
+	public font: string;
+	public fontColor: string;
+	public backgroundColor: string;
+	public borderColor: string;
+	public left: number;
+	public top: number;
+	public width: number;
+	public height: number;
+	public scrolling_index: number;
+	public scrolling_text: string;
+	public scrolling_line_index: number;
+
+	constructor(content: Array<string>, character?: string, characterFont?: string,
+		sound?: AudioFile, font?: string, fontColor?: string,
+		backgroundColor?: string, borderColor?: string) {
+		this.content = content;
+		this.character = character;
+		this.characterFont = characterFont == null ? "5px 'Arial'" : characterFont;
+		this.sound = sound == null ? new AudioFile("assets/sounds/sfx/msg_1.wav") : sound;
+		this.fontColor = fontColor == null ? "white" : fontColor;
+		this.backgroundColor = backgroundColor == null ? "black" : backgroundColor;
+		this.borderColor = borderColor == null ? "black" : backgroundColor;
+		this.width = static_canvas.width / 2;
+		this.height = static_canvas.height / 5;
+		this.top = static_canvas.offsetTop + static_canvas.height - this.height - (static_canvas.height / 20);
+		this.font = font == null ? (this.height / 6) + "px 'Comic Sans MS'" : font;
+		this.scrolling_index = 0;
+		this.scrolling_text = "";
+		this.scrolling_line_index = 0;
+	}
+
+	public start() {
+		this.canvas = document.createElement("canvas");
+		this.context = this.canvas.getContext("2d", { alpha: true });
+		renderer.disableCanvasSmoothing(this.context);
+		this.canvas.classList.add("messageBox");
+		this.canvas.style.backgroundColor = this.backgroundColor;
+		this.canvas.width = this.width;
+		this.canvas.height = this.height;
+		this.canvas.style.position = "absolute";
+		this.canvas.style.top = this.top + "px";
+		this.context.font = this.font;
+		this.context.fillStyle = this.fontColor;
+
+		document.getElementById("main-layers").appendChild(this.canvas);
+		gameState.current_message = this;
+	}
+
+	public draw() {
+		const text = this.content[0];
+		const text_x = this.width / 60;
+		const text_y = (1 + this.scrolling_line_index) * this.height / 4;
+		const text_width = this.context.measureText(text).width + text_x;
+		if (text_width > this.canvas.width) {
+			const lines = this.split_text_canvas(text, this.context, text_x, this.canvas.width);
+			if (this.scrolling_line_index < lines.length) {
+				if(this.fill_scrolling_text(lines, text_x, text_y)) {
+					++this.scrolling_line_index;
+				}
+			}
+		}
+		else {
+			if(this.fill_scrolling_text(new Array<string>(text), text_x, text_y)) {
+				++this.scrolling_line_index;
+			}
+		}
+	}
+
+	public fill_scrolling_text(lines: Array<string>, x: number, y: number): boolean {
+		const timer = gameState.get_timer("textbox");
+		timer.enable();
+		if(this.scrolling_index < lines[this.scrolling_line_index].length) {
+			if(timer.next_tick()) {
+				this.context.save();
+				this.context.clearRect(0, 0, this.width, this.height);
+				for(let i = 0; i < this.scrolling_line_index; i++) {
+					this.context.fillText(lines[i], x, (1 + i) * this.height / 4);
+				}
+				this.scrolling_text += lines[this.scrolling_line_index][this.scrolling_index];
+				this.context.fillText(this.scrolling_text, x, y);
+				this.sound.play();
+				++this.scrolling_index;
+				this.context.restore();
+			}
+		}
+		else if(this.scrolling_index > 0) {
+			this.scrolling_index = 0;
+			this.scrolling_text = "";
+			return true;
+		}
+		return false;
+	}
+
+	public split_text_canvas(text: string, context: CanvasRenderingContext2D, text_x: number, canvas_width: number): Array<string> {
+		const words = text.split(" ");
+		const lines = new Array<string>();
+		let line = "";
+		for (let i = 0; i < words.length; i++) {
+			const space = line === "" ? "" : " ";
+			const next_length = context.measureText(line + space + words[i]).width + text_x;
+			if (next_length < canvas_width) {
+				line += space + words[i];
+			}
+			else {
+				lines.push(line);
+				line = words[i];
+			}
+		}
+		lines.push(line);
+		return lines;
+	}
+
+}

src/renderer.ts

@@ -12,12 +12,16 @@ export class Renderer {
 
 	public disableSmoothing(): void {
 		main_layers.forEach(layer => {
-			layer.ctx["webkitImageSmoothingEnabled"] = false;
-			layer.ctx["mozImageSmoothingEnabled"] = false;
-			layer.ctx.imageSmoothingEnabled = false;
+			this.disableCanvasSmoothing(layer.ctx);
 		});
 	}
 
+	public disableCanvasSmoothing(context: CanvasRenderingContext2D): void {
+		context["webkitImageSmoothingEnabled"] = false;
+		context["mozImageSmoothingEnabled"] = false;
+		context.imageSmoothingEnabled = false;
+	}
+
 	public scale(zoomScale?: number): void {
 		this.zoomScale = zoomScale == null ? this.zoomScaleNext.get(this.zoomScale) : zoomScale;
 		main_layers.forEach(layer => {

src/timers.ts

@@ -3,5 +3,6 @@ import { Timer } from "./timer";
 export const TIMERS: Timer[] = [
 	new Timer("tear", 0),
 	new Timer("jays_sprites", 80),
-	new Timer("joysticks", 34)
+	new Timer("joysticks", 34),
+	new Timer("textbox", 100)
 ];