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
300
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
30
Building UI components with Storybook
leben
1
410
JavaScript tools
leben
0
65
Organising Stylesheets and the BEM methodology
leben
1
210
Other Decks in Programming
See All in Programming
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
7
1.5k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
140
2025.01.17_Sansan × DMM.swift
riofujimon
2
670
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
990
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
2.2k
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
140
Scaling your build logic
antalmonori
1
150
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.1k
ASP.NET Core の OpenAPIサポート
h455h1
0
160
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
190
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Code Review Best Practice
trishagee
65
17k
Typedesign – Prime Four
hannesfritz
40
2.5k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Designing Experiences People Love
moore
139
23k
Bash Introduction
62gerente
610
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
380
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