[WebGL2-My Cosmos-02] Canvas 공통 설정

이전 글 : [WebGL2-My Cosmos-01] 프로젝트 세팅

[WebGL2-My Cosmos-01] 프로젝트 세팅

 

Canvas 공통 설정

홈과 코스모스 화면에서 모두 canvas를 사용하므로, 캔버스 크기 및 기본 설정을 관리하는 CanvasOption 클래스를 생성하였다.

 

생성자와 멤버변수

• 홈화면과 코스모스 화면 둘 다 canvas 태그를 사용하므로 고유의 id를 받아와 각 화면에 맞는 canvas element를 가져온다.
  만약 해당 요소가 존재하지 않을 경우 에러를 발생시킨다.

class CanvasOption {
    /**
     * 캔버스 기본 설정을 관리하고 초기화하는 클래스
     * @param {string} canvasId
     */
    constructor(canvasId = null) {
        this.canvas = document.getElementById(canvasId);
        if (isNull(this.canvas)) throwError(ERROR_MSG.NO_CANVAS);
    }

    생략....
}

 

사이즈 설정

• canvas의 사이즈를 디바이스에 환경에 맞게 설정을 하고 화면 크기의 변화가 있을 시 재설정이 필요할 때 사용하도록 한다.
• 아이폰의 경우 브라우저를 켰을때 하단의 주소창 바의 높이를 더해주어야 입력 후 화면 크기를 원래 사이즈로 유지할 수 있다. 

initCanvasOptionSizeVars(width = innerWidth, height = innerHeight) {
    // 아이폰인 경우 하단 주소창 바의 높이를 더해서 계산해주어야 한다.
    const isIPhone = SCREEN.I_PHONE.test(navigator.userAgent) && navigator.maxTouchPoints > 0;
    const bottomBarHeightDiff = isIPhone
        ? document.documentElement.scrollHeight - visualViewport.height
        : 0;

    // 기기의 dpr을 저장한다. 효율을 위해 최대 dpr을 정해놓는다.
    this.dpr = Math.min(Math.round(devicePixelRatio), SCREEN.MAX_DPR) || 1;
    this.canvasCssWidth = width;
    this.canvasCssHeight = height + bottomBarHeightDiff;

    // canvas의 css의 크기를 위에서 정한 크기로 설정한다.
    this.canvas.style.width = `${this.canvasCssWidth}px`;
    this.canvas.style.height = `${this.canvasCssHeight}px`;

    // 현재 화면의 크기가 타블렛 사이즈 이하인지 저장하는 전역상태를 만든다.
    const { setIsTabletOrSmaller } = useTextureStore.getState();
    setIsTabletOrSmaller(innerWidth <= SCREEN.TABLET_OR_SMALLER);
}

 

전역 상태 설정

• 공통적으로 사용되는 상태를 효율적으로 사용 및 관리하기 위해 가볍고 간결하고 anilla javascript에도 사용할 수 있어 zustand 라이브러리를 사용했다.
• 우선 화면에 관련해서 타블렛 이하 사이즈인지 저장하기 위한 상태를 생성한다.

// vanilla 자바스크립트에서 stroe을 생성하기 위해선 creatStore를 사용해야 한다.
import { createStore } from "zustand/vanilla";

// 상태를 파라미터로 받아 처리한다.
export const useTextureStore = createStore((set) => ({
    // 상태
    isTabletOrSmaller: false,
    // 상태를 업데이트 하는 메서드
    setIsTabletOrSmaller: (data) => set({ isTabletOrSmaller: data }),
}));

 

 

Github 레포

GitHub - jinsk9268/my-cosmos: 나만의 우주 탐험하기

CanvasOption 전체 코드

import { throwError, isNull } from "@/js/utils.js";
import { SCREEN, ERROR_MSG } from "@/js/constants.js";
import { useTextureStore } from "@/js/store.js";

class CanvasOption {
    /**
     * 캔버스 기본 설정을 관리하고 초기화하는 클래스
     * @param {string} canvasId
     */
    constructor(canvasId = null) {
        this.canvas = document.getElementById(canvasId);
        if (isNull(this.canvas)) throwError(ERROR_MSG.NO_CANVAS);
    }

    /**
     * @param {number} [width]
     * @param {number} [height]
     */
    initCanvasOptionSizeVars(width = innerWidth, height = innerHeight) {
        const isIPhone = SCREEN.I_PHONE.test(navigator.userAgent) && navigator.maxTouchPoints > 0;
        const bottomBarHeightDiff = isIPhone
            ? document.documentElement.scrollHeight - visualViewport.height
            : 0;

        this.dpr = Math.min(Math.round(devicePixelRatio), SCREEN.MAX_DPR) || 1;
        this.canvasCssWidth = width;
        this.canvasCssHeight = height + bottomBarHeightDiff;

        this.canvas.style.width = `${this.canvasCssWidth}px`;
        this.canvas.style.height = `${this.canvasCssHeight}px`;

        const { setIsTabletOrSmaller } = useTextureStore.getState();
        setIsTabletOrSmaller(innerWidth <= SCREEN.TABLET_OR_SMALLER);
    }
}

export default CanvasOption;​