let overworld, fonts;

let lookups;

const vsize = 16;

const hsize = 8;

​

function preload() {

  overworld = loadImage("Overworld.png");

  fonts = loadImage("font.png");

}

function setup() {

  createCanvas(1000, 1000);

  setupLookups();

  background(220);

  noStroke();

  fill(180);

  rect(vsize, vsize, width-2*vsize, height-2*vsize);

  // drawSprite("H", csize*2, csize*2);

  let txt = "Hello there Slaughtermelon you old rascal";

  /*

  drawSprite('canvas-tl', vsize, vsize);

  drawSprite('canvas-tr', vsize * (txt.length+2), vsize);

  for (let c = 1; c <= 28; c++) {

    lookups[`canvas-t${c}`] = {c:c, r:4};

    lookups[`canvas-b${c}`] = {c:c, r: 7};

  }

  m

   for (let r = 4; r <= 6; r++) {

    drawSprite(`canvas-l${r}`, vize,  

    lookups[`canvas-r${r}`] = {c:29, r:r};

  }

  drawSprite('canvas-bl', vsize, vsize*2);V

  drawSprite('canvas-br', vsize * (txt.length+2), vsize*2=);

  */

  drawString(txt, vsize*2, vsize*2);

  noLoop();

}

​

function draw() {

  // background(220);

}

​

function drawString(txt, x, y) {

  let _x = x;

  let _y = y;

  for (let t of txt) {

    if (t != " ") 

    drawSprite(t, _x, _y);

    _x += hsize+8;

  }

}

​

​

function drawSprite(key, x, y) {

  let spr = lookups[key];

  let _x = spr.c * hsize;

  let _y = spr.r * vsize;

  image(fonts, x, y, hsize*2, vsize*2, _x, _y, hsize, vsize);

}

​

function setupLookups() {

  lookups = {

    'canvas-tl': {c:0, r:3},

    'canvas-tr': {c:29, r:3},

    'canvas-bl': {c:0, r:7},

    'canvas-br': {c:29,r:7},

    'A': {c:0,r:0},

    'B': {c:2,r:0},

    'C': {c:4,r:0},

    'D': {c:6,r:0},

    'E': {c:8,r:0},

    'F': {c:10,r:0},

    'G': {c:12,r:0},

    'H': {c:14,r:0},

    'I': {c:16,r:0},

    'J': {c:18,r:0},

    'K': {c:20,r:0},

    'L': {c:22,r:0},

    'M': {c:24,r:0},

    'N': {c:0,r:1},

    'O': {c:2,r:1},

    'P': {c:4,r:1},

    'Q': {c:6,r:1},

    'R': {c:8,r:1},

    'S': {c:10,r:1},

    'T': {c:12,r:1},

    'U': {c:14,r:1},

    'V': {c:16,r:1},

    'W': {c:18,r:1},

    'X': {c:20,r:1},

    'Y': {c:22,r:1},

    'Z': {c:24,r:1},

    'a': {c:1,r:0},

    'b': {c:3,r:0},

    'c': {c:5,r:0},

    'd': {c:7,r:0},

    'e': {c:9,r:0},

    'f': {c:11,r:0},

    'g': {c:13,r:0},

    'h': {c:15,r:0},

    'i': {c:17,r:0},

    'j': {c:19,r:0},

    'k': {c:21,r:0},

    'l': {c:23,r:0},

    'm': {c:25,r:0},

    'n': {c:1,r:1},

    'o': {c:3,r:1},

    'p': {c:5,r:1},

    'q': {c:7,r:1},

    'r': {c:9,r:1},

    's': {c:11,r:1},

    't': {c:13,r:1},

    'u': {c:15,r:1},

    'v': {c:17,r:1},

    'w': {c:19,r:1},

    'x': {c:21,r:1},

    'y': {c:23,r:1},

    'z': {c:25,r:1},/*

    '0': {c:27, r:0},

    '1': {c:28, r:0},

    '2': {c:29, r:0},

    '3': {c:27, r:1},

    '4': {c:28, r:1},

    '5': {c:29, r:1},

    '6': {c:27, r:2},

    '7': {c:28, r:2},

    '8': {c:29, r:2},

    '9': {c:28, r:3},

    '.': {c:0, r:4},

    ',': {c:1, r:4},

    '!': {c:2, r:4},

    '?': {c:4, r:4},

    '#': {c:6, r:4},

    '_': {c:7, r:4},

    '-': {c:8, r:4},

    'triangle': {c:9, r:4},

    ':': {c:10, r:4},

    ';': {c:11, r:4},

    'quote': {c:12, r:4},

    'dblquote': {c:13, r:4},*/

  };

  // add rest

  for (let r = 4; r <= 6; r++) {

    lookups[`canvas-l${r}`] = {c:0, r:r};

    lookups[`canvas-r${r}`] = {c:29, r:r};

  }

  for (let c = 1; c <= 28; c++) {

    lookups[`canvas-t${c}`] = {c:c, r:4};

    lookups[`canvas-b${c}`] = {c:c, r: 7};

  }

}