H5中優化碰撞檢測

蘇丹發布于2019-08-22 11:05 / 1673人閱讀

摘要：微信端口的小游戲相信大家已經做了很多類似于碰撞檢測這種也是數不勝數因為障礙物和主角都是圖片也就意味著碰撞檢測實際上是兩個矩形直接是否有交叉的判斷包括這樣的框架也是這樣子做的當然這種方法也無可厚非然而唯一的問題是如果素材障礙物和主角并不能鋪滿

微信端口的小游戲相信大家已經做了很多,
類似于碰撞檢測這種也是數不勝數.因為障礙物和主角都是圖片,也就意味著碰撞檢測實際上是兩個矩形直接是否有交叉的判斷.包括phaser這樣的框架也是這樣子做的.
當然這種方法也無可厚非.

然而, 唯一的問題是如果素材(障礙物和主角)并不能鋪滿整個矩形的話一旦程序檢查到碰撞而實際上兩個素材并沒有真正意義上的接觸就會略顯尷尬,
如下面這個圖所示:

為了方便演示和對比起來更直觀, 我給兩個png圖片加了背景, 如果是簡單的矩形相交判斷這個時候判斷了碰撞就會很尷尬...

所以, 我們需要稍微高級點兒的辦法來解決, 雖然我數學很差, 但是還是要考數學來解決:
用判斷矩形的四條邊是否有與多邊形上的邊相交來替代單純的兩個矩形相交.

在案例中, 因為我的障礙物都比較小而且填的比較滿, 所以就不做拆分(如上圖的綠色的血), 主角有棱有角需要做一下拆分轉換為多邊形.
在程序中我是取障礙物的坐標和主角的坐標來做判斷的, 因此, 獲取主角的坐標就是首要任務, 最快捷的方法就是借住ps的鋼筆工具, 如下圖所示:

用鋼筆工具沿著豬腳的實際圖片區域走一次, 然后把相對坐標點記錄下來. 所謂的相對坐標點是基于該圖片左上角水平和垂直方向的距離,

比如第一個點的坐標是x:42, y:8.

我做這些小游戲的思路是主角和障礙物都在一個canvas上做, 程序先記錄下豬腳的起點坐標然后根據相對坐標即可計算出多邊形的每個點在canvas上的實際坐標了. 拿到實際坐標后我們就可以做公式的運算判斷是否相撞了, 公式如下:

/**
 *@param {Array} point 障礙物4個點坐標的集合
 *@param {String} x 主角的x坐標
 *@param {String} x 主角的y坐標
 *@param {Array} area 主角偏移坐標的集合
 */
function lineJudge(point, x, y, area){
    var p1, p2, p3, p4;
    for(var i = 0; i < 4; i++) {
        p1 = point[i];
        if(3 == i) {
            p2 = point[0]
        }
        else {
            p2 = point[i + 1];
        }
        
        for(var j = 0, lenA = area.length; j < lenA; j++) {
            p3 = [area[j][0] + x, area[j][3] + y];
            if(j == lenA - 1) {
                p4 = [area[0][0] + x, area[0][4] + y];
            }
            else {
                p4 = [area[j + 1][0] + x, area[j + 1][5] + y];
            }
            
            if("boolean" != typeof _getIntersectionPoint(p1, p2, p3, p4)) return true;
        }
    }
    return false;
}

function _getIntersectionPoint(a, b, c, d){
     // 三角形abc 面積的2倍  
    var area_abc = (a[0] - c[0]) * (b[1] - c[1]) - (a[1] - c[1]) * (b[0] - c[0]);  
  
    // 三角形abd 面積的2倍  
    var area_abd = (a[0] - d[0]) * (b[1] - d[1]) - (a[1] - d[1]) * (b[0] - d[0]);   
  
    // 面積符號相同則兩點在線段同側,不相交 (對點在線段上的情況,本例當作不相交處理);  
    if ( area_abc*area_abd>=0 ) {  
        return false;  
    }  
  
    // 三角形cda 面積的2倍  
    var area_cda = (c[0] - a[0]) * (d[1] - a[1]) - (c[1] - a[1]) * (d[0] - a[0]);  
    // 三角形cdb 面積的2倍  
    // 注意: 這里有一個小優化.不需要再用公式計算面積,而是通過已知的三個面積加減得出.  
    var area_cdb = area_cda + area_abc - area_abd ;  
    if (  area_cda * area_cdb >= 0 ) {  
        return false;  
    }  
  
    //計算交點坐標  
    var t = area_cda / ( area_abd- area_abc );  
    var dx= t*(b[0] - a[0]),  
        dy= t*(b[1] - a[1]);  
    return { x: a[0] + dx , y: a[1] + dy };  
}

鑒于手機上性能有限, 可以先用兩個矩形相交來簡單判斷一下, 只有兩個矩形相交的情況下再做線是否和多邊形上邊相交的判斷.

最后, 附上項目高清二維碼, 歡迎大家體驗:

云服務器 GPU云服務器 Android碰撞檢測 java碰撞檢測小球 H5橫豎屏檢測 H5橫豎屏檢測方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91751.html

記一次游戲H5開發經驗

摘要：為了實現物體隨機出現的效果，讓每個物體隨機多少秒后開始出現最后一個物體出現完，多少秒后出現結束畫面等等，需要理清楚各個定時器的關系，并對其添加語義化良好的標記，及時對未完結的定時器進行清除，防止定時器帶來的意想不到的問題。快到年終的時候做了一個以游戲形式展示的h5活動頁，第一次嘗試使用js寫小游戲，很有趣的過程，很寶貴的經驗。效果圖直接上個效果的gif圖，游戲的一小部分效果，錄出...

xingpingz 2019-08-20 15:25 評論0 收藏0
記一次游戲H5開發經驗

摘要：為了實現物體隨機出現的效果，讓每個物體隨機多少秒后開始出現最后一個物體出現完，多少秒后出現結束畫面等等，需要理清楚各個定時器的關系，并對其添加語義化良好的標記，及時對未完結的定時器進行清除，防止定時器帶來的意想不到的問題。快到年終的時候做了一個以游戲形式展示的h5活動頁，第一次嘗試使用js寫小游戲，很有趣的過程，很寶貴的經驗。效果圖直接上個效果的gif圖，游戲的一小部分效果，錄出...

GitChat 2019-08-01 16:35 評論0 收藏0
碰撞檢測

摘要：碰撞檢測剛才回答了一個游戲的問答。心血來潮，就想寫寫碰撞檢測，廢話不多說，直接懟。矩形和矩形的碰撞檢測現有。資料圓形與矩形碰撞檢測圓形與旋轉矩形碰撞檢測屬性橢圓碰撞檢測碰撞檢測剛才回答了一個H5游戲的問答。心血來潮，就想寫寫碰撞檢測，廢話不多說，直接懟。矩形和矩形的碰撞檢測現有rect1 = {x:0,y:0,w:5,h:5};rect2 = {x:10,y:10,w:5,h...

Dogee 2019-08-26 11:48 評論0 收藏0