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
fwdays
April 29, 2014
Programming
0
2.4k
Жирная анимация с Pixi.js
Юлия Пучнина
fwdays
April 29, 2014
Tweet
Share
More Decks by fwdays
See All by fwdays
Symfony best practices и не только Олег Зинченко
fwdays
0
2.1k
Beyond Testing Михаил Боднарчук
fwdays
0
770
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.9k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
960
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.8k
Phalcon. Что нового? Александр Торош
fwdays
0
1.1k
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.4k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
770
Функциональный тулчейн Nix
fwdays
1
460
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
KATA
mclloyd
30
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
It's Worth the Effort
3n
185
28k
GraphQLとの向き合い方2022年版
quramy
49
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What's in a price? How to price your products and services
michaelherold
246
12k
4 Signs Your Business is Dying
shpigford
184
22k
Transcript
Жирная анимация c Pixi.js Пучнина Юлия
kira__kit yulia.puchnina probably-kira Юлия Пучнина
None
Чем не является PIXI.js: ❖ архитектурным фреймворком ❖ физическим движком
❖ полноценным игровым движком Это просто библиотека для хорошего рендеринга графики
Основные преимущества: ❖ WebGL/Canvas ❖ Отличная производительность ❖ Прекрасная работа
с мобильными устройствами ❖ Отлично документированое API, прозрачный код ❖ Отличные примеры ❖ Активное сообщество
Создание сцены в Pixi.js <script> var renderer = PIXI.autoDetectRenderer(500, 500);
stage = new PIXI.Stage(0xFFFFFF, true), loader = new PIXI.AssetLoader([...]); loader.onComplete = function () { game.start() } loader.load(); document.body.appendChild(renderer.view); requestAnimationFrame(animate); function animate() { game.drawFrame() renderer.render(stage); requestAnimationFrame( animate ); } </script>
Определяем рендеринг - autoDetectRenderer - WebGLRenderer - CanvasRenderer
Объекты ❖ displayObject(базовый класс) ❖ displayObjectContainer ❖ Text ❖ Sprite
❖ MovieClip/Spine ❖ Примитивы
Создание текста var text = new PIXI.Text(‘Some text’, { font:
‘normal 15px Arial’, fill: "#000", stroke: '#D68C1F', strokeThickness: 1 }); stage.addChild(text)
Создание спрайта
Создание простого спрайта var cat = ‘img/octocat.png’, texture = PIXI.Texture.fromImage(cat),
sprite = new PIXI.Sprite(texture); stage.addChild(sprite)
Создание tiling спрайта var wall = ‘img/wall.png’, texture = PIXI.Texture.fromImage(wall),
sprite = new PIXI.TilingSprite(texture); stage.addChild(sprite)
Создание мувиклипа {"frames": { "art/clips/coin1.png": { "frame": {"x":0,"y":0,"w":40,"h":40}, "rotated": false,
"trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, "sourceSize": {"w":40,"h":40} }, "art/clips/coin2.png": { "frame": {"x":40,"y":0,"w":40,"h":40}, "rotated": false ...
Создание мувиклипа var textures = [], texture; for (var i
= 1; i < 8; i++) { texture = PIXI.Texture.fromFrame('img/coin' + i + ".png"); textures.push(texture); }; var coin = new PIXI.MovieClip(textures); coin.animationSpeed = 0.5; stage.addChild(coin); coin.play();
Использование контейнеров var container = new PIXI.displayObjectContainer(); container.addChild(cat); container.addChild(coin); container.addChild(text);
container.position = {x: 20, y: 30} stage.addChild(container); … … stage.removeChild(container);
Еще в PIXI.js есть ❖ Фильтры, их дофига ❖ Маски
❖ Шейдеры
Применение фильтров //to add cat.filters = [new PIXI.BlurFilter()] //to remove
cat.filters = null;