Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Pixi.js
Benoît Burgener
September 09, 2015
Programming
0
170
Pixi.js
A quick introduction to the JavaScript framework Pixi.js to create WebGL & Canvas 2D animations.
Benoît Burgener
September 09, 2015
Tweet
Share
More Decks by Benoît Burgener
See All by Benoît Burgener
Chūshō: what, why and how
leben
0
15
Building UI components with Storybook
leben
1
290
JavaScript tools
leben
0
38
Organising Stylesheets and the BEM methodology
leben
1
170
Other Decks in Programming
See All in Programming
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
430
Swift Observation
shiz
3
250
Jetpack Compose 完全に理解した
mkeeda
1
440
OSC大阪 パスワード認証は人類には早すぎる ~ IDaaSを使ったソーシャルログインのすすめ ~
authyasan
0
180
Quarto Tips for Academic Presentation
nicetak
0
900
低レイヤーから始める GUI
fadis
18
9.2k
Workshop on Jetpack compose
aldefy
0
140
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
140
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
330
OSSから学んだPR Descriptionの書き方
fugakkbn
4
120
Circuit⚡
monaapk
0
200
新卒2年目がデータ分析API開発に挑戦【Stapy#88】/data-science-api-begginer
matsuik
0
330
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
Unsuck your backbone
ammeep
659
56k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
Writing Fast Ruby
sferik
613
58k
Adopting Sorbet at Scale
ufuk
65
7.8k
For a Future-Friendly Web
brad_frost
166
7.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Transcript
Pixi.js Benoît Burgener @LeBenLeBen Front-end Meetup Romandie 11 September 2015
Benoît Burgener Front-end developer at Liip @LeBenLeBen
<canvas/>
• Element introduced with HTML5 • Bitmap • Dedicated JavaScript
API: Canvas 2D context • Sub-features • Text • Blend modes
Source: http://caniuse.com/#feat=webgl Canvas browsers support
WebGL
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.
Source: http://caniuse.com/#feat=canvas WebGL browsers support
Pixi.js Version 2
Main features
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
Renderer detection
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 );
Resolution
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' }); }
Assets loader
var loader = new PIXI.AssetLoader([ 'images/star.png', 'images/moon.png', 'images/stars.json' ]); loader.onProgress
= fn; loader.onComplete = fn; loader.load();
Tinting
None
var texture = PIXI.Texture.fromImage('images/star.png'); var image = new PIXI.Sprite(texture); image.tint
= '0xFFFFFF'; stage.addChild(image);
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);
Sprite sheets
None
None
None
7038 × 4222
TexturePacker
• Create sprites from frames • Optimize images • Trim,
rotate, … • Multi-pack (limited by max. image size) • Export in multiple formats (JSON Hash for Pixi)
Showcase…
Other useful resources
• PIXI.draggable • GSAP (GreenSock)
Questions? Or any experience you want to share?
Thanks! @LeBenLeBen