2D 이미지로 입체감을 주는 방법

 

 

무한하게 이어지는 배경이미지를 구현하는 개념부터 알아보자.

 

 

이는 캐러셀에서 loop를 하는 개념과도 동일하다. 

 

하나의 이미지로는 무한하게 슬라이드 하지 못한다. 따라서 해당 뒤에 이어지거나 루프로 초기화가 될 이미지를 한번 더 붙여줘야 한다. 만약 앞 뒤로 이동하게 된다면 원본 이미지 배열 앞, 뒤에 각각 이어지는 이미지를 준비해 주자.

 

이를 canvas로 구현하면 다음과 같다. 

 

    constructor(config){
        this.img =  config.img;
        this.speed = config.speed;

        this.height = App.height;
        this.width = App.height * (this.img.width / this.img.height);

        this.leftPos = {x: 0, y: 0};
        this.rightPos = {x: this.width , y: 0};

    }

	update(){
        this.leftPos.x += this.speed;
        this.rightPos.x += this.speed;

        if(this.leftPos.x + this.width < 0){
            this.leftPos.x = this.rightPos.x + this.width ;
        }

        if(this.rightPos.x + this.width < 0){
            this.rightPos.x = this.leftPos.x + this.width ;
        }
    }

    draw(){
        App.ctx.drawImage(
            this.img,
            this.leftPos.x,
            this.leftPos.y, 
            this.width, 
            this.height
        );


        App.ctx.drawImage(
            this.img, 
            this.rightPos.x, 
            this.rightPos.y, 
            this.width, 
            this.height
        );
    }

 

한 장의 이미지를 x좌표를 이어지도록 구성한다. 이후 두 장의 이미지를 그린다음 렌더링마다 x좌표값에 speed를 더해주자. 

 

그리고 만약 x좌표와 그 이미지 너비의 합이 0보다 작아졌을 경우 x좌표를 다음 이미지의 x좌표와 이미지 너비의 크기로 설정해 주면 무한히 이동하는 배경이미지가 완성된다.

 

 

위 이미지를 보면 입체감이 있다. 그 이유는 겹쳐진 3장의 이미지의 이동 속도가 다르기 때문이다.

 

그렇다 2D 이미지로 입체감을 주는 방법 중 하나는 이동되는 이미지 간의 속도를 다르게 주면 이러한 효과가 나타난다는 것이다.

 

 

추가적으로 이미지의 비율을 캔버스에 맞추는 방법도 알게 되었다.

 

 

이미지의 높이를 캔버스의 높이로 고정한다고 하면 너비가 문제였다. 

 

너비는 비례식으로 이를 구하고 알고 있는 정보는 원본 이미지의 가로 세로 비율을 알고 있기 때문에 이를 치환하여 구하면 다음과 같이 구할 수 있다.

 

this.height = App.height;
this.width = App.height * (this.img.width / this.img.height);