DPG Floorplan

npm i @dpg.gg/floorplan

Документация

• Floorplan (WIP)
• Layers (WIP)

Пример кода

import { Floorplan, DebugLayer } from "@dpg.gg/floorplan";

const floorplan = new Floorplan(domElement, config);
floorplan.layers.register(new DebugLayer());

// Обработка слоев
floorplan.traverse(layers);

Выше описан базовый пример взаимодействия с основными слоями и компонентом.

Мы можем также производить манипуляции на основе вызова и прослушивания событий. Например для слоя Labels у нас есть событие перевода:

floorplan.layers.get("label").emit("translate", (value) => translations[value]["en"] || value);

которое позволит внедрить перевод или вызвать обновление при смене языка в приложени

Обработчики слоев

Обработчик слоев должен быть основан на абстракном классе Layer

Пример кода кастомного обработчика слоя:

import { Layer } from "@dpg.gg/floorplan";

class TilesLayer extends Layer {
	name = "tiles";
	version = "0.0.1";

    process({ data = {}, params = {} }, container = this.instance!.stage) {
        const sprite = new Sprite();
        for (let key in params) sprite[key] = params[key];
        // Логика на обработку тайлов
        return container;
    }
}

Работа с исходным кодом

Все вносимые изменения должны соответствовать стилю кода, соответствовать структуре.

Компоненты не должны быть перегружены и нужно производить адекватную декомпозицию кода

Поскольку проект написан на TS, код должен быт максимально типизирован, по возможности используем уже имеющиеся типы

Как собирать билд

npm i
npm run build

Зависимости

• pixi.js
• pixi-viewport

License

No License. Copyright (c) 2024 Digital Partners Global