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.3k
Жирная анимация с Pixi.js
Юлия Пучнина
fwdays
April 29, 2014
Tweet
Share
More Decks by fwdays
See All by fwdays
Symfony best practices и не только Олег Зинченко
fwdays
0
1.9k
Beyond Testing Михаил Боднарчук
fwdays
0
660
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.7k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
870
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.7k
Phalcon. Что нового? Александр Торош
fwdays
0
970
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.2k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
670
Функциональный тулчейн Nix
fwdays
1
390
Other Decks in Programming
See All in Programming
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.9k
Adding Security to Microcontroller Ruby
sylph01
1
160
Productivity is Messing Around and Having Fun
hollycummins
1
180
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
120
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
AppRouter Panel Talk
yosuke_furukawa
PRO
1
520
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
120
Next.js App Router
quramy
14
2.3k
Runtime Objects in Rust
mitsuhiko
0
220
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
250
Namespace, What and Why
tagomoris
3
670
Featured
See All Featured
Optimizing for Happiness
mojombo
370
69k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Building Applications with DynamoDB
mza
88
5.7k
Designing Experiences People Love
moore
136
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
83
45k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
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;