Win32API_StudyNote_10

24/03/29

 

44화. Win32API Tool (1)

주제 : Tool 만들기

 

Tile : 

2D 게임의 기본 요소

기존의 Object 객체들은 위치좌표(vPos)를 객체의 중심좌표로 사용했다.

하지만, Tile Object의 경우 위치좌표를 좌상단의 위치로 사용한다.

아래의 그림에서 A가 기존 객체들이며, B가 Tile 객체이다.

이러한 이유로 인해 Tile 객체에 충돌체를 배치하고싶다면 Tile 의 위치좌표로부터 크기의 절반만큼 우하단으로 이동시켜 배치해야한다.

일반적으로 타일의 크기는 2의 배수 단위로 사용하는게 좋다. (DX에서 GPU 사용과 관련이 있다.)

 

타일의 모양은 Rect를 사용했고 위치좌표를 좌상단으로 사용하기에 좌표 입력은 간단해서 좋았다.

CTile::render()

 

Tool Scene 진입시 Tile 객체 25개를 생성하도록 임시적으로 코드를 작성했다.

Scene 진입시 현재 Scene의 Exit() 작업을 해준 후 변경된 Scene의 Enter() 작업을 해주기에 Tile 생성코드는 CScene_Tool::Enter() 함수에 작성했다.

Scene 매니저의 ChangeScene() 함수

Tool Scene 크래스의 Enter() 함수

 

출력 결과는 아래와 같다.

 

Tile 이미지 출력 :

Tile 객체에 사용하고자 하는 Tile 이미지가 출력되도록 해보자.

Tile 클래스에 멤버 변수로 Tile 이미지로 사용할 Texture 객체와 몇번째 이미지를 저장하는 정수 변수를 멤버로 추가해준다.

 Tool Scene 에 진입할때 호출되는 Enter() 함수에서 Tile로 사용할 이미지를 로딩하고 각 Tile들이 이미지를 참조할 수 있도록 해준다.

Tile::render() 함수에서 이미지에서 원하는 영역만 지정하여 백버퍼의 렌더좌표에 그려준다.

 

예외처리...

• Tile 의 이미지로 사용할 Texture를 참조하고 있지 않으면 render() 함수 종료
• 호출한 idx 값이 타일의 개수를 넘어가면 assert() 발생

 

타일 계산 과정 :

사용하고자 하는 타일 이미지를 아래의 그림과 같이 편집하여 한 장의 이미지로 만든다.

타일 이미지 안에 들어있는 타일의 개수는 아래와 같다.

• 최대 행 개수(MaxCol) : 이미지의 너비 사이즈 / 타일의 너비 사이즈
• 최대 열 개수(MaxRow) : 이미지의 높이 사이즈 / 타일의 높이 사이즈

만약 13(인덱스 기준) 번째 Tile 이미지를 사용하고자 한다면 

• Col 의 인덱스 : 13 / 8 = 1
• Row 의 인덱스 : 13 % 8 = 5

즉, 2번째 줄의 6번째 이미지를 출력해주면된다.

개념

13번째 이미지 출력 결과

 

---

24/04/01

주제 : 타일 설정 수정 UI 만들기_1

 

Tool Scene 에 필요한 기능들 :

1. 타일 개수 설정
2. 타일 이미지 설정
3. 편집한 이미지 save → load 기능

 

UI :

각 기능들에 대한 입력값을 받기 위해선 사용자 UI가 필요하다.

UI도 하나의 Object 들이다. 때문에 직접 설계해서 만들 수있다. 하지만 효율이 좋지 않다.

UI 를 넣는 방법은 2가지가 있다...

1. 직접 설계해서 추가하기 → 작업속도와 효율이 좋지 않다.
2. Windows 에서 제공해주는 기능 활용 (채택)

 

추가적인 Window 띄워보기(예시) :

Windows 에서 제공해주는 함수로 window 만들기 전에 이미 만들어져 있는 예시를 보자

"Tool Tab → Help → About" 과정을 거치면 IDM_ABOUT 메세지가 발생한다.

Tool Tab → Help → About

추가 적인 window

IDM_ABOUT 메세지가 발생하면 Dialog() 함수를 통해 창을 띄운다.

해당 함수로 창을 생성하면 "모달(Modal)방식"으로 창을 띄우게된다.

 

Modal 방식 :

refer : Google

window focusing을 자신이 가져감으로써 다른 window 들은 focusing 을 받지 못한다.

프로그램의 main loop 문이 존재하듯이, Modal 윈도우도 자신만의 loop 문이 존재한다.

 

message 처리기를 보면 DispatchMessage() 함수가 인자로 들어온 메세지가발생한 윈도우에 프로시져 함수를 호출시켜준다.

이때, DialogBox() 함수가 자신만의 loop문을 돌면 반환값을 주지 않으면 main loop문은 정지상태가 된다.

 

모달 방식은 위와 같은 형태로 자신만 포커싱되게 하여 다른 window들은 동작하지 못하도록 한다.

 

리소스 : 

프로그램 실행시 등장하는 화면의 Tool Tab 도 하나의 리소스에 해당한다.

윈도우 메뉴탭 형태

"Resource View → Solution Name(Client) → Menu" 를 선택하면 화면 리소스를 확인할 수 있다.

Resource View → Menu

이에 대한 설정은 윈도우 클래스 등록시 WNDCLASSEXW의 인자중 하나인 "lpszMenuName"에서 지정해준다.

사용할 메뉴 탭 리소스 설정

또한 리소스의 ID 값(IDC_CLIENT)이 메크로로 지정되어 있는걸 볼 수 있는데 이는 Resource.h 에서 자동으로 지정해준 값이다.

메뉴 탭 리소스 ID

Resource.h 에 정의된 Menu 리소스 ID

Resource.h 는 메인 헤더파일에서 참조된다.

main header

 

DialogBox() :

모달 대화상자를 만들어주는 함수

void DialogBoxW(
    [in, optional]  hInstance,
    [in]            lpTemplate,
    [in, optional]  hWndParent,
    [in, optional]  lpDialogFunc	// 메세지 처리기 함수(프로시져)
);

대화상자의 형태 역시 리소스에 해당한다.

Resource View → Dialog 에서 이를 발견할 수 있다.

세번째 인자로 해당 리소스의 이름을 ID 값으로 넣어준다.

마지막 인자로 들어가 있는 윈도우 포인터는 프로시져 함수에 해당한다.

대화상자 역시 자신만의 메세지 처리기가 필요하며 이를 마지막 인자로 넣어주는 것이다.

모달 대화상자의 메세지 처리기 함수

 

타일 개수 설정 UI 만들기 :

1. Resource View 에서 Tool Tab 추가하기  (Tile)

메뉴 타일의 ID값 재설정 (재설정 해주지 않으면 임의의 숫자값이 들어간다)

리소스 수정

위와 같이 리소스를 수정하고 솔루션을 실행하면 수정한대로 적용되는걸 확인할 수 있다.

리소스 적용

 

2. Dialog window 추가 생성

 

3. 메세지 처리기에 WM_COMMAND 메세지 발생시 Tile 개수 설정에 대한 case문 추가

 

4. Tile 개수 설정에 대한 전용 프로시져 함수 생성

연관성을 위해서 Tool Scene 클래스의 아래부분에 전역함수로 생성함

프로시저 함수 임시 생성

 

5. main 클래스에서 전방선언해주고 Tile 개수 설정 탭의 프로시져 함수로 지정

전방선언, 프로시져 함수 변경

 

---

46화. Win32API Tool (3)

주제 : 마우스 이벤트로 타일 이미지 변경하기

 

입력 값 받아주기 :

 

타일 생성 로직 함수화 :

타일 생성 기능을 함수화한다.

타일 생성 기능은 Tool Scene에서만 필요한게 아니라 모든 Scene에서 필요한 기능이다.

때문에 Tool Scene 이 아니라 부모 클래스인 Scene 클래스에 생성해준다.

CreateTile() : 타일 생성 함수화

Tool Scene 에서 CreateTile() 호출

 

Tile 개수 조정 메뉴는 Tool Scene에서만 활성화 :

메뉴 탭에서 타일 개수 조정 메세지가 발생했을 경우 현재 Scene이 Tool Scene인지 확인한다.

만약 Tool Scene이 아니라면 assert() 가 발생하도록 한다.

 

타일 이미지 변경 : 

마우스 입력으로 타일 이미지 변경하는 기능 구현

마우스의 위치좌표는 렌더링 좌표 기준이다.

충돌 체크를 하려면 실제 좌표를 사용해야한다.

 

---

47화. Win32API UI(1)_1

학습 목표 : SetTileIdx() 예외처리 (~ 11:00)

 

문제점 : 

현재 타일 이미지 외부영역을 클릭하게 되면 에러가 발생한다.

에러 발생 이유는 vector 에 들어있는 이미지에 인덱스의 개수보다 큰 수 또는 음수가 들어오기 때문이다.

이에 대한 예외처리 작업을 해준다.

 

예외처리 :

 

결과 : 

타일 이미지 수정 & 타일 개수 변경

 

---

Next Note

Win32API_StudyNote_11