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  阅读次数:4711

2006 - 2024,推荐分辨率 1024*768 以上,推荐浏览器 Chrome、Edge 等现代浏览器,截止 2021 年 12 月 5 日的访问次数:1872 万 9823 站长邮箱

沪 ICP 备 18037240 号-1

沪公网安备 31011002002865 号