1 | PixiJS — The HTML5 Creation Engine
|
2 | =============
|
3 |
|
4 | ![pixi.js logo](https://pixijs.download/pixijs-banner-no-version.png)
|
5 |
|
6 | The aim of this project is to provide a fast lightweight 2D library that works
|
7 | across all devices. The PixiJS renderer allows everyone to enjoy the power of
|
8 | hardware 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 |
|
12 | This 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 |
|
16 | PixiJS 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 | ```
|
21 | npm install pixi.js-legacy
|
22 | ```
|
23 | There is no default export. The correct way to import PixiJS is:
|
24 |
|
25 | ```js
|
26 | import * 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.
|
34 | const app = new PIXI.Application();
|
35 |
|
36 | // The application will create a canvas element for you that you
|
37 | // can then insert into the DOM.
|
38 | document.body.appendChild(app.view);
|
39 |
|
40 | // load the texture we need
|
41 | app.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 |
|
67 | This 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)
|