我正在製作HTML5和Javascript平臺遊戲。此時，地圖上的所有塊都作爲正方形處理。當方塊不是精確的正方形/長方形時，此方法是「醜陋的」。如何檢測與曲線的碰撞
檢查這個形象我做獲得更好的理解我的觀點：
案例一：的「底部保險槓」是觸摸該envolves所以運動停止塊正方形。
案例二：如果我使用與上面相同的方法，當玩家跳躍時，在「頂部保險槓」甚至接觸到該塊之前停止移動。
我應該如何接近情況下，兩個？我知道我必須檢查「Top Bumper」是否碰撞或者在曲線和其他2個邊緣之間的區域內。
該曲線如何？如何根據塊座標（x，y）和尺寸（寬度，高度）爲其生成函數。
注意：我想避免檢查曲線每一點的碰撞，因爲這對於CPU來說是非常昂貴的。
有很多可能性，這取決於你想如何「完美」你希望你的碰撞是如何攜帶和勞動密集型的技術是。這絕不是全面的，這些只是我親自評估的。我個人使用前兩個。
使用線段來近似您的曲線。沿曲線創建「頂點」，並從每一對中創建線段。您已經知道如何針對軸對齊方塊進行測試，移動到測試以查看是否有任何角色點位於對撞機線段「後面」（類似於檢查點是否位於飛機後面），這不是一個巨大飛躍， 。你可以得到令人驚訝的準確和高性能的結果（取決於你生成線段的細化程度），最難的部分是首先生成碰撞圖。我選擇了手動定義段，我認爲這是一個錯誤。如果我要再做一次，我可能會嘗試找到一種方法來生成線段，給出一些關於我想要的粒度的設置。
計算曲線的輪廓，併爲曲線的每個像素創建1px碰撞體1px。這是你的碰撞圖。使用圓或省略號表示角色的碰撞網格，並檢查碰撞體和角色之間的距離。這簡化了計算頗多，雖然我們正在談論可能計算的很多（每個像素一個檢查），很多的優化可以通過積極地在空間上劃分你的世界（斌，BSP，等等）來了。這一代的圖像邊緣檢測相對簡單，因此您可以使用近乎無縫的解決方案。我在間諜獵人中使用了這個技巧，藝術家非常欣賞能夠製作藝術而不必擔心碰撞的能力。
像素的diff。我從來沒有真正做到這一點，但我已經看到了其中的角色精靈和精靈瓦被覆蓋在內存 ，如果有非透明區域的任一 之間的任何重疊，表示 「pdiffing」會談碰撞。根據你的精靈的大小，這可能會變得非常昂貴。它也可能只適用於基於瓦片的遊戲。
如果只檢查四個bumbers，基於像素的方法可能甚至是最快和最簡單的方法。 –
我喜歡這個問題。你如何生成曲線（和其他邊界）？它們是圖像還是由數學函數創建的？您期望使用多少種不同的塊？ –
@ChadMcGrath嘿，謝謝你的回覆。我想使用大約10-15個不是完美的正方形/長方形的不同塊。我正在使用圖像PNG，但我也有這種圖像（SVG），我不使用的矢量版本。 –
有一些代碼用於檢測與貝塞爾曲線的碰撞，這是svg用來生成它們的原因。基本上，它看起來像從函數的導數中找到最小/最大值。不知道是否還有一個JavaScript庫，但如果你的SVG路徑沒有太多的部分，我認爲這是非常可行的，取決於你在屏幕上有多少曲線（你的一個圖像看起來只有1條曲線）。鋸齒狀的，我們可以檢測線段。我們也可以通過僅查找與邊框相撞的物體來作弊。 –