Жирная анимация с Pixi.js

Юлия Пучнина

Transcript

1. Жирная анимация c Pixi.js Пучнина Юлия
2. kira__kit yulia.puchnina probably-kira Юлия Пучнина
4. Чем не является PIXI.js: ❖ архитектурным фреймворком ❖ физическим движком ❖ полноценным игровым движком Это просто библиотека для хорошего рендеринга графики
5. Основные преимущества: ❖ WebGL/Canvas ❖ Отличная производительность ❖ Прекрасная работа с мобильными устройствами ❖ Отлично документированое API, прозрачный код ❖ Отличные примеры ❖ Активное сообщество
6. Создание сцены в 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>
7. Определяем рендеринг - autoDetectRenderer - WebGLRenderer - CanvasRenderer
8. Объекты ❖ displayObject(базовый класс) ❖ displayObjectContainer ❖ Text ❖ Sprite ❖ MovieClip/Spine ❖ Примитивы
9. Создание текста var text = new PIXI.Text(‘Some text’, { font: ‘normal 15px Arial’, fill: "#000", stroke: '#D68C1F', strokeThickness: 1 }); stage.addChild(text)
10. Создание спрайта
11. Создание простого спрайта var cat = ‘img/octocat.png’, texture = PIXI.Texture.fromImage(cat), sprite = new PIXI.Sprite(texture); stage.addChild(sprite)
12. Создание tiling спрайта var wall = ‘img/wall.png’, texture = PIXI.Texture.fromImage(wall), sprite = new PIXI.TilingSprite(texture); stage.addChild(sprite)
13. Создание мувиклипа {"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 ...
14. Создание мувиклипа 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();
15. Использование контейнеров 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);
16. Еще в PIXI.js есть ❖ Фильтры, их дофига ❖ Маски ❖ Шейдеры
17. Применение фильтров //to add cat.filters = [new PIXI.BlurFilter()] //to remove cat.filters = null;