Add.messages

css/style.css

@@ -1,80 +1,97 @@
 body {
-    background-color: black;
+	background-color: black;
 	margin: 0;
-    padding: 0;
-    text-align: center;
-    overflow: hidden;
+	padding: 0;
+	text-align: center;
+	overflow: hidden;
 }
 
 #settings {
-    width: 15em;
-    text-align: left;
-    font-family: 'Courier New', Courier, monospace;
-    box-sizing: border-box;
-    position: fixed;   
-    border-right: 1px solid #fff;
-    border-bottom: 1px solid #fff;
-    padding: .25em;
-    color: #fff;
+	width: 15em;
+	text-align: left;
+	font-family: 'Courier New', Courier, monospace;
+	box-sizing: border-box;
+	position: fixed;
+	border-right: 1px solid #fff;
+	border-bottom: 1px solid #fff;
+	padding: .25em;
+	color: #fff;
 }
 
 .settings-line {
-    height: 1.5em;
+	height: 1.5em;
 }
 
 .settings-label {
-    width: 15em;
+	width: 15em;
 }
 
 .settings-input-text {
-    width: 3em;
-    float: right;
+	width: 3em;
+	float: right;
 }
 
 canvas {
-    image-rendering: -moz-crisp-edges;    /* Firefox */
-    image-rendering: -webkit-crisp-edges; /* Webkit (Safari) */
-    image-rendering: pixelated;           /* Chrome */
-    pointer-events: none;
+	image-rendering: -moz-crisp-edges;
+	/* Firefox */
+	image-rendering: -webkit-crisp-edges;
+	/* Webkit (Safari) */
+	image-rendering: pixelated;
+	/* Chrome */
+	pointer-events: none;
 }
 
 #main-layers {
-    position: fixed;
-    left: 50%;
-    outline: 1px solid red;
+	position: fixed;
+	left: 50%;
 }
-#main-layers canvas {
-    position: absolute;
-    left: 0;
-    top: 0;
-    transform: translate(-50%, 0);
-    -ms-transform: translate(-50%, 0);
-    background: transparent;
+
+#static-canvas,
+#dynamic-canvas {
+	position: absolute;
+	left: 0;
+	top: 0;
+	transform: translate(-50%, 0);
+	-ms-transform: translate(-50%, 0);
+	background: transparent;
 }
 
 #static-canvas {
-    z-index: 0;
+	z-index: 0;
 
-    background-color: white;
+	background-color: white;
 }
+
 #dynamic-canvas {
-    z-index: 1;
+	z-index: 1;
 }
 
 #minimap-canvas {
-    z-index: 2;
+	z-index: 2;
 
-    position: absolute;
-    top: 0;
-    right: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
 }
 
 body {
 	margin: 0;
-    padding: 0;
-    overflow: hidden;
+	padding: 0;
+	overflow: hidden;
 }
 
 .no-pointer-events {
-    pointer-events: none;
-}
+	pointer-events: none;
+}
+
+#message-box {
+	z-index: 2;
+	border-radius: 6px;
+	padding-left: 1rem;
+	padding-right: 1rem;
+
+	position: fixed;
+	bottom: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+}

gulpfile.js

@@ -1,6 +1,6 @@
 /* Dependencies */
 var gulp = require("gulp"),
-	runSequence = require("run-sequence"),
+	runSequence = require('gulp4-run-sequence'),
 	del = require("del"),
 	browserify = require("browserify"),
 	source = require("vinyl-source-stream"),
@@ -13,10 +13,10 @@ gulp.task("clean", () => del(["./dist"]));
 gulp.task("copy-html", () => gulp.src("src/*.html").pipe(gulp.dest("dist")));
 gulp.task("copy-css", () => gulp.src("./css/**/*.css").pipe(gulp.dest("./dist/css")));
 gulp.task("copy-assets", () => gulp.src("./assets/**/*.*").pipe(gulp.dest("./dist/assets")));
-gulp.task("copy-things", ["copy-html", "copy-css", "copy-assets"]);
+gulp.task("copy-things", gulp.series("copy-html", "copy-css", "copy-assets"));
 
 /* TS */
-gulp.task("ts", function () {
+gulp.task("ts", gulp.series(() => {
 	return browserify({
 		basedir: ".",
 		debug: true,
@@ -28,13 +28,15 @@ gulp.task("ts", function () {
 		.bundle()
 		.pipe(source("bundle.js"))
 		.pipe(gulp.dest("dist"));
-});
+}));
 
-/* Default */
-gulp.task("default", function () {
-	return runSequence(
-		"clean",
-		"copy-things",
-		"ts"
-	);
+gulp.task('default', function () {
+	return new Promise(function (resolve, reject) {
+		runSequence(
+			"clean",
+			"copy-things",
+			"ts"
+		);
+		resolve();
+	});
 });

package.json

@@ -24,9 +24,9 @@
 	"devDependencies": {
 		"browserify": "^16.2.2",
 		"del": "^3.0.0",
-		"gulp": "^3.9.1",
+		"gulp": "^4.0.2",
 		"gulp-typescript": "^5.0.0-alpha.3",
-		"run-sequence": "^2.2.1",
+		"gulp4-run-sequence": "^1.0.0",
 		"tsify": "^4.0.0",
 		"tslint": "^5.11.0",
 		"typescript": "^3.0.1",

src/actionable_entities.ts

@@ -0,0 +1,21 @@
+import { ActionableEntity } from "./actionable_entity";
+import { Sign } from "./sign";
+import { Sprite } from "./sprite";
+import { Point } from "./point";
+import { angry_dialog, sample_dialog, glitchy_dialog } from "./messages/dialog_graph";
+/*
+export function get_actionable_entities(canvas_w?: number, canvas_h?: number): ActionableEntity[] {
+	return [
+		new Sign("angry_dialog", new Sprite(0, 0, 29, 31), new Point(canvas_w / 2 - 15, canvas_h / 2 - 100), 29, 31, true, 0, 1, null, 0.5, angry_dialog),
+		new Sign("sample_dialog", new Sprite(0, 0, 29, 31), new Point(canvas_w / 2 - 15, canvas_h / 2 - 100), 29, 31, true, 0, 1, null, 0.5, sample_dialog),
+		new Sign("glitchy_dialog", new Sprite(0, 0, 29, 31), new Point(canvas_w / 2 - 15, canvas_h / 2 - 100), 29, 31, true, 0, 1, null, 0.5, glitchy_dialog)
+	]
+}*/
+
+export function get_actionable_entities(canvas_w?: number, canvas_h?: number): ActionableEntity[] {
+	return [
+		new Sign("angry_dialog", new Sprite(0, 0, 29, 31), null, 29, 31, true, 0, 1, null, 0.5, angry_dialog),
+		new Sign("sample_dialog", new Sprite(0, 0, 29, 31), null, 29, 31, true, 0, 1, null, 0.5, sample_dialog),
+		new Sign("glitchy_dialog", new Sprite(0, 0, 29, 31), null, 29, 31, true, 0, 1, null, 0.5, glitchy_dialog)
+	]
+}

src/actionable_entity.ts

@@ -0,0 +1,52 @@
+import { Entity } from "./entity";
+import { Sprite } from "./sprite";
+import { Point } from "./point";
+import { IDrawable } from "./idrawable";
+import { IActionable } from "./iactionable";
+import { IMAGE_BANK } from "./main";
+
+export abstract class ActionableEntity extends Entity implements IDrawable, IActionable {
+    public action_hitbox_ratio: number;
+    public action_hitbox: ActionableEntityHitbox;
+    public actionable: boolean;
+    public occuring: boolean;
+
+    constructor(id: string, current_sprite: Sprite, position: Point, width: number, height: number,
+        has_collision_objects?: boolean, height_perspective?: number,
+        floor_level?: number, room_number?: number, action_hitbox_ratio?: number) {
+
+        super(id, current_sprite, Point.copy(position), width, height,
+            has_collision_objects, height_perspective, floor_level, room_number);
+        this.action_hitbox_ratio = action_hitbox_ratio == null ? 0 : action_hitbox_ratio;
+        this.actionable = false;
+        this.occuring = false;
+        if (position != null) {
+            this.action_hitbox = new ActionableEntityHitbox(this.id + "-hitbox", null,
+                new Point(position.x - width * this.action_hitbox_ratio, position.y - height * this.action_hitbox_ratio),
+                width + width * this.action_hitbox_ratio * 2, height + height * this.action_hitbox_ratio * 2);
+        }
+    }
+
+    public set_position(position: Point) {
+        this.position = new Point(position.x, position.y);
+        this.action_hitbox = new ActionableEntityHitbox(this.id + "-hitbox", null,
+            new Point(position.x - this.width * this.action_hitbox_ratio, position.y - this.height * this.action_hitbox_ratio),
+            this.width + this.width * this.action_hitbox_ratio * 2, this.height + this.height * this.action_hitbox_ratio * 2);
+    }
+
+    public draw(ctx: CanvasRenderingContext2D): void {
+        ctx.drawImage(IMAGE_BANK.pictures[this.sprite_filename],
+            this.current_sprite.src_x, this.current_sprite.src_y, this.current_sprite.src_width, this.current_sprite.src_height,
+            this.position.x, this.position.y, this.width, this.height);
+    }
+
+    public abstract action(): void;
+}
+
+export class ActionableEntityHitbox extends Entity {
+    public action_hitbox: Entity;
+
+    constructor(id: string, current_sprite: Sprite, position: Point, width: number, height: number) {
+        super(id, current_sprite, Point.copy(position), width, height, false);
+    }
+}

src/character/jays.ts

@@ -33,7 +33,7 @@ export class Jays extends Entity implements IDrawable {
 	constructor() {
 		// height is = body height + head height...
 		super("jays", new Sprite(0, 20, 20, 20), new Point(canvas_W / 2 - 10, canvas_H / 2 - 20),
-			Jays.body_width, Jays.body_height + Jays.head_height);
+			Jays.body_width, Jays.body_height + Jays.head_height, true, Jays.head_height);
 		this.sprite_filename = "assets/img/jays.png";
 		this.speed = 3;
 		this._tear_delay = 480;
@@ -102,7 +102,7 @@ export class Jays extends Entity implements IDrawable {
 
 class JaysHead extends Entity {
 	constructor(id: string, current_sprite: Sprite, position: Point, width: number, height: number) {
-		super(id, current_sprite, Point.copy(position), width, height);
+		super(id, current_sprite, Point.copy(position), width, height, false);
 		this.sprite_filename = "assets/img/jays.png";
 	}
 }

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/collision.ts

@@ -2,6 +2,7 @@ import { Entity } from "./entity";
 import { IPositionable } from "./environment/positions_accessor";
 import { Tile } from "./environment/tile";
 import { Point } from "./point";
+import { Rect } from "./rect";
 
 export class Rectangle implements IPositionable {
 
@@ -21,17 +22,18 @@ export class Rectangle implements IPositionable {
 export class Collision {
 	private constructor() { }
 
-	public static is_collision_rectangle(entity: Entity, object: Rectangle, next_position: Point = null): boolean {
+	public static is_collision_rectangle(entity: Entity, object: Rectangle, next_position: Point = null, height_perspective?: number): boolean {
+		height_perspective = height_perspective == null ? 0 : height_perspective;
 		if (object == null) {
 			return false;
 		}
 		if (next_position == null) {
 			next_position = entity.position;
 		}
 
-		return Collision.is_collision(
+		return this.is_collision(
 			next_position.x, next_position.y, next_position.x + entity.width, next_position.y + entity.height,
-			object.top_left.x, object.top_left.y, object.bottom_right.x, object.bottom_right.y
+			object.top_left.x, object.top_left.y, object.bottom_right.x, object.bottom_right.y - height_perspective
 		);
 	}
 
@@ -41,17 +43,35 @@ export class Collision {
 			collisioner_y1 < collisionee_y2 && collisioner_y2 > collisionee_y1;
 	}
 
+	public static is_collision_rect(rect1: Rect, rect2: Rect): boolean {
+		return this.is_collision(rect1.x, rect1.y, rect1.x + rect1.width, rect1.y + rect1.height,
+			rect2.x, rect2.y, rect2.x + rect2.width, rect2.y + rect2.height);
+	}
+
+	public static is_collision_rects(rect1: Rect, rects: Rect[]): boolean {
+		for (let i = 0; i < rects.length; i++) {
+			if (this.is_collision(rect1.x, rect1.y, rect1.x + rect1.width, rect1.y + rect1.height,
+				rects[i].x, rects[i].y, rects[i].x + rects[i].width, rects[i].y + rects[i].height)) {
+					return true;
+			}
+		}
+		return false;
+	}
+
 	public static is_collision_entity_tile(entity: Entity, tile: Tile): boolean {
-		return Collision.is_collision(entity.position.x, entity.position.y, entity.position.x + entity.width, entity.position.y + entity.height,
+		return this.is_collision(entity.position.x, entity.position.y, entity.position.x + entity.width, entity.position.y + entity.height,
 			tile.position.x, tile.position.y, tile.position.x + tile.width, tile.position.y + tile.height);
 	}
 
-	public static is_collision_nextpos_entity_tile(next_position: Point, entity: Entity, tile: Tile): boolean {
-		return Collision.is_collision(next_position.x, next_position.y, next_position.x + entity.width, next_position.y + entity.height,
-			tile.position.x, tile.position.y, tile.position.x + tile.width, tile.position.y + tile.height);
+	public static is_collision_nextpos_entity_tile(next_position: Point, entity: Entity, tile: Tile, height_perspective?: number): boolean {
+		height_perspective = height_perspective == null ? 0 : height_perspective;
+		return this.is_collision(next_position.x, next_position.y, next_position.x + entity.width, next_position.y + entity.height,
+			tile.position.x, tile.position.y, tile.position.x + tile.width, tile.position.y + tile.height - height_perspective);
 	}
 
-	/**
-	 * TODO: I'd like to make Jays able to cross most of the warp before changing map without writing ugly code...
-	 */
+	public static is_collision_nextpos_entity(next_position: Point, entity1: Entity, entity2: Entity, height_perspective?: number): boolean {
+		height_perspective = height_perspective == null ? 0 : height_perspective;
+		return this.is_collision(next_position.x, next_position.y, next_position.x + entity1.width, next_position.y + entity1.height,
+			entity2.position.x, entity2.position.y, entity2.position.x + entity2.width, entity2.position.y + entity2.height - height_perspective);
+	}
 }

src/collision_delta.ts

@@ -2,9 +2,11 @@ export class CollisionDelta {
 	public is_collision: boolean;
 	public delta_x: number;
 	public delta_y: number;
-	constructor(is_collision?: boolean, delta_x?: number, delta_y?: number) {
+	public height_perspective: number;
+	constructor(is_collision?: boolean, delta_x?: number, delta_y?: number, height_perspective?: number) {
+		this.height_perspective = height_perspective == null ? 0 : height_perspective;
 		this.is_collision = is_collision;
 		this.delta_x = delta_x == null ? 0 : delta_x;
-		this.delta_y = delta_y == null ? 0 : delta_y;
+		this.delta_y = delta_y == null ? 0 : delta_y - this.height_perspective;
 	}
 }