목표
오늘 개발의 목표는 디지털 전환에 필요한 재료 블록을 터치시 그 블록에 선택했다는 것을 인지하기 위한 시각적 효과를 부여하는 것이다.
내용
터치한 블록을 시각적으로 표현하기 위해 처음 고안한 방법은 선택한 대상의 색상을 변경하는 것이었고, 아직 블록의 디자인이 완성되지 않았기 떄문에 임시로 만든 테스트용 블록을 이용해서 작업을 진행했다.
가운데 블록이 임시 블록이고 이제 저 블록을 터치해서 색상을 바꿀것이다. 이미 블록에 붙여놨지만 BlockEffect라는 스크립트를 만들어서 테스트 블록에 붙여줬다.
사실 터치한 블록의 색상을 바꾸는 스크립트를 대상인 블록에 연결할 것인지, 아니면 전역적으로 관리하는 매니저 (TouchManager)에 넣을 것인지 고민했었는데 블록에 넣는것을 선택했다.
그 이유는 매니저에서 이런 부분까지 관리하게 된다면 역할에 대한 혼란이 올것이라고 판단했기 떄문이다. (매니저의 역할이 광범위해진다고 판단했다.)
- 구현한 전체 코드.
using System.Collections; using System.Collections.Generic; using UnityEngine; public class BlockEffects : MonoBehaviour { [SerializeField] Color originalColor; // 기존 색상 저장할 변수 [SerializeField] Color highlightColor; // 새로운 색상 변수 void Start() { Renderer renderer = GetComponent<Renderer>(); // 렌더러 컴포넌트 부착 if (renderer != null) { originalColor = renderer.material.color; // 기존 색상 저장. highlightColor = new Color(1f, 0.41f, 0.71f, 0.7f); // 분홍색으로 초기화 } } void OnMouseDown() { // 이미 클릭 되어있는 블록일 경우 제거, 아닐경우 추가 if (GameManager.Instance.player1SelectResources.Contains(this.gameObject)) { if (originalColor != null) //null 체크 { GetComponent<Renderer>().material.color = originalColor; // 원래 색상으로 변경. } GameManager.Instance.player1SelectResources.Remove(this.gameObject); // 제거. } else { GameManager.Instance.player1SelectResources.Add(this.gameObject); // 게임 매니저에서 확인하기 위한.. GetComponent<Renderer>().material.color = highlightColor; // 분홍색으로 변경. } } }
[SerializeField]
Color originalColor; // 기존 색상 저장할 변수
[SerializeField]
Color highlightColor; // 새로운 색상 변수
void Start()
{
Renderer renderer = GetComponent<Renderer>(); // 렌더러 컴포넌트 부착
if (renderer != null)
{
originalColor = renderer.material.color; // 기존 색상 저장.
highlightColor = new Color(1f, 0.41f, 0.71f, 0.7f); // 분홍색으로 초기화
}
}기존 색상과 새로운 색상을 변수로 선언해줬다.
[serializeField]를 붙인 이유는 public으로 선언하지 않고 인스펙터상에서 확인하기 위해서다.
다음으로 터치시 색상을 바꿀 함수를 정의했다.
void OnMouseDown()
{
GetComponent<Renderer>().material.color = new Color(1f, 0.41f, 0.71f, 0.7f); // 분홍색으로 변경.
}우선 Start()에서 Renderer 컴포넌트를 부착해줬다.
처음엔 그저 Renderer 컴포넌트의 material.color만 바꾸면 될것이라고 생각해서 바로 new로 색상을 변경했었는데 그러면 original Color와 highlight Color를 구분하기 힘들어져 두 변수로 선언해서 관리했다.
나중에 다른 플레이어들이 선택한 것들의 색상을 바꾸기 위해서 더 늘어날 것이다.
void OnMouseDown()
{
// 이미 클릭 되어있는 블록일 경우 제거, 아닐경우 추가
if (GameManager.Instance.player1SelectResources.Contains(this.gameObject))
{
if (originalColor != null) //null 체크
{
GetComponent<Renderer>().material.color = originalColor; // 원래 색상으로 변경.
}
GameManager.Instance.player1SelectResources.Remove(this.gameObject); // 제거.
}
else
{
GameManager.Instance.player1SelectResources.Add(this.gameObject); // 게임 매니저에서 확인하기 위한..
GetComponent<Renderer>().material.color = highlightColor; // 분홍색으로 변경.
}
}그 후 Renderer 컴포넌트가 null이 아니라면 기존의 색상을 originalColor에 저장하고 바꿀 색상인 highlightColor에 분홍색으로 초기화했고,
조합을 확인하기 위해 GameManager에 List를 추가해 현재 플레이어1이 어떤 카드를 골랐는지 확인할 수 있게 되었다.
또한 이미 터치했던 블록을 다시 터치할 경우 색상을 원래대도 되돌리고 리스트에서 제거하는 과정을 추가했다.
이로써 블록을 터치시 블록의 색상이 변경되고, 한 번 더 클릭할 경우에 색상이 원래대로 돌아오게 되었다.
🔻영상
(https://velog.velcdn.com/images/ash028/post/6b81b7c4-1a28-4f66-802d-e1d8c8d68c34/image.mp4)
마침
이번엔 우선 시각적으로 구별하기위해 색상만 변경했지만 다음엔 애니메이션이나 파티클을 추가하는 작업을 할것이다.
- 블록선택효과(1)
- 캐릭터표정변화
