Pixi.js

 Pixi.js

A quick introduction to the JavaScript framework Pixi.js to create WebGL & Canvas 2D animations.

6a5681378ef043b9050ae1a38d689313?s=128

Benoît Burgener

September 09, 2015
Tweet

Transcript

  1. 4.

    • Element introduced with HTML5 • Bitmap • Dedicated JavaScript

    API: Canvas 2D context • Sub-features • Text • Blend modes
  2. 6.
  3. 7.

    MDN WebGL (Web Graphics Library) is a JavaScript API for

    rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.
  4. 11.

    1. WebGL to Canvas fallback with renderer detection 2. Multiple

    resolutions support (for HDPI screens) 3. Assets loader 4. Click, touch, multi-touch 5. Filters, tinting, blend modes 6. Text 7. Sprite sheets
  5. 13.

    var stage = new PIXI.Stage(backgroundColor);
 var renderer = new PIXI.autoDetectRenderer(width,

    height, …); -> PIXI.WebGLRenderer(…) —> PIXI.CanvasRenderer(…) renderer.render(stage); document.body.appendChild(renderer.view); var animate = function() { … } requestAnimationFrame( animate );
  6. 15.

    var resolution = window.devicePixelRatio || 1; var renderer = new

    PIXI.autoDetectRenderer(width, height, { resolution: resolution }); if (resolution > 1) { jQuery(renderer.view).css({ 'transform': 'scale(' + 1/resolution + ')', 'transform-origin': '0 0' }); }
  7. 18.
  8. 19.
  9. 21.
  10. 22.

    • Multiple lines • Word wrapping • Alignment • Stroke

    • Drop shadow var text = new PIXI.Text( 'Lorem ipsum dolor sit amet', { fill: 'black', font: '30px BaskervilleOldFace', align: 'center' } ); stage.addChild(text);
  11. 24.
  12. 25.
  13. 26.
  14. 29.

    • Create sprites from frames • Optimize images • Trim,

    rotate, … • Multi-pack (limited by max. image size) • Export in multiple formats (JSON Hash for Pixi)