동전게임 개발일지 - 3

동전게임 개발일지 3편
grid 좋아
grid 싫어
동전들을 배치해보자
 

어제 올린 이미지

 

어제 올린 내용..
에러는 없었으나 뭔가.......
좀 그랬다
 
일단 화면 비율이 길어지면
위 아래간격이 너무 넓어진다는것과
모바일 화면에서 저 네모칸에
손가락을 올리는게 편할까?
너무 작지 않나.. 싶었다
 
그래서 화면 비율이 길어지면
거기에 따라 행을 늘리기로 했다
 

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

public class FlexibleGridLayout : LayoutGroup
{
    public int rows;
    public int columns;
    public Vector2 cellSize;
    public Vector2 spacing;
    public CoinManager coinManager;

    public override void CalculateLayoutInputHorizontal()
    {
        base.CalculateLayoutInputHorizontal();

        float parentWidth=rectTransform.rect.width;
        float parentHeight=rectTransform.rect.height;

        float cellWidth=parentWidth/(columns+3);

        rows=Mathf.RoundToInt((float)(parentHeight/parentWidth)*11);

        cellSize.x=cellWidth;
        cellSize.y=cellWidth;

        float spacingWidth=((parentWidth-padding.right)-(cellWidth*columns))/(columns-1);
        float spacingHeight=((parentHeight-padding.bottom)-(cellWidth*rows))/(rows-1);

        rectTransform.offsetMin = new Vector2(spacingWidth, spacingWidth);
        rectTransform.offsetMax = new Vector2(-spacingWidth, -spacingWidth);

        spacing.x=spacingWidth;
        spacing.y=spacingHeight;

        int columnCount=0;
        int rowCount=0;

        CoinManager coinManager=GetComponent<CoinManager>();

        if(coinManager.isInit)
        {
            for(int i=0;i<rectChildren.Count;i++)
            {
                int effectiveColumns = Mathf.Max(columns, 1);

                rowCount = i / effectiveColumns;
                columnCount = i % effectiveColumns;

                var item=rectChildren[i];

                var xPos=(cellSize.x*columnCount)+(spacing.x*columnCount)+padding.left;
                var yPos=(cellSize.y*rowCount)+(spacing.y*rowCount)+padding.left;

                SetChildAlongAxis(item,0,xPos,cellSize.x);
                SetChildAlongAxis(item,1,yPos,cellSize.y);
            }

            this.enabled=false;
        }

    }

    public override void CalculateLayoutInputVertical()
    {

    }

    public override void SetLayoutHorizontal()
    {
        
    }

    public override void SetLayoutVertical()
    {

    }
}

 

추가된 행 부분은
rows=Mathf.RoundToInt((float)(parentHeight/parentWidth)*11);
이 부분이다
높이에서 너비를 나눈거에
11을 곱한 뒤 int형으로 치환하면
위에 빈 공간이 너무 길어지지 않으면서
적당하게 행이 추가된다
 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class CoinManager : MonoBehaviour
{
    public GameObject Coin;
    public FlexibleGridLayout flexibleGridLayout;
    public RectTransform Background;
    public bool isInit;
    private int rows;
    private int columns;
    void Awake()
    {
        float parentWidth=Background.rect.width;
        float parentHeight=Background.rect.height;

        rows=flexibleGridLayout.rows;
        columns=flexibleGridLayout.columns;
    }

    void Update()
    {
        if(flexibleGridLayout.rows<rows&&!isInit)
        {
            Init();
        }
    }

    void Init()
    {
        rows=flexibleGridLayout.rows;
        columns=flexibleGridLayout.columns;

        for(int i=0;i<rows*columns;i++)
        {
            var item=Instantiate(Coin,transform);
        }

        isInit=true;
    }


}

 

같은 객체에 Coin Manager라는걸 추가했다
결론적으로
flexibleGridLayout이 padding과 spacing,
rows, columns을 미리 정한다
 
정해진 rows와 columns에 맞춰
Coin Manager가 Coin 객체(밑에 이미지)를
생성해주고

 
Update에 잘 보면 flexibleGridLayout의 rows가
Coin Manager의 rows보다 적을 때 Init()을
한번 하게 되어있는데 저걸 저렇게 쓴 이유는
처음 들어갈 때 GridLayout이 위치를 좀 잡는다고
rows가 엄청 늘어났다가 현재 화면에
맞게 잡기 때문에 저렇게 안하면
쓰레기 같은 값이 들어가더라고
 
암튼 Init으로 개수에 맞게 객체들을
생성해주고 다시 flexibleGridLayout이
객체들의 위치를 잘 설정해주는 것이다
 

 
그러면 이렇게 된다
비율은 저 빨간 밑줄을 참고하면 된다
물론 아직도 수정할 부분이 보이지만ㅠ
 

 
그리고 저번처럼 Scriptable Object를 만들어줬다
https://gamjia.tistory.com/264

수박게임 개발일지 - 6

Scriptable Object를 만드는건
수박게임 개발일지에 있으니
이번에는 코드는 쓰지 않겠다
 
어차피 같은 내용인데 이름만 바뀐 정도;;
 

 
Coin은 Gold, Silver, Copper, None 중
하나의 성질을 갖게 된다
 
None을 만든 이유는 원작 게임 처럼
빈공간을 만들고 싶어서ㅋㅋ
 

 
원래 Init에서 Instantiate를 하게 했지만
그걸 Coin이 직접 하게 바꿔줬다
 

참고로 None 객체는 Raycast를 무시한다

 

 
암튼 이렇게 동전들을 이쁘고
랜덤하게 배열해보았다
 
여담으로 위에 빈 공간은
나머지 빈 공간보다 4배 크게 해뒀다
UI 들어갈 자리..ㅋㅋ
 

 
일단 임시로 스페이스바 누르면
Reset이라는 함수가 실행되게 했다
지금은 아니고 나중에 분명
쓸 때가 있을거 같아서......
Reset도 만들었다
 
어차피 자리는 flexiblegridLayout이 잘 잡아주니까
난 여기서 없애고 다시 만들기만 해주면 된다ㅎㅎ
 

 
오랜만에 gif!
나는 열심히 스페이스바를 눌렀다ㅎㅎ