우선 가이드 라인을 캔버스에 적용한후

플레이하는 기계에 따라 유동적으로 변화할 수 있게

스케일모드와 레퍼런스 솔루션을 적용

 

 

알베도를 설정하여 가이드라인을 흐리게 설정

 

데모씬으로 들어가서 오브젝트들을 하나씩 활성화 시켜본 후 필요한 것을 찾고

그 안에있는 컴포넌트들을 확인해야 한다.

그리고 이런 느낌으로 메모장에 적어둔다.

버튼을 만들것인데 TMP로 만들것이다.

https://docs.unity3d.com/Packages/com.unity.textmeshpro@1.0/api/TMPro.TextMeshProUGUI.html

 

Class TextMeshProUGUI

Class TextMeshProUGUI Inherited Members Namespace: TMPro Assembly : solution.dll Syntax public class TextMeshProUGUI : TMP_Text, ILayoutElement Fields m_subTextObjects Declaration protected TMP_SubMeshUI[] m_subTextObjects Field Value Properties autoSizeTe

docs.unity3d.com

 

아까 메모장에 적어뒀던걸로 검색해서 이런식으로 assign

 

가져오면 이런식으로 sliced가 되있을 것인데 사이즈를 바꿔줄 것이다.

이러면 기본적인 크기가 조절되는데 다시 sliced로 바꿔야 이미지 크기를 조절할때

이미지가 찌그러지는 상황을 방지할 수 있다.

 

UI를 만들때 기초이자 필수인 과정인데

가이드란과 비교해서 그 위해 이미지를 덮고 이미지와 텍스트를껐다켰다하며 실제와 같은지 비교하고 조정한다.

조정할 것으로는 이미지크기, 텍스트, 색상 같은 것들이 있다.

UI들을 관리해줄 빈오브젝트 생성 후 스크립트 어싸인

 

이런식으로 직접 할당해줄수 있지만 나중에 컴포넌트들이 많으면 관리하기가 힘들고

혹시나 나중에 디자이너들과 협업을 할때 쉽게 건들여질 수 있는 부분으로 권장하지 않는다.

따라서 초기화

이런식으로 인스펙터에서 할당하지 않아도 클릭하면 인지될 수 있도록 코드를 구현할 것이다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class BlueButton : MonoBehaviour
{
    [SerializeField] public Button blueButton;

    private void Start()
    {
        this.blueButton.onClick.AddListener(() => {
            Debug.Log("Blue Button Clicked!");
        });
    }
}

 

이제 Inputfield를 만들 것인데 버튼과 마찬가지로 필요한 텍스쳐들을 찾아낸다.

칼라도 잊지말고 찾자

Allignment는 사실 크게 신경쓰지 않아도 된다.

위에 있는 것들은 버튼을 만들때 필요했던 것들 아래는 이번에 만들 인풋필드에 필요한 것들이다.

.

기존에 인풋필드에서 사용하는 폰트는 한글이 없으므로 설치후

window - textmeshpro - font asset creator

글자는 각 숫자로 정리 되어있는데 이것은 한글 범위를 찾아서 넣어줘고 제너레이트 해야 한다.

 

https://docs.unity3d.com/Packages/com.unity.textmeshpro@4.0/manual/FontAssetsCreator.html

 

Font Asset Creator | TextMeshPro | 4.0.0-pre.2

Font Asset Creator The Font Asset Creator converts Unity font assets into TextMesh Pro font assets. You can use it to create both Signed Distance Field (SDF) fonts and bitmap fonts. When you create a new font Asset, TextMesh Pro generates the Asset itself,

docs.unity3d.com

제너레이트 후 세이브

 

아까는 onClick()를 썼듯이 이번엔 이것을 사용할 것이다.

어싸인

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;

public class InputField : MonoBehaviour
{
    [SerializeField] public TMP_InputField inputField;
    void Start()
    {
        this.inputField.onValueChanged.AddListener((word) =>
        {
            Debug.LogFormat("{0}", word);
        });
    }
}

이제 입력을 하고 버튼을 누르면 출력되게 할 것이다.

using UnityEngine;
using UnityEngine.UI;

public class BlueButton : MonoBehaviour
{
    public Button blueButton;
    private ShowText showText;

    void Start()
    {
        this.showText = GetComponent<ShowText>();
        blueButton.onClick.AddListener(() =>
        {
            showText.ShowMessage();
        });
    }
}

 

using TMPro;
using UnityEngine;

public class ShowText : MonoBehaviour
{
    public TMP_InputField inputField;

    public void ShowMessage()
    {
        Debug.Log(inputField.text);
    }

    //public void SubscribeToInputFieldChange()
    //{
    //    inputField.onValueChanged.AddListener((word) =>
    //    {
    //    });
    //}
}

'낙서장 > UIUX' 카테고리의 다른 글

Skill Button  (0) 2024.03.18
Slider  (0) 2024.03.18
Switch Button  (0) 2024.03.18

https://docs.unity3d.com/kr/530/Manual/OcclusionCulling.html

 

오클루전 컬링 - Unity 매뉴얼

오클루전 컬링(Occlusion Culling)은 다른 오브젝트에 가려(오클루전된) 카메라에 보이지 않는 오브젝트의 렌더링을 비활성화하는 기능입니다. 3D 컴퓨터 그래픽스에서는 대부분의 경우 카메라에서

docs.unity3d.com

 

큰 오브젝트에 가려질 오브젝트들도 만든다.

제일 큰 큐브와 플레인 설정

나머지 오브젝트들도 설정

 

오쿨루더와 오쿨루디 설정을 잘 해놓아야 한다.

 

윈도우를 누르면 오쿨루전 설정이 보인다.

인스펙터를 확인해보면 새로운 창이 추가되었다.

전체를 선택한후 베이크를 한다.

그러면 이렇게 뒤에 가려진 오브젝트들은 사라진다.

어떻게 빛이 나가는지 보고 싶을경우 여기를 체크하면 빛의 방향과 크기를 볼 수있다.

 

주의사항

 

베이크창을 보면 이렇게 크기를 조절할 수 있는데

제일 앞에 있는 오브젝트가 이 스케일보다 커야 한다.

'산대특 > 게임 클라이언트 프로그래밍' 카테고리의 다른 글

Sprite Shooter - Player and Monster Animation  (0) 2024.03.14
Sprite Shooter - Destroy Barrel and Layer  (0) 2024.03.13
Zombie - IK  (0) 2024.03.07
Zombie - Line Render  (0) 2024.03.07
Tank - Rigidbody.MovePosition  (0) 2024.03.06

게임오브젝트 3개를 생성해서 각각 배경을 넣어주는데

order in layer로 계층구조를 잡아줄것이다

a부터 c까지 각각 -3, -4, -5

게임 오브젝트의 좌표는 모두 0 0 0

복사를 해서 각각 3개로 만들어주고

0의 Y좌표는 0

1의 Y좌표는 -10

2의 Y좌표는 10

카메라는 그대로

배경은 뒤로 옮겨 눈속임을 할것이다.

 

스크립트 생성후 배경이 움직이는 로직 작성

using System.Collections;
using System.Collections.Generic;
using TreeEditor;
using UnityEditor;
using UnityEngine;

public class Background : MonoBehaviour
{
    public float speed;
    void Start()
    {
        
    }

    void Update()
    {
        Vector3 curPos = transform.position;
        Vector3 nextPos = Vector3.down * speed * Time.deltaTime;
        transform.position = curPos + nextPos;
    }
}

그런데 이렇게 하면 맨뒤에 아무것도 없는 배경이 보인다.

따라서 배경을 무한으로 만들어 주어야한다.

 

카메라의 시점

카메라를 잡을때 메인카메라의 시점 * 2를해서 화면이 짤리기전에 한번 더 보여주게  하였고

y좌표가 -1일때 시작점을 바꾸어 연속적으로 보이게 하였다.

using System.Collections;
using System.Collections.Generic;
using TreeEditor;
using UnityEditor;
using UnityEngine;

public class Background : MonoBehaviour
{
    public float speed;
    public int startIndex;
    public int endIndex;
    public Transform[] sprites;

    float viewHeight;
    
    void Start()
    {
        viewHeight = Camera.main.orthographicSize * 2; // 카메라
    }

    void Update()
    {
        Vector3 curPos = transform.position;
        Vector3 nextPos = Vector3.down * speed * Time.deltaTime;
        transform.position = curPos + nextPos;

        if (sprites[endIndex].position.y < viewHeight * (-1))
        {
            //#.Sprite ReUse
            Vector3 backSpritePos = sprites[startIndex].localPosition;
            Vector3 frontSpritePos = sprites[endIndex].localPosition;

            sprites[endIndex].transform.localPosition = backSpritePos + Vector3.up * viewHeight;

            //이동이 완료되면 EndIndex, StartIndex 갱신
            //#.Cursor Index Change
            int startIndexSave = startIndex;
            startIndex = endIndex;
            endIndex = (startIndexSave -1 == -1) ? sprites.Length-1 : startIndexSave-1;
        }

    }
}

A, B, C를 나눈 이유는 원근감을 주기 위해서이다.

 

Parallax: 거리에 따른 상대적 속도를 활용한 기술

C는 속도1 B는2 A는4

 

using System.Collections;
using System.Collections.Generic;
using TreeEditor;
using UnityEditor;
using UnityEngine;

public class Background : MonoBehaviour
{
    public float speed;
    public int startIndex;
    public int endIndex;
    public Transform[] sprites;

    float viewHeight;
    
    void Start()
    {
        viewHeight = Camera.main.orthographicSize * 2; // 카메라
    }

    void Update()
    {
        

        if (sprites[endIndex].position.y < viewHeight * (-1))
        {
            Move();
            Scrolling();
        }

        void Move()
        {
            Vector3 curPos = transform.position;
            Vector3 nextPos = Vector3.down * speed * Time.deltaTime;
            transform.position = curPos + nextPos;
        }

        void Scrolling()
        {
            //#.Sprite ReUse
            Vector3 backSpritePos = sprites[startIndex].localPosition;
            Vector3 frontSpritePos = sprites[endIndex].localPosition;

            sprites[endIndex].transform.localPosition = backSpritePos + Vector3.up * viewHeight;

            //이동이 완료되면 EndIndex, StartIndex 갱신
            //#.Cursor Index Change
            int startIndexSave = startIndex;
            startIndex = endIndex;
            endIndex = (startIndexSave - 1 == -1) ? sprites.Length - 1 : startIndexSave - 1;
        }
    }
}

'산대특' 카테고리의 다른 글

2D Vertical Shooting Game 모작 최종  (0) 2024.04.08
팬텀로즈스칼렛 모작 최종  (0) 2024.04.08
2D Airplane - 5  (1) 2024.03.14
2D Airplane - 4  (0) 2024.03.12
2D Airplane - 3  (0) 2024.03.12

+ Recent posts