[MFC] 2D 스프라이트 툴을 만들자 #1

[샤케]

스프라이트 툴을 만들자 #1

안녕하세요 ^^ 샤케입니다.

정말 오랜만에 강좌글을 올리네요.
매일마다 방바닥에서 뒹굴면서 머리에서 떨어져 나간 머리카락을 보자니...
왜 머리를 안 자르고 있을까?? 라는 생각과 함께...
흐에 심심해 죽겠다~ 알바라도 뛰자!! 라는 생각도 들면서...
제 컴퓨터 속을 뒤지다 보니...
뚜둥!! 완성된 것처럼 가장한 스프라이트 툴이 있더군요.
후훗..씨익..잘걸렸다.
뭐..다음주부터는 PC방 알바라도 해서 백수 생활을 면할 생각이지만
그 전까지는 너 가지고 노닥거려 보자.
라는 심보로 이렇게 전에 만들었던 스프라이트 툴을 뜯어 고치면서
강좌글을 올리게 됐습니다....흠흠
길고도 긴 역사속이었죠(....)

들어가기에 앞서..

일단 스프라이트가 무언가를 알아야 할 것 같습니다.
사실 전 스프라이트가 무언에 사용되는 물건이지,
스프라이트툴이 무엇을 해줘야 하는지에 대해 잘 알지 못합니다.
그래서 여러분께 권해 드리자면 카페에 2D 강좌 자료실에 보면
스프라이트 관련 문서(?), 강좌 글이 올라와 있습니다.
한번쯤 읽어 보시기 바랍니다.
저도 이거 뜯어 고치기 전에 한번 읽어 봐야 겠네요..유후~

잡담 그 끝은 어디인가??

흠...툴을 만들려고 하다 보면...
엄청난 갈등과 고민이 머리속에서 허리케인처럼 지나갑니다.
WINAPI 로 만들어야 할까?
아냐 MFC가 툴 만들기 편하다는데??
헉!! 그러고 보니까 난... 둘다 못하네?????????????????????
라는 고민을 전 했었습니다.
근데 저한테 있는 책이 MFC 책이 있더군요.
이게 왠 구세주냐!! 싶어서 MFC로 툴을 만들기로 했습니다.
그리고 여기 저기 자료를 구하다 보니 다들 MFC로 만들었더군요.
너무나 고마웠습니다..ㅡㅜ.. 마치 날 위해 MFC로 만들어주었구나...정도로;;
근데...어떤 것을 보니..DirectX 랑 WINAPI 를 이용해서 만든 것도 있더군요.
뭐..좋네. 마침 DX 공부하고 있었고 해서 속을 봤더니!!
......WINAPI 에 대해서 도통 모르겠더라는 겁니다.
왠지 소스도 길어 보이고 복잡해 보이는게 귀! 찮! 아! ...라고 말입니다.
그래서 MFC로 만들 예정입니다. 여러분도 MFC로 만들어 보세요 ^^

화면 구성을 생각해 봅시다.

일단 메뉴는 기본적으로 있어야 겠죠?
스타크래프라는 것을 보면 정말 엄청나게 잘 만든 맵툴이다!!
라는 생각이 드실 겁니다.
하지만 스타크래프트에 스프라이트툴은 없습니다.(ㅜㅡ)
하고 싶은 말은 툴이란 것에는 메뉴가 없으면 안된다는 것이죠.
그럼 메뉴를 어떻게 구성하느냐??
이게 문제인 것입니다.
개개인마다 취향이 다르겠지만...
전 제가 다운 받은 원본 스프라이트툴을 보고 배꼈습니다.
물론 제가 필요한 것 몇개 몇개는 추가시켰지만 대부분의 구조는 같습니다.
그럼 일단 제가 작성한 메뉴 방식을 보겠습니다.

■ 그림 1

위와 같은 구조가 될 것 같습니다.
전 해상도를 1024*768 로 해서 사용합니다.
그러니 이미지가 찌그러져 보입니다.
크기를 줄였기 때문이죠. 그러니 필요하시다면 다운 받아서 크게 보세요.

일단 위의 그림처럼 왼쪽에는 메뉴 다이얼로그를 놓을 겁니다.
그리고 오른쪽에는 이미지를 그릴 뷰를 놓을 겁니다.
여기서 뷰란 간단히 말해 윈도우라고 보시면 됩니다.
하나의 화면이지요.
호오~ 그러다면 이제 숙제거리가 생겼습니다.
어떻게 해서 화면을 나누고, 어떻게 해서 뷰를 화면에 놓느냐 입니다.
방법은 간단하니까 순서대로 따라해 보세요.

메뉴 다이얼로그를 만들자

다이얼로그란 위의 그림에서 보았듯이 메뉴와 같은 녀석을 다이얼로그라고 합니다.
아차차....중욯한 과정이 빠졌군요.
사실 처음이니까 MFC 프로젝트를 생성하는 것부터 봤어야 했는데 말입니다.
제가 당연히 모두들 아실거라 생각하고 그냥 넘어갔지 말입니다.
(응?? 말투가 희안하다...)
MFC 프로젝트 생성법을 모르신다면 댓글로 남겨 주세요.
그러면 제깍 올리겠습니다^^

그럼, 다이얼로그를 만들어 보겠습니다.

■ 그림 2

자...이미지 보이시죠??
일단 다이얼로그는 리소스에 해당됩니다.
당연히 리소스탭으로 옮겨서 Dialog 를 우클릭.
그리고 Insert 를 선택하세요.
Insert Dialog 는 안되나요??
안됩니다.
저도 처음에 그냥 Insert Dialogg 로 하면 안되나 싶어서 발악발악 했는데
속성이 다른 Dialog 가 생성이 됩니다. 그러므로 그냥 Insert 를 선택해서
본인이 원하는 Dialog 를 직접 생성하기 바랍니다.

■ 그림 3

흠...다이얼로그를 생성하려고 하는데
뭐 이리 거들먹거리는 다이얼로그들이 많은지....
우리가 만들 툴에서 사용되는 다이얼로그는 그림에서 보다시피 입니다.
FORMVIEW 라는 녀석이 있습니다.
자세한 설명은 생략하고, FORMVIEW 의 속성을 갖는 다이얼로그를 만듭니다.
FORMVIEW 는 하나의 뷰로 인식이 되기 때문에
저희같이 초보가 만드는 툴에서 자주 사용되는 녀석입니다.
그리고 FORMVIEW 위에 DIALOGBAR 라는 것이 있습니다.
이 다이얼로그바는 현재 보는 인터넷익스플로러 위에를 보면
우리가 보고자 하는 화면과 위의 메뉴가 하나로 합쳐져 있습니다.
음...말로 설명드리긴 뭐한데요. 일단 FORMVIEW로 만들어 보면 차이를 압니다.

자, 다이얼로그를 만들었으면 이제 모양을 꾸밉니다.

■ 그림 4


■ 그림 5


자 모양 꾸미기 전에 속성을 고쳐야겠죠.
그림에서처럼 속성으로 들어가서
이 다이얼로그의 이름과 언어를 바꾸었습니다.
언어를 바꾸지 않으면 한글이 깨져서 나오는 경우가 있습니다.
한글을 사용하지 않으실 거라면 그대로 냅두셔도 됩니다.
하지만 전 한글을 사용할렵니다.
콩글리쉬로는 한계가 있기 때문에...........................나날이 슬퍼지는군요..흑

그림 4를 보면 오른쪽에 있는 다이얼로그가 여러분것과는 다릅니다.
이건 제가 모양을 살짝 바꾸었기 때문입니다.
여러분도 각자 만들고 싶으신대로 만드세요.

적용될 클래스를 만들자!!

그리고 이제 다이얼로그에 적용될 클래스를 만들어야 합니다.
헉!! 클래스에 대해서 모르신다구요??
안됩니다. 안됩니다. 가서 공부하고 오세요.
툴을 만들기 전에 클래스에 대해서 꼭 알아가지고 오세요
모르신다면 앞으로의 길이 험난합니다...

그럼 적용될 클래스름 만들어 보도록 하겠습니다.

■ 그림 6

위의 그림을 나오게 해야 하는데 어떻게 해야 할까요??
방법은 두가지가 있습니다.

1. View -> Class Wizard 를 실행시킨다.
2. 다이얼로그를 더블클릭한다.

위의 두가지대로 하면 그림 6과 같은 화면이 나옵니다.
그림 6대로 OK를 누르시면 다시...

■ 그림 7

위의 그림처럼 나오게 됩니다.
여기서...이름은 본인이 펺하게 해주시구요.
Base Class라는 것이 있습니다.
아까 다이얼로그를 만들때 어떤 것으로 만들었죠??
그때 FormView 로 만들었죠??
여기서도 마찬가지로 FormView 로 만들어야 합니다.

새로이 만들고 나면 파일에 클래스 이름으로 설정했던 파일이 생성됩니다.
이 파일에 들어가면 클래스 파일명이 있구요
이제 이 다이얼로그에서 일어나는 일은 이 클래스 파일에서 다루게 됩니다.
오옷~ 뭔가 하나 해낸것 같습니다.
그러나 실행을 해보면 기본 화면만 덩그러니...(_ _);;;
어떻게 해야 할까요??
화면을 일단 나누어야 합니다.
응?? 화면을 나누어??
모름지기 툴이다 보니 화면을 분핧해서 사용해야 합니다.
메뉴화면이 있으면 이젠 다른 용도로 사용될 화면이 필요합니다.
그럼 이제 화면을 나누어 보도록 하죠.

화면 분할하기!!

사실 화면 분하라기는 쉽습니다.
화면을 분할하고 보여주기가 조금 귀찮을 뿐이죠.
사실 이정도로 귀찮다고 하면 WINAPI 로 만들면 정말 짜증이 물밀듯이!!
MFC 정말 고맙습니다.^.^
자...파일들을 보도록 하죠.

■ 그림 8

그림을 보면 MainFrm.h 라는 파일이 있습니다.
이름에서 보다시피 메인 프레임과 관련된 파일입니다.
즉, 이 메인 프레임에서 화면을 분할해 나가는 것입니다.
그럼 어떻게 해야 하느냐!!
해더 파일에 몇가지를 추가해 줘야 합니다.
처음으로 우리가 사요아고자 하는 클래스 파일이 필요하겠죠.
우리가 사용할 클래스 파일이란 우리가 만들었던 다이얼로그 클래스 입니다.
저는 다이얼로그 클래스 이름을 ToolMenu 로 해놔서
이름과 같은 ToolMenu.h/cpp 파일이 생겼습니다.
여기서 ToolMenu.h 파일을 인클루드 시킵니다.
즉, 여러분이 만든 파일을 인클루드 시킵니다.
그리고 클래스에 몇가지 맴버를 추가시킵니다.

---

public : CSplitterWnd m_SplitWnd1; CToolMenu *m_pToolMenu; public : void ResizeSplitWnd();

---

헥헥...언제나 느끼는 거지만 소스 적기 정말 귀찮은 HTML 입니다..ㅡ.ㅡ;;
뭐..귀찮음을 뒤로 하고 소스 설명에 들어갑니다.
일단 CSplitterWnd 라는 것이 있습니다.
이것은 화면을 분할할 때 사용되는 녀석입니다.
사용법은 잠시후 나옵니다.
그리고 밑에 CToolMenu   *m_pToolMenu; 부분은
우리가 화면을 분할한 후 분할된 뷰(윈도우)에 적용할 클래스 포인터입니다.
이해가 되었나요??
안되었더라도 차차 보면 이해가 점점 가게 됩니다.
그럼 이제 화면 분할을 하는 소스를 본격적으로 봅시다.
일단 Class Wizard ( Ctrl + W ) 를 열어봅니다.
그러면 아래 그림이 나오는데, 그림과 다르시다면 맞추어 주세요.

■ 그림 9

Messages 에서 필요한 것을 더블 클릭하면
Member Functions 에 추가가 됩니다.
그리고 추가한 함수, 즉 Member Functions 에서 더블클릭하면
바로 그 함수가 있는 소스로 이동을 합니다.

■ 그림 10

그림처럼 소스를 추가합니다.
(쿠쿠쿠 소스 적기 귀찮아서 캡쳐했습니다.)
뚜둥!! 여기서 문제.
소스에 보면 m_pBmpView 라는 것이 있습니다.
이건 뭘까요??
아직 만들지 않은게 왜 있는 걸까요??
그건 필요하기 때문에 제가 추가 시켜 놓은 것입니다.
클래스 이름에서처럼 스트라이트툴에서 스프라이트 제작시 사용될
BMP 파일 이미지를 로드하고 화면에 나타내어야 하는데
이 화면에 나타내는 뷰가 그림 1에서 보았듯이 오른쪽 하얀 화면입니다.
사실 이 두개만 가지고는 안됩니다. 나중에 몇개의 뷰를 더 추가시킬 겁니다.
일단 첫 시간이니 만큼 너무 힘빼지 말고 화면을 두개로 나누도록 하겠습니다.
그럼 CBmpView 라는 클래스를 만들어야 할텐데 어떻게 할까요??

Visual Studio 에 메뉴를 보면 Insert 라는 곳에 New Class 라는 것이 있습니다.

■ 그림 11

그림 11 처럼 말이죠.
그리고 클래스를 추가 시킵니다.

■ 그림 12

그림 12처럼 저는 추가를 시켰습니다.
여러분 취향에 맞게 추가를 시키면 됩니다.
하지만 Base Class 는 지켜줘야 합니다.
이 CScrollView 는 어떤 뷰냐 하면...
말 그대로 스크롤이 되는 뷰를 뜻합니다.
그냥 평범한 뷰를 만들어서 일일이 스크롤을 붙여주느니
아예 스크롤이 붙어 있는 뷰를 만들면 편하겠죠?
왜 굳이 스크롤뷰로 만들어야 하느냐? 라는 질문이 오면
이미지 크기가 120*120 이정도 사이즈면 얼마나 좋겠습니까...
하지만 스프라이트수에 따라서 1200 * 100 이런것도 있습니다.
그러면 화면에 다 나타내지 못합니다.
그래서 스크롤이 있어야 하겠죠.

자, BmpView 를 생성했으면 MainFrm.h 에 가서 파일을 인클루드 하고
클래스 포인터도 만들어 줍니다.

헤궁...이제 그림 10에 있는 소스 설명 들어가겠습니다.
주석을 보면 대충 아시겠지만 뷰 나누기 라는 부분은 말그대로
화면을 나누는 것입니다. 방법은 소스에서와 같구요.

뷰 클래스 설정하는 부분에서는 각 뷰에서 적용될 클래스를 설정합니다.
즉, 각 뷰에서 작업을 해야 할 때 어떤 클래스를 따르냐 하는 것입니다.

뷰 포인터 얻는 부분에서는 말 그대로 포인터를 얻는 것입니다.
무슨 설명이 이래?? 라는 생각이 들지도 모르겠습니다만..
사실 뷰는 뷰나름대로 포인터가 있습니다.
그 포인터를 얻어와서 우리가 사용할 메뉴 포인터에 넣어줘야
우리가 그 뷰를 조작하기 쉽게 됩니다.
즉, 뷰 주소를 메뉴 형식으로 변환한 주소가 되는 것입니다.
만약 BmpView 포인터라면 BmpView 주소 형식으로 뷰 포인터를 바꾼거겠죠
어려운 부분은 아닌데 설명하니 어렵게 보이네요(..;;)

그리고 마지막으로 화면 크기를 설정합니다.
미리 MainFrm.h 에서 추가한 함수지요.
그럼 이제 이 함수와 관련된 부분을 보도록 합시다.

화면 크기 조절하기

■ 그림 13

정말 이때 행복합니다.
소스가 너무나도 짧습니다.
소스를 보도록 하죠.

ToolMenu 가로 크기 설정하는 부분이 있습니다.
소스를 보는 바와 같이 가로 크기와 세로 크기를 정하는 것입니다.
어차피 세로 크기는 얼마를 줘도 나누어지 않았기 때문에
기본 메인프레임의 크기를 따릅니다.
나중에 나누게 된다면 그 부분의 크기도 정해주어야 겠죠.
그리고 가로 크기는 우리가 만든 다이얼로그의 크기에 맞게 설정을 합니다.
그래야 보기 좋거든요.
일일이 수치 조절해야 하는 압박이 있긴 합니다(;;;;;;;;;;;;;;;;;;;;;;)

그리고 두개로 나눈 화면에서 왼쪽 크기를 정해주면
나머지 한개의 크기는 자동으로 나머지 크기가 되겠죠.
그래서 BmpView 에 대한 가로 크기는 생략했습니다.
사실 정확히 하자면 몇 퍼센트 단위로 나누어야 하는데
이 귀찮아쟁이는 오늘도 대충 넘어갑니다...ㅡ.ㅡ;;

그리고 화면 크기를 재 계산을 합니다.
사실 해도 그만 안해도 그만 같습니다.
안해줘도 결과는 제대로 나오는 것 같거든요.
그래도 보다 정확함과 에러를 줄이기 윟해서 해줍시다

그럼 이제 컴파일 하고 실행해 봅시다.
전 그림 1처럼 나왔습니다.

■ 그림 1

흠냐..잡설시간~

자...이제 대충 툴을 만들기 위해 필요한 기본적인 것은 마친 것 같습니다.
이제 다음시간에는 BmpView 말고 스프라이트 툴에서 필요한
몇개의 뷰를 더 나누어서 추가해 보도록 하겠습니다.
추가할 뷰들은 OffsetView 하고 AniView, SpriteView 입니다.
각각의 기능들은 다음시간에 다루도록 하죠.

헤궁 간만에 강좌글을 올리느라 그런지 허리가 아프네요(;;)
이번 시간에 대해서 사실 미흡한 점이 많다고 개인적으로 느낌니다.
그러니... 궁금한점에 대해서는 질문을 남겨 주세요.
아는 부분은 아느대로, 모르는 부분은 뒤져서 알려 드리도록 하겠습니다.
그럼 다음 시간에 조금 더 보강된 강좌를 들고 오겠습니다.^^ 즐프하세요~

소스 저장 하기

[께어있으라. 만진]

고맙습니다. ^^,.

[샤케]

진님은 안 보셔도 아실텐데 ^.^;;

[기연뽀기]

샤케님이 알바를 하시느라.. 안 보이셨던 거군요..^^ 대로님.. 홧팅.. 자료 잘 보고 갑니다..~!

[남승구]

엑박이에요 ㅠㅠ

[fiil]

다 엑박이네. 으흑

[프로그래머라]

엑박..ㅠ

[뿅-으악]

엑박이다..ㅠㅠ

[Game Maker]

저는 이미지가 안보입니다.ㅠㅠ 어떻게 해야하나요?