6일차. 게임 화면 꾸미기

📌 게임 화면 꾸미기

• 콘솔 화면 크기를 조정하여 게임 사이즈를 고정한다.
• 고정된 게임 사이즈 내에서, 출력되는 글자 위치를 정렬한다.
• 그리고 플레이어가 보는 메인 화면과 상태이상을 나타내는 사이드 화면을 구현한다.

 

📌 구현 목록

📄 Renderer.cs

// 콘솔 화면 출력 클래스
public static class Renderer
{
     private static int width;
     private static int sideWidth;
     private static int height;

     public static void Initialize()
     {
          Title = "SHELTER";
          ForegroundColor = ConsoleColor.White;
          Clear();
          CursorVisible = false;

          width = 70;		// 메인 화면 사이즈
          sideWidth = 30;	// 사이드 화면 사이즈
          height = 30;

          WindowWidth = width + sideWidth;
          WindowHeight = height;
     }
}

• Renderer
  - 여러 화면 출력 기능을 한꺼번에 담당할 정적 클래스- 가로 사이즈에 메인(width)과 사이드(sideWidth)를 나누어 화면 구분

🔧 콘솔 화면 가운데 출력

// 문자열 길이 계산
private static int GetPrintingLength(string line) => line.Sum(c => IsKorean(c) ? 2 : 1);

// 로비 화면 가운데 출력
public static void Print(int line, string content)
{
     int correctLength = GetPrintingLength(content);
     SetCursorPosition((WindowWidth - correctLength) / 2, line);
     WriteLine(content);
}

• Print
  - GetPrintingLength에 문자열 길이를 계산, 한글에 경우 한글자 하나가 유니코드로 2바이트를 차지하여 콘솔에서 2칸을 차지하므로 람다식으로 1칸의 길이를 더 준다.
  - SetCursorPosition으로 쓰기가 발생할 커서 위치를 정해준다. WindowWidth에 문자열 길이를 뺀다음 2로 나누면, 화면 가운데에 출력이 된다.

💡 결과 화면

 

 

🔧 화면 나누기

// 테두리 그리기
public static void DrawBorder()
{
     // 상단 출력
     SetCursorPosition(0, 0);
     Write("┌" + new string('─', width - 2) + "┐");
     
     // 화면 가운데 공간
     for (int i = 1; i < height - 2; i++)
     {
          SetCursorPosition(0, i);
          Write("│" + new string(' ', width - 2) + "│");
     }
     
     // 하단 출력
     SetCursorPosition(0, height - 2);
     Write("└" + new string('─', width - 2) + "┘");
}

• DrawBorder
  - 시작 부분 그려질 문자를 나타내고 new string으로 그려질 너비 길이의 양옆을 뺀 나머지 부분을 그려준다.
  - 가운데 부분도 for문으로 높이의 맨 위 아래를 뺀 나머지 부분을 그린다.
  - 추가로 사이드 부분은 위 매서드에서 시작 위치와 그려질 너비만 따로 정해주면, 테이블을 두개 그려서 화면을 나눈 느낌을 준다.

💡 결과 화면

왼쪽 메인, 오른쪽 사이드

 

화면에서 왼쪽은 이제 게임 진행을 출력하는 부분을 담당하게 되고, 사이드는 플레이어 상태와 인벤토리를 나타낼 부분으로 그린다.

 

완성된 출력

 

 

 

 

도움 받은 참고 레퍼런스 : https://veil-persimmon-961.notion.site/06-2e82625da6c2437a8fff3a8630512f4e

06. 씬 출력