JavaScript
const Viewport = function(x, y, w, h) {
this.x = x; this.y = y; this.w = w; this.h = h;
};
Viewport.prototype = {
scrollTo:function(x, y) {
this.x = x - this.w * 0.5;// Rigid scrolling
this.y = y - this.w * 0.5;
// Smooth scrolling (forgot to put this in the video)
this.x += (x - this.x - this.w * 0.5) * 0.05;
this.y += (y - this.y - this.h * 0.5) * 0.05;
}
};
class Animator {
constructor(frame_set, delay) {
this.count = 0;
this.delay = delay;
this.frame_set = frame_set;// animation frames
this.frame_index = 0;// playhead
this.frame_value = frame_set[0];// current frame
}
animate() {
this.count ++;
if (this.count > this.delay) {
this.count = 0;
this.frame_index = (this.frame_index == this.frame_set.length - 1) ? 0 : this.frame_index + 1;
this.frame_value = this.frame_set[this.frame_index];
}
}
}
var buffer = document.createElement("canvas").getContext("2d");
var context = document.querySelector("canvas").getContext("2d");
var map = [ 6, 0,22, 8, 8,21, 1, 5, 0,22,
20,14,21, 8, 8,21, 8,12, 7,22,
21,22,21, 8, 8,22, 8,19,14,21,
0, 1, 5,15,15, 0, 8,21,22,22,
7, 8,12,13,13, 7, 8,22, 1, 1,
14, 8,12,13,13, 7, 8,21, 8, 8,
22, 8,19,20,20,14, 8,21, 8, 8,
21, 8,21,22,21,21, 8, 5,15,15,
1, 8, 1, 5, 0,21, 8,19,20,20,
8, 8, 8,12, 7,21, 8,21,22,21];
var source_columns = 8;
var tile_sheet = new Image();
var tile_size = 16;
var map_columns = 10;
var map_rows = 10;
var map_ratio = map_columns / map_rows; // columns / rows
var animations = {
1: new Animator([1, 2, 3, 4], 10),
8: new Animator([8, 9,10,11], 10),
15: new Animator([15, 16, 17, 18], 10),
22: new...