Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pixi.js

 Pixi.js

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

Benoît Burgener

September 09, 2015
Tweet

More Decks by Benoît Burgener

Other Decks in Programming

Transcript

  1. Pixi.js
    Benoît Burgener @LeBenLeBen Front-end Meetup Romandie 11 September 2015

    View full-size slide

  2. Benoît Burgener
    Front-end developer at Liip
    @LeBenLeBen

    View full-size slide

  3. • Element introduced with HTML5
    • Bitmap
    • Dedicated JavaScript API: Canvas 2D context
    • Sub-features
    • Text
    • Blend modes

    View full-size slide

  4. Source: http://caniuse.com/#feat=webgl
    Canvas browsers support

    View full-size slide

  5. 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.

    View full-size slide

  6. Source: http://caniuse.com/#feat=canvas
    WebGL browsers support

    View full-size slide

  7. Pixi.js
    Version 2

    View full-size slide

  8. Main features

    View full-size slide

  9. 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

    View full-size slide

  10. Renderer detection

    View full-size slide

  11. 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 );

    View full-size slide

  12. 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'
    });
    }

    View full-size slide

  13. Assets loader

    View full-size slide

  14. var loader = new PIXI.AssetLoader([
    'images/star.png',
    'images/moon.png',
    'images/stars.json'
    ]);
    loader.onProgress = fn;
    loader.onComplete = fn;
    loader.load();

    View full-size slide

  15. var texture = PIXI.Texture.fromImage('images/star.png');
    var image = new PIXI.Sprite(texture);
    image.tint = '0xFFFFFF';
    stage.addChild(image);

    View full-size slide

  16. • 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);

    View full-size slide

  17. Sprite sheets

    View full-size slide

  18. 7038 × 4222

    View full-size slide

  19. TexturePacker

    View full-size slide

  20. • Create sprites from frames
    • Optimize images
    • Trim, rotate, …
    • Multi-pack (limited by max. image size)
    • Export in multiple formats (JSON Hash for Pixi)

    View full-size slide

  21. Other useful resources

    View full-size slide

  22. • PIXI.draggable
    • GSAP (GreenSock)

    View full-size slide

  23. Questions?
    Or any experience you want to share?

    View full-size slide

  24. Thanks!
    @LeBenLeBen

    View full-size slide