UNPKG

2.42 kBMarkdownView Raw
1PixiJS — The HTML5 Creation Engine
2=============
3
4![pixi.js logo](https://pixijs.download/pixijs-banner-no-version.png)
5
6The aim of this project is to provide a fast lightweight 2D library that works
7across all devices. The PixiJS renderer allows everyone to enjoy the power of
8hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.
9
10**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!**
11
12This package is the same as **pixi.js**, but provides fallback support for browsers that do not support WebGL or more modern JavaScript features.
13
14### Setup
15
16PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) to integration with [Webpack](https://webpack.js.org/), [Browserify](http://browserify.org/), [Rollup](https://rollupjs.org/), [Electron](https://electron.atom.io/), [NW.js](https://nwjs.io/) or other module backed environments.
17
18#### Install
19
20```
21npm install pixi.js-legacy
22```
23There is no default export. The correct way to import PixiJS is:
24
25```js
26import * as PIXI from 'pixi.js-legacy'
27```
28### Basic Usage Example
29
30```js
31// The application will create a renderer using WebGL, if possible,
32// with a fallback to a canvas render. It will also setup the ticker
33// and the root stage PIXI.Container.
34const app = new PIXI.Application();
35
36// The application will create a canvas element for you that you
37// can then insert into the DOM.
38document.body.appendChild(app.view);
39
40// load the texture we need
41app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
42
43 // This creates a texture from a 'bunny.png' image.
44 const bunny = new PIXI.Sprite(resources.bunny.texture);
45
46 // Setup the position of the bunny
47 bunny.x = app.renderer.width / 2;
48 bunny.y = app.renderer.height / 2;
49
50 // Rotate around the center
51 bunny.anchor.x = 0.5;
52 bunny.anchor.y = 0.5;
53
54 // Add the bunny to the scene we are building.
55 app.stage.addChild(bunny);
56
57 // Listen for frame updates
58 app.ticker.add(() => {
59 // each frame we spin the bunny around a bit
60 bunny.rotation += 0.01;
61 });
62});
63```
64
65### License
66
67This content is released under the (http://opensource.org/licenses/MIT) MIT License.
68
69[![Analytics](https://ga-beacon.appspot.com/UA-39213431-2/pixi.js/index)](https://github.com/igrigorik/ga-beacon)