밝을희 클태

미니맵에 도라에몽의 위치를 표시할 때 PNG를 사용해 scale을 줄이니 너무 작아져 화질이 깨지는 문제가 생겨서 직접 그리기로 했다.힘들다..useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); img.current.src = "/smallDo.png"; img.current.onload = () => { requestAnimationFrame(init); }; const drawCanvas = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); const PosX = posRef...

이전에도 requestAnimationFrame API를 사용하여 주사율을 동기화한 적이 있지만, 그 당시에는 시간을 측정해 렌더링 스케줄에 이벤트를 등록하지 않는 방식으로 진행했다. 이번에는 이전의 방식과 달리, 모든 이벤트를 렌더링 스케줄에 등록하되, 모든 주사율에서 속도를 일정하게 유지하고 싶었다. 이전 방식에서는 렌더링 스케줄에 이벤트를 등록하지 않다 보니, 높은 주사율을 가진 모니터에서도 60 FPS 애니메이션을 보게 되는 한계가 있었다. 이러한 문제를 해결하기 위해, 이번 구현에서는 각 프레임에서 걸린 시간을 기반으로 속도를 조정함으로써 다양한 주사율에서도 일관된 애니메이션 속도를 제공할 수 있도록 하였다.주사율 동기화 구현drawCanvas 함수 내에서 timestamp를 받아와 각 프레임 ..

총 게임을 하다 보면 벽에 총알 자국이 생겼다가 시간이 지남에 따라 옅어지면서 사라지는 효과를 구현하고 싶었다.먼저 총알 자국 PNG 이미지를 준비한다. 이 이미지는 나중에 게임에서 총알 자국을 그릴 때 사용된다.이전의 총알 자국들을 기억하기 위해 bulletMarks라는 배열을 만들고, 배열 안에 총알 객체를 저장한다. 각 총알 자국 객체는 다음과 같은 속성을 가진다x, y: 총알 자국의 좌표t: 총알 자국이 생긴 시간rotate: 총알 자국을 랜덤한 각도로 회전시키기 위한 값각도는 2π 라디안(360도)으로 표현할 수 있으며, 랜덤한 각도를 만들기 위해 N (0 N N = 0.52π * 0.5 = 1π1π = 180ºN = 0.22π * 0.2 = 0.4π0.4π * 180/π = 72ºN = 0.8..

Canvas로 도라에몽을 움직이는 애니메이션을 구현하던 중, 도라에몽을 잡으면 게임이 종료되고 ‘클리어’ 표시가 나오는 기능을 추가하려고 했다. 그러나 이 과정에서 다음과 같은 문제가 발생했다문제게임 종료 조건이 충족되면 setIsSuccess(true)가 호출되어 isSuccess 상태가 true로 변경되고, Canvas를 담당하는 useEffect의 리렌더링이 발생한다.리렌더링 후 useEffect의 clean-up 함수에서 clearRect()로 Canvas를 지우도록 구현했지만, 이전 애니메이션 프레임들이 남아 있어 피격 효과와 이미지가 전부 지워지지 않아 Canvas가 멈춘 듯 보인다.원인requestAnimationFrame을 사용하여 애니메이션을 구현할 때는 브라우저 렌더링 스케줄에 따라 애..

HTML의 캔버스 태그를 공부해 보고 싶었는데 뭘 만들까 생각하다가 어둠 속에서 도라에몽을 찾는 게임을 만들고 싶어졌다.기초는 공식 문서랑 어떤 분이 작성한 개발 블로그를 보고 어느 정도 canvas 태그에 대해 익숙해지고 본격적으로 구현에 들어갔다. 일단 가장 먼저 스트라이트 시트를 골라야 한다스프라이트 시트(sprite sheet)는 여러 개의 작은 그래픽을 그리드(grid)에 정렬하여 구성한 비트맵 이미지 파일이다.게임 개발에서 캐릭터의 연속적인 키 포즈를 한 장의 이미지에 구성하여 2D 애니메이션 제작에 사용된다. 나는 도라에몽 스프라이트 시트를 골랐다. 처음에 아래의 이미지를 무료로 받고 사용하려는데 캐릭터의 움직이는 애니메이션을 구현하고 나니 지진이 났다. 내가 잘 못 그렸나 싶었는데 그냥 스..