덱 설정 및 저장(backend 서버를 이용해 내 데이터 수정) 및 카드 배치
덱을 게임 내에서 수정하고, 그 정보를 서버에 입력할 수 있다.
1.덱 설정 및 저장
2개의 scroll view를 통해 내 카드 목록에서 deck 목록으로 마우스 드래그를 이용해 옮겨 카드를 추가 및 제거를 한다. deck에는 카드를 무조건 50장을 넣어야 한다. 50장이 되지 않으면 저장이 되지 않는다. 저장 버튼을 통해 서버에 갱신된 deck 목록이 입력되고, 메인 화면의 deck도 갱신된다.
< 왼쪽이 deck, 오른쪽이 my card >
scroll view content에 prefebs를 통해 카드를 추가하는 것은 앞의 post와 같은 방식으로 진행된다. 하지만 여기서는 collider를 사용한다. 특정 좌표에서 마우스를 클릭을 해제했을 때 deck으로 이동할 지 mycard로 이동할 지 정해진다.
//카드 드래그가 시작되었을 때 동작
public void DragCard(GameObject gameObject)
{
if(gameObject.transform.parent.transform.parent.transform.parent.gameObject == mycard)
{
Debug.Log("card");
mycard.GetComponent<ScrollRect>().vertical = false; // 카드의 parent가 mycard일 때 mycard scroll view의 움직임을 멈춘다.
}
else if(gameObject.transform.parent.transform.parent.transform.parent.gameObject == mydeck)
{
Debug.Log("deck");
mydeck.GetComponent<ScrollRect>().vertical = false; // 카드의 parent가 deck일 때 deck의 scroll view의 움직임을 멈춘다.
}
gameObject.transform.parent = Card.transform.transform; //임의의 오브젝트를 만든다. 드래그 중일 때 카드의 parent가 임의의 오브젝트에 할당된다.
Vector3 mousePosition = new Vector3(Input.mousePosition.x,
Input.mousePosition.y, 10);
Vector3 objPosition = Camera.main.ScreenToWorldPoint(mousePosition);
gameObject.transform.position = objPosition; //카드가 마우스를 따라 움직이게 된다.
}
카드를 처음 클릭부터 드래그 되었을 때의 동작이다. 이 함수는 card의 prefebs에 있는 script에 추가한다.
void OnMouseDrag()
{
ViewCard.Inst.DragCard(this.gameObject);
}
카드를 놓았을 때의 동작
public void MouseUp() //카드를 놓았을 때의 다시 scroll을 활성화 시킨다.
{
mycard.GetComponent<ScrollRect>().vertical = true;
mydeck.GetComponent<ScrollRect>().vertical = true;
}
카드를 놓은 위치에 추가
public void Move(GameObject card)
{
if(Input.mousePosition.x>=113.8 && Input.mousePosition.x<=812.7f &&Input.mousePosition.y<=552.5 && Input.mousePosition.y >=70.0) //이 범위는 deck content의 범위
{
if(myDeckContent.transform.childCount>=50) // 카드가 이미 50장일 경우엔 다시 mycard로 이동
{
print("카드가 이미 50장입니다.");
card.transform.parent = myCardContent.transform;
card.transform.SetSiblingIndex(0); //카드를 제일 첫번째 index로 설정하여 카드가 제일 위에 위치
return;
}
card.transform.parent = myDeckContent.transform; //50장이 되지 않을 경우에는 deck에 제일 앞에 위치하게 한다.
card.transform.SetSiblingIndex(0);
}
else
{
card.transform.parent = myCardContent.transform; // 카드를 놓은 위치가 deck content의 위치가 아닌 다른 곳일 때는 mycard로 돌아간다.
card.transform.SetSiblingIndex(0);//카드를 제일 첫번째 index로 설정하여 카드가 제일 위에 위치
}
}
위의 방식으로 카드를 설정할 수 있다. 덱을 모두 수정한 뒤에 덱을 다시 서버에 입력하려면, 저장 버튼을 누르면 된다. On Click() 이벤트로 아래의 스크립트가 진행된다.
public void SaveDeck()
{
if(myDeckContent.transform.childCount !=50) // 50장이 되지 않을 경우 안된다.
{
print("카드가 50장이 아닙니다.");
return;
}
Param param = new Param();
Where where = new Where();
param.Remove("deck"); //기존에 저장되어 있는 deck의 정보를 삭제(삭제하지 않으면, 중첩되게 됨)
for(int i =0;i<50;i++)
{
if(saveDeck.ContainsKey(int.Parse(myDeckContent.transform.GetChild(i).name))) //이미 카드가 있을 경우 갯수만 추가
{
saveDeck[int.Parse(myDeckContent.transform.GetChild(i).name)]++; //카드를 생성할 때 오브젝트 이름을 코드로 만들어서 관리하기에 바로 이름을 입력
}
else
{
saveDeck.Add(int.Parse(myDeckContent.transform.GetChild(i).name),1); //없을 경우에는 항목을 추가
}
}
param.Add("deck", saveDeck);
Backend.GameData.Update("character", where, param);
Debug.Log("저장되었습니다.");
}
< 결과물 >
2.나의 카드, 도감
위의 탭을 보면 덱, 나의 카드와 도감이 있다. 덱의 위와 같이 꾸미고, 나의 카드와 도감은 같은 방식으로 꾸몄다. 나의 카드와 도감의 카드는 collider를 꺼서 마우스 클릭이 되도 아무 동작도 진행하지 않는다.
< Grid Layout Group >
위와 같이 Layout Group에는 3가지 종류가 있는데, Grid, Vertical, Horizontal 이 있다. 이 세 종류를 사용하면 scroll view에서 content에 오브젝트의 배치를 깔끔하게 정렬할 수 있다.