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
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
870
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
For a Future-Friendly Web
brad_frost
179
9.8k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
It's Worth the Effort
3n
185
28k
Statistics for Hackers
jakevdp
799
220k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Raft: Consensus for Rubyists
vanstee
140
7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Speed Design
sergeychernyshev
32
1k
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;