04 跟随光标移动的图像

原文地址：http://www.phaser.io/examples/v2/basics/04-image-follow-input。

效果

源代码

window.onload = function () {
    var game = new Phaser.Game(600, 400, Phaser.AUTO, 'phaser_container', { preload: preload, create: create, 
                            update: update, render: render });

    function preload() {

        //  在preloader函数中可以加载所需的素材

        //  我们加载了一张图像。第一个参数是该图像在代码中的唯一名称，我们可以通过这个名称使用这个图像。

        //  第二个参数是图像的相对URL地址
        game.load.image('phaser', 'images/phaser/phaser.png');

    }

    var sprite;

    function create() {

        //  启用Arcade Physics系统才能使sprite移动
        game.physics.startSystem(Phaser.Physics.ARCADE);

        sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
        sprite.anchor.set(0.5);

        //  使这个sprite可以处理物理效果
        game.physics.arcade.enable(sprite);

    }

    function update() {

        //  如果sprite离开光标的距离超过8px，则朝光标移动
        //  否则则保持静止
        if (game.physics.arcade.distanceToPointer(sprite, game.input.activePointer) > 8) {
            game.physics.arcade.moveToPointer(sprite, 300);
        }
        else {
            sprite.body.velocity.set(0);
        }
    }

    function render() {

        game.debug.inputInfo(32, 32);

    }
}

解释

moveToPointer(displayObject, speed, pointer, maxTime)方法

以速度speed将displayObject移动到pointer。如果没有指定pointer，则默认使用Phaser.Input.activePointer。如果指定了maxTime，则会调整速度大小（覆盖你设定的speed），使得在maxTime时间内到达目标。

inputInfo(x, y, color)方法

显示Input对象的调试信息。x、y表示位置，color表示文字颜色，默认为白色。

发布时间：2016/7/31 下午9:19:23  阅读次数：5702