Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pixijs/pixijs
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
https://github.com/pixijs/pixijs
canvas canvas2d data-visualization game glsl javascript pixi pixijs renderer rendering rendering-2d-graphics rendering-engine webgl
Last synced: 5 days ago
JSON representation
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
- Host: GitHub
- URL: https://github.com/pixijs/pixijs
- Owner: pixijs
- License: mit
- Created: 2013-01-21T22:40:50.000Z (almost 12 years ago)
- Default Branch: dev
- Last Pushed: 2024-10-29T12:59:12.000Z (2 months ago)
- Last Synced: 2024-10-29T15:18:25.269Z (2 months ago)
- Topics: canvas, canvas2d, data-visualization, game, glsl, javascript, pixi, pixijs, renderer, rendering, rendering-2d-graphics, rendering-engine, webgl
- Language: TypeScript
- Homepage: http://pixijs.com
- Size: 105 MB
- Stars: 43,836
- Watchers: 991
- Forks: 4,777
- Open Issues: 394
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-frontend - pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. ![](https://img.shields.io/github/stars/pixijs/pixijs.svg?style=social&label=Star) (Repository / WebGL)
- awesome - pixijs/pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (TypeScript)
- awesome-canvas - pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. ![](https://img.shields.io/github/stars/pixijs/pixijs?style=social) ![](https://img.shields.io/github/forks/pixijs/pixijs?style=social) (Libraries / Game engine)
- awesomeLibrary - pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (语言资源库 / typescript)
- awesome-game-engine-dev - PixiJS - Fast, lightweight 2D library. [[Awesome](https://github.com/cursedcoder/awesome-pixijs) | [Editor](https://github.com/Megabyteceer/thing-editor) | [Essentials](https://github.com/ShukantPal/pixi-essentials) | [Website](https://pixijs.com/)] (Libraries / JavaScript)
- awesome-ccamel - pixijs/pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (TypeScript)
- awesome-list - pixijs
- awesome-luooooob - pixijs/pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (TypeScript)
- awesome - pixijs/pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (TypeScript)
- StarryDivineSky - pixijs/pixijs
- awesome-web-dev - pixi.js
- awesome-starred - pixijs/pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (TypeScript)
- awesome-starred - pixijs/pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (TypeScript)
- awesome - pixijs/pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (TypeScript)
- awesome - pixijs/pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (TypeScript)
- awesome-starred - pixijs/pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. (game)
- stars - pixijs
- stars - pixijs
README
Examples | Getting Started | Documentation | Discord# PixiJS ⚡️
> Next-Generation, Fastest HTML5 Creation Engine for the Web- 🚀 [WebGL](https://en.wikipedia.org/wiki/WebGL) & [WebGPU](https://en.wikipedia.org/wiki/WebGPU) Renderers
- ⚡️ Unmatched Performance & Speed
- 🎨 Easy to use, yet powerful API
- 📦 Asset Loader
- ✋ Full Mouse & Multi-touch Support
- ✍️ Flexible Text Rendering
- 📐 Versatile Primitive and SVG Drawing
- 🖼️ Dynamic Textures
- 🎭 Masking
- 🪄 Powerful Filters
- 🌈 Advanced Blend ModesPixiJS is the fastest, most lightweight 2D library available for the web, working
across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL and WebGPU.### Setup
It's easy to get started with PixiJS! Just use our [PixiJS Create](https://pixijs.io/create-pixi/) CLI and get set up in just one command:
```
npm create pixi.js@latest
```
or to add it to an existing project:```
npm install pixi.js
```### Usage
```typescript
import { Application, Assets, Sprite } from 'pixi.js';(async () =>
{
// Create a new application
const app = new Application();// Initialize the application
await app.init({ background: '#1099bb', resizeTo: window });// Append the application canvas to the document body
document.body.appendChild(app.canvas);// Load the bunny texture
const texture = await Assets.load('https://pixijs.com/assets/bunny.png');// Create a bunny Sprite
const bunny = new Sprite(texture);// Center the sprite's anchor point
bunny.anchor.set(0.5);// Move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;app.stage.addChild(bunny);
// Listen for animate update
app.ticker.add((time) =>
{
// Just for fun, let's rotate mr rabbit a little.
// * Delta is 1 if running at 100% performance *
// * Creates frame-independent transformation *
bunny.rotation += 0.1 * time.deltaTime;
});
})();
```
### ContributeWant to be part of the PixiJS project? Great! All are welcome! We will get there quicker
together :) Whether you find a bug, have a great feature request, or you fancy owning a task
from the road map above, feel free to get in touch.Make sure to read the [Contributing Guide](.github/CONTRIBUTING.md)
before submitting changes.### License
This content is released under the [MIT License](http://opensource.org/licenses/MIT).
### Change Log
[Releases](https://github.com/pixijs/pixijs/releases)### Support
We're passionate about making PixiJS the best graphics library possible. Our dedication comes from our love for the project and community. If you'd like to support our efforts, please consider contributing to our open collective.