天天看點

手把手教你使用PhysicsEditor來輔助制作Box2D剛體



本篇教程需要讀者對Box2D有了一些基本了解,如果過程中有什麼概念不清楚,請參考Box2Dv2.3.0 使用者指南中的相關章節進行學習。

我們知道,在利用Box2D引擎開發遊戲的時候,對于規則的物體(剛體),比如圓形,矩形的物體,比較容易完成制作,但是對于稍微不規則的物體,例如不規則的多邊形,甚至是具有弧線的圖形,制作起來就相對比較棘手,當然如果你有足夠的耐心,用b2PolygonShape一個一個頂點去測量和定義的話,也是能夠完成的(甚至弧線圖形也可以劃分成近似的邊界點),隻不過可能耗時會比較長而已。

這篇文章我們就來學習如何使用PhysicsEditor(以下簡稱PE)來輔助我們友善地建立剛體。

首先我們來看一下PE的界面:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

我們看到頂部一排菜單,前三個不用多說,第四個(Publish)和第五個(Publishas)按鈕用來将我們制作完成的剛體資訊輸出成我們目标架構支援的導入格式,最後一個菜單(Add Sprites)用來添加剛體形狀圖檔。

我們可以在右側Parameter的Exporter下拉清單中選擇我們的目标架構:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

例如我們要在Box2D中使用,就選擇“Box2Dgeneric(PLIST)”。

需要注意的一點是,我們在建立打開PE準備開始制作之前,一定要先選擇好目标架構再動手,因為不同的架構參數清單中的選項、按鈕和參數類型可能不同。

這裡我們選擇好架構(Box2Dgeneric(PLIST)),然後可以使用Add Sprites按鈕來添加一些剛體的形狀(或者我們可以将剛體的形狀圖檔拖拽至左側的Shapes清單中)。

下面我們用幾張比較有代表性的圖檔來說明:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體
手把手教你使用PhysicsEditor來輔助制作Box2D剛體
手把手教你使用PhysicsEditor來輔助制作Box2D剛體
手把手教你使用PhysicsEditor來輔助制作Box2D剛體

我們将這些圖檔添加到左側的Shapes清單中:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

添加好之後我們來看右側Parameters一列中可以調節的參數。

首先是PTM-Ratio:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

熟悉Box2D的應該知道Box2D中的基本長度機關為米,而裝置的螢幕上長度基本機關為像素,PTM-Ratio就是二者的轉換比例。

下面是圖檔參數:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

圖檔參數中包括Filename,Filename右側有兩個按鈕,一個是為目前剛體增加圖檔,一個是删除添加的圖檔,當我們需要制作動畫的時候,剛體在不同幀具有不同的形狀,這個時候我們可以将不同幀的形狀添加進來,分别為每個形狀建立碰撞多邊形。Size是圖檔大小,下面的Pixel和Relative是剛體的錨點(anchorpoint)的位置,可以通過像素值指定,也可以通過百分比來指定(左側的值是x值,右側是y值)。

再下面的Fixtureparameters中包括了Fixture的密度,彈性,摩擦力等屬性,包括我們可以指定Fixture是不是用作傳感器,碰撞分組,碰撞标記(Categorybits和Maskbits),碰撞标記一列中左側的Bit’sname用來友善我們用自己能夠了解和記住的名字來命名碰撞标記。

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

下面我們來為剛體建立碰撞多邊形,首先是圓形的網球,我們在左側的清單中選中網球,然後點選中間部分上面的AddCircle(

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

)按鈕,我們看到,中間的畫布上,網球的左下角有一個半透明的紅色圓形區域:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

我們拖拽紅色圓形右邊的白色小圓圈來調整圓形的半徑,并且通過拖動紅色圓形來調整其位置,使其恰好覆寫網球圖檔:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

我們注意到,網球的左下角還有一個中間帶有十字的紫色圓形,這個代表剛體的錨點位置,我們可以通過拖動這個圓形來修改錨點的位置,也可以通過右側的Parameters中的參數來修改(前面介紹過的)。錨點的位置根據我們的遊戲元素的需要進行設定。

接着我們來制作鐘表的碰撞多邊形。

我們在左側清單中選擇鐘表圖形,然後點選AddPolygon(

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

)按鈕,添加一個多邊形:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

在左下角出現了一個三角形的區域,我們在紅色區域外的位置輕按兩下可以添加節點,在任意節點上輕按兩下可以删除該節點,我們對多邊形進行修改得到下面的效果(如果覺得圖檔比較小不友善編輯,可以使用最下方的縮放工具進行放大):

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

接着我們處理錘子形狀,我們也可以通過AddPolygon按鈕來建立,但是我們介紹一個更好用的工具,在Add Polygon旁邊的像魔棒一樣的工具Shape tracer(

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

),點選之後,彈出下面的菜單:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

我們可以看到,PE已經幫我們建立了一個大緻的碰撞多邊形,菜單中的Tolerance決定了取樣的精确程度,這個值越高,精确度越差,生成的碰撞多邊形的節點數也就越少,但是計算效率就越高。我們看到這裡生成的多邊形不理想,可以适當降低Tolerance的值。另外Alphathreshold決定了邊緣的處理方式,我們留到處理心形圖檔的時候再去介紹。Animation phase和framemode用來針對同一個剛體的不同幀的形狀進行設定。我們适當降低Tolerance後,點選确定的到下面的效果:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

注意我們在确定之後仍然可以做手工調節,也就是相當于Shapetracer替我們做了一個粗略的形狀,當然如果覺得滿意,就不需要在調整了。

最後,我們來處理心形圖案,依然是使用Shapetracer:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

我們先将Alphathreshold設定為0,Tolerance設為1.20看下效果,發現實際生成的多邊形比圖形本身大了一圈,這是因為圖形本身帶有陰影,導緻檢測的時候也算作圖形了,我們再将Alphathreshold設定為255(最大值),看到這回生成的多邊形就正确了:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

我們知道陰影的不透明度小于100%(或者說是Alpha通道小于255),是以我們設定Alphathreshold為255,就過濾掉了不透明度小于100%的區域,也就是陰影部分,這就是這個選項的原理。

好了,所有的碰撞多邊形都制作完成了,如果需要,還可以為這些剛體設定密度,彈力,摩擦力,碰撞過濾标記等等(前面已經介紹過了),都完成後,我們點選Publish按鈕,将結果導出成Box2D中支援的plist檔案即可:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

導出後的檔案内容中可以看到我們設定的各種參數以及碰撞多邊形的節點資訊:

手把手教你使用PhysicsEditor來輔助制作Box2D剛體

好了,關于PE的用法基本就是這些,如果有問題歡迎留言。