Block Puzzle 만들기 (4)

기능들을 거의 다 만들었으니, 이번에는 연출 쪽을 보강해 보기로 하자.

 

기본 라이트

이 게임은 기본적으로 SpriteRender를 사용하는 2D 게임이지만 약간 3D 같은 느낌을 가미하면 어떨까?

Directional Light의 그림자를 이용해 보는게 어떨까?

Shader "Sprites/Beat/Diffuse-Shadow"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        _Cutoff ("Shadow alpha cutoff", Range(0,1)) = 0.5
    }
 
    SubShader
    {
        Tags
        {
            "Queue"="AlphaTest"
            "IgnoreProjector"="True"
            "RenderType"="TransparentCutout"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }
 
        LOD 200
        Cull Off
        Lighting On
        ZWrite Off
 
        CGPROGRAM
        #pragma surface surf Lambert addshadow alphatest:_Cutoff
 
        sampler2D _MainTex;
        fixed4 _Color;
 
        struct Input
        {
            float2 uv_MainTex;
        };
 
        void surf (Input IN, inout SurfaceOutput o)
        {
            fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
 
    Fallback "Legacy Shaders/Transparent/Cutout/VertexLit"
}

먼저 SpriteRender가 그림자를 표현할수 있도록 쉐이더를 새로 작성한다.

쉐이더는 UnityForum 에서 찾아왔다. 

https://forum.unity.com/threads/sprite-receive-shadow.357705/

Sprite receive shadow

직접 작성할려면 공부하는데 다시 한 세월이 걸렸겠지만, 다행히 검색하면 없는게 없는 Unity Forum이다.

쉐이더로 재질을 작성해서 SpriteRender마다 할당해 주었다.

결과는 이렇다.

그림자를 넣으니 좀 입체적으로 보인다.

카메라도 Perspective를 사용해 보자.

Perspective / Orthographic

2D 게임에서는 일반적으로 Othographic 모드를 사용하지만 Perspective를 사용하면 원근에 따른 효과를 표현해 줄 수 있다.

Perspective 카메라를 사용할 경우, 화면비율에 따라서 게임영역이 일부 잘릴 수 있다.

PC 게임이라면 화면의 비율이 대충 정해져 있기 때문에 크게 신경 쓸 필요 없겠지만, Android용 게임으로 빌드할 생각이기 때문에 이걸 신경써야 한다.

안드로이드가 지원하는 화면 비율은 정말정말 버라이어티하기 때문...

에라이..

이렇게 화면이 길어지기 시작하면, 테이블 UI가 화면 밖으로 벗어나 버린다.

화면비율에 따라 카메라의 위치를 조절하는 간단한 코드를 추가해보자.

....
void UpdateCameraDistance()
{
    float ratio = (float)Screen.height / (float)Screen.width;
    if (ratio > _defaultScreenRatio)
    {
       _camTrans.localPosition 
       = new Vector3(0,0, _defaultDistance + (ratio - _defaultScreenRatio) * _distResizeRatio);
    }
    else
        _camTrans.localPosition = new Vector3(0,0, _defaultDistance);
    _currentScreenSize = new Vector2(Screen.width, Screen.height);
}
...

내가 설정한 화면비율보다 위아래로 더 길어지면 카메라를 조금씩 뒤로 이동시키는 코드다.

그럼 이걸 카메라에 붙이고 결과를 보자

적절한 콘트롤로 비율을 유지한다.

좋다!

멋지게 해결된 것 같다... 싶었는데 아직 모두 해결된 것은 아니다.

아.. 골치 아프다.

좌표 변환에 문제가 생긴 것 같다. 음.....

그냥 놀까?

그냥 자고 싶다...

 

휴우.... 일단 원인을 알아보자.

Vector3 pos = _uiCamera.WorldToScreenPoint(piece.transform.position + (Vector3)offset);
pos = _mainCamera.ScreenToWorldPoint(pos);

기존의 좌표 변환 코드다. 

드래그하는 조각은 UI공간에 있고, 조각을 놓는 테이블은 Main camera 로 비추고 있는 상태다.

때문에 UI Camera와 Main Camera 를 모두 이용하여 좌표 변환을 시키고 있는 것이다.

기존에 Main Camera가 Orthographic 상태일 때는 아무 문제 없었지만, Perspective로 바뀌면서 문제가 생긴 것이다.

아마 깊이 값(Z)에 따라 XY 좌표가 달라지기 때문일거라 추정된다.

 

이번에도 Unity Forum을 뒤져서 방법을 찾아 보았다.

결론적으로, 내가 원하는 적당한 좌표에 Plane를 만들고 Raycast로 좌표를 구하는 방법을 써야 할 것 같다.

////z == 0 에 플랜을 생성.
Plane _plane = new Plane(-Vector3.forward, Vector3.zero);
  .
  .
  .
Vector3 pos = _uiCamera.WorldToScreenPoint(piece.transform.position + (Vector3)offset);
pos = _mainCamera.ScreenToWorldPoint(pos);
////Raycasting으로 z0 좌표에서의 좌표를 구함.
Ray ray = new Ray(_mainCamera.transform.position, pos-_mainCamera.transform.position);
_plane.Raycast(ray, out float dist);
pos = ray.GetPoint(dist);

휴...

그냥 카메라 모드만 Perspective로 바꾸고 싶었던 것 뿐인데, 뭔 부가 작업을 이렇게나 해야 하다니...

진 다 빠지는 느낌이다.

시간도 한참이나 소모해 버렸다. (이런 복병들이 곳곳에 깔려 있어서 프로그래밍 작업의 기간 산정은 정말 애매한 경우가 많다...)

 

이제 스도쿠 처럼 정사각형 범위에 맞춰 블럭의 색을 구분하도록 해보자.

이건 쉬워 보인다.

  sprType = (_pos.x / 3 + _pos.y / 3) % 2 == 0 ? 2 : 1;

그냥 좌표 3으로 나눠서 줄여버리면 간단하게 영역을 구분지을 수 있다.

좋은데?

오. 들인 노력에 비해서 뭔가 좋아 보인다.

그럼 오늘은 이만...

시간에 비해 진척도는 낮지만 너무 졸리다...