关于自定义Joystick的相关设置和脚本源码(转载)

原文:http://blog.csdn.net/wxg694175346/article/details/8537730

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.   
  4.   
  5. var background = new SwitchGUI();  
  6. var location = new Location();  
  7. private var GUIalpha:float = 1;  
  8.   
  9.   
  10. private var joystick : Joystick;  
  11. joystick = GetComponent (Joystick);  
  12.   
  13. var noGuiStyle : GUIStyle;  
  14.   
  15.   
  16. function Update() {  
  17.     if (joystick.IsFingerDown()) {  
  18.         background.up();  
  19.     } else {  
  20.         background.down();  
  21.     }  
  22.     if (background.texture != null){  
  23.         location.updateLocation();  
  24.     }  
  25. }  
  26.   
  27. function OnGUI () {  
  28.     GUI.color.a = GUIalpha;  
  29.     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);  
  30. }  


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

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


 

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


 

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

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

 

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


 

posted @ 2013-03-06 21:24  jallen  阅读(579)  评论(0)    收藏  举报