Cocos2d-JS加速度计与加速度事件

在很多移动设备的游戏使用到了加速度计，Cocos2d-JS引擎提供了访问加速度计传感器的能力。本节我们首先介绍一下加速度计传感器，然后再介绍如何在Cocos2d-JS中访问加速度计。
加速度计
加速度计是一种能够感应设备一个方向上线性加速度的传感器。广泛用于航空、航海、宇航及武器的制导与控制中。线加速度计的种类很多，在iOS等移动设备中目前采用的是三轴加速度计，可以感应设备上X、Y、Z轴方向上线性加速度的变化。如下图所示，iOS和Android等设备三轴加速度计的坐标系是右手坐标系，即：设备竖直向上，正面朝向用户，水平向右为X轴正方向，竖直向上为Y轴正方向，Z轴正方向是从设备指向用户方向。

 iOS上三轴加速度计

提示 有人将加速度计称之为“重力加速度计”，这种观点有错误的。作用于三个轴上的加速度是指所有加速度的总和，包括了由重力产生的加速度和用户移动设备产生的加速度。在设备静止的情况下，这时候的加速度就只是重力加速度。
实例：运动的小球
下面我们通过一个实例介绍一下如果通过层加速度计事件实现访问加速度计。该实例场景如下图所示，场景中有一个小球，当我们把移动设备水平放置，屏幕向上，然后左右晃动移动设备来改变小球的位置。

访问加速度计实例

下面我们再看看具体的程序代码，首先看一下app.js文件，它的主要代码如下： 

var HelloWorldLayer = cc.Layer.extend({

    ctor:function () {
        this._super();
        cc.log("HelloWorld init");
        var size = cc.director.getWinSize();

        var bg = new cc.Sprite(res.Background_png);
        bg.x = size.width/2;
        bg.y = size.height/2;
        this.addChild(bg, 0, 0);

        var ball = new cc.Sprite(res.Ball_png);
        ball.x = size.width/2;
        ball.y = size.height/2;
        this.addChild(ball, 10, SpriteTags.kBall_Tag);

        return true;
    },
    onEnter: function () {
            this._super();
            cc.log("HelloWorld onEnter");
            var ball = this.getChildByTag(SpriteTags.kBall_Tag);


            cc.inputManager.setAccelerometerEnabled(true);                          ①

            cc.eventManager.addListener({                                       ②
                event: cc.EventListener.ACCELERATION,                               ③
                callback: function(acc, event){                                     ④
                    var size = cc.director.getWinSize();                                ⑤
                    var s = ball.getContentSize();                                  ⑥
                    var p0 = ball.getPosition();


                    var p1x =  p0.x + acc.x * SPEED ;                               ⑦
                    if ((p1x - s.width/2) <0) {                                      ⑧
                        p1x = s.width/2;                                            ⑨
                    }
                    if ((p1x + s.width / 2) > size.width) {                              ⑩
                        p1x = size.width - s.width / 2;                                     ⑪
                    }


                    var p1y =  p0.y + acc.y * SPEED ;
                    if ((p1y - s.height/2) < 0) {
                        p1y = s.height/2;
                    }
                    if ((p1y + s.height/2) > size.height) {
                        p1y = size.height - s.height/2;
                    }
                    ball.runAction(cc.place(cc.p( p1x, p1y)));                      ⑫
                }
            }, ball);
    },
    onExit: function () {
            this._super();
            cc.log("HelloWorld onExit");
            cc.eventManager.removeListeners(cc.EventListener.ACCELERATION);         ⑬
    }
});

上述代码①行开启加速计设备。第②行代码cc.eventManager.addListener是通过快捷方式注册事件监听器对象。第③行代码是设置加速度事件cc.EventListener.ACCELERATION。第④行代码是设置加速度事件回调函数。第⑤行代码是获得屏幕的大小。第⑥行代码是获得小球的大小。
第⑦行代码是var p1x =  p0.x + acc.x * SPEED是获得小球的x轴方向移动的位置，但是需要考虑左右超出屏幕的情况，第⑧行代码是 (p1x - s.width/2) <0是判断超出左边屏幕，这种情况下我们需要通过第⑨行代码p1x = s.width/2重新设置它的x轴坐标。第⑩行代码(p1x + s.width / 2) > size.width是判断超出右边屏幕，这种情况下我们需要通过第⑪行代码p1x = size.width - s.width / 2重新设置它的x轴坐标。类似的判断y轴也需要，代码就不再解释了。
回调函数中的参数acc，它是cc.Acceleration类的实例，cc.Acceleration是加速度计信息的封装类，它有4个属性：
x。属性是获得x轴方向上的加速度。单位为g，1g ＝ 9.81 m s−2。
y。属性是获得y轴方向上的加速度。
z。属性是获得z轴方向上的加速度。
timestamp。时间戳属性，用来表示事件发生的相对时间。 
重新获得小球的坐标位置后，通过第⑫行代码ball.runAction(cc.place(cc.p( p1x, p1y)))是执行一个动作使小球移动到新的位置。

上述onExit()函数是退出层时候回调，我们在代码第⑬行注销所有加速度事件的监听。

 

更多内容请关注最新Cocos图书《 Cocos2d-x实战：JS卷——Cocos2d-JS开发》

本书交流讨论网站：http://www.cocoagame.net

欢迎加入Cocos2d-x技术讨论群：257760386

更多精彩视频课程请关注智捷课堂Cocos课程：http://v.51work6.com

智捷课堂现推出Cocos会员，敬请关注： http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&amp;categoryId=0

 

 

 

 

 

《Cocos2d-x实战 JS卷》现已上线，各大商店均已开售：

京东：http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台，了解最新技术文章、图书、教程信息