No history yet

Настройка окружения Vite

Настройка окружения Vite

Для работы с PixiJS мы создадим современную среду разработки. Мы будем использовать Vite в качестве сборщика модулей и TypeScript для строгой типизации. Этот подход обеспечивает быструю перезагрузку модулей и надежность кода.

Давайте начнем с инициализации нового проекта Vite. Откройте терминал и выполните следующую команду. Вам будет предложено ввести имя проекта; вы можете назвать его, например, pixi-vite-project.

npm create vite@latest

В процессе настройки выберите фреймворк Vanilla, а затем вариант TypeScript. После создания проекта перейдите в его директорию и установите необходимые зависимости.

# Замените <project-name> на имя вашего проекта
cd <project-name>
npm install

Теперь установим сам PixiJS. Мы укажем конкретную версию, чтобы обеспечить стабильность проекта и избежать проблем с совместимостью в будущем.

npm install pixi.js@7.4.3

Стандартный файл tsconfig.json, созданный Vite, хорошо подходит для старта. В большинстве случаев его не нужно изменять для работы с PixiJS, так как он уже настроен на использование современных модулей ES, которые PixiJS поддерживает «из коробки».

Инициализация приложения PixiJS

Ключевое отличие PixiJS v7 от предыдущих версий — это асинхронный способ инициализации приложения. Раньше параметры передавались напрямую в конструктор new Application(). Теперь же мы сначала создаем экземпляр, а затем вызываем асинхронный метод init(), чтобы настроить его.

Давайте очистим файл src/main.ts и добавим в него код для инициализации нашего Pixi-приложения.

import { Application } from 'pixi.js';

// Создаем новый экземпляр приложения PixiJS
const app = new Application();

// Асинхронная функция для инициализации приложения
async function init() {
  // Инициализируем приложение с опциями
  await app.init({
    // Автоматически изменять размер canvas под размер окна
    resizeTo: window,
    // Устанавливаем цвет фона (например, серый)
    background: 0x666666 
  });

  // Добавляем canvas на страницу
  document.body.appendChild(app.canvas);
}

// Вызываем функцию инициализации
init();

Разберем этот код:

  1. Мы импортируем класс Application из пакета pixi.js.
  2. Создаем экземпляр app без каких-либо параметров в конструкторе.
  3. Внутри асинхронной функции init мы вызываем await app.init(). Этот метод принимает объект с настройками.
  4. resizeTo: window — это полезное свойство, которое автоматически подгоняет размер холста (canvas) под размер окна браузера.
  5. background: 0x666666 устанавливает цвет фона сцены в шестнадцатеричном формате.
  6. Наконец, document.body.appendChild(app.canvas) добавляет созданный PixiJS элемент <canvas> в DOM, делая его видимым на странице.

Теперь вы можете запустить сервер для разработки командой npm run dev и увидеть в браузере серый фон, занимающий все окно. Ваша среда разработки готова.