Phaser 路径轨迹移动图片效果例子-百分百源码网

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

发布时间：01/15 来源：浏览：关键词：

下面我们来看一篇关于Phaser 路径轨迹移动图片效果例子，这个对于做html5游戏开发的朋友会带来不小的帮助哦，具体的如下文介绍。

路径的想法

我们的想法是定义一条路径，然后让一个对象在界面中根据路径移动。

路径原理

实际上在计算机中的路径是由点来构成的，那么我们要绘制出一条路径就需要定义很多点吗？

并不是要定义很多点，我们只需要定义基础的两个或者多个点就能通过Phaser描述出一条路径。

绘制一条路径

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/phaser.min.js"></script>
</head>
<body>
<div id="phaser-example"></div>

});

    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>

让图形根据路径移动

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="js/phaser.min.js"></script>
</head>
<body>
    <div id="phaser-example"></div>

});

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>