Пиксис

PixiJS — механизм создания HTML5

Целью этого проекта является создание быстрой и легкой 2D-библиотеки, работающей на всех устройствах. Средство рендеринга PixiJS позволяет каждому насладиться возможностями аппаратного ускорения без предварительного знания WebGL. Кроме того, это быстро. Действительно быстро.

Если вы хотите быть в курсе последних новостей PixiJS, подписывайтесь на нас в Твиттере @PixiJS, и мы будем держать вас в курсе! Вы также можете зайти на наш сайт, там же будут публиковаться любые открытия!

Теперь мы являемся частью Open Collective, и с вашей поддержкой вы можете помочь нам сделать PixiJS еще лучше. Чтобы сделать пожертвование, просто нажмите кнопку ниже, и мы будем любить вас вечно!

Для чего и когда использовать 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;

Установка CDN

Через jsDelivr:

Или через unpkg:

Базовый пример использования

 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');// Это создает текстуру из файла 'bunny.png';// png' imageconst Bunny = new Sprite(texture);// Устанавливаем положение Bunnybunny.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2; // Вращаемся вокруг centerbunny.anchor .x = 0.5;bunny.anchor.y = 0.5;// Добавляем кролика в сцену, которую мы строимapp.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.