zoukankan      html  css  js  c++  java

  • 手机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 ()
    5. var background = new SwitchGUI();
    6. var location = new Location();
    7. private var GUIalpha:float = 1;
    10. private var joystick : Joystick;
    11. joystick = GetComponent (Joystick);
    13. var noGuiStyle : GUIStyle;
    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. }
    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;
    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
    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?
    14.     var anchorPoint = Point.TopLeft; // Unity default is from top left corner of texture
    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;
    26.                 case anchorPoint.BottomLeft: // bottom left corner of texture
    27.                     offset.y = originalOffset.y - texture.height;
    28.                     break;
    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;
    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. }
    44. //Timer Class:
    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
    57.     function setTime(newTime:float) {
    58.         timerPerct = newTime; // sets the percent based on value
    59.     }
    60. }
    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.     }
    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.     }
    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.     }
    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.     }
    109. }
    111. // Location class:
    114. class Location {
    115.     enum Point { TopLeft, TopRight, BottomLeft, BottomRight, Center}
    117.     var pointLocation = Point.TopLeft;
    118.     var offset:Vector2;
    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;
    130.             case pointLocation.BottomLeft:
    131.                 offset = Vector2(0,Screen.height);
    132.                 break;
    134.             case pointLocation.BottomRight:
    135.                 offset = Vector2(Screen.width,Screen.height);
    136.                 break;
    138.             case pointLocation.Center:
    139.                 offset = Vector2(Screen.width/2,Screen.height/2);
    140.                 break;
    141.         }
    142.     }
    143. }
    145. class TextureAnchor {
    146.     enum Point { TopLeft, TopRight, BottomLeft, BottomRight, Center}
    148.     var anchorPoint = Point.TopLeft;
    149.     var offset:Vector2;
    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;
    160.             case anchorPoint.BottomLeft:
    161.                 offset = Vector2(0,Screen.height);
    162.                 break;
    164.             case anchorPoint.BottomRight:
    165.                 offset = Vector2(Screen.width,Screen.height);
    166.                 break;
    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. //////////////////////////////////////////////////////////////
    15. #pragma strict
    17. @script RequireComponent( GUITexture )
    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. }
    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
    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
    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;
    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
    49. private var alphaOff:float = 0.0;
    51. function Start()
    52. {
    53.     // Cache this component at startup instead of looking up every frame
    54.     gui = GetComponent( GUITexture );
    56.     // Store the default rect for the gui, so we can snap back to it
    57.     defaultRect = gui.pixelInset;
    59.     gui.color.a = alphaOff;
    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;
    64.     transform.position.x = 0.0;
    65.     transform.position.y = 0.0;
    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;
    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;
    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.     }
    91. }
    94. function Disable()
    95. {
    96.     gameObject.active = false;
    97.     enumeratedJoysticks = false;
    98. }
    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. }
    111. function IsFingerDown() : boolean
    112. {
    113.     return (lastFingerId != -1);
    114. }
    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. }
    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.         }
    132.         var count = Input.touchCount;
    134.         // Adjust the tap time window while it still available
    135.         if ( tapTimeWindow > 0 )
    136.             tapTimeWindow -= Time.deltaTime;
    137.         else
    138.             tapCount = 0;
    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;
    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.                 }
    161.                 // Latch the finger if this is a new touch
    162.                 if ( shouldLatchFinger && ( lastFingerId == -1 || lastFingerId != touch.fingerId ) )
    163.                 {
    165.                     if ( touchPad )
    166.                     {
    168.                         //gui.color.a = 0.15;
    170.                         lastFingerId = touch.fingerId;
    171.                         fingerDownPos = touch.position;
    172.                         fingerDownTime = Time.time;
    173.                     }
    175.                     lastFingerId = touch.fingerId;
    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.                     }
    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.                 }
    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;
    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.                     }
    215.                     if ( touch.phase == TouchPhase.Ended || touch.phase == TouchPhase.Canceled ) {
    216.                         ResetJoystick();
    217.                     }
    218.                 }
    219.             }
    220.         }
    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.         }
    229.         // Adjust for dead zone
    230.         var absoluteX = Mathf.Abs( position.x );
    231.         var absoluteY = Mathf.Abs( position.y );
    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.         }
    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不见了：

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

    原文链接：csdn.net

     

    声明: 本文由( zqcyou )原创编译，转载请保留链接: 手机3D游戏开发：自定义Joystick的相关设置和脚本源码
  • 相关阅读:
    framework7学习笔记
    浮出层的css写法，完美兼容IE6~10
    SpringBoot2.x的c3p0- 0.9.1.2.jar:0.9.1.2]错误
    值溢出
    Jquery+AJAX实现滚动条下拉分页
    springboot+Mybatis多个数据源连接
    mysql批量替换字段中的字符或者字符串
    了解SpringCloud
    SpringBoot2.x访问不了application.properties文件中servlet.context-path上下文路径
    使用mavens创建SpringBoot和Mybatis的web项目
  • 原文地址：https://www.cnblogs.com/tonge/p/3599124.html
Copyright © 2011-2022 走看看