Stage 2: Отрисовка секторов

Разные высоты у секторов

Добавим в описание сектора высоту. Пусть стены сектора будут использовать одно и то же значение при построении проекции:


  interface Sector {
    segs: Seg[];
    height: number;
  }

Затем, используя ранее созданный отрисовщик, попробуем сделать проекцию уровеня:

2.5D Renderer

2D Renderer

Управление камерой WASD

Для примера выше используем следующее описание уровня:


  function createCircleLines(
    centerX: number,
    centerY: number,
    radius: number,
    segments: number = 36,
  ): Seg[] {
    // ..
  }

  const sector1 = {
    height: 10_000,
    segs: createCircleLines(150, 130, 85, 8)
  };

  const sector2 = {
    height: 7_500,
    segs: createCircleLines(150, 130, 10, 10)
  };

  const sector3 = {
    height: 5_000,
    segs: createCircleLines(150, 130, 15, 10)
  };

  const sector4 = {
    height: 2_500,
    segs: createCircleLines(150, 130, 20, 10)
  };

  const level: Level = {
    linedefs: [
      ...sector1.segs, 
      ...sector2.segs,
      ...sector3.segs, 
      ...sector4.segs,
    ],
    sectors: [sector1, sector2, sector3, sector4]
  };

В описании уровня мы продолжаем хранить level.linedefs. Это необходимо для отрисовки карты, 2D-уровня, вид сверху.

Реализация шага на github