Unity3d Study (iii): Using Ngui to achieve a simple left and right joystick

Objective

Small game konster in the test when there is enthusiastic player feedback left and right to move the hand is not very good, the main problem is: for example, once the finger is pressed on the phone screen of the right button, swipe left to another left button will not change the direction of the player movement.

Specific example:

At first I pressed the → button, and the Little monster bestiality half-way I slid my thumb to the ← button, but the little beast didn't move to the left, and then went right until it hit a spike and died.

The reason: The script I wrote only listens for button presses and lift events. There is no response to thumb sliding on the button.

So I decided to rewrite a joystick script to control the direction of the little Monster's movement.

Implementation ideas

Refer to this Blog "Unity3d Foundation" Unity3d The use of Ngui to implement virtual joystick. It achieves a 360 degree joystick.

I want to achieve just to the left and right induction on the line, so I first the left and right button to delete the event monitoring, keep the picture. Then add a new slider below the button, hang up the Boxcollider, set the left and right anchor of the slider to the leftmost and rightbtn of the leftbtn, so that when adaptive, the middle area will become shorter with the adjustment and length of the button. The upper and lower anchor remain the same as the button settings------a certain distance from the bottom of the screen.

Then create a joystick button below the slider object that indicates the position of the thumb.

Then we need to write a script to listen for the pressed and sliding events of this strip area. The code is as follows:

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityengine; Public classjoystick:monobehaviour{ Public Static floatDirection//determines the direction of movement of the player     PublicTransform Target;//Joystick Button     Public floatsensibility =1;//Joystick Sensitivity     Public floatDragdistance;//maximum distance of joystick panning    Private voidfixedupdate () {if(Target.localposition.x >0) Direction=1; Else if(target.localposition.x = =0) Direction=0; Elsedirection= -1; }    voidOndrag (Vector2 Delta)//Drag event callback for the Ngui component    {        floatTargetposition = target.localposition.x + delta.x * sensibility;//position of Next frame        if(Mathf.abs (targetposition) >=dragdistance) {            if(Targetposition >0) Targetposition=dragdistance; Elsetargetposition= -dragdistance; } target.localposition=NewVector2 (targetposition, TARGET.LOCALPOSITION.Y); }    voidOnpress (BOOLispressed)//Ngui component's hold-down event callback    {        if(ispressed) {Debug.Log (UICamera.currentTouch.pos); if(Uicamera.currenttouch.pos.x >7* screen.width/ +)//If you click on the joystick area, click on the right or left side of the center.Target.localposition =NewVector2 (dragdistance, TARGET.LOCALPOSITION.Y); Elsetarget.localposition=NewVector2 (-dragdistance, TARGET.LOCALPOSITION.Y); }        Elsetarget.localposition=Vector2.zero; }}

In this part of the code, we use the Ondrag () function to handle the sliding event, onpress () to handle lifting and pressing events. Specifically, the invocation mechanism of these two functions is similar to Unity's Ongui (), and the Ngui camera sends the corresponding event triggered to each Ngui component that is visible under Ngui camera rendering, and then callbacks the corresponding function. The following is the base event system for Ngui:

uievents-Event System
void Onhover (bool isover): Returns a Boolean value when the mouse moves out or hovers over a collider. There is no effect on touch devices.
void Onpress (bool Isdown): A Boolean value is returned when the mouse or touch to the collider occurs.
void OnSelect (bool selected): This boolean value is returned when the mouse or touch is released after the onpress occurs.
void OnClick (): Is the same as the onselect, which is triggered when a hit or touch collider and no drag occurs.
void Ondrag (Vector2 delta): triggered when moving the mouse or when the shift exceeds a specific threshold when the touch is pressed.
void OnDrop (Gameobject drag): Triggers when the mouse or touch is released from different collider wounds that occur Ondrag. The passed parameter is the game object that produces the Ondrag.
void Oninput (string text): Triggers input on the same collider after a onselect occurs. Generally only uiinput use it.
void Ontooltip (BOOL show): Triggers the command when the mouse hovers over tooltipdelay time. Touching the device does not work.

Back to the Chase

In the Ondrag function, we update the position (localposition) of the target (that is, the rocker button thumb above) in the slider coordinate system directly based on the distance delta of each frame sliding, and then use a variable distance to limit the maximum distance between left and right sliding. Sensibility to control the speed of the joystick button, the initial position of the joystick button is Vector2.zero (i.e. (0,0)). When the horizontal axis of the Localpositon is greater than 0 o'clock, it moves to the right and the beast to the left.

In the Onpress function, we determine whether the left or right part of the slider is touched by the area touched by the finger, so we need to identify the coordinates of the middle position of the slider on the screen.

UICamera.currentTouch.pos This value calculates the coordinates of the touch point as the origin in the lower-left corner of the screen, such as:

So as long as the center position of the slider (green split line in the figure) is determined, the horizontal axis of the screen can be judged by the coordinates of the horizontal and the touch points to determine whether the area of the finger is on the left or the right side of the slider bar.
Finally attach the implementation:

Sliding drag

Press

If you feel that the joystick button is a bit of a beauty, you can set its Sprite's alpha value to 0, so the effect becomes:

In this way, a basic left and right joystick is completed (^▽^).

Resources

Unity3d Ngui event uievents off Mo rou

Using Ngui to implement virtual joystick Coffeecao in "Unity3d Foundation" Unity3d

Unity3d Study (iii): Using Ngui to achieve a simple left and right joystick