LeCodesdocs

Scene2D

2D-мир: набор для отрисовки плюс ортографическая Camera2D. Открытие сцены поднимает 2D-движок на канвасе и запускает рендер; активна одновременно только одна сцена. Не путать со Scene (3D-мир).

Обзор

TypeScript
const scene = new Scene2D({ background: '#10131a' })
scene.layer(1).ySort()                 // слой 1 сортирует сверху вниз по Y

const tex = await Texture2D.load(asset('./hero.png'))
const hero = new Sprite({ texture: tex, anchor: [0.5, 1], layer: 1 })
scene.add(hero)

scene.addEventListener('click', ev => {
  console.log('tapped', ev.target?.id ?? 'empty space', 'at world', ev.worldX, ev.worldY)
})
scene.open()

Создание

TypeScript
new Scene2D(options?: {
  background?: ColorInput          // цвет очистки
  filter?: 'nearest' | 'linear'    // сэмплинг текстур; по умолчанию nearest (чёткий пиксель-арт)
})

scene.background = '#10131a'       // можно задать и позже
scene.camera                       // Camera2D сцены (только чтение)
Note

filterглобальная настройка рендерера — один сэмплер на все текстуры, не на каждую отдельно. Она (пере)применяется на open(), поэтому побеждает выбор открытой сейчас сцены. Используй 'linear' для hi-res / не-пиксельарт-ассетов; опусти, чтобы оставить текущую настройку.

Открытие и закрытие

TypeScript
scene.open(): this          // сделать активной: поднимает 2D-движок, закрывает любую другую сцену
scene.close(): this         // остановить рендер этой сцены
scene.destroy(): void       // закрыть + освободить нативную сцену
Scene2D.active              // статик: открытая сейчас Scene2D или null

Узлы

TypeScript
scene.add(...nodes: Node2D[]): this
scene.remove(...nodes: Node2D[]): this

Добавляет/удаляет корневые Node2D. Дочерние узлы идут вместе с родителем — scene.add нужен только корням.

Слои и Y-сортировка

TypeScript
scene.layer(n).ySort(enabled = true): LayerHandle

Узлы выбирают слой через node.layer (более высокие слои рисуются поверх; внутри слоя порядок задаёт node.z). Вызов .ySort() на слое переключает его на глубинную сортировку сверху вниз: спрайты ниже по экрану перекрывают спрайтов выше — классический вид «персонажи заходят за деревья».

Note

Y-сортировка сравнивает позиции узлов, то есть точки якоря. Дай персонажам и объектам на Y-сортируемом слое якорь низ-центр (anchor: [0.5, 1] — «ноги»), чтобы глубина сортировалась там, где они касаются земли.

Пикинг

TypeScript
scene.pick(worldPoint: Vec2Like): Node2D | null

Самый верхний видимый спрайт, чьи мировые границы содержат точку — хит-тест без тела, физика не нужна. Сочетай с scene.camera.screenToWorld(), чтобы преобразовать позицию тапа.

Для автоматической доставки событий указателя узлам дай узлу физическое тело — см. пикинг в 2D-физике.

События указателя на уровне сцены

TypeScript
scene.addEventListener('click', (ev: ClickEvent) => void)          // отпускание где угодно в сцене
scene.addEventListener('touchstart', (ev: TouchStartEvent) => void) // нажатие; ev.track() для перетаскиваний
scene.removeEventListener(channel, callback)

Обработчик срабатывает на каждый тап/нажатие в сцене; ev.target — задетый узел с физическим телом или null (пустое место). ev.worldX / ev.worldY дают точку попадания в мировом пространстве. На 'touchstart' вызови ev.track({...}), чтобы захватить перетаскивание — см. События указателя и жесты.

Смотрите также