pixijs
8.5.2
Целью этого проекта является создание быстрой и легкой 2D-библиотеки, работающей на всех устройствах. Средство рендеринга PixiJS позволяет каждому насладиться возможностями аппаратного ускорения без предварительного знания WebGL. Кроме того, это быстро. Действительно быстро.
Если вы хотите быть в курсе последних новостей PixiJS, подписывайтесь на нас в Твиттере @PixiJS, и мы будем держать вас в курсе! Вы также можете зайти на наш сайт, там же будут публиковаться любые открытия!
Теперь мы являемся частью Open Collective, и с вашей поддержкой вы можете помочь нам сделать PixiJS еще лучше. Чтобы сделать пожертвование, просто нажмите кнопку ниже, и мы будем любить вас вечно!
PixiJS — это библиотека рендеринга, которая позволит вам создавать насыщенную интерактивную графику, а также кроссплатформенные приложения и игры без необходимости погружаться в API WebGL или решать вопросы совместимости браузера и устройства.
PixiJS поддерживает WebGPU с резервной поддержкой WebGL. Как библиотека PixiJS — фантастический инструмент для создания интерактивного контента. Используйте его для своих интерактивных веб-сайтов, приложений и игр HTML5 с насыщенной графикой. Кроссплатформенная совместимость и постепенное деградирование готовы к использованию, означают, что вам придется делать меньше работы и получать от нее больше удовольствия! Если вы хотите сравнительно быстро создать безупречный и усовершенствованный интерфейс, не углубляясь в плотный низкоуровневый код, и при этом избежать головной боли, связанной с несогласованностью браузера, добавьте в свой следующий проект немного магии PixiJS!
Ускорьте свое развитие и не стесняйтесь использовать свое воображение!
Средство рендеринга WebGL (с автоматическим интеллектуальным пакетированием, обеспечивающим ОЧЕНЬ высокую производительность)
Рендерер WebGPU (новинка в последних браузерах!)
Рендерер холста (самый быстрый в городе!)
Полный график сцены
Очень простой в использовании API (аналогично API списка отображения флэш-памяти)
Поддержка атласов текстур.
Загрузчик ресурсов/загрузчик листов спрайтов
Автоматическое определение того, какой рендерер следует использовать
Полноценное управление мышью и мультитач-взаимодействие
Текст
Растровый шрифт
Многострочный текст
Рендеринг текстуры
Примитивный рисунок
Маскировка
Фильтры
Плагины, поддерживаемые сообществом
Реагировать
Позвоночник
Фильтры
Оживить
Свет
пользовательский интерфейс
Макет
гифка
И многое другое!
Начать работу с PixiJS легко! Просто загрузите готовую сборку!
Кроме того, PixiJS можно установить с помощью npm или просто использовать URL-адрес сети доставки контента (CDN) для встраивания PixiJS непосредственно на вашу HTML-страницу.
npm установить pixi.js
Экспорта по умолчанию нет. Правильный способ импорта PixiJS:
импортировать * как PIXI из pixi.js;
Через jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
Или через unpkg:
<script src="https://unpkg.com/[email protected]/dist/pixi.min.js"></script>
import { Application, Sprite, Assets } from 'pixi.js';// Приложение создаст средство рендеринга с использованием WebGL, если это возможно, // с резервным вариантом рендеринга холста. Он также установит тикер// и корневую стадию PIXI.Containerconst app = new Application();// Подождите, пока рендерер станет доступным await app.init();// Приложение создаст для вас элемент холста, который вы // затем можем вставить в DOMdocument.body.appendChild(app.canvas);// загрузить нужную нам текстуруconst текстуру = await Assets.load('bunny.png');// Это создает текстуру из 'bunny.png' imageconst Bunny = new Sprite(texture);// Установите положение Bunnybunny.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2;// Поворот вокруг центраbunny.anchor.x = 0.5;bunny.anchor.y = 0.5; // Добавляем кролика в сцену, где мы находимся Buildingapp.stage.addChild(bunny);// Прослушиваем обновления кадровapp.ticker.add(() => { // в каждом кадре мы немного вращаем кролика Bunny.rotation += 0.01;});Веб-сайт: узнайте больше о PixiJS на официальном сайте.
Начиная:
Ознакомьтесь с руководством по началу работы.
Также ознакомьтесь с учебными пособиями @miltoncandelero по PixiJS, посвященными видеоиграм, с рецептами и лучшими практиками здесь.
Примеры: приступайте к работе и экспериментируйте с кодом и функциями PixiJS прямо здесь!
Документация по API: познакомьтесь с API PixiJS, просмотрев документацию.
Руководство: Дополнительные руководства по использованию документации API здесь.
Фильтры Демо
Банни Демо
Демонстрация маскировки
Демонстрация взаимодействия
Больше примеров
Форумы: посетите обсуждения и Stackoverflow — удобные места, где можно задать вопросы по PixiJS.
Чат: вы можете присоединиться к нам в Discord, чтобы поговорить о PixiJS.
Обратите внимание, что большинству пользователей вам не нужно собирать этот проект. Если все, что вам нужно, это использовать PixiJS, просто загрузите одну из наших готовых версий. Единственный раз, когда вам понадобится создать PixiJS, — это если вы его разрабатываете.
Если у вас еще нет Node.js и NPM, установите их. Затем в папке, в которой вы клонировали репозиторий, установите зависимости сборки с помощью npm:
установка npm
Затем, чтобы собрать исходный код, запустите:
npm запустить сборку
Документы можно создать с помощью npm:
документация по запуску npm
Хотите стать частью проекта PixiJS? Большой! Добро пожаловать! Вместе мы доберемся до цели быстрее :) Если вы нашли ошибку, у вас есть отличный запрос на новую функцию или вы хотите выполнить задачу из дорожной карты выше, не стесняйтесь обращаться к нам.
Обязательно прочтите Руководство для участников перед отправкой изменений.
Этот контент выпущен под лицензией MIT.
