← На главную
Серия руководств

Шаг 2. Создание элемента canvas

Создание шаблона проекта PixiJS • Шаг 2 из 7

Создайте файл src/scripts/system/App.js. Это главный класс приложения. Реализуем метод run, запускающий игру.

import * as PIXI from "pixi.js";

class Application {
    run(config) {
        this.config = config;
        this.app = new PIXI.Application({resizeTo: window});
        document.body.appendChild(this.app.view);
    }
}

export const App = new Application();

Здесь мы импортируем библиотеку PIXI и создаём приложение PIXI. Свойство view объекта this.app — это HTML-элемент canvas, который мы добавляем в DOM нашего HTML-шаблона.

Кроме того, мы делаем этот класс singleton: создаём экземпляр и экспортируем созданный объект, а не сам класс.

Поэтому при импорте из этого файла в любом месте приложения мы получаем один и тот же объект App. Через глобальный App можно обращаться ко всем нужным классам управления игрой: менеджеру экрана, звука, сцен и так далее.

Создайте точку входа src/scripts/index.js и запустите приложение:

import { App } from "./system/App";
App.run();