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

Transcript

1. Жирная анимация c Pixi.js Пучнина Юлия

2. kira__kit yulia.puchnina probably-kira Юлия Пучнина

3. None

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;