Skip to content

PixiJS

(Conda 에코시스템을 위한 패키지 매니저는 pixi를 참조)

The HTML5 Creation Engine.

Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

Categories

Installation 

npm install pixi.js

Basic Usage Example 

import * as PIXI from 'pixi.js';

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new PIXI.Application();

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);

// load the texture we need
app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
    // This creates a texture from a 'bunny.png' image
    const bunny = new PIXI.Sprite(resources.bunny.texture);

    // Setup the position of the bunny
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    // Rotate around the center
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // Add the bunny to the scene we are building
    app.stage.addChild(bunny);

    // Listen for frame updates
    app.ticker.add(() => {
         // each frame we spin the bunny around a bit
        bunny.rotation += 0.01;
    });
});

Vue example 

<template>
  <div class="connections">
    <canvas id="pixi"></canvas>
  </div>
</template>

<script>
import * as PIXI from 'pixi.js'

export default {
  name: 'ConnectionsLayer',

  methods: {
    drawPixi() {
      var canvas = document.getElementById('pixi')

      const app = new PIXI.Application({
        width: window.innerWidth,
        height: window.innerHeight,
        antialias: true,
        transparent: true,
        view: canvas,
      })

      let graphics = new PIXI.Graphics() 
      graphics.lineStyle(8, 0x000000)

      //start
      graphics.moveTo(300, 250)
      //end
      graphics.lineTo(500, 250)

      app.stage.addChild(graphics)
    },
  },

  mounted() {
    this.drawPixi()
  },
}

CanvasRenderer 

import * as PIXI from "pixi.js-legacy";
const renderer = PIXI.autoDetectRenderer(); // returns PIXI.Renderer or PIXI.CanvasRenderer

Auto Resize

PIXI 5.0 부터 resizeTo 옵션이 지원된다. 

let app = new PIXI.Application({ resizeTo: window });

Graphics animation 

var line = new PIXI.Graphics(),
  centerY = 0,
  increment = 2;

app.stage.addChild(line);   

app.ticker.add(() => {
  // clear the graphics object ('wipe the blackboard')
  line.clear(); 

   // redraw a new line
  drawLine(centerY);

  // calculate the next position
  centerY = (centerY < window.innerHeight) ? centerY = centerY + increment : 0; 
});

function drawLine(centerY) {
    line.lineStyle(1, 0xff0000);
    line.moveTo(0,window.innerHeight/2);
    line.lineTo(window.innerWidth/2, centerY);
    line.lineTo(window.innerWidth, window.innerHeight/2);
}

See also

Favorite site