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
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
PicoRuby on Rails
makicamel
3
140
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.1k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
10
4.6k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Site-Speed That Sticks
csswizardry
10
700
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
What's in a price? How to price your products and services
michaelherold
246
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Designing Experiences People Love
moore
142
24k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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;