1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    怎樣在CocosCreator中使用游戲手柄_javascript技巧

    來源:腳本之家  責任編輯:小易  

    1.場景布置

    2. 添加手柄監聽器

    1.監聽事件的變化

    由原先的mouse系列的轉換為touch系列的

      touchstart 觸摸按下,相當于 mousedown touchmove 觸摸移動,相當于 mousemove touchend 觸摸抬起,相當于 mouseup touchcancel 觸摸取消,被其他事件終止,相當于按下了ESC鍵

    2.坐標設定

    當觸摸按下隨推動位置變化(要用世界坐標轉換),觸摸抬起后回歸原位(直接設定0,0坐標默認相對坐標)。
    setPosition()設定的為相對父節點的坐標

      onTouchMove(e:cc.Event.EventTouch){
    
             // e.getLocation() 為點擊的位置,是世界坐標
            // 需要把世界坐標轉換為本地坐標
            
            let parent=this.node.parent;// 父節點 (圓形底盤)
            let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
            this.node.setPosition(pos);
    
        }
    
        onTouchCancel(){
          this.node.setPosition(cc.v3(0,0,0));
        }

    3. 將手柄限制在托盤內

    使用方位角來定位邊緣位置。pos.normalize()方法返回該點相對于(0,0)的(cos, sin),返回Vec2對象。

    let parent=this.node.parent;// 父節點 (圓形底盤)
    let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
    // 該點所在的方位 (cos, sin)
    let direction:cc.Vec2=pos.normalize();
    // 限制在邊界之內
    let maxR = 100-20;   
    //點擊的點到托盤中央的距離
    let r : number = cc.Vec2.distance(pos, cc.v2(0,0));
    
    if( r > maxR)
    {
    	pos.x = maxR * direction.x; 
    	pos.y = maxR * direction.y;
    }
    // cc.log("相對位置: " + pos.x + ", " + pos.y);
    this.node.setPosition( pos);

    3. 添加小車的控制

    1. 小車的旋轉

    cc.Node.angle
    表示旋轉的角度,逆時針為正
    官方建議不要使用 cc.Node.rotationa.signAngle( b)
    a和b為兩個向量,返回值是一a,b的夾角 (弧度值)
    radian = a.signAngle(b)
    (1) a位于b的順時針方向:角度為正
    (2) a位于b的逆時針方向:角度為負

    旋轉實現:
    添加屬性 car :cc.Node=null;獲取小車節點。
    cc.find()注意參數用"/"除號的斜杠,否則識別不到

    onLoad () {
         this.car=cc.find("Canvas/小車");
    }
    let radian=pos.signAngle(cc.v2(1,0));//計算點擊位置與水平的夾角
    let ang=radian/Math.PI*180;//弧度制轉換為角度值
    this.car.angle=-ang;//逆時針為正,所以這里要調整至順時針

    2. 小車的移動 .

      在小車的腳本中添加前進的動畫,update(dt)方法中讓x和y每幀加對應的速度在x和y軸的分量。 在手柄控制腳本中獲取小車節點下的腳本。通過上面獲取的direction的方向角,傳入小車腳本中。通過控制direction來控制小車的移動。

    小車運動腳本

    direction: cc.Vec2 = null;
    speed: number = 3;
    
    onLoad() {
    
    }
    
    start() {
    
    }
    
    update(dt) {
    	if (this.direction == null) return; //靜止
    	let dx = this.speed * this.direction.x;
    	let dy = this.speed * this.direction.y;
    
    	let pos = this.node.getPosition();
    	pos.x += dx;
    	pos.y += dy;
    	this.node.setPosition(pos);
    }

    手柄控制腳本

    car: cc.Node = null;
    carscript: cc.Component = null;
    // LIFE-CYCLE CALLBACKS:
    
    onLoad() {
    	this.car = cc.find("Canvas/小車");
    	this.carscript = this.car.getComponent("CarMove");
    }
    
    start() {
    	this.node.on('touchstart', this.onTouchStart, this);
    	this.node.on('touchmove', this.onTouchMove, this);
    	this.node.on('touchend', this.onTouchCancel, this);
    	this.node.on('touchcancel', this.onTouchCancel, this);
    }
    
    onTouchStart() {
    
    }
    
    onTouchMove(e: cc.Event.EventTouch) {
    
    	// e.getLocation() 為點擊的位置,是世界坐標
    	// 需要把世界坐標轉換為本地坐標
    
    	// let parent=this.node.parent;// 父節點 (圓形底盤)
    	// let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
    	// this.node.setPosition(pos);
    
    	let parent = this.node.parent; // 父節點 (圓形底盤)
    	let pos: cc.Vec2 = parent.convertToNodeSpaceAR(e.getLocation());
    	// 該點所在的方位 (cos, sin)
    	let direction: cc.Vec2 = pos.normalize();
    	// 限制在邊界之內
    	let maxR = 100 - 20;
    
    	let r: number = cc.Vec2.distance(pos, cc.v2(0, 0));
    
    	if (r > maxR) {
    		pos.x = maxR * direction.x;
    		pos.y = maxR * direction.y;
    	}
    	// cc.log("相對位置: " + pos.x + ", " + pos.y);
    	this.node.setPosition(pos);
    
    	let radian = pos.signAngle(cc.v2(1, 0)); //計算點擊位置與水平的夾角
    	let ang = radian / Math.PI * 180; //弧度制轉換為角度值
    	this.car.angle = -ang; //逆時針為正,所以這里要調整至順時針
    
    	this.carscript.direction = direction;
    
    }
    
    onTouchCancel() {
    	this.node.setPosition(cc.v3(0, 0, 0));
    	//將方向置空,使汽車停止
    	this.carscript.direction = null;
    
    }
    // update (dt) {}

    最終效果

    以上就是怎樣在CocosCreator中使用游戲手柄的詳細內容,更多關于CocosCreator手柄實例的資料請關注真格學網其它相關文章!

    您可能感興趣的文章:詳解cocoscreater預制體prefab如何在CocosCreator中利用常駐節點做圖層管理游戲開發中如何使用CocosCreator進行音效處理CocosCreator ScrollView優化系列之分幀加載詳解CocosCreator項目結構機制如何使用CocosCreator對象池CocosCreator如何實現劃過的位置顯示紋理整理CocosCreator常用知識點全面講解CocosCreator熱更新CocosCreator經典入門項目之flappybirdCocosCreator通用框架設計之網絡如何用CocosCreator實現射擊小游戲

  3. 本文相關:
  4. java和js實現的洗牌小程序
  5. javascript實現前端分頁功能
  6. 對字符串進行html編碼和解碼的javascript函數
  7. javascript改變css樣式的方法匯總
  8. 如何利用javascript編寫一個格斗小游戲
  9. bootstrap組件學習之導航、標簽、面包屑導航(精品)
  10. javascript 實現打印,打印預覽,打印設置
  11. js使用正則表達式實現常用的表單驗證功能分析
  12. js 賦值包含單引號雙引號問題的解決方法
  13. javascript insertafter() 實現函數代碼
  14. 公司里使用cocos2d制作游戲使用的js腳本還是C++呢...
  15. 想去學習用cocos creator做游戲,但是沒學過JavaSc...
  16. cocos creator如何判斷一樣的圖形重合,不用坐標,...
  17. 用cocos creator制作微信小游戲進行分包加載時,其...
  18. 為什么cocos creator 不選擇兼容c#而是只有js
  19. Cocos Creator 和 Cocos2d-x Js 之間到底是啥關系
  20. 想學cocoscreator,請教學習路線,先要學cocos2d-js嗎
  21. cocoscreator怎么接入anysdk framework
  22. Cocos Creator 怎么用js代碼實現微信授權登陸
  23. cocos creator怎樣在代碼中創建精靈
  24. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全基礎知識javascript類庫表單特效廣告代碼網頁特效黑客性質javascript技巧domnode.jsjs其它首頁javascript詳解cocoscreater預制體prefab如何在cocoscreator中利用常駐節點做圖層管理游戲開發中如何使用cocoscreator進行音效處理cocoscreator scrollview優化系列之分幀加載詳解cocoscreator項目結構機制如何使用cocoscreator對象池cocoscreator如何實現劃過的位置顯示紋理整理cocoscreator常用知識點全面講解cocoscreator熱更新cocoscreator經典入門項目之flappybirdcocoscreator通用框架設計之網絡如何用cocoscreator實現射擊小游戲java和js實現的洗牌小程序javascript實現前端分頁功能對字符串進行html編碼和解碼的javascript函數javascript改變css樣式的方法匯總如何利用javascript編寫一個格斗小游戲bootstrap組件學習之導航、標簽、面包屑導航(精品)javascript 實現打印,打印預覽,打印設置js使用正則表達式實現常用的表單驗證功能分析js 賦值包含單引號雙引號問題的解決方法javascript insertafter() 實現函數代碼js刷新頁面方法大全js刪除數組里的某個元素方法js中settimeout()的用法詳解js截取字符串常用方法詳細整理js頁面跳轉常用的幾種方式js打開新窗口的2種方式js數組與字符串的相互轉換方法js設置cookie、讀取cookie、刪除js 將json字符串轉換為json對象的js保留兩位小數方法總結新手快速上手webpack4打包工具的使用詳解javascript 快捷鍵設置實現代碼javascript實現的像java、c#之類的sleep暫5種javascript腳本加載的方式微信小程序mui側滑導航菜單示例(popup彈出javascript中引用vs復制示例詳析淺談nodename,nodevalue,nodetype,typeof理解javascript的prototype屬性javascript中setinterval的用法總結js關閉子窗口并且刷新上一個窗口的實現示
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载