Using V-pad

V-pad

A control UI is required to manipulate the character within the world.

ZEPETO World basically creates a control UI called V-pad at runtime through ZEPETOPlayers.

The V-pad can perform the following functions depending on the area the player touches on the screen:

1. Screen touch pad: When you touch the pad area and slide it up, down, left, or right, the local player moves along the XZ axis.

• When you tap within the pad area, the touchpad appears at the touched location, and it disappears once the touch action is complete.
• The default pad areas are as follows:

2. Jump button: Pressing the button causes the local player to jump. The height value of jumping can be changed through Zepeto Players > Character > Jump Power.

👍

Tips

The pad area can be changed by setting the area of the prefab registered in Control of Zepeto Players.

Change the size of the area in the following order.

1. Select the default prefab registered in Control of Zepeto Players and copy the prefab by dragging and dropping it into Assets.
2. Select the Pad object inside the copied Prefab.
3. Change the Width and Height of the Rect Transform component to the desired size.

The object structure of V-pad created at runtime is as follows.

1. Pad: A screen UI object that can move the character position.

• Background : A translucent black background image showing the pad area.
• HandleOrigin : The outer circle area of the pad. HandleOrigin changes position depending on the touched location.
• Handle : The inner circle area of the pad. When the Handle is touched and dragged, its position changes and it does not leave the HandleOrigin area.

2. Jump : A button object that allows the character to jump.

• Up : Jump image object inside the Jump button.

How to get V-pad input value

In order to receive V-pad input values, you must access the ZepetoScreenTouchpad component and ZepetoScreenButton component created at runtime and register an event.

ZepetoScreenTouchpad Event

The ZepetoScreenButton component is a character jump button component. Accessible events include:

ZepetoScreenButton Event

The ZepetoScreenButton component is a character jump button component. Accessible events include:

Example Script

The following script is an example of outputting the V-pad position value to the console when the user presses the touchpad.

import { Object } from 'UnityEngine';
import { ZepetoPlayers, ZepetoScreenButton, ZepetoScreenTouchpad } from 'ZEPETO.Character.Controller';
import { ZepetoScriptBehaviour } from 'ZEPETO.Script'

export default class GetVPadInput extends ZepetoScriptBehaviour {

    Start() {

        // Add a listener for the event when a local player is added
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this.GetPadTouch();
            this.GetJumpTouch();
        });
    }

    GetPadTouch() {

        // Find the ZepetoScreenTouchpad object in the scene
        const touchPad = Object.FindObjectOfType<ZepetoScreenTouchpad>();

        // Add a listener for the drag event on the touchpad
        touchPad.OnDragEvent.AddListener(() => {
            // Log the position of the touch handle when a drag event occurs
            console.log(touchPad.touchHandle.transform.position);
        });
    }

    GetJumpTouch() {

        // Find the ZepetoScreenButton object in the scene
        const screenButton = Object.FindObjectOfType<ZepetoScreenButton>();

        // Add a listener to the OnPointDownEvent of the screenButton
        // This listener logs "Jump Button Down" when the button is pressed
        screenButton.OnPointDownEvent.AddListener(() => {

            console.log("Jump Button Down");
        });

        // Add a listener to the OnPointUpEvent of the screenButton
        // This listener logs "Jump Button Up" when the button is released
        screenButton.OnPointUpEvent.AddListener(() => {

            console.log("Jump Button Up");
        });

    }

}

• Script Description
  • Register an event listener that calls the GetPadTouch() and GetJumpTouch() functions when a local player is added to the scene.
  • The GetPadTouch() function is a function that processes touch events that occur on the touchpad.
    • Use Object.FindObjectOfType<ZepetoScreenTouchpad>() to find a ZepetoScreenTouchpad object in the scene.
    • Add a listener for the touchpad's OnDragEvent. This listener fires when a drag event occurs on the touchpad.
    • Within the listener, the location of the touch handle is output to the console.
  • The GetJumpTouch() function is a function that processes events that occur from the jump button.
    • Use Object.FindObjectOfType<ZepetoScreenButton>() to find a ZepetoScreenButton object in the scene.
    • Add listeners for the OnPointDownEvent and OnPointUpEvent of the jump button.
    • Within OnPointDownEvent, a log called Jump Button Down is output every time the jump button is pressed.
    • Within OnPointUpEvent, a log called Jump Button Up is output whenever the jump button is released.

• If you run it by pressing the Play button, you can see the V-pad position value displayed in the console log every time you press the V-pad. You will also see the console log displayed every time you press or release the jump button.

V-Pad Customize

You can control the V-Pad using ScreenTouchPad and ScreenButton.

You can turn V-Pad On/Off from UIController_TouchPad_Horizontal, and UIController_TouchPad_Vertical Prefab.

Below is how it looks with Touch Pad turned off. You can turn the Jump Button off the same way.

Double Jump Setting

👍

Double Jump

You can start using it from World Package 1.1.6.

Setting Up through V-Pad Prefab

Please set up as below if you're using Double Jump through V-Pad Button.

1. Click on the UIController_TouchPad_Vertical or UIController_TouchPad_Horizontal prefab.

2. Select Jump from the Prefab list.

3. As seen below, click the + button from OnPointDownEvent() and drag the UIController_TouchPad_Vertical or UIController_TouchPad_Horizontal from the Object slot to set up.

4. Click the No Function part, then set up the UIZepetoPlayerControl > DoubleJump() function.

5. If it's set up like below, it's a success.

How to Set Up through Custom Button

If you are going to create your own button to use, please add the script as seen below.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button } from 'UnityEngine.UI';
import { CharacterState, ZepetoCharacter, ZepetoPlayers } from 'ZEPETO.Character.Controller';

export default class JumpButton extends ZepetoScriptBehaviour {

    public shotButton: Button;
    private zepetoCharacter: ZepetoCharacter;

    Start() {
        // Create character
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this.zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });
        // Add script component
        this.shotButton.onClick.AddListener(() => {
            if (this.zepetoCharacter.CurrentState === CharacterState.Jump) {
                this.zepetoCharacter.DoubleJump();
            } else {
                this.zepetoCharacter.Jump();
            }
        });
    }
}

Example