Quarter View Example

👍
Available starting from World Package 1.3.0.

ZEPETO character controls can be customized to use Unity's New Input System instead of V-Pad.

These are examples of setting the Quarter View control.

STEP 1 : Camera View Setting

Set the Camera as Quarter View (This is an example, so please modify the camera setting according to your project.)

At this point, the camera's tag should be set to MainCamara.

STEP 2 : InputAction Setting

By defining a new InputAction for the Qiarter View, you can control character movements through touch screen.

Select Create > Input Actions and set the file name as QuarterViewActions.

Move
- Action Type : Pass Through
Move Trigger
- Action Type : Button

After creating Hierarchy > Create Empty Object, change the file name to QuarterViewController.

From QuarterViewController object, select Add Component and add the Player Input.

Drag and connect the QuarterView Actions that you just created to the Actions list.

Change the Behavoir to Invoke Unity Events.

STEP 3 : Scripting

Write a script that calculates the direction of the character's movement through touch screen input.

Select Create > ZEPETO > TypeScript and rename it QuarterView Controller.

Adds the script to the QuarterView Controller object.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { PlayerInput,InputAction } from 'UnityEngine.InputSystem';
import { CallbackContext } from 'UnityEngine.InputSystem.InputAction';
import { CharacterState, ZepetoCharacter, ZepetoPlayers, ZepetoCamera } from 'ZEPETO.Character.Controller';
import { Quaternion, Time, Vector2, Vector3 } from 'UnityEngine';
import * as UnityEngine from 'UnityEngine';

export default class QuarterViewController extends ZepetoScriptBehaviour {

    private myCharacter: ZepetoCharacter;
    private startPos: Vector2 = Vector2.zero;
    private curPos: Vector2 = Vector2.zero;

    private playerInput: PlayerInput;
    private touchPositionAction: InputAction;
    private touchTriggerAction: InputAction;

    private isTriggered: boolean = false;
    private isTouchDown: boolean = false;

    private CanMove(): boolean {
        return this.isTouchDown && !this.isTriggered;
    }

    OnEnable() {
        this.playerInput = this.gameObject.GetComponent<PlayerInput>();
    }

    Start() {
        this.touchTriggerAction = this.playerInput.actions.FindAction("MoveTrigger");
        this.touchPositionAction = this.playerInput.actions.FindAction("Move");

        this.touchTriggerAction.add_started(context => {
            this.isTriggered = true;
            this.isTouchDown = true;
        });

        this.touchTriggerAction.add_canceled(context => {
            this.isTriggered = false;
            this.isTouchDown = false;
        });

        this.touchPositionAction.add_performed(context => {
            if (this.isTouchDown) {
                this.curPos = context.ReadValueAsObject() as Vector2;

                if (this.isTriggered) {
                    this.isTriggered = false;
                    this.startPos = this.curPos;
                }
            }
        });

        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            console.log("quarter view log");
            ZepetoPlayers.instance.LocalPlayer.zepetoCamera.gameObject.SetActive(false);
            this.myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;

            this.StartCoroutine(this.InputControlLoop());
        });
    }

    private *InputControlLoop() {
        while (true) {
            yield new UnityEngine.WaitForEndOfFrame();

            if (this.myCharacter && this.CanMove()) {
                const camRot = Quaternion.Euler(0, UnityEngine.Camera.main.transform.rotation.eulerAngles.y, 0);
                let moveDir = Vector2.op_Subtraction(this.curPos, this.startPos);
                moveDir = Vector2.op_Division(moveDir, 100);

                if (moveDir.magnitude > 0) {
                    if (moveDir.magnitude > 1) {
                        moveDir.Normalize();
                    }

                    let optMoveDir = new Vector3(moveDir.x, 0, moveDir.y);
                    optMoveDir = Vector3.op_Multiply(optMoveDir, Time.deltaTime * 80);
                    this.myCharacter.Move(camRot * optMoveDir);
                }
            }
        }
    }
}