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

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

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

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

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

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

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

 

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

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

同理,可以对右边的Joystick做同样的修改:

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

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

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

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

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

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

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

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

先来给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的背景贴图,当然坐标还有点问题:

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

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

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

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

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

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

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

调整之后的结果如图:

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

同时将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不见了:

 

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

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

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

原文链接:csdn.net

 

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

手机3D游戏开发:自定义Joystick的相关设置和脚本源码,布布扣,bubuko.com

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

上一篇:Appium 环境搭建


下一篇:android日期和时间选择器(开发日志21)