Side View Example

5min
These are examples of setting Side View control.
﻿
﻿
STEP 1 : Camera View Setting
Set the camera to the side 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 that fits the side view, you can control character movements through touch screen.
Select Create > Input Actions and name the file SideView Actions.
Move
Action Type : Pass Through
Move Trigger
Action Type : Button
﻿
﻿
Create Hierarchy > Create Empty Object and rename it to SideView Controller.
From SideViewController object, select Add Component and add the Player Input.
﻿
﻿
Drag and connect SideView Actions that you just created to the Actions list.
Change the Behavoir to Invoke Unity Events.
﻿
﻿
STEP 3 : Scripting
Create a script to control the ZEPETO character to move from side to side, and have the camera follow,
Select Create > ZEPETO > TypeScript and rename it to SideView Controller.
Adds the script to the SideViewController object.
TypeScript
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 {Camera, Quaternion, Time, Vector2, Vector3, WaitForEndOfFrame} from "UnityEngine";

export default class SideViewController extends ZepetoScriptBehaviour {

    public customCamera : Camera;
    public cameraDistance : number = 10;

    private originSpawnPoint : Vector3 = new Vector3(-16,-5,0);
    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;
                }
            }
        });

        //turn off zepeto camera
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            ZepetoPlayers.instance.LocalPlayer.zepetoCamera.gameObject.SetActive(false);
            this.myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            this.customCamera.transform.position = this.myCharacter.transform.position + this.originSpawnPoint;
            this.StartCoroutine(this.InputControlLoop());
        });
    }

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

            if (this.myCharacter && this.CanMove()) {

                var camRot = Quaternion.Euler(0, Camera.main.transform.rotation.eulerAngles.y, 0);
                var moveDir = Vector2.op_Subtraction(this.curPos, this.startPos);
                moveDir = Vector2.op_Division(moveDir, 100);


                if (moveDir.magnitude > 0) {

                    if(moveDir.magnitude > 1)
                        moveDir.Normalize();

                    //left-right
                    var optMoveDir = new Vector3(moveDir.x, 0, 0);
                    optMoveDir = Vector3.op_Multiply(optMoveDir, Time.deltaTime * 80 );
                    this.myCharacter.Move(camRot * optMoveDir);
                }
            }
        }
    }

    //follow zepeto character
    LateUpdate()
    {
        if(null == this.myCharacter)
        {
            return;
        }
        let characterPos = this.myCharacter.transform.position;
        //let cameraPosition = new Vector3(characterPos.x - this.cameraDistance, this.customCamera.transform.position.y, characterPos.z);
        let cameraPosition = new Vector3(characterPos.x - this.cameraDistance, characterPos.y + 1, characterPos.z);
        this.customCamera.transform.position = cameraPosition;
    }
}
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 {Camera, Quaternion, Time, Vector2, Vector3, WaitForEndOfFrame} from "UnityEngine";

export default class SideViewController extends ZepetoScriptBehaviour {

    public customCamera : Camera;
    public cameraDistance : number = 10;

    private originSpawnPoint : Vector3 = new Vector3(-16,-5,0);
    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;
                }
            }
        });

        //turn off zepeto camera
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            ZepetoPlayers.instance.LocalPlayer.zepetoCamera.gameObject.SetActive(false);
            this.myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            this.customCamera.transform.position = this.myCharacter.transform.position + this.originSpawnPoint;
            this.StartCoroutine(this.InputControlLoop());
        });
    }

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

            if (this.myCharacter && this.CanMove()) {

                var camRot = Quaternion.Euler(0, Camera.main.transform.rotation.eulerAngles.y, 0);
                var moveDir = Vector2.op_Subtraction(this.curPos, this.startPos);
                moveDir = Vector2.op_Division(moveDir, 100);


                if (moveDir.magnitude > 0) {

                    if(moveDir.magnitude > 1)
                        moveDir.Normalize();

                    //left-right
                    var optMoveDir = new Vector3(moveDir.x, 0, 0);
                    optMoveDir = Vector3.op_Multiply(optMoveDir, Time.deltaTime * 80 );
                    this.myCharacter.Move(camRot * optMoveDir);
                }
            }
        }
    }

    //follow zepeto character
    LateUpdate()
    {
        if(null == this.myCharacter)
        {
            return;
        }
        let characterPos = this.myCharacter.transform.position;
        //let cameraPosition = new Vector3(characterPos.x - this.cameraDistance, this.customCamera.transform.position.y, characterPos.z);
        let cameraPosition = new Vector3(characterPos.x - this.cameraDistance, characterPos.y + 1, characterPos.z);
        this.customCamera.transform.position = cameraPosition;
    }
}
﻿
﻿
Please set up the camera on the inspector before running it.
﻿
﻿
Updated 10 Oct 2024
Did this page help you?
Top View Example
FPS/TPS View Example