Getting Started - zlq4863947/pixi.js-cn GitHub Wiki
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>
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);
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);
And that's it! To see the JSFiddle version of this example, click here.
<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>
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
PixiJS API Documentation can be found here: http://pixijs.download/release/docs/index.html