raylib:tetris:grid [법학위키]

grid
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
===== 들어가며 =====

[[gettingstarted|준비를 다 했으니]] 이제 그리드의 개념부터 시작할 것이다.  

그리드 클래스를 만들고, 2차원 배열의 그리드를 동적으로 만들어 보자


===== 클래스 선언 =====

==== 1. grid.h ====

=== 가. 파일 === 

"grid.h" 파일을 만든다. 다음과 같이 만들었다.

<file cpp "grid.h">
#pragma once

class Grid{

    public :
        Grid();
        Grid(int rows, int cols);       
        ~Grid();
        void SetGridValue(int row, int col, int value);

        void Print();

    private :
        int numRows = 20;  // 행의 갯수 
        int numCols = 10;  // 열의 갯수 

        void Initialize(int numRows, int numCols);  // 행과 열을 초기화
        int **arr;   // 그리드 크기를 정하는 배열 

};
</file>

=== 나. 변수 ===  

테트리노를 움직일 판(=그리드)을 만들어야 하므로 행과 열의 2차원 공간이 필요하다. 

따라서, 행의 갯수는 numRows로, 열의 갯수는 numCols변수로 선언했다. 나는 헤더파일 내에서 곧 바로 값을 정의했는데(예 : numRows = 20), 어차피 정의파일에서 다시 한번 값을 정의할 것이므로 헤더파일에는 그냥 변수 선언만 해도 되긴한다. 

int 값을 갖는 그리드 변수를 arr이라는 이름으로 2차 포인터로 선언한 것에 주목하자.

통상 정적으로 그리드를 선언하면 다음과 같이 될 것이다.

<code cpp>
  int arr[20][10]; 
</code>

나는 그리드를 동적으로 생성할 것이므로 포인터로 선언했다. 2차원 배열에 대한 동적 할당은 관련 자료를 한번 읽어보자((내가 참조한 블로그는 [[https://ya-ya.tistory.com/101|링크]]와 같다. )).

=== 다. 생성자와 소멸자 === 

보통 소멸자를 따로 선언하지 않는 경우도 많지만 나는 동적 배열을 생성하였으므로 동적으로 생성한 메모리를 다시 해제해야 할 필요도 있다. 따라서 소멸자를 선언하였다. 클래스의 소멸 단곙테서 동적 배열도 메모리를 해제할 것이다. 

생성자는 아무런 값도 받지 않는 디폴트 함수와, 자유롭게 배열 크기를 지정할 수 있는 변수형의 2가지 생성자를 만들었다. 

<code cpp>
    public :
        Grid();
        Grid(int rows, int cols);       
        ~Grid();
        
    private :
        /* 생 략 */ 
        
        int **arr;   // 그리드 크기를 정하는 배열 
</code> 

==== 2. grid.cpp ==== 

=== 가. 파일 ===

전체 구현 파일은 다음과 같다. 

<file cpp "grid.cpp">
#include "grid.h"
#include <iostream>

Grid::Grid() 
{
    numRows = 20;
    numCols = 10; 
    Initialize(numRows, numCols);
}

Grid::Grid(int rows, int cols) 
{
    numRows = rows;
    numCols = cols;
    Initialize(numRows, numCols);
}

void Grid::Initialize(int Rows, int Cols)
{
    /* 변수 설명
      numRows : Grid 클래스 내의 행 갯수
      numCols : Grid 클래스 내의 열 갯수
      Rows : 이 함수가 인자로 받는 행의 갯수. 사실 굳이 인자로 받을 필요는 없어 보이긴 한다. 
      Cols : 이 함수가 인자로 받는 열의 갯수. 사실 굳이 인자로 받을 필요는 없어 보이긴 한다. 
    
    */
    // 2차원 배열에서 행의 범위 설정
    arr = new int*[Rows];

    // 2차원 배열 열의 범위 설정 
    for (int row =0; row < Rows; row++)
    {
        arr[row] = new int[Cols];
    }

    // 위에서 설정한 2차원 배열에 값을 초기화 
    for (int row = 0; row < Rows; row++)
    {
        for (int col =0; col < Cols; col++)
        {
            arr[row][col] = 0;

        }
    }

}

void Grid::Print() 
{
    // 설정한 numRows와 numCols 값의 범위 내에서 배열의 값을 출력 
    for (int row = 0; row < numRows; row++)
    {
        for (int col =0; col < numCols; col++)
        {
            std::cout << arr[row][col] << " ";
        }
        std::cout << std::endl;
    }

}

Grid::~Grid() 
{
    for (int row = 0;row < numRows; row ++) 
      delete[]  arr[row];

    delete[] arr;
}

void Grid::SetGridValue(int row, int col, int value)
{
    arr[row][col] = value;
}

</file> 

=== 나. 생성자와 소멸자 === 

하나는 아무런 인자도 받지 않는 생성자이고 다른 하나는 사용자로부터 받은 값에 따라 numRows와 numCols의 값을 변경하는 생성자이다.

그리고 동적으로 할당한 배열을 메모리에서 지우기 위하여 소멸자도 정의하였다.

각 생성자에서는 numRows와 numCols의 값을 대입한 후, Initialize()함수를 공통으로 호출한다. Initialize()함수를 통해 그리드를 만를 초기화 할 것이다. 

=== 다. 동적 배열 할당 === 

== (1) 2차원 배열의 할당 == 

Initialize() 함수에서는 2차원 배열을 만든다. 

동적으로 배열을 만드므로 new 키워드를 이용하여 메모리를 확보해야 한다.

<code cpp>
    // 2차원 배열에서 행의 범위 설정
    arr = new int*[Rows];

    // 2차원 배열 열의 범위 설정 
    for (int row =0; row < Rows; row++)
    {
        arr[row] = new int[Cols];
    }
</code> 

== (2) 2차원 배열의 해제 == 

소멸자에서는 동적으로 생성된 2차원 배열을 다음과 같이 해제 해야 한다. 

<code>
Grid::~Grid() 
{
    for (int row = 0;row < numRows; row ++) 
      delete[]  arr[row];

    delete[] arr;
}
</code>

=== 라. 2차원 배열의 값 초기화 === 

동적으로 배열을 생성했으면, 이제 2차원 배열에 값을 초기화하면 된다. 단순하 for 루프일 뿐이다.

<code cpp>
    // 위에서 설정한 2차원 배열에 값을 초기화 
    for (int row = 0; row < Rows; row++)
    {
        for (int col =0; col < Cols; col++)
        {
            arr[row][col] = 0;

        }
    }
</code> 

=== 마. 프린트 === 

배열의 값을 프린트 하기 위하여 Print()함수를 만들었다.

<code cpp>
void Grid::Print() 
{
    // 설정한 numRows와 numCols 값의 범위 내에서 배열의 값을 출력 
    for (int row = 0; row < numRows; row++)
    {
        for (int col =0; col < numCols; col++)
        {
            std::cout << arr[row][col] << " ";
        }
        std::cout << std::endl;
    }

}
</code> 

=== 마. 호출하기 ===

이제 main.cpp 파일에서 그리드를 생성하고 호출해 보자

<code cpp>
    Grid grid = Grid(); 
    Grid myGrid = Grid(15, 5); 

    // 그리고 세팅  
    grid.SetGridValue(4, 5, 2);
    grid.SetGridValue(4, 6, 2); 

    myGrid.SetGridValue(3, 0, 1);
    myGrid.SetGridValue(4, 0, 1);
    myGrid.SetGridValue(5, 0, 1);

    grid.Print();
    myGrid.Print();
</code>  

==== 3. 결과 ==== 

다음과 같이 그리드가 제대로 생성되고 프린트 되는 것을 알 수 있다.

{{:raylib:tetris:tetris_2_print_2026-01-01_151626.png?600|Tetris2 Print Result}}

<WRAP center round important 80%>
Makefile은 이 문서의 하단에 첨부할 것이다. 혹시나 컴파일시 에러가 나면 내가 만든 Makefile을 참조하라 
</WRAP>



===== 그래픽으로 만들기 =====  

==== 1. Color 선언하기 ====

일단 개별 셀마다 특정한 값에 대응하는 컬러코드를 정의할 것이다.

grid.h에 다음과 같이 colors 변수와  colors를 할당하는 함수를 선언하자.

<code cpp>
        // 컬러 
        std::vector<Color> colors; // 
        
        std::vector<Color> GetCellColors(); // 컬러를 가져오는 함수 
</code> 

배열은 standard 라이브러리의 vector를 이용했다. 

==== 2. Color 정의하기 ====

grid.cpp에 GetCellColors() 함수를 다음과 같이 정의한다.

그리고 이를 colors 변수에 대입하면 된다.

<code cpp>
std::vector<Color> Grid::GetCellColors() 
{
    /* Color Sheet
    Raylib Color sheet is in https://www.raylib.com/cheatsheet/cheatsheet.html 
    I just add cyan color which is not included in Raylib predefined Color macro.
    Color struct is composed of 4 elements {RED, GREEN, BLUE, ALPHA} 

    I referenced Nick's Youtube to you Custom Color code below 
    https://www.youtube.com/watch?v=wVYKG_ch4yM&list=PL609o35_oWgtKZPqAa_6T2DMFe5G7BbJI&index=2
    */
    // Color darkGrey = {26, 31, 40, 255};
    // Color green = {47, 230, 23, 255};
    // Color red = {232, 18, 18, 255};
    // Color orange = {226, 117, 17, 255};
    // Color yellow = {237, 234, 4, 255};
    // Color purple {166, 0, 247, 255};
    Color cyan = {21, 204, 209, 255};
    // Color blue = {13, 64, 216, 255};

    return { DARKGRAY, GREEN, RED, ORANGE, YELLOW, PURPLE, cyan, BLUE};
}
</code> 


Raylib에는 사전에 정의된 컬러 코드가 있다. 따라서 굳이 개별 컬러를 정의할 필요가 없다. 사전 정의된 컬러 코드는 [[https://www.raylib.com/cheatsheet/cheatsheet.html|시트코드]]를 참조하라. 

==== 3. 네모 그리기 ==== 

기존에 Print()함수로 각 셀의 값을 출력했던 것과 마찬가지로 이번에는 그에 해당하는 셀을 그릴 것이다.

for문은 동일 하다. 다만 각 셀을 시인성 있게 보기 위하여 그리는 네모를 cellSize-1 의 크기로 하였다. 이렇게 하면 모눈 종이와 같은 그림이 완성된다.

Raylib에서 네모 그리기는 DrawRectangle(x, y, width, height, color)로 호출한다.

<code raylib>
// DARKBLUE 배경 안에서 네모 상자를 그리기 
void Grid::Draw()
{
    // 설정한 numRows와 numCols 값의 범위 내에서 배열의 값을 출력 
    for (int row = 0; row < numRows; row++)
    {
        for (int col =0; col < numCols; col++)
        {
            int cellValue = arr[row][col];
            DrawRectangle(col * cellSize + 1, row * cellSize + 1, cellSize - 1, cellSize -1, colors[cellValue]);
        }
    }    
}
</code> 

==== 4. 호출하기 ====

main.cpp 에서 다음과 같이 그리드를 설정한 후, Draw() 함수를 호출하면 된다.  

<code raylib>
    SetTargetFPS(60);    
    Grid grid = Grid(); 

    // 그리고 세팅  
    grid.SetGridValue(4, 5, 2);
    grid.SetGridValue(4, 6, 2); 

    grid.Print();



    // Main game loop
    while (WindowShouldClose() == false)    // Detect window close button or ESC key
    {
        // Draw
        //----------------------------------------
        BeginDrawing();
 
            ClearBackground(DARKBLUE);
            grid.Draw();
            // DrawText("Hello There", 40, 200, 20, MAROON);  
  
        EndDrawing();
        //--------------------------------------- 
        // 이하 생략 

    }
</code> 


==== 5. 결과 ===== 

이렇게 그리드를 만들어 보았다. 

{{:raylib:tetris:tetris_2_drawgrid_2026-01-01_151626.png?600|Tetris DrawGrid}}


소스 파일은 다음과 같다. 

{{ :raylib:tetris:tetris2_grid.zip |Tetris -Lecture2 - Grid}}


다음 번에는 블록을 만들 것이다.