Класс Application: инициализация и параметры

Класс PIXI.Application является центральным элементом библиотеки PixiJS для создания рендеринга сцены. Он инкапсулирует создание рендерера, основного контейнера сцены (stage) и цикла анимации (ticker), обеспечивая удобную стартовую точку для разработки интерактивной графики и игр.

Создание экземпляра Application

Для инициализации нового приложения используется конструктор:

const app = new PIXI.Application(options);

Параметр options — объект с настройками, позволяющий контролировать поведение рендерера и приложения в целом. Если options не передан, создается приложение с настройками по умолчанию.

Основные параметры конструктора

  1. width и height Определяют размеры канваса в пикселях. По умолчанию 800x600.

    const app = new PIXI.Application({ width: 1024, height: 768 });

  2. view Позволяет передать уже существующий <canvas> элемент. Если не указан, создается новый.

    const canvas = document.getElementById('myCanvas');
const app = new PIXI.Application({ view: canvas });

  3. backgroundColor Устанавливает цвет фона сцены. Принимает числовое значение в формате 0xRRGGBB.

    const app = new PIXI.Application({ backgroundColor: 0x1099bb });

  4. transparent Логическое значение, указывающее, будет ли фон прозрачным. При true backgroundColor игнорируется.

    const app = new PIXI.Application({ transparent: true });

  5. resolution Задает разрешение рендерера (плотность пикселей). Полезно для поддержки дисплеев с высоким DPI.

    const app = new PIXI.Application({ resolution: window.devicePixelRatio || 1 });

  6. autoDensity При true автоматически масштабирует канвас под resolution.

    const app = new PIXI.Application({ resolution: 2, autoDensity: true });

  7. antialias Включение сглаживания для рендерера. Особенно заметно при работе с линиями и кривыми.

    const app = new PIXI.Application({ antialias: true });

Доступ к основным свойствам

  • app.stage — корневой контейнер сцены, куда добавляются все спрайты и графические объекты.
  • app.renderer — экземпляр рендерера (WebGL или Canvas), предоставляющий методы для управления канвасом.
  • app.ticker — цикл анимации, позволяющий подписываться на обновления сцены с частотой кадров по умолчанию 60 FPS.

Пример добавления спрайта и запуска анимации:

const sprite = PIXI.Sprite.from('assets/image.png');
sprite.x = 100;
sprite.y = 100;
app.stage.addChild(sprite);

app.ticker.add((delta) => {
    sprite.rotation += 0.01 * delta;
});

Настройка рендерера отдельно

Иногда требуется доступ к рендереру напрямую для тонкой настройки:

app.renderer.backgroundColor = 0xff0000;
app.renderer.resize(1280, 720);

Метод resize изменяет размеры канваса и автоматически корректирует stage для нового масштаба.

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

Класс Application интегрирует PIXI.Ticker, который управляет обновлением сцены. Можно добавлять функции с разными приоритетами:

app.ticker.add((delta) => {
    // код анимации
}, PIXI.UPDATE_PRIORITY.HIGH);

Поддерживается управление временем через delta, что обеспечивает плавное движение объектов при изменении FPS.

Особенности и рекомендации

  • Инициализация через new PIXI.Application предпочтительнее ручного создания рендерера и stage, так как упрощает настройку и управление жизненным циклом сцены.
  • Использование autoDensity и resolution критично для корректного отображения на Retina-дисплеях.
  • Для сложных проектов рекомендуется явно указывать размеры и цвет фона, чтобы избежать неожиданного поведения на разных устройствах.
  • ticker позволяет объединять несколько анимаций без необходимости писать собственный цикл requestAnimationFrame.

Примеры расширенной инициализации

const app = new PIXI.Application({
    width: 1280,
    height: 720,
    backgroundColor: 0x222222,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
    antialias: true,
    transparent: false
});

document.body.appendChild(app.view);

const container = new PIXI.Container();
app.stage.addChild(container);

const graphics = new PIXI.Graphics();
graphics.beginFill(0xffff00);
graphics.drawCircle(200, 200, 50);
graphics.endFill();
container.addChild(graphics);

app.ticker.add((delta) => {
    graphics.x += 1 * delta;
});

Этот пример демонстрирует создание приложения с кастомными параметрами, добавление контейнера и графики, а также простую анимацию с использованием ticker.

Оглавление