Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Pixi.js
Search
Benoît Burgener
September 09, 2015
Programming
0
320
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
32
Building UI components with Storybook
leben
1
410
JavaScript tools
leben
0
69
Organising Stylesheets and the BEM methodology
leben
1
220
Other Decks in Programming
See All in Programming
DenoでOpenTelemetryに入門する
yotahada3
2
270
気がついたら子供が社会人になって 自分と同じモバイルアプリエンジニアになった件 / Parent-Child Engineers
koishi
0
250
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
700
PHPのガベージコレクションを深掘りしよう
rinchoku
0
220
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
0
150
読もう! Android build ドキュメント
andpad
1
190
CQRS+ES勉強会#1
rechellatek
0
350
生産性アップのためのAI個人活用
kunoyasu
0
460
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
180
Cloudflare Pagesのサイトを NotebookLMから読みやすくする Cloudflare Meet-up Tokyo Vol.7
xiombatsg
0
110
もう一人で悩まない! 個の知見をチームの知見にする3つの習慣と工夫 / Into team knowledge.
honyanya
3
500
運用しながらリアーキテクチャ
nealle
0
350
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Building Adaptive Systems
keathley
40
2.4k
Fireside Chat
paigeccino
37
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Music & Morning Musume
bryan
46
6.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
430
A Modern Web Designer's Workflow
chriscoyier
693
190k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
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