Stage 5: Текстурирование

Текстуры

В прошлом мы получили уровни, состоящие из однотонных стен, пола и потолков, однако в настоящих играх мы привыкли встречать разнообразные локации, например: лаборатории, пещеры, подземелье или что-то еще. А чтобы создать что-то подобное, необходимо реализовать текстурирование.

Все цвета будем описывать не в виде строк, а в виде набора трех цветов:


  interface Color {
    r: number
    g: number
    b: number
  }

Теперь зададим описание самой текстуры:


  type Texture = {
    width: number;
    height: number;
    bitmap: number[][];
    colors: Color[];
    scale: number;
  }

Затем определим текстуры для будущего оформления стен, пола и потолка:


  const textures: Record<string, Texture> = {
    ceil: {
      scale: 4,
      width: 4,
      height: 4,
      bitmap: [
        [1, 0, 1, 0],
        [0, 1, 0, 1],
        [1, 0, 1, 0],
        [0, 1, 0, 1],
      ],
      colors: [
        { r: 70, g: 70, b: 70 },
        { r: 50, g: 50, b: 50 },
      ],
    },
    floor: {
      scale: 2,
      width: 4,
      height: 4,
      bitmap: [
        [0, 0, 1, 1],
        [0, 0, 1, 1],
        [1, 1, 0, 0],
        [1, 1, 0, 0],
      ],
      colors: [
        { r: 120, g: 120, b: 120 },
        { r: 90, g: 90, b: 90 },
      ],
    },
    wall: {
      scale: 1,
      width: 8,
      height: 8,
      bitmap: [
        [0, 0, 0, 0, 1, 1, 1, 1],
        [0, 0, 0, 0, 1, 1, 1, 1],
        [0, 0, 0, 0, 1, 1, 1, 1],
        [0, 0, 0, 0, 1, 1, 1, 1],
        [1, 1, 1, 1, 0, 0, 0, 0],
        [1, 1, 1, 1, 0, 0, 0, 0],
        [1, 1, 1, 1, 0, 0, 0, 0],
        [1, 1, 1, 1, 0, 0, 0, 0],
      ],
      colors: [
        { r: 120, g: 200, b: 120 },
        { r: 200, g: 100, b: 100 },
      ],
    },
  };

В будущем можно будет загружать необходимые изображения и с легкостью представлять их в виде таких же bitmap, как выше.