Phaser 路径轨迹移动图片效果例子

<script>
    // 创建游戏界面
    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {

    });

    var PhaserGame = function () {
        this.bmd = null;
        this.points = {
            'x': [ 32, 600 ],
            'y': [ 240, 240 ]
        };
    };

    PhaserGame.prototype = {
        create: function () {
            this.stage.backgroundColor = '#204090';
            this.bmd = this.add.bitmapData(this.game.width, this.game.height);
            this.bmd.addToWorld();

            // 生成不同y位置
            var py = this.points.y;
            for (var i = 0; i < py.length; i++) {
                py[i] = this.rnd.between(32, 432);
            }
            this.bmd.clear();
            var x = 1 / game.width;

            // 通过X轴生成路径
            for (var i = 0; i <= 1; i += x) {
                // 线性算法生成路径点
                var px = this.math.linearInterpolation(this.points.x, i);
                var py = this.math.linearInterpolation(this.points.y, i);

                // 绘制线条
                this.bmd.rect(px, py, 2, 2, 'rgba(255, 255, 255, 1)');
            }

            /* debug */
            for (var p = 0; p < this.points.x.length; p++) {
                this.bmd.rect(this.points.x[p]-3, this.points.y[p]-3, 6, 6, 'rgba(255, 0, 0, 1)');
            }
        }

    };
    game.state.add('Game', PhaserGame, true);
</script>
</body>
</html>

<script>
    // 创建游戏界面
    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {

    });

    var PhaserGame = function () {

        this.bmd = null;

        this.points = {
            'x': [ 32, 128, 256, 384, 512, 608 ],
            'y': [ 240, 240, 240, 240, 240, 240 ]
        };

        this.preload = function() { // 当预加载数据完成后，执行create函数
            game.load.image('opensource', 'images/opensource.jpg');
        }
    };

    PhaserGame.prototype = {

        create: function () {

            this.stage.backgroundColor = '#204090';

            this.bmd = this.add.bitmapData(this.game.width, this.game.height);
            this.bmd.addToWorld();

            var py = this.points.y;

            for (var i = 0; i < py.length; i++)
            {
                py[i] = this.rnd.between(32, 432);
            }
            opensource = game.add.sprite(0, 0, 'opensource');
            tween = game.add.tween(opensource).to(
                    {   }, 10, Phaser.Easing.Quartic.In, false ,0 , 0)

            this.plot();

        },

        plot: function () {

            this.bmd.clear();

            var x = 1 / game.width;

            for (var i = 0; i <= 1; i += x)
            {
                var px = this.math.linearInterpolation(this.points.x, i);
                var py = this.math.linearInterpolation(this.points.y, i);

//                var px = this.math.bezierInterpolation(this.points.x, i);
//                var py = this.math.bezierInterpolation(this.points.y, i);

                var px = this.math.catmullRomInterpolation(this.points.x, i);
                var py = this.math.catmullRomInterpolation(this.points.y, i);

                this.bmd.rect(px, py, 1, 1, 'rgba(255, 255, 255, 1)');

                console.log(px%2);
                if(px%8 > 6){
                    tween.to(
                            {x:px,y:py   }, 10, Phaser.Easing.Linear.In, false ,0 , 0);

                }

            }
            tween.start();

            /* debug */
            for (var p = 0; p < this.points.x.length; p++)
            {
                this.bmd.rect(this.points.x[p]-3, this.points.y[p]-3, 6, 6, 'rgba(255, 0, 0, 1)');
            }
        }

    };

    game.state.add('Game', PhaserGame, true);
</script>
</body>
</html>