Анимации Sprite в paper.js

Question

Я работаю над своим проектом в Paper.js.

В части этого, мне нужно использовать спрайт с анимацией.

Чтобы рассказать об этом, у меня есть космический корабль, который может быть повсюду на экране, и есть эффект отчаяния, который случается иногда.

Я подготовил spritesheet с 10 кадрами, и все, что я хочу, это использовать класс Paper.js RASTER для загрузки It и анимации на каждом кадре.

Проблема заключается в позиции, что я не знаю, как вычислить их ...

Когда я загружаю растровой

let slide = new Raster({ 
    source: 'assets/sprite.png', 
    position: [0, 0] 
}); 

Я вижу центр очень долго изображения, когда Мне нужно увидеть первый кадр.

Моя идея состояла в том, чтобы использовать группу с containts маской (квадрат)

let mask = new Rectangle({ 
    position: [220, 100], 
    size:  [186, 154], 
}); 

То, что я могу изменить положение динамически и анимировать распространение в то же время.

Возможно ли это так? Было бы здорово, если я не могу вычислить положение растра против маски, но для меня сейчас это кажется невозможным.

У кого-нибудь есть идея, как достичь этого простым способом?

Cheers.

Answer 1

Я рассмотрел это в своем проекте. Ключ используется группой с точкой поворота. Этот код, по общему признанию незавершенный и в сыром JavaScript, но это должно дать вам хорошую идею:

var Sprite = paper.Group.extend({ 
    _class: 'Sprite', 
    initialize: function Sprite(url, size) { 
     var maskSize = size || new paper.Size(256, 256); 
     var that = this; 

     this._raster = new paper.Raster(url); 
     this._raster.pivot = new paper.Point(); 
     this._raster.on('load', function() { 
      that._spriteSheetWidth = Math.floor(this.size.width/maskSize.width); 
      that.setIndex(that._spriteIndex || 0); 
     }); 
     this._clipRect = new paper.Path.Rectangle(new paper.Point(), maskSize); 

     Sprite.base.call(this, [this._clipRect, this._raster]); 

     this.clipped = true; 

     // Just use a blank point if you want the position to be in the corner 
     this.pivot = new paper.Point(maskSize.divide(2)); 
    }, 

    setIndex: function (index) { 
     if (typeof this._spriteSheetWidth !== "undefined") { 
      // TODO: FINISH SPRITE SHEET IMPLEMENTATION 
     } 
     this._spriteIndex = index; 
    } 
}); 

Я на самом деле не с помощью спрайтов в моем проекте больше, так что я не закончил реализацию. Но сложные концепции должны быть завершены выше. Точно так же, как paper.js реализует опорные точки и обтравочные маски. Позиция объекта - это центр его границ по умолчанию ... это нелегко по множеству причин, так как положение изображения будет меняться при его загрузке и т. Д. ... или при изменении содержимого пути , Поэтому я хотел бы установить стержень 0,0 сразу после создания любого объекта. Следующий раздел ключа состоит в том, что обрезающие маски работают только с группами. И, наконец, вы можете расширить класс Group для создания стандартного класса Sprite.

Нормальное смещение спрайтов this._raster.position.x и this._raster.position.y должно завершить эту реализацию.

Edit: Закончено моя реализация ... https://jsfiddle.net/willstott101/vgxq9kak/