[HandTris] #7. 상대 화면에 블럭 잔상이 남는 이슈 해결 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

웹캠을 이용한 테트리스 게임을 만들기로 결심했을 때 Phaser.js와 같은 2D 게임 프레임워크를 사용할 것이냐 혹은 HTML5의 Canvas를 이용해서 Javascript로 구현을 할 것이냐 결정할 필요가 있었다. 결론적으로 HTML5의 Canvas를 사용하기로 했다. 왜냐하면 Canvas로 테트리스 게임을 구현한 예시 코드가 많았고, 2D 게임 프레임워크의 자료가 매우 적었기 때문이다. 최근에는 웹에서 게임을 구현한다고 했을 때 HTML5가 아닌 Unity가 일반적으로 선택되기 때문인 것 같다.

Canvas에 게임을 구현하다 보니 이중 for문으로 직사각형 형태의 테트리스 보드를 그리고, '색을 칠했다, 안 칠했다' 하는 등의 반복 작업을 웹에 자주 시켜야 했다. 상황이 이렇다보니 비동기로 처리해줘야 하는 부분도 많고, 코드도 점점 복잡해졌다.

 

이런 상황에서 상대 화면에 잔상이 남는 이슈가 발생했다.

1. 상황 파악 🤔

우측의 내려오는 블럭 중 잔상이 남는 블럭이 있음을 알 수 있음

게임이다보니 동일한 버그 상황을 재현하는 게 어려웠다. 화면 녹화를 하여 영상을 돌려보면서 잔상이 생기는 이슈에 대해서 파악하고자 하였다.

2. 원인 파악

잔상의 형태가 버그 원인을 파악하는 데 큰 도움이 되었다. 위의 이미지와 같이 잔상은 '좌'에서 '우'로, '위'에서 '아래'로 생기는 것을 알 수 있다. 그리고 잔상을 그린 블럭이든, 다른 블럭이든 그 자리를 지나면서 잔상을 지운다! 그리고 또 한 가지 특징은 공격을 받은 후에 잔상이 그려진다는 것이다.

3. 원인

  addBlockRow = () => {
    const newRow = new Array(this.COL).fill("grey");
    const randomIndex = Math.floor(Math.random() * this.COL);
    newRow[randomIndex] = this.VACANT;

    this.board.push(newRow);
    this.board.shift();
    this.drawBoard();
    this.board_forsend.push(newRow);
    this.board_forsend.shift();
  };

 

newRow 배열에 "grey" color로 fill 하여 공격을 받음으로서 추가되는 블럭을 만들고, 랜덤하게 한 칸을 공백 색상으로 칠하여 한 줄이 완성되어 자동으로 clear되는 것을 방지한다. 해당 코드 아래에 board 배열 및 board_forsend 배열로  push 및 shift 하여 이를 반영하는 코드가 있다.

즉, addBlockRow() 함수가 호출되면 board_forsend 배열에 공격 블럭이 추가된다.

*board_forsend 배열에 공격 블럭을 추가해주어야 상대편에 나의 테트리스 보드를 보여줄 때, 공격 받았음을 보여줄 수 있다.

        wsManagerRef.current?.subscribe(
          `/user/queue/tetris/${roomCode}`,
          (message: {
            board: TetrisBoard;
            isEnd: boolean;
            isAttack: boolean;
          }) => {
            if (tetrisGameRef.current) {
              if (message.isEnd) {
                tetrisGameRef.current.gameEnd = true;
                backgroundMusic.pause();
                playSoundEffect("/sounds/winner.wav");
                setGameResult("you WIN!");
              }
              if (message.isAttack) {
                tetrisGameRef.current.addBlockRow();
              }
              tetrisGameRef.current.drawBoard2(message.board);
            }

addBlockRow() 함수가 호출되는 시점은 위에서 확인할 수 있다. WebSocket으로 서버를 구독하고 있기에 call back 함수로 message를 전달받으면, message 내의 'isAttack' 변수를 확인하여 true인 경우 공격 받게 된다.

 

  fill(color: string, isGhost: boolean = false) {
    for (let r = 0; r < this.activeTetromino.length; r++) {
      for (let c = 0; c < this.activeTetromino[r].length; c++) {
        if (this.activeTetromino[r][c]) {
          if (!isGhost) {
            if (this.y + r >= 0 && this.x + c >= 0) {
              this.game.board_forsend[this.y + r][this.x + c] = color;
            }
          }
          this.game.drawSquare(
            this.game.ctx,
            this.x + c,
            this.y + r,
            color,
            isGhost,
          );
        }
      }
    }
  }

마지막으로 board_forsend 배열에 color 문자열을 담는 함수를 보면 위와 같다. 로직은 '나의 테트리스 보드'에 색을 fill 하면서 상대방에게 나의 '테트리스 보드' 상태라고 알려줄 변수에 색을 할당하는 것이다.

4. 정리

네모 블럭이라고 가정하면 3행에 있던 블럭 두 개가 newRow 배열이 추가되며 2행으로 내려감

3번의 원인으로 미루어 보아 fill 함수로 board_forsend 배열에 color를 할당한 후 addBlockRow() 함수가 호출이 되면, 호출 시 부터 index가 1씩 감소하는 것이다. 마지막으로 3행에 있던 블럭이 떨어지면서 기존 4행의 블럭을 지우고 떨어진다.

5. 우회(?)

위 문제를 확인한 것은 피드백이 있는 마지막 발표 전날 밤이었다. 상당 수 로컬에서 혼자 게임을 테스트하다보니 잔상이 그려지는 것을 눈치채지 못 하였다. 시간이 얼마 없었기에 몇 가지 가능한 방안 중 그나마 쉽게 고칠 수 있는 방식으로 먼저 시도하였다.