03 移动图像

原文地址：http://www.phaser.io/examples/v2/basics/03-move-an-image。

效果

源代码

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

    function preload() {

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

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

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

    function create() {

        // 使用刚才加载的图像创建一个简单的sprite，然后将它显示在屏幕上。
        image = game.add.sprite(0, 0, 'einstein');

        // 启用ARCADE物理引擎
        game.physics.enable(image, Phaser.Physics.ARCADE);
        // 将图像的水平速度设置为150
        image.body.velocity.x = 150;
    }

    function update() {
        // 使图像在屏幕中来回振动
        if (image.x > 200)
            image.body.velocity.x = -150;
        else if (image.x < 0)
            image.body.velocity.x = 150;

    }
}

解释

Phaser 支持一些不同的物理系统，自身包含 Arcade Physics，Ninja Physics 和 P2.JS Full-Body Physics。其中最简单的是 Arcade 物理系统，它是一个对手机浏览器而言简单轻量高效的物理系统。

首先必须先启动物理系统，然后再启用每个我们想运用物理效果的子图形或组。之后该子图形会获得一个新的 body 属性，它是 ArcadePhysics.Body 的一个实例。body 对象拥有很多有用的属性，本例中将 x 方向的速度设置为 150 像素/秒。

发布时间：2016/7/30 下午9:56:41  阅读次数：4146