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

Dd3f18c87b851137000c7427d7bd5d32?s=47 fwdays
April 29, 2014

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

Юлия Пучнина

Dd3f18c87b851137000c7427d7bd5d32?s=128

fwdays

April 29, 2014
Tweet

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;