[Day 12] Color Fill Tutorial 1

오블완 챌린지 12일차

---

오늘 출퇴근 하는데 너무 추워서

깜짝 놀란 GamJia 입니다

 

어제 Save The Dog 강의를 끝냈고

오늘부터 Color Fill 강의를

5일 동안 진행하려고 합니다

 

---

혹시 원작을 모르시는 분들을 위해

원작 이미지를 첨부합니다

어떤 게임인지 감이 오시나요?ㅎㅎ

 

---

게임을 개발하기에 앞서 Sprite 이미지를

먼저 다운로드 받아주세요

 

강의를 위해 개인적으로 제작한거라

개인적 용도로만 사용해주세요!

 

ColorFill.png

0.01MB

---

​

다운로드 받은 이미지는

이전과 동일하게 Multiple로 설정해서

Sprite Editor에서 분리해주세요

 

---

분리한 이미지 중에 두번째

네모 이미지를 불러와서

하나는 Enable, 하나는 Disable이라고

이름 붙여주고 Enable에는 Trigger

Disable에는 Collision Collider 생성해주고

Prefab에 넣어주겠습니다

 

---

 

그리고 Asset 폴더에 Editors

폴더 하나 생성해줄게요

그리고 ColorFillEditor라는

editor 전용 class를 하나 생성해줄게요

---

​

using UnityEditor;
using UnityEngine;

[CustomEditor(typeof(ColorFillManager))]
public class ColorFillEditor : Editor
{
    public override void OnInspectorGUI()
    {
        ColorFillManager colorFillManager = (ColorFillManager)target;
        colorFillManager.gridSize = EditorGUILayout.IntSlider("Grid Size", colorFillManager.gridSize, 0, 10);

        // grid 배열 크기 맞추기
        if (colorFillManager.grid == null || colorFillManager.grid.GetLength(0) != colorFillManager.gridSize || colorFillManager.grid.GetLength(1) != colorFillManager.gridSize)
        {
            colorFillManager.grid = new bool[colorFillManager.gridSize, colorFillManager.gridSize];  // grid 크기 맞추기
        }

        // PlayerPrefs에서 grid 데이터 로드 (Editor에서 유지되는 데이터)
        colorFillManager.LoadGridData();

        // 2D 배열을 그리드처럼 표시
        for (int y = 0; y < colorFillManager.gridSize; y++)
        {
            EditorGUILayout.BeginHorizontal();
            for (int x = 0; x < colorFillManager.gridSize; x++)
            {
                // 각 칸에 대해 Toggle을 표시
                colorFillManager.grid[x, y] = EditorGUILayout.Toggle(colorFillManager.grid[x, y]);
            }
            EditorGUILayout.EndHorizontal();
        }

        // 그리드 수정 후 Prefab 인스턴스화
        if (GUI.changed)
        {
            colorFillManager.SaveGridData();  // 데이터를 PlayerPrefs에 저장
        }

        // 기본 Inspector 항목 표시
        DrawDefaultInspector();
    }
}

 

Unity의 커스텀 에디터를 사용하여

ColorFillManager 스크립트의

gridSize 값을 0에서 10 사이로 제한하고

그리드 배열을 시각적으로 수정할 수 있는

기능을 추가하는 기능입니다

 

Grid 크기 슬라이더	gridSize를 0에서 10 사이로 설정할 수 있는 슬라이더를 표시합니다
Grid 배열 초기화	gridSize 값에 맞춰 2D bool 배열(grid)을 동적으로 초기화합니다
Grid Data 불러오기	PlayerPrefs에서 저장된 그리드 데이터를 불러옵니다
Grid 표시	grid 배열의 각 항목을 Toggle 버튼으로 표시하여 사용자가 직접 수정할 수 있게 합니다.
Data 저장	grid를 수정하면 PlayerPrefs에 변경된 데이터를 저장합니다

 

---

using UnityEngine;

public class ColorFillManager : MonoBehaviour
{
    public GameObject enablePrefab;  // true일 때 인스턴스화할 Prefab
    public GameObject disablePrefab; // false일 때 인스턴스화할 Prefab

    public bool[,] grid;  // 그리드 배열 (Inspector에서 보이는 배열)

    public int gridSize = 5;   // 그리드 크기 (Inspector에서 설정 가능)
    public float gridSpacingX = 0.5f; // X 간격
    public float gridSpacingY = 0.5f; // Y 간격
    public Vector3 startPosition = new Vector3(-2, 4, 0); // 첫 번째 생성 위치

    void Awake()
    {
        // 그리드 크기가 변경되면 새로 할당
        if (grid == null || grid.GetLength(0) != gridSize || grid.GetLength(1) != gridSize)
        {
            grid = new bool[gridSize, gridSize];
        }

        LoadGridData();  // 데이터를 로드하는 함수 호출
    }

    void Start()
    {
        // 그리드를 순회하며 Prefab 인스턴스화
        LoadGridData();  // 게임 시작 시 Prefab 인스턴스화
        UpdateGridPrefabs();
    }

    // 그리드에 맞춰 Prefab 인스턴스화하는 함수
    public void UpdateGridPrefabs()
    {
        // 기존에 생성된 Prefab 삭제 (선택적, 필요 시)
        foreach (Transform child in transform)
        {
            Destroy(child.gameObject);
        }

        // 그리드를 순회하며 Prefab 인스턴스화
        for (int y = 0; y < gridSize; y++)
        {
            for (int x = 0; x < gridSize; x++)
            {
                Vector3 position = startPosition + new Vector3(x * gridSpacingX, -y * gridSpacingY, 0);

                // 배열 값에 맞춰 Prefab 인스턴스화
                if (grid[x, y])
                {
                    Instantiate(enablePrefab, position, Quaternion.identity, this.transform);
                }
                else
                {
                    Instantiate(disablePrefab, position, Quaternion.identity, this.transform);
                }
            }
        }
    }

    // grid 배열을 PlayerPrefs에 저장하는 함수
    public void SaveGridData()
    {
        for (int y = 0; y < gridSize; y++)
        {
            for (int x = 0; x < gridSize; x++)
            {
                // grid 배열 값을 0 또는 1로 저장
                PlayerPrefs.SetInt($"grid_{x}_{y}", grid[x, y] ? 1 : 0);
            }
        }

        // PlayerPrefs 저장
        PlayerPrefs.Save();
    }

    // 저장된 grid 데이터를 불러오는 함수
    public void LoadGridData()
    {
        grid = new bool[gridSize, gridSize];  // 데이터 초기화

        for (int y = 0; y < gridSize; y++)
        {
            for (int x = 0; x < gridSize; x++)
            {
                // PlayerPrefs에서 값 읽어오기
                int value = PlayerPrefs.GetInt($"grid_{x}_{y}", 0); // 기본값 0
                grid[x, y] = value == 1;
            }
        }


    }
}

 

Grid 기반의 게임 오브젝트를 인스턴스화하고,

그리드의 데이터를 저장하고 불러오는 기능을

담당하는 ColorFillManager class도 만들어줄게요.

 

Prefab 인스턴스화	grid 배열의 각 요소에 맞춰 enablePrefab 또는 disablePrefab을 인스턴스화합니다. grid[x, y] 값이 true이면 enablePrefab을, false이면 disablePrefab을 해당 위치에 생성합니다.
Grid 크기 및 위치	gridSize, gridSpacingX, gridSpacingY 등의 변수로 그리드 크기와 셀 간 간격을 조정할 수 있습니다. startPosition을 사용해 그리드의 시작 위치를 지정합니다.
Grid Data 저장과 불러오기	저장: grid 배열의 각 값을 PlayerPrefs에 저장합니다. true는 1, false는 0으로 저장됩니다. 불러오기: PlayerPrefs에서 저장된 값을 읽어 grid 배열을 복원합니다.
Prefab 업데이트	UpdateGridPrefabs() 함수는 게임 시작 시 grid 배열을 순회하며 Prefab을 인스턴스화합니다. 이 과정에서 기존에 생성된 오브젝트는 삭제하고, 새로 Prefab을 생성합니다.

 

---

 

Script를 저장하고 방금 만든 Enable/Disable

Prefab을 연결하니 제가 Inspector의

toggle에 표시한대로 배열 Data가 생성되고

그거에 따라 instantiate되는 모습입니다

 

---

 

오늘은 여기까지 하고

GitHub에 Commit하는걸로

마무리 하겠습니다!

​

오늘 내용은 그렇게 많지는 않은데

Editor에 data에.. 내용이 좀 어려워서

여기까지 하고 나머지는

내일 하는걸로 하겠습니다^_^...

​

 

 

감사합니다!!
 

---