Pixi.js

Transcript

1. 1.

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

2. 2.

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

3. 3.

   <canvas/>

4. 4.

   • Element introduced with HTML5 • Bitmap • Dedicated JavaScript

   API: Canvas 2D context • Sub-features • Text • Blend modes
5. 5.

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

6. 6.

   WebGL

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

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

9. 9.

   Pixi.js Version 2

10. 10.

    Main features

11. 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
12. 12.

    Renderer detection

13. 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 );
14. 14.

    Resolution

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

    Assets loader

17. 17.

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

    = fn; loader.onComplete = fn; loader.load();
18. 18.

    Tinting

19. 19.

    None
20. 20.

    var texture = PIXI.Texture.fromImage('images/star.png'); var image = new PIXI.Sprite(texture); image.tint

    = '0xFFFFFF'; stage.addChild(image);
21. 21.

    Text

22. 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);
23. 23.

    Sprite sheets

24. 24.

    None
25. 25.

    None
26. 26.

    None
27. 27.

    7038 × 4222

28. 28.

    TexturePacker

29. 29.

    • Create sprites from frames • Optimize images • Trim,

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

    Showcase…

31. 31.

    Other useful resources

32. 32.

    • PIXI.draggable • GSAP (GreenSock)

33. 33.

    Questions? Or any experience you want to share?

34. 34.

    Thanks! @LeBenLeBen