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
360
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
38
Building UI components with Storybook
leben
1
440
JavaScript tools
leben
0
84
Organising Stylesheets and the BEM methodology
leben
1
230
Other Decks in Programming
See All in Programming
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
830
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
360
Reactの歴史を振り返る
tutinoko
1
180
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
280
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
230
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
340
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
340
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.5k
自作OSでDOOMを動かしてみた
zakki0925224
1
1.3k
The State of Fluid (2025)
s2b
0
120
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
190
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fireside Chat
paigeccino
38
3.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Why Our Code Smells
bkeepers
PRO
337
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Building Applications with DynamoDB
mza
96
6.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
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