移動(dòng)開發(fā)游戲中使用到的觸摸游戲搖桿在iPhone上是非常普遍的，畢竟是全觸摸屏手機(jī)，今天MOMO 通過(guò)一個(gè)小例子和大家討論Unity3D 中如何自定義一個(gè)漂亮的全觸摸游戲搖桿。
值得高興的是，Unity3D 游戲引擎的標(biāo)準(zhǔn)資源中已經(jīng)幫助我們封裝了一個(gè)游戲搖桿腳本，所以實(shí)現(xiàn)部分的代碼可以完全借助它的，具體調(diào)用需要我們自己來(lái)。
Joystick.js是官方提供的腳本，具體代碼如下，有興趣的朋友可以仔細(xì)研究研究，MOMO就不多說(shuō)啦。哇咔咔～
[代碼]js代碼：
| 001 |
////////////////////////////////////////////////////////////// |
| 003 |
// Penelope iPhone Tutorial |
| 005 |
// Joystick creates a movable joystick (via GUITexture) that |
| 006 |
// handles touch input, taps, and phases. Dead zones can control |
| 007 |
// where the joystick input gets picked up and can be normalized. |
| 009 |
// Optionally, you can enable the touchPad property from the editor |
| 010 |
// to treat this Joystick as a TouchPad. A TouchPad allows the finger |
| 011 |
// to touch down at any point and it tracks the movement relatively |
| 012 |
// without moving the graphic |
| 013 |
////////////////////////////////////////////////////////////// |
| 015 |
@script RequireComponent( GUITexture ) |
| 017 |
// A simple class for bounding how far the GUITexture will move |
| 020 |
var min : Vector2 = Vector2.zero; |
| 021 |
var max : Vector2 = Vector2.zero; |
| 024 |
static private var joysticks : Joystick[]; // A static collection of all joysticks |
| 025 |
static private var enumeratedJoysticks : boolean = false; |
| 026 |
static private var tapTimeDelta : float = 0.3; // Time allowed between taps |
| 028 |
var touchPad : boolean; // Is this a TouchPad? |
| 029 |
var touchZone : Rect; |
| 030 |
var deadZone : Vector2 = Vector2.zero; // Control when position is output |
| 031 |
var normalize : boolean = false; // Normalize output after the dead-zone? |
| 032 |
var position : Vector2; // [-1, 1] in x,y |
| 033 |
var tapCount : int; // Current tap count |
| 035 |
private var lastFingerId = -1; // Finger last used for this joystick |
| 036 |
private var tapTimeWindow : float; // How much time there is left for a tap to occur |
| 037 |
private var fingerDownPos : Vector2; |
| 038 |
private var fingerDownTime : float; |
| 039 |
private var firstDeltaTime : float = 0.5; |
| 041 |
private var gui : GUITexture; // Joystick graphic |
| 042 |
private var defaultRect : Rect; // Default position / extents of the joystick graphic |
| 043 |
private var guiBoundary : Boundary = Boundary(); // Boundary for joystick graphic |
| 044 |
private var guiTouchOffset : Vector2; // Offset to apply to touch input |
| 045 |
private var guiCenter : Vector2; // Center of joystick |
| 049 |
// Cache this component at startup instead of looking up every frame |
| 050 |
gui = GetComponent( GUITexture ); |
| 052 |
// Store the default rect for the gui, so we can snap back to it |
| 053 |
defaultRect = gui.pixelInset; |
| 055 |
defaultRect.x += transform.position.x * Screen.width;// + gui.pixelInset.x; // - Screen.width * 0.5; |
| 056 |
defaultRect.y += transform.position.y * Screen.height;// - Screen.height * 0.5; |
| 058 |
transform.position.x = 0.0; |
| 059 |
transform.position.y = 0.0; |
| 063 |
// If a texture has been assigned, then use the rect ferom the gui as our touchZone |
| 065 |
touchZone = defaultRect; |
| 069 |
// This is an offset for touch input to match with the top left |
| 071 |
guiTouchOffset.x = defaultRect.width * 0.5; |
| 072 |
guiTouchOffset.y = defaultRect.height * 0.5; |
| 074 |
// Cache the center of the GUI, since it doesn't change |
| 075 |
guiCenter.x = defaultRect.x + guiTouchOffset.x; |
| 076 |
guiCenter.y = defaultRect.y + guiTouchOffset.y; |
| 078 |
// Let's build the GUI boundary, so we can clamp joystick movement |
| 079 |
guiBoundary.min.x = defaultRect.x - guiTouchOffset.x; |
| 080 |
guiBoundary.max.x = defaultRect.x + guiTouchOffset.x; |
| 081 |
guiBoundary.min.y = defaultRect.y - guiTouchOffset.y; |
| 082 |
guiBoundary.max.y = defaultRect.y + guiTouchOffset.y; |
| 088 |
gameObject.active = false; |
| 089 |
enumeratedJoysticks = false; |
| 092 |
function ResetJoystick() |
| 094 |
// Release the finger control and set the joystick back to the default position |
| 095 |
gui.pixelInset = defaultRect; |
| 097 |
position = Vector2.zero; |
| 098 |
fingerDownPosition = Vector2.zero; |
| 104 |
function IsFingerDown() : boolean |
| 106 |
return (lastFingerId != -1); |
| 109 |
function LatchedFinger( fingerId : int ) |
| 111 |
// If another joystick has latched this finger, then we must release it |
| 112 |
if ( lastFingerId == fingerId ) |
| 118 |
if ( !enumeratedJoysticks ) |
| 120 |
// Collect all joysticks in the game, so we can relay finger latching messages |
| 121 |
joysticks = FindObjectsOfType( Joystick ); |
| 122 |
enumeratedJoysticks = true; |
| 125 |
var count = Input.touchCount; |
| 127 |
// Adjust the tap time window while it still available |
| 128 |
if ( tapTimeWindow > 0 ) |
| 129 |
tapTimeWindow -= Time.deltaTime; |
| 137 |
for(var i : int = 0;i < count; i++) |
| 139 |
var touch : Touch = Input.GetTouch(i); |
| 140 |
var guiTouchPos : Vector2 = touch.position - guiTouchOffset; |
| 142 |
var shouldLatchFinger = false; |
| 145 |
if ( touchZone.Contains( touch.position ) ) |
| 146 |
shouldLatchFinger = true; |
| 148 |
else if ( gui.HitTest( touch.position ) ) |
| 150 |
shouldLatchFinger = true; |
| 153 |
// Latch the finger if this is a new touch |
| 154 |
if ( shouldLatchFinger && ( lastFingerId == -1 || lastFingerId != touch.fingerId ) ) |
| 161 |
lastFingerId = touch.fingerId; |
| 162 |
fingerDownPos = touch.position; |
| 163 |
fingerDownTime = Time.time; |
| 166 |
lastFingerId = touch.fingerId; |
| 168 |
// Accumulate taps if it is within the time window |
| 169 |
if ( tapTimeWindow > 0 ) |
| 174 |
tapTimeWindow = tapTimeDelta; |
| 177 |
// Tell other joysticks we've latched this finger |
| 178 |
for ( var j : Joystick in joysticks ) |
| 181 |
j.LatchedFinger( touch.fingerId ); |
| 185 |
if ( lastFingerId == touch.fingerId ) |
| 187 |
// Override the tap count with what the iPhone SDK reports if it is greater |
| 188 |
// This is a workaround, since the iPhone SDK does not currently track taps |
| 189 |
// for multiple touches |
| 190 |
if ( touch.tapCount > tapCount ) |
| 191 |
tapCount = touch.tapCount; |
| 195 |
// For a touchpad, let's just set the position directly based on distance from initial touchdown |
| 196 |
position.x = Mathf.Clamp( ( touch.position.x - fingerDownPos.x ) / ( touchZone.width / 2 ), -1, 1 ); |
| 197 |
position.y = Mathf.Clamp( ( touch.position.y - fingerDownPos.y ) / ( touchZone.height / 2 ), -1, 1 ); |
| 201 |
// Change the location of the joystick graphic to match where the touch is |
| 202 |
gui.pixelInset.x = Mathf.Clamp( guiTouchPos.x, guiBoundary.min.x, guiBoundary.max.x ); |
| 203 |
gui.pixelInset.y = Mathf.Clamp( guiTouchPos.y, guiBoundary.min.y, guiBoundary.max.y ); |
| 206 |
if ( touch.phase == TouchPhase.Ended || touch.phase == TouchPhase.Canceled ) |
| 214 |
// Get a value between -1 and 1 based on the joystick graphic location |
| 215 |
position.x = ( gui.pixelInset.x + guiTouchOffset.x - guiCenter.x ) / guiTouchOffset.x; |
| 216 |
position.y = ( gui.pixelInset.y + guiTouchOffset.y - guiCenter.y ) / guiTouchOffset.y; |
| 219 |
// Adjust for dead zone |
| 220 |
var absoluteX = Mathf.Abs( position.x ); |
| 221 |
var absoluteY = Mathf.Abs( position.y ); |
| 223 |
if ( absoluteX < deadZone.x ) |
| 225 |
// Report the joystick as being at the center if it is within the dead zone |
| 228 |
else if ( normalize ) |
| 230 |
// Rescale the output after taking the dead zone into account |
| 231 |
position.x = Mathf.Sign( position.x ) * ( absoluteX - deadZone.x ) / ( 1 - deadZone.x ); |
| 234 |
if ( absoluteY < deadZone.y ) |
| 236 |
// Report the joystick as being at the center if it is within the dead zone |
| 239 |
else if ( normalize ) |
| 241 |
// Rescale the output after taking the dead zone into account |
| 242 |
position.y = Mathf.Sign( position.y ) * ( absoluteY - deadZone.y ) / ( 1 - deadZone.y ); |
單擊Create 創(chuàng)建一個(gè)GUI Texture，命名為Joy ，它用來(lái)顯示游戲搖桿，如下圖所示將搖桿的圖片資源，與搖桿的腳本連線賦值給Joy. Pixel Inset 中可以設(shè)置搖桿的顯示位置與顯示寬高。
到這一步 build and run 就可以在iPhone上看到這個(gè)游戲搖桿，并且可以通過(guò)觸摸它，360度平滑過(guò)度。
在屏幕中繪制一個(gè)飛機(jī)，通過(guò)游戲搖桿去控制飛機(jī)的移動(dòng)。
創(chuàng)建一個(gè)腳本，命名為Main.js 如下圖所示 將 Main.js 、joy、plan 分別 綁定在Main Camera 上。
moveJoystick.position.x;
moveJoystick.position.y;
這兩個(gè)值是非常重要的兩個(gè)信息，它們的取值范圍是 -1 到 +1 ，表示 用戶觸摸搖桿的位置， 上 下 左 右 的信息。
[代碼]js代碼：
| 02 |
var moveJoystick : Joystick; |
| 11 |
//避免飛機(jī)飛出屏幕，分別是X、Y最大坐標(biāo)，最小坐標(biāo)是0、0 |
| 22 |
cross_x = Screen.width - plan.width; |
| 23 |
cross_y = Screen.height - plan.height; |
| 28 |
//得到游戲搖桿的反饋信息，得到的值是 -1 到 +1 之間 |
| 30 |
var touchKey_x = moveJoystick.position.x; |
| 31 |
var touchKey_y = moveJoystick.position.y; |
| 39 |
else if(touchKey_x == 1){ |
| 49 |
else if(touchKey_y == 1){ |
| 54 |
//防止飛機(jī)飛出屏幕，出界檢測(cè) |
| 57 |
}else if(x > cross_x){ |
| 63 |
}else if(y > cross_y){ |
| 75 |
GUI.DrawTexture(Rect(x,y,128,128),plan); |
導(dǎo)出 build and run 看看在iPhone 上的效果，通過(guò)觸摸游戲搖桿可以控制飛機(jī)的移動(dòng)啦，不錯(cuò)吧，哇咔咔～～
