Getting Started - zlq4863947/pixi.js-cn GitHub Wiki

I. Including PixiJS

Include the PixiJS library in your project by linking to the PixiJS CDN. More info here.

<script src="https://pixijs.download/release/pixi.min.js"></script>

Create a script element in the <body> element that will contain the PixiJS code:

<body>
  <script>
     // code here
  </script>
</body>

II. Creating An Application

Define a PixiJS Application object which will handle the rendering and updating as well as create your root stage object. Optionally, you can specify width and height options (defaults are 800 x 600). List of options can be found here.

var app = new PIXI.Application({ width: 640, height: 360 });

Add the <canvas> element created by PixiJS to your document (called app.view).

document.body.appendChild(app.view);

III. Adding Display Objects

Next, we'll draw a simple circle which we will use to render to our canvas.

var circle = new PIXI.Graphics();
circle.beginFill(0x5cafe2);
circle.drawCircle(0, 0, 80);
circle.x = 320;
circle.y = 180;

This element is added to the app.stage element, the root-level instance of PIXI.Container which contains all elements to be rendered.

app.stage.addChild(circle);

IV. Now You're Cookin'

And that's it! To see the JSFiddle version of this example, click here.

download

Complete Code

<html>
  <head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
  </head>
  <body>
    <script>
      var app = new PIXI.Application(640, 360);
      document.body.appendChild(app.view);
      var circle = new PIXI.Graphics();
      circle.beginFill(0x5cafe2);
      circle.drawCircle(0, 0, 80);
      circle.x = 320;
      circle.y = 180;
      app.stage.addChild(circle);
    </script>
  </body>
</html>

More Examples

PixiJS has a bunch of examples worth checking out, here are a few:

  • Basic Simple example like the one above
  • Container Use Container elements to next objects
  • Click Use interactivity to handle mouse/touch events
  • Text Render and style text
  • Graphics Drawing different shapes using Graphics object

Documentation

PixiJS API Documentation can be found here: http://pixijs.download/release/docs/index.html

⚠️ **GitHub.com Fallback** ⚠️