[FairyGUI]手遊座標軸實現思路
本次使用FairyGUI實現的是大逃殺類遊戲畫面上部的座標軸,座標軸用於方便玩家之間合作交流。
大概思路是:
使用一塊圖形作為捕獲觸控的觸控板,將座標軸看作迴圈滾動列表。
在程式碼裡記錄每次拖動的橫向距離,將距離換算成滾動列表的橫向滾動率percX。
percX = (當前滾動位置 - 列表寬)/(滾動面板內容物寬 - 列表寬)
將所記錄的橫向拖動距離看做角度,要求的便是每次拖動產生的deltaDegree相當於滾動面板多少的deltaPercX?
具體換算需根據列表寬、表內Item寬以及滾動面板內容物寬來調整,我們以一種情況為例子;
list.width (列表寬)= X,Item.width (表內物體寬)= 4X,scrollPane.contentWidth(滾動面板內容物寬) = 24X
滾動面板寬實際情況可以直接輸出檢視,本例子中滾動列表的滾動情況為下圖所示
(每當scrollPane,percX=0時,會自動滾動到13的位置;當scrollPane.percX=1時會滾到12的位置)
每個X寬代表90°,一個item寬為4X代表360°,將每個item的寬看做一個圓的周長,則有:
①deltaDegree / π = deltaX / π * r
②2 * π * r = 4 * X
③deltaPercX = deltaX / ( scrollPane.contentWidth - list.width )
結合3個式子便可求出deltaPercX,將變化的滾動率加上原滾動率就好了。
還需要注意的是,每次改變percX需要判斷是否在(0,1)這個範圍,如果出界可以模仿上圖中預設的滾動方式,如果覺得預設的緩衝滾動效果不佳可以直接禁用。
以上是將觸控板的拖動距離當做角度來使列表進行滾動的方法。其實還可以將拖動距離換算至(0,1)的範圍當做percX直接滾動列表,再將percX換算為degree控制物體轉動。換算方法是將每滾動4X距離看做轉動360°,依據當前percX計算出當前X位置。將當前位置與4進行模運算,再乘上360就是所需度數了。