Question

我正在Paper.js中开展我的项目。

在它的部分，我需要使用带有动画的精灵。

为了说明它，我有一个可以在屏幕上无处不在的太空船，并且有时会发生扭曲的影响。

我准备了一个10帧的spritesheet，我想要的只是使用Paper.js RASTER类加载它并在每一帧上设置动画。

问题在于，我不知道如何计算它们......

加载栅格时

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

当我需要看第一帧时，我看到一张很长的图像的中心。

我的想法是使用带有包含面具（正方形）的组

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

我可以动态更改位置并同时为传播设置动画。

有可能吗？如果我不能计算光栅对着面具的位置，那会很酷，但对我来说现在似乎是不可能的。

任何人都知道如何以简单的方式实现这一目标？

干杯。

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的正常精灵转移应完成此实施。

修改：完成了我的实施...... https://jsfiddle.net/willstott101/vgxq9kak/

paper.js中的精灵动画

1 个答案: