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 screen mode canvas size area size horizontal 1334 x 750 600 x 450 vertical 750 x 1334 375 x 500 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 select the default prefab registered in control of zepeto players and copy the prefab by dragging and dropping it into assets select the pad object inside the copied prefab 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 event description onpointerdownevent this event occurs when the user presses the v pad ondragevent this event occurs while the user is pressing the v pad onpointerupevent this event occurs when the user releases the v pad zepetoscreenbutton event the zepetoscreenbutton component is a character jump button component accessible events include event description onpointdownevent this event occurs when the user presses the jump button onpointupevent this event occurs when the user releases the jump button example script the following script is an example of outputting the v pad position value to the console when the user presses the touchpad getvpadinput 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 you can add a double jump function to the v pad's jump button or apply a custom double jump button function to enable the double jump feature, activate the custom parameters > double jump checkbox in the character section of the zepetoplayers component the height of the double jump can be set by adjusting the power value there are three ways to use double jump feature on the v pad 1\) setting through v pad prefab when using double jump with the v pad button, set up as follows click the uicontroller touchpad vertical or uicontroller touchpad horizontal prefab you will be moved to the folder where the original prefab is located under the packages folder in the project panel copy the uicontroller touchpad vertical or uicontroller touchpad horizontal prefab by dragging and dropping it into the assets folder ❗️ caution the original prefab in the packages folder cannot be modified, so you must copy a copy to the assets folder to modify it if you try to modify the original prefab, an immutable prefab error will occur double click the uicontroller touchpad vertical or uicontroller touchpad horizontal prefab in the copied prefab item or press the open prefab button in the inspector window to edit the prefab select the jump object from the prefab's sub objects in the zepeto screen button component of the jump object, press the + button in on point down event() and register an event as follows on point down event() runtime only select object register uicontroller touchpad vertical or uicontroller touchpad horizontal event function click the no function section and set it to uizepetoplayercontrol > doublejump() function if the settings are as follows, it is successful 2\) setting using a script this script allows the character to perform a double jump in response to input from the v pad's jump button import { zepetoscriptbehaviour } from 'zepeto script'; import { object } from 'unityengine'; import { zepetoscreenbutton, characterstate, zepetoplayers } from 'zepeto character controller'; export default class dobulejump extends zepetoscriptbehaviour { start() { // listen for when a local player is added and execute the given lambda function zepetoplayers instance onaddedlocalplayer addlistener(() => { // retrieve the local player's character const zepetocharacter = zepetoplayers instance localplayer zepetoplayer character; // find an object of type zepetoscreenbutton in the scene const screenbutton = object findobjectoftype\<zepetoscreenbutton>(); // add a listener for the onpointdownevent of the screen button to handle jump actions screenbutton onpointdownevent addlistener(() => { // if the character's current state is jump, trigger a double jump if (zepetocharacter currentstate === characterstate jump) { zepetocharacter doublejump(); } }); }) } } script description zepetoplayers instance onaddedlocalplayer addlistener() registers a listener that is triggered when a local player is added to the game this serves to configure the double jump feature to be added as local players are added zepetoplayers instance localplayer zepetoplayer character provides access to the local player's character object findobjectoftype() locates a zepetoscreenbutton type object in the current scene and assigns it to jump actions screenbutton onpointdownevent addlistener() adds a listener to the screen button's onpointdownevent this listener waits for either a screen touch or click event and initiates a jump or double jump action within the listener, the if statement checks if the character's current state is characterstate jump if true, it executes zepetocharacter doublejump() after writing the script, create an empty gameobject in the scene and add the dobulejump ts script as a component 3\) setting through a custom button if you choose to create and use your own button, please add the script as shown below this script adds jump and double jump functions to user defined buttons 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(); } }); } } script description zepetoplayers instance onaddedlocalplayer addlistener() registers a function to be executed when a local player is added to the game this shotbutton onclick addlistener() adds a function to be executed when the shotbutton is clicked when the function is triggered, it checks whether the character's current state is a jump state and executes a jump or double jump if the character is in a jumping state, this zepetocharacter doublejump() is called to perform a double jump; otherwise, this zepetocharacter jump() is called to perform a jump after writing the script, create an empty gameobject in the scene and add the jumpbutton ts script as a component finally, assign a jump button to the shot button in the inspector