Pixi.js
Benoît Burgener @LeBenLeBen Front-end Meetup Romandie 11 September 2015
Slide 2
Slide 2 text
Benoît Burgener
Front-end developer at Liip
@LeBenLeBen
Slide 3
Slide 3 text
Slide 4
Slide 4 text
• Element introduced with HTML5
• Bitmap
• Dedicated JavaScript API: Canvas 2D context
• Sub-features
• Text
• Blend modes
Slide 5
Slide 5 text
Source: http://caniuse.com/#feat=webgl
Canvas browsers support
Slide 6
Slide 6 text
WebGL
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
Source: http://caniuse.com/#feat=canvas
WebGL browsers support
Slide 9
Slide 9 text
Pixi.js
Version 2
Slide 10
Slide 10 text
Main features
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Renderer detection
Slide 13
Slide 13 text
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 );
Slide 14
Slide 14 text
Resolution
Slide 15
Slide 15 text
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'
});
}
Slide 16
Slide 16 text
Assets loader
Slide 17
Slide 17 text
var loader = new PIXI.AssetLoader([
'images/star.png',
'images/moon.png',
'images/stars.json'
]);
loader.onProgress = fn;
loader.onComplete = fn;
loader.load();
Slide 18
Slide 18 text
Tinting
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
var texture = PIXI.Texture.fromImage('images/star.png');
var image = new PIXI.Sprite(texture);
image.tint = '0xFFFFFF';
stage.addChild(image);
Slide 21
Slide 21 text
Text
Slide 22
Slide 22 text
• 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);
Slide 23
Slide 23 text
Sprite sheets
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
7038 × 4222
Slide 28
Slide 28 text
TexturePacker
Slide 29
Slide 29 text
• Create sprites from frames
• Optimize images
• Trim, rotate, …
• Multi-pack (limited by max. image size)
• Export in multiple formats (JSON Hash for Pixi)