手机3D游戏开发：自定义Joystick的相关设置和脚本源码

Joystick在手游开发中非常常见，也就是在手机屏幕上的虚拟操纵杆，但是Unity3D自带的Joystick贴图比较原始，所以经常有使用自定义贴图的需求。

下面就来演示一下如何实现自定义JoyStick贴图。

首先导入贴图，注意要把默认的Texture改为GUI要不然尺寸会发生改变：

在Inspector面板中点击Texture选项可以实现简单的贴图切换：

选中后便会发现场景中的Joystick已经发生了改变：

同理，可以对右边的Joystick做同样的修改：

当然很多时候这样简单的修改很难满足我们的需求。

下面来说说对Joystick的常见调整。

首先是坐标的调整，一般把Postition归零而在GUITexture中调整Pixel Inset：

但是这样依旧会出问题，全屏的时候因为采用了绝对坐标所以会出现这种情况：

所以我们还需要在脚本中稍作调整。

先来给Joystick加个背景图片。

创建一个JS脚本JoystickBackgroundGUI：

[javascript] view plaincopy

 

1. @script RequireComponent(Joystick)
2. @script ExecuteInEditMode ()
3. var background = new SwitchGUI();
4. var location = new Location();
5. private var GUIalpha:float = 1;
6. private var joystick : Joystick;
7. joystick = GetComponent (Joystick);
8. var noGuiStyle : GUIStyle;
9. function Update() {
10. if (joystick.IsFingerDown()) {
11. background.up();
12. } else {
13. background.down();
14. }
15. if (background.texture != null){
16. location.updateLocation();
17. }
18. }
19. function OnGUI () {
20. GUI.color.a = GUIalpha;
21. GUI.Box(Rect(location.offset.x + background.offset.x - background.texture.width/2,location.offset.y + background.offset.y - background.texture.height/2,background.texture.width,background.texture.height),background.texture,noGuiStyle);
22. }

joystick是Unity自己封装好的对象，其中有IsFingerDown等函数有需要的同学可以查阅一下Unity官网的说明文档。

脚本中用到了Location和SwitchGUI，这两个函数在另一个脚本   _GUIClasses   中定义：

[javascript] view plaincopy

 

1. import System.Collections.Generic;
2. // TextureGUI Class: create a basic class for creating and placing GUI elements
3. // texture = the texture to display
4. // offset = pixel offset from top left corner, can be modified for easy positioning
5. class TextureGUI {
6. var texture:Texture; //useful: texture.width, texture.height
7. var offset:Vector2; // .x and .y
8. private var originalOffset:Vector2; //store the original to correctly reset anchor point
9. enum Point { TopLeft, TopRight, BottomLeft, BottomRight, Center} //what part of texture to position around?
10. var anchorPoint = Point.TopLeft; // Unity default is from top left corner of texture
11. function setAnchor() { // meant to be run ONCE at Start.
12. originalOffset = offset;
13. if (texture) { // check for null texture
14. switch(anchorPoint) { //depending on where we want to center our offsets
15. case anchorPoint.TopLeft: // Unity default, do nothing
16. break;
17. case anchorPoint.TopRight: // Take the offset and go to the top right corner
18. offset.x = originalOffset.x - texture.width;
19. break;
20. case anchorPoint.BottomLeft: // bottom left corner of texture
21. offset.y = originalOffset.y - texture.height;
22. break;
23. case anchorPoint.BottomRight: //bottom right corner of texture
24. offset.x = originalOffset.x - texture.width;
25. offset.y = originalOffset.y - texture.height;
26. break;
27. case anchorPoint.Center: //and the center of the texture (useful for screen center textures)
28. offset.x = originalOffset.x - texture.width/2;
29. offset.y = originalOffset.y - texture.height/2;
30. break;
31. }
32. }
33. }
34. }
35. //Timer Class:
36. class TimerGUI extends TextureGUI { // Extend functionality from TextureGUI for a depreciating timer graphic
37. var textureLEnd:Texture; // left side of full texture (non stretching part)
38. var offsetLEnd:Vector2; // left side of full texture (non stretching part) start position
39. var textureCenter:Texture; // center of timer (will be stretched across width)
40. var offsetCenter:Vector2;
41. var textureREnd:Texture;
42. var offsetREnd:Vector2;
43. var timerPerct:float = 1; // percentage (0 to 1) this stretches the center
44. var desiredWidth:float = 403; // max width of the timer in pixels
45. function setTime(newTime:float) {
46. timerPerct = newTime; // sets the percent based on value
47. }
48. }
49. // SwitchGUI Class: Extends the TextureGUI to be able to load in multiple textures and switch between them
50. class SwitchGUI extends TextureGUI {
51. var switchableTextures = new List.<Texture>();
52. var currentTexture:int = 0;
53. function Start() {
54. if (switchableTextures.Count > 0) {
55. texture = switchableTextures[currentTexture];
56. }
57. }
58. function changeTexture(switchTo:int) {
59. if (switchTo < switchableTextures.Count && switchTo >= 0) {
60. texture = switchableTextures[switchTo];
61. currentTexture = switchTo;
62. } else {
63. //Debug.Log( this + ": tried to call invalid part of switchTextures array!");
64. }
65. }
66. function up() {
67. if ((currentTexture+1) < switchableTextures.Count) {
68. ++currentTexture;
69. texture = switchableTextures[currentTexture];
70. } else {
71. //Debug.Log( this + ": at the top!");
72. }
73. }
74. function nextTexture() {
75. if ((currentTexture+1) < switchableTextures.Count) { // if we are at the end of the array
76. ++currentTexture;
77. texture = switchableTextures[currentTexture];
78. } else {// loop to the beginning
79. currentTexture = 0;
80. texture = switchableTextures[currentTexture];
81. }
82. }
83. function down() {
84. if ((currentTexture-1) >= 0) {
85. --currentTexture;
86. texture = switchableTextures[currentTexture];
87. } else {
88. //Debug.Log( this + ": at the bottom!");
89. }
90. }
91. }
92. // Location class:
93. class Location {
94. enum Point { TopLeft, TopRight, BottomLeft, BottomRight, Center}
95. var pointLocation = Point.TopLeft;
96. var offset:Vector2;
97. function updateLocation() {
98. switch(pointLocation) {
99. case pointLocation.TopLeft:
100. offset = Vector2(0,0);
101. break;
102. case pointLocation.TopRight:
103. offset = Vector2(Screen.width,0);
104. break;
105. case pointLocation.BottomLeft:
106. offset = Vector2(0,Screen.height);
107. break;
108. case pointLocation.BottomRight:
109. offset = Vector2(Screen.width,Screen.height);
110. break;
111. case pointLocation.Center:
112. offset = Vector2(Screen.width/2,Screen.height/2);
113. break;
114. }
115. }
116. }
117. class TextureAnchor {
118. enum Point { TopLeft, TopRight, BottomLeft, BottomRight, Center}
119. var anchorPoint = Point.TopLeft;
120. var offset:Vector2;
121. function update() {
122. switch(anchorPoint) {
123. case anchorPoint.TopLeft:
124. offset = Vector2(0,0);
125. break;
126. case anchorPoint.TopRight:
127. offset = Vector2(Screen.width,0);
128. break;
129. case anchorPoint.BottomLeft:
130. offset = Vector2(0,Screen.height);
131. break;
132. case anchorPoint.BottomRight:
133. offset = Vector2(Screen.width,Screen.height);
134. break;
135. case anchorPoint.Center:
136. offset = Vector2(Screen.width/2,Screen.height/2);
137. break;
138. }
139. }
140. }

将脚本拖拽到Joystick上面并且部署好贴图，运行可见Joystick的背景贴图，当然坐标还有点问题：

我们在脚本中将其设置为BottomLeft，并且设置好SwitchTexture：

配置好了之后点击运行，会发现Joystick 的贴图出现在了左下角：

通过脚本中的Pixel设置可以调整两个纹理贴图的坐标并使他们趋于一致：

调整之后的结果如图：

同时将Joystick的脚本换成下面的脚本，可以实现隐藏操纵杆而只在碰到摇杆区域才显示Joystick的效果：

[javascript] view plaincopy

 

1. //////////////////////////////////////////////////////////////
2. // Joystick.js
3. // Penelope iPhone Tutorial
4. //
5. // Joystick creates a movable joystick (via GUITexture) that
6. // handles touch input, taps, and phases. Dead zones can control
7. // where the joystick input gets picked up and can be normalized.
8. //
9. // Optionally, you can enable the touchPad property from the editor
10. // to treat this Joystick as a TouchPad. A TouchPad allows the finger
11. // to touch down at any point and it tracks the movement relatively
12. // without moving the graphic
13. //////////////////////////////////////////////////////////////
14. #pragma strict
15. @script RequireComponent( GUITexture )
16. // A simple class for bounding how far the GUITexture will move
17. class Boundary
18. {
19. var min : Vector2 = Vector2.zero;
20. var max : Vector2 = Vector2.zero;
21. }
22. static private var joysticks : Joystick[];                  // A static collection of all joysticks
23. static private var enumeratedJoysticks : boolean = false;
24. static private var tapTimeDelta : float = 0.3;              // Time allowed between taps
25. var touchPad : boolean;                                     // Is this a TouchPad?
26. var touchZone : Rect;
27. var deadZone : Vector2 = Vector2.zero;                      // Control when position is output
28. var normalize : boolean = false;                            // Normalize output after the dead-zone?
29. var position : Vector2;                                     // [-1, 1] in x,y
30. var tapCount : int;                                         // Current tap count
31. private var lastFingerId = -1;                              // Finger last used for this joystick
32. private var tapTimeWindow : float;                          // How much time there is left for a tap to occur
33. private var fingerDownPos : Vector2;
34. private var fingerDownTime : float;
35. private var firstDeltaTime : float = 0.5;
36. private var gui : GUITexture;                               // Joystick graphic
37. private var defaultRect : Rect;                             // Default position / extents of the joystick graphic
38. private var guiBoundary : Boundary = Boundary();            // Boundary for joystick graphic
39. private var guiTouchOffset : Vector2;                       // Offset to apply to touch input
40. private var guiCenter : Vector2;                            // Center of joystick
41. private var alphaOff:float = 0.0;
42. function Start()
43. {
44. // Cache this component at startup instead of looking up every frame
45. gui = GetComponent( GUITexture );
46. // Store the default rect for the gui, so we can snap back to it
47. defaultRect = gui.pixelInset;
48. gui.color.a = alphaOff;
49. defaultRect.x += transform.position.x * Screen.width; // + gui.pixelInset.x; // -  Screen.width * 0.5;
50. defaultRect.y += transform.position.y * Screen.height; //+ gui.pixelInset.y; // - Screen.height * 0.5;
51. transform.position.x = 0.0;
52. transform.position.y = 0.0;
53. if ( touchPad )
54. {
55. // If a texture has been assigned, then use the rect ferom the gui as our touchZone
56. if ( gui.texture )
57. touchZone = defaultRect;
58. }
59. else
60. {
61. // This is an offset for touch input to match with the top left
62. // corner of the GUI
63. guiTouchOffset.x = defaultRect.width * 0.5;
64. guiTouchOffset.y = defaultRect.height * 0.5;
65. // Cache the center of the GUI, since it doesn't change
66. guiCenter.x = defaultRect.x + guiTouchOffset.x;
67. guiCenter.y = defaultRect.y + guiTouchOffset.y;
68. // Let's build the GUI boundary, so we can clamp joystick movement
69. guiBoundary.min.x = defaultRect.x - guiTouchOffset.x;
70. guiBoundary.max.x = defaultRect.x + guiTouchOffset.x;
71. guiBoundary.min.y = defaultRect.y - guiTouchOffset.y;
72. guiBoundary.max.y = defaultRect.y + guiTouchOffset.y;
73. }
74. }
75. function Disable()
76. {
77. gameObject.active = false;
78. enumeratedJoysticks = false;
79. }
80. function ResetJoystick()
81. {
82. // Release the finger control and set the joystick back to the default position
83. gui.pixelInset = defaultRect;
84. lastFingerId = -1;
85. position = Vector2.zero;
86. fingerDownPos = Vector2.zero;
87. gui.color.a = alphaOff;
88. }
89. function IsFingerDown() : boolean
90. {
91. return (lastFingerId != -1);
92. }
93. function LatchedFinger( fingerId : int )
94. {
95. // If another joystick has latched this finger, then we must release it
96. if ( lastFingerId == fingerId )
97. ResetJoystick();
98. }
99. function Update()
100. {
101. if ( !enumeratedJoysticks )
102. {
103. // Collect all joysticks in the game, so we can relay finger latching messages
104. joysticks = FindObjectsOfType(Joystick) as Joystick[];
105. enumeratedJoysticks = true;
106. }
107. var count = Input.touchCount;
108. // Adjust the tap time window while it still available
109. if ( tapTimeWindow > 0 )
110. tapTimeWindow -= Time.deltaTime;
111. else
112. tapCount = 0;
113. if ( count == 0 )
114. ResetJoystick();
115. else
116. {
117. for(var i : int = 0;i < count; i++)
118. {
119. var touch : Touch = Input.GetTouch(i);
120. var guiTouchPos : Vector2 = touch.position - guiTouchOffset;
121. var shouldLatchFinger = false;
122. if ( touchPad )
123. {
124. if ( touchZone.Contains( touch.position ) )
125. shouldLatchFinger = true;
126. }
127. else if ( gui.HitTest( touch.position ) )
128. {
129. shouldLatchFinger = true;
130. gui.color.a = .5;
131. }
132. // Latch the finger if this is a new touch
133. if ( shouldLatchFinger && ( lastFingerId == -1 || lastFingerId != touch.fingerId ) )
134. {
135. if ( touchPad )
136. {
137. //gui.color.a = 0.15;
138. lastFingerId = touch.fingerId;
139. fingerDownPos = touch.position;
140. fingerDownTime = Time.time;
141. }
142. lastFingerId = touch.fingerId;
143. // Accumulate taps if it is within the time window
144. if ( tapTimeWindow > 0 )
145. tapCount++;
146. else
147. {
148. tapCount = 1;
149. tapTimeWindow = tapTimeDelta;
150. }
151. // Tell other joysticks we've latched this finger
152. for ( var j : Joystick in joysticks )
153. {
154. if ( j != this )
155. j.LatchedFinger( touch.fingerId );
156. }
157. }
158. if ( lastFingerId == touch.fingerId )
159. {
160. // Override the tap count with what the iPhone SDK reports if it is greater
161. // This is a workaround, since the iPhone SDK does not currently track taps
162. // for multiple touches
163. if ( touch.tapCount > tapCount )
164. tapCount = touch.tapCount;
165. if ( touchPad )
166. {
167. // For a touchpad, let's just set the position directly based on distance from initial touchdown
168. position.x = Mathf.Clamp( ( touch.position.x - fingerDownPos.x ) / ( touchZone.width / 2 ), -1, 1 );
169. position.y = Mathf.Clamp( ( touch.position.y - fingerDownPos.y ) / ( touchZone.height / 2 ), -1, 1 );
170. }
171. else
172. {
173. // Change the location of the joystick graphic to match where the touch is
174. gui.pixelInset.x =  Mathf.Clamp( guiTouchPos.x, guiBoundary.min.x, guiBoundary.max.x );
175. gui.pixelInset.y =  Mathf.Clamp( guiTouchPos.y, guiBoundary.min.y, guiBoundary.max.y );
176. }
177. if ( touch.phase == TouchPhase.Ended || touch.phase == TouchPhase.Canceled ) {
178. ResetJoystick();
179. }
180. }
181. }
182. }
183. if ( !touchPad )
184. {
185. // Get a value between -1 and 1 based on the joystick graphic location
186. position.x = ( gui.pixelInset.x + guiTouchOffset.x - guiCenter.x ) / guiTouchOffset.x;
187. position.y = ( gui.pixelInset.y + guiTouchOffset.y - guiCenter.y ) / guiTouchOffset.y;
188. }
189. // Adjust for dead zone
190. var absoluteX = Mathf.Abs( position.x );
191. var absoluteY = Mathf.Abs( position.y );
192. if ( absoluteX < deadZone.x )
193. {
194. // Report the joystick as being at the center if it is within the dead zone
195. position.x = 0;
196. }
197. else if ( normalize )
198. {
199. // Rescale the output after taking the dead zone into account
200. position.x = Mathf.Sign( position.x ) * ( absoluteX - deadZone.x ) / ( 1 - deadZone.x );
201. }
202. if ( absoluteY < deadZone.y )
203. {
204. // Report the joystick as being at the center if it is within the dead zone
205. position.y = 0;
206. }
207. else if ( normalize )
208. {
209. // Rescale the output after taking the dead zone into account
210. position.y = Mathf.Sign( position.y ) * ( absoluteY - deadZone.y ) / ( 1 - deadZone.y );
211. }
212. }

运行以下项目可以发现Joystick不见了：

但是点击屏幕就会出现了：

原文链接：csdn.net

 

声明: 本文由(zqcyou)原创编译，转载请保留链接: 手机3D游戏开发：自定义Joystick的相关设置和脚本源码