오늘 "프렌즈런"이라고 카카오프렌즈를 이용한 

NextFloor 의 신작 게임이 오픈했다.

이러한 게임을 런게임 류라고 하는데

런게임 들의 배경들은 엄청 긴데 끊임 없이 나온다.

(단순한 비행 슈팅 게임도 그러하다. 드래곤 플라이트 같은 게임...)

잘보면 단순히 반복이 될 뿐이지만

기본적 개념은 하나의 이미지를 가지고 컨트롤 할 수 있다.

아래의 영상은 작년(2015년 10월 22일)

WinApi로 이미지 공부를 하던 중에 

깔짝대면서 만든 런게임(연습)이다.

지금의 프렌즈런이 나오기 반년도 더 전부터 

카카오프렌즈를 좋아해서 런게임이 나왔으면 하고 생각 했던거였다. 

[영상 - 무지의 대모험(?)]

위 영상의 중요 포인트는 2가지다.

하나의 배경이미지가 끊임 없이 이어지는 것과

렉트 충돌을 이용하여 판정 처리를 하는 것이다.

렉트 충돌은 포스팅의 주 내용이 아니기에 

간략하게만 설명하자면

2개의 사각형이 같은 면적을 차지하는 부분이 

조금이라도 있으면 true, false 값을 주어 상태 처리를 하는 것이다.

이글의 주요 쟁점은 이미지 루프이니 렉트 충돌은 나중에 기회가 되면 더 적어보겠다.(게임만들 땐 엄청 사용된다.)

본인은 위와 같은 이미지를 돌렸는데

이런 배경이미지의 중요점은 

절반씩 잘라서 좌우를 바꾸어 이어 붙여도 

어색함이 없어야 한다는 것이다. 

그래서 본인는 포샵으로 원본을 잘라 

미리 좌우를 바꾸고

어색한 가운데 부분을 뭉그트려 지워 처리했다. 

(이런건 아트팀이 알아서해주시는데 

공부하시는 분들은 포샵을 못하면 알아만 두자.)

배경 이미지는 대개 BitBlt 로 그려준다. (배경에는 보통 투명도가 없으니까...)

상세 인자값은 아래와 같다.

BitBlt(            //DC간의 영역끼리 서로 고속복사를 해주는 함수(WinApi 제공)

hdc,                //옮겨 그려질(결과가 될) HDC 변수

destX,             //결과가 될 시작 x좌표

destY,             //결과가 될 시작 y좌표

sourWidth,         //자르게 될 이미지 너비

sourHeight,        //자르게 될 이미지 높이

hMemDC,         //이미지가 가지고 있는 HDC 변수

sourX,             //소스가 될 이미지의 시작점 x좌표

sourY,             //소스가 될 이미지의 시작점 y좌표

SRCCOPY);        //복사 옵션(WinApi 제공)

위처럼 자르는 좌표와 너비를 정해주면 

이미지를 잘라서 가져올 수 있는데

그렇다면 이제 어떤 개념이 떠오를까? 

게임창의 높이는 이미지 높이에 맞추었다고하고

게임창은 당연히 (0, 0)부터 창 크기까지 맞추어 준다고 했을 때

값이 변할 변수는 sourX밖에 없을 것이다.

sourX축을 계속 증가 적용시켜주면

이미지는 오른쪽에서 왼쪽으로 계속 움직이는 것처럼 된다.(영상처럼)

하지만 이미지를 짜르는데 sourX + sourWidth 의 크기가

배경원본 이미지의 범위를 벗어 날 수가 있다.

그렇다면 어떻게 해야 되는 것인가.

벗어난 만큼을 다시 BitBlt 해주면 되는 것이다.

즉 이미지를 자를 때 온전히 이미지 영역 내(內)라고 하면 한번 BitBlt 하고

영역 밖이 라고 하면 BitBlt 를 두번 하는 것이다.

이는 X축만 따졌을 때 그런 것이고

만약 X, Y축 둘 다 따진다면(배경이 대각선으로 움직인다거나 할 때)

BitBlt 가 총 4번까지 이루어 질 수 있다.

이미지 관련 렌더는 함수로 지정하여

프레임워크 화 하는 것이 보통이다.

하지만 개념만 익혀두자.

WinApi로 게임을 만들 일이 99% 없을 것이고

요즘엔 게임용 2D 엔진도 있고 내부 처리도 잘되어 있다.

WinApi는 2D용으로 공부한지도 꽤 됐고 한데

오늘 나온 게임인 "프렌즈런"이 이전에 만든 것을 떠오르게 하여(영상 참조)

포스팅 해보았다. 

요즘은 유니티 공부하기도 바쁘니 

그럼 이만...