Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Жирная анимация с Pixi.js
fwdays
April 29, 2014
Programming
0
2k
Жирная анимация с Pixi.js
Юлия Пучнина
fwdays
April 29, 2014
Tweet
Share
More Decks by fwdays
See All by fwdays
Symfony best practices и не только Олег Зинченко
fwdays
0
1.7k
Beyond Testing Михаил Боднарчук
fwdays
0
550
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.5k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
750
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.6k
Phalcon. Что нового? Александр Торош
fwdays
0
820
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.1k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
580
Функциональный тулчейн Nix
fwdays
1
310
Other Decks in Programming
See All in Programming
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
120
設計の学び方:自分流のススメ
masuda220
PRO
10
7.4k
Oracle REST Data Service: APEX Office Hours
thatjeffsmith
0
800
Power Automateドリブンのチームマネジメント
hanaseleb
0
200
社用PCのdotfiles管理 / dotfiles-in-company
yammerjp
0
140
Jetpack Compose best practices 動画紹介 @GoogleI/O LT会
takakitojo
0
390
Get Ready for Jakarta EE 10
ivargrimstad
0
1.1k
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2.1k
Opsしかやってこなかった私が DevOpsが根付いたチームにJoinした話
yhamano
1
100
What's new in Android development tools まとめ
mkeeda
0
400
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
420
IE Graduation (IE の功績を讃える)
jxck
20
12k
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
303
40k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Designing for humans not robots
tammielis
241
23k
Debugging Ruby Performance
tmm1
65
10k
Automating Front-end Workflow
addyosmani
1351
200k
A designer walks into a library…
pauljervisheath
196
16k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Three Pipe Problems
jasonvnalue
89
8.7k
Making Projects Easy
brettharned
98
4.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
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;