Cocos2d-JS加速度計與加速度事件

在不少移動設備的遊戲使用到了加速度計,Cocos2d-JS引擎提供了訪問加速度計傳感器的能力。本節咱們首先介紹一下加速度計傳感器,而後再介紹如何在Cocos2d-JS中訪問加速度計。
加速度計
加速度計是一種可以感應設備一個方向上線性加速度的傳感器。普遍用於航空、航海、宇航及武器的制導與控制中。線加速度計的種類不少,在iOS等移動設備中目前採用的是三軸加速度計,能夠感應設備上X、Y、Z軸方向上線性加速度的變化。以下圖所示,iOS和Android等設備三軸加速度計的座標系是右手座標系,即:設備豎直向上,正面朝向用戶,水平向右爲X軸正方向,豎直向上爲Y軸正方向,Z軸正方向是從設備指向用戶方向。





html

 iOS上三軸加速度計微信



提示 有人將加速度計稱之爲「重力加速度計」,這種觀點有錯誤的。做用於三個軸上的加速度是指全部加速度的總和,包括了由重力產生的加速度和用戶移動設備產生的加速度。在設備靜止的狀況下,這時候的加速度就只是重力加速度。
實例:運動的小球
下面咱們經過一個實例介紹一下若是經過層加速度計事件實現訪問加速度計。該實例場景以下圖所示,場景中有一個小球,當咱們把移動設備水平放置,屏幕向上,而後左右晃動移動設備來改變小球的位置。

app

訪問加速度計實例函數



下面咱們再看看具體的程序代碼,首先看一下app.js文件,它的主要代碼以下: 
網站

[html] view plaincopy在CODE上查看代碼片派生到個人代碼片this

  1. var HelloWorldLayer = cc.Layer.extend({  spa

  2.    

  3.     ctor:function () {  .net

  4.         this._super();  code

  5.         cc.log("HelloWorld init");  orm

  6.         var size = cc.director.getWinSize();  

  7.           

  8.         var bg = new cc.Sprite(res.Background_png);  

  9.         bg.x = size.width/2;  

  10.         bg.y = size.height/2;  

  11.         this.addChild(bg, 0, 0);  

  12.       

  13.         var ball = new cc.Sprite(res.Ball_png);  

  14.         ball.x = size.width/2;  

  15.         ball.y = size.height/2;  

  16.         this.addChild(ball, 10, SpriteTags.kBall_Tag);  

  17.           

  18.         return true;  

  19.     },  

  20.     onEnter: function () {  

  21.             this._super();  

  22.             cc.log("HelloWorld onEnter");  

  23.             var ball = this.getChildByTag(SpriteTags.kBall_Tag);  

  24.   

  25.   

  26.             cc.inputManager.setAccelerometerEnabled(true);                          ①  

  27.           

  28.             cc.eventManager.addListener({                                       ②  

  29.                 event: cc.EventListener.ACCELERATION,                               ③  

  30.                 callback: function(acc, event){                                     ④  

  31.                     var size = cc.director.getWinSize();                                ⑤  

  32.                     var s = ball.getContentSize();                                  ⑥  

  33.                     var p0 = ball.getPosition();  

  34.   

  35.   

  36.                     var p1x =  p0.x + acc.x * SPEED ;                               ⑦  

  37.                     if ((p1x - s.width/2) <0) {                                      ⑧  

  38.                         p1x = s.width/2;                                            ⑨  

  39.                     }  

  40.                     if ((p1x + s.width / 2) > size.width) {                              ⑩  

  41.                         p1x = size.width - s.width / 2;                                     ⑪  

  42.                     }  

  43.   

  44.   

  45.                     var p1y =  p0.y + acc.y * SPEED ;   

  46.                     if ((p1y - s.height/2) < 0) {  

  47.                         p1y = s.height/2;  

  48.                     }  

  49.                     if ((p1y + s.height/2) > size.height) {  

  50.                         p1y = size.height - s.height/2;  

  51.                     }  

  52.                     ball.runAction(cc.place(cc.p( p1x, p1y)));                      ⑫  

  53.                 }  

  54.             }, ball);  

  55.     },  

  56.     onExit: function () {  

  57.             this._super();  

  58.             cc.log("HelloWorld onExit");  

  59.             cc.eventManager.removeListeners(cc.EventListener.ACCELERATION);         ⑬  

  60.     }  

  61. });  

上述代碼①行開啓加速計設備。第②行代碼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課堂微信公共平臺,瞭解最新技術文章、圖書、教程信息

相關文章
相關標籤/搜索