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
350
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
82
Organising Stylesheets and the BEM methodology
leben
1
230
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
2
630
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
150
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Goで作る、開発・CI環境
sin392
0
220
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
PicoRuby on Rails
makicamel
2
130
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
230
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
4.7k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
450
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Designing Experiences People Love
moore
142
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
Raft: Consensus for Rubyists
vanstee
140
7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Site-Speed That Sticks
csswizardry
10
680
RailsConf 2023
tenderlove
30
1.1k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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