43 lines
964 B
Markdown
43 lines
964 B
Markdown
|
---
|
||
|
|
title: PixiJS
|
||
|
|
---
|
||
|
|
|
||
|
|
## PixiJS
|
||
|
|
|
||
|
|
# Introduction
|
||
|
|
|
||
|
|
Pixi.js is an open source, cross browser JavaScript 2D WebGL graphics library with canvas fallback.
|
||
|
|
|
||
|
|
# Example 1
|
||
|
|
|
||
|
|
The rotating bunny
|
||
|
|
|
||
|
|
```
|
||
|
|
var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
|
||
|
|
document.body.appendChild(app.view);
|
||
|
|
|
||
|
|
// create a new Sprite from an image path
|
||
|
|
var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')
|
||
|
|
|
||
|
|
// 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(function(delta) {
|
||
|
|
// 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 * delta;
|
||
|
|
});
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
You can find this running example here: http://pixijs.io/examples/index.html#/basics/basic.js
|