[HandTris] #9. 게임답게 이펙트를 넣어 보자! - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

자잘한 버그는 계속해서 발견되고 있지만, 핵심 기능은 모두 구현이 된 상태에서 프로젝트의 완성도를 높이기 위해 이펙트를 추가하였다. 개발할 때 자주 참고한 Tetri.io의 블럭 한 줄을 완성시켜 깨트릴 때 발생하는 이펙트의 느낌이 좋았기 때문이다.

Tetri.io의 블럭이 깨지는 이펙트

위 이미지는 Tetri.io이다. 블럭이 한 줄 완성되면, 아래로 Board가 살짝 내려가며 블럭이 깨지는 듯한 이펙트가 발생함을 알 수 있다. HandTris에는 한 줄이 완성됐을 때 Board가 아래로 내려가는 효과는 CSS의 transform과 keyframes으로 구현이 되어 있었다. 그래서 블럭이 깨지는 듯한 효과를 블럭 공격을 받을 때 적용하기로 했다. 공격받았다는 표시가 부족하다는 피드백도 최종 발표 이후 운영진께 받았기 때문이다.

Particles.js(tsParticles)

npm tsparticles

입자 형태로 블럭이 깨지는듯한 이펙트를 구현하기 위해 처음에는 Particles.js 라이브러리를 시도했다. 웹 개발 환경인 Next.js14 버전과 호환이 되지 않아서인지는 몰라도 어떤 효과도 적용되지 않았다. 이후 Typescript를 지원하는 tsparticles를 시도해 보았다. 최근까지도 업데이트되고 있었기에 사용가능할 줄로 기대했으나 여전히 동작하지 않았다. 이펙트가 발생하는 타이밍에 검은색 화면만 렌더링 되었다가 사라졌다.

react-confetti

이펙트가 왜 적용되지 않는지 원인을 찾아볼 시간이 없었기에 다른 이펙트류의 라이브러리를 빠르게 테스트해보기로 하였다. 많이 사용된다고 알려진 이펙트인 react-confetti는 의도대로 작동하였다. 이는 빵빠레가 브라우저 상단에서 하단으로 흐르는 효과이다. 블럭이 깨지는 효과를 주기에는 어려웠다.

react-confetti-explosion

Sample, react-confetti-explosion github

 

npm 사이트에서 react-confetti 변형 라이브러리를 찾아보던 중 react-confetti-explosion 버전이 있음을 알게 되었다. 라이브러리 이름대로 explosion 하는 효과를 줄 수 있었다. react-confetti 이펙트를 적용시켰던 방식대로 explosion 버전을 적용해 보니 의도대로 잘 작동하였다.

Parameter 조정

Parameter의 default 설정으로는 effect가 발생하는 지점에서 빵빠레는 브라우저 하단까지 흐르게 된다. 그리고 알록달록한 색으로 조각이 꽤 많이 흩어진다. 다행히도 라이브러리에서 이 파라미터를 수정할 수 있도록 제공하였다.

Optional Props, react-confetti-explosion github

                         <div>
                          <ConfettiExplosion
                            force={0.25}
                            duration={1300}
                            particleCount={25}
                            particleSize={7}
                            colors={[
                              "#c91212",
                              "#ec9898",
                              "#f4d4d4",
                              "#910909",
                            ]}
                            width={400}
                            height={"-30px"}
                          />
                        </div>

컬러 코드 참고

이는 상대방에게 공격을 받았을 때 나의 Board에 발생하는 이펙트이다. 블럭이 올라옴과 동시에 붉은 계열의 조각들이 터지는 듯한 효과가 발생한다.

                      <div>
                        <ConfettiExplosion
                          force={0.25}
                          duration={1300}
                          particleCount={25}
                          particleSize={7}
                          colors={["#c8c8c8", "#e3e1e1", "#f7f7f7", "#878787"]}
                          width={400}
                          height={"-30px"}
                        />
                      </div>

컬러 코드 참고

이는 상대방을 공격했을 때 상대방의 Board에서 발생하는 이펙트이다. 블럭이 올라옴과 동시에 흰색 계열의 조각들이 터지는 듯한 효과가 발생한다.

결과

왼쪽 테트리스 Board는 플레이어1이 보는 플레이어2의 테트리스 Board이다. 오른쪽 테트리스 Board는 플레이어2의 테트리스 Board이다. 오른쪽 테트리스 Board를 보면 플레이어2가 공격을 받은 상황이기에 붉은 계열의 조각이 터지는듯한 효과를 확인할 수 있다. 왼쪽 테트리스 Board를 보면 플레이어1이 플레이어2를 공격했기에 흰색 계열의 조각이 터지는듯한 효과를 확인할 수 있다.

즉, 플레이어 입장에서 자신이 공격받으면 붉은색, 공격을 가할 경우 흰색의 조각이 터지는듯한 효과를 볼 수 있다.

---

시연을 함에 있어서 지대한 영향을 주는 부분은 아니지만 이펙트가 있고, 없고의 차이는 있다고 생각했고, 개발자 자기 만족을 위해(?) 추가하였다. 의도한 대로 라이브러리를 잘 변형하여 원하는 효과를 낼 수 있어서 뿌듯하였다. 😆