웹 게임 만들기를 도와주는 Kaplay 라이브러리 사용

Kaplay 라이브러리는 Web의 Canvas API를 기반으로 게임에 필요한 다양한 기능들을 지원해주는 라이브러리이다.

KAPLAY, HTML5 Games library for JavaScript and TypeScript

 

기존 코드에 적용

const GamePlaying = ({ canvasWidth, canvasHeight }: GamePlayingPropsInterface) => {
  const canvasRef: RefObject<HTMLCanvasElement> = useCanvas(canvasWidth, canvasHeight);

  return (
    <GameContentArea>
      <GameCanvas ref={canvasRef} />
    </GameContentArea>
  )
}

const GameContentArea = styled.div`
  width: 100%;
  height: 80vh;
  background-color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const GameCanvas = styled.canvas`
  /* width: 100%;
  height: 50%; */
`


export default GamePlaying;

/**
 * 게임을 display해주는 canvas의 설정을 해주는 Hook
 * @param canvasWidth : number
 * @param canvasHeight : number
 * @returns canvasRef: RefObject<HTMLCanvasElement>
 */
export const useCanvas = ( canvasWidth: number, canvasHeight: number) => {
  const canvasRef: RefObject<HTMLCanvasElement> = useRef<HTMLCanvasElement>(null);
  
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext('2d');
    
    const setCanvas = () => {
      if (canvas && ctx) {
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
      }
    };
    
    setCanvas();
  }, [canvasWidth, canvasHeight]);
  return canvasRef;
};

 

기존 코드를 확인해보자.

부모 컴포넌트로부터 전달 받은 canvasWidth와 canvasHeight를 이용해 useCanvas Hook에 전달한다. 전달된 너비와 높이를 canvas 태그에 적용시켜준다.

 

이렇게 한다면 부모 컴포넌트에서 반응형으로 적용되는 환경을 구축할 수 있었다.

 

하지만, 이번 프로젝트에서는 게임 기능 구현에 편의성을 위해 외부 라이브러리를 사용하기로 했다.

최종적으로 경험하고자 하는 결과는 Socket.IO의 경험, Canvas API 사용이 주 목적이기에 시간이 오래 걸릴것 같은 게임 기능 구현에서 시간을 줄이기로 했다.

 

하지만 Kaplay 라이브러리의 경우 kaplay를 적용시킬 canvas 태그의 current 데이터가 null로 초기화되어 있는 상태에서 kaplay를 사용해줘야 한다. 만약 width나 height와 같은 속성이 값을 갖을때는 kaplay가 원활하게 적용되지 않을 수 있기 때문이다.

실제 필자는 반응형 UI를 적용하기 위해 width 와 height를 미리 적용시켜줘서 에러갈 발생했으며, 이 에러를 해결하기 위해 5시간 동안 구글의 도움을 받았다.....

 

const GamePlaying = () => {
  const mainRef = useRef(null)
  const test = useRef(null);
  useEffect(() => {
    if (test.current) {
      kaplay({
        canvas: test.current,
        root: test.current
      })
    }
  }, [])
  
  return (
    <GameContentArea ref={mainRef}>
      <CanvasArea>
        <GameCanvas ref={test}></GameCanvas>
      </CanvasArea>
    </GameContentArea>
  )
}

const GameContentArea = styled.div`
  width: 100%;
  height: 80vh;
  background-color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const CanvasArea = styled.div`
  width: 100%;
  height: 50%;
`

const GameCanvas = styled.canvas``;


export default GamePlaying;

 

기본적으로 Kaplay는 반응형 UI를 지원하기에 사용자의 뷰포트에 따라 너비와 높이를 조절해주기 때문에 부모 컴포넌트로 부터 크기에 대한 값을 받아오지 않아도 된다.

 

이때 주의해야할 점이 kaplay() 함수를 이용해 생성하는 canvas는 기본적으로 width: 100%, height: 100%를 적요하기 때문에 사이즈 조절이 필요한 경우는 필자처럼 상위 컴포넌트의 크기를 조절하거나, 라이브러리의 코드를 수정해 주는 방법 중 편한 방법을 이용하면 된다.

 

 

이제 기본적인 Canvas API를 적용해 배경을 만들었다. 다음 과정으로 넘어가자..... 배경 이미지를 깔고, 캐릭터 유닛도 만들고, 장애물 유닛도 만들어야지..... 하하ㅏ하하....