Pixi’VNБыстрый старт
Начало работы с Pixi’VN
Вы можете начать использовать Pixi’VN, инициализировав новый проект или установив пакет в существующий проект.
Необходимые условия
Перед началом убедитесь, что у вас установлены следующие инструменты:
- Node.js версии 18 или выше.
- Текстовый редактор с поддержкой TypeScript, например:
- (Рекомендуется) Git
- Аккаунт на GitHub
Инициализация проекта
Если вы хотите начать с нового проекта, выполните следующую команду для создания проекта с шаблоном Pixi’VN:
npm create pixi-vn@latestВы можете просмотреть список доступных шаблонов и интерактивные демо здесь.
После инициализации проекта откройте его каталог в текстовом редакторе (рекомендуется VSCode) и начните разработку.
Все шаблоны включают файл README.md с дополнительной информацией о проекте.
Установка
Чтобы установить пакет Pixi’VN в существующий JavaScript-проект, используйте одну из следующих команд:
npm install @drincs/pixi-vnИнициализация
Перед использованием движка Pixi’VN необходимо инициализировать игру. Это можно сделать, вызвав метод Game.init.
Эта функция принимает следующие параметры:
element: HTML-элемент, в который будет добавлен canvas.options: Параметры, аналогичные тем, что используются при инициализации приложения PixiJS. Дополнительно поддерживаются следующие опции:id：ID, присваиваемый элементу canvas.resizeMode：Режим изменения размера. Возможные значения:none：Без изменения размера.contain：Canvas будет изменен так, чтобы помещаться в родительский элемент, сохраняя соотношение сторон. (по умолчанию)
devtoolsOptions: Параметры для PixiJS Devtools.
import { Game } from "@drincs/pixi-vn";
// Canvas setup with PIXI
const body = document.body
if (!body) {
throw new Error('body element not found')
}
Game.init(body, {
height: 1080,
width: 1920,
backgroundColor: "#303030",
}).then(() => {
// ...
});
// read more here: https://pixi-vn.web.app/start/other-narrative-features.html#how-manage-the-end-of-the-game
Game.onEnd(async (props) => {
Game.clear();
props.navigate("/");
});
Game.onError((type, error, { notify }) => {
notify("allert_error_occurred");
});<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>:root {
background-color: #242424;
}
html,
body {
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
overflow: hidden;
}