Pixi.js

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

Transcript

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

   View Slide

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

   View Slide

3. 
   

   View Slide

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

   View Slide

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

   View Slide

6. WebGL
   

   View Slide

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.
   

   View Slide

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

   View Slide

9. Pixi.js
   Version 2
   

   View Slide

10. Main features
    

    View Slide

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
    

    View Slide

12. Renderer detection
    

    View Slide

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

    View Slide

14. Resolution
    

    View Slide

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

    View Slide

16. Assets loader
    

    View Slide

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

    View Slide

18. Tinting
    

    View Slide

19. View Slide

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

    View Slide

21. Text
    

    View Slide

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

    View Slide

23. Sprite sheets
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. 7038 × 4222
    

    View Slide

28. TexturePacker
    

    View Slide

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

    View Slide

30. Showcase…
    

    View Slide

31. Other useful resources
    

    View Slide

32. • PIXI.draggable
    • GSAP (GreenSock)
    

    View Slide

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

    View Slide

34. Thanks!
    @LeBenLeBen
    

    View Slide