Question

我想使用 Phaser Javascript Framework

创建类似的内容

这是使用画布创建梯形图像变换的参考样本

以下是使用Phaser.js的当前代码示例并使用canvas作为渲染器

// custom sprite class
    SkewSpriteSheet = function (game, x, y, image, atlas) {

        this.skew = new Phaser.Point(0, 0);

        if (typeof atlas != 'undefined') {
            Phaser.Sprite.call(this, game, x, y, image, atlas);
        } else {
            Phaser.Sprite.call(this, game, x, y, image);
        }

        game.add.existing(this);
    };


    SkewSpriteSheet.prototype = Object.create(Phaser.Sprite.prototype);

    SkewSpriteSheet.prototype.constructor = SkewSpriteSheet;

    SkewSpriteSheet.prototype.convertToTrapezoid = function() {


        function interpolate(x1, y1, x2, y2, t) {
            return x1 + (x2 - x1) * t;
        }

        var w = this.width;
        var h = this.height - 20;
        var y = this.y;
        var x = this.x;
        var factor = 50;

        // get canvas context
        var ctx = this.game.context;

        var startPoint = x + w * 0.5 * (factor*0.01),
               xi, yi, scale = this.height / h,
               startLine = y,
               endLine = y + h;

           for(; y < endLine; y++) {

               xi = interpolate(startPoint, y, x, endLine, (y - startLine) / h);
               yi = (y * scale + 0.5) | 0;

               // used to redraw the image using the context
               ctx.drawImage(this.texture.baseTexture.source, 0, yi, this.width, 1,
                                  xi, y, w - xi * 2, 1);
           }

    }



    function Game(game) {
        // phaser game
        this._GAME = game;
    };

    Game.prototype = {


        create : function () {


            // add a new sprite
            this._BACKCARD = new SkewSpriteSheet(this._GAME, 400, 100, 'back');
            // convert image to trapezoid
            this._BACKCARD.convertToTrapezoid();


        }
    }

有人可以使用phaser.js帮助或提供使用上述链接创建相同输出的正确方法的建议

提前致谢

Phaser Custom Sprite Trapezoidal Shape

0 个答案: