안녕하세요. 회사 때려치우고 인디게임 제작 <b>기록</b> 세번째 입니다. <div><br></div> <div>제작기 라고 하기엔 너무 거창해서 그냥 기록으로 이름을 변경했어요.</div> <div>게임을 만드는 중간에 이러저러한 기록들을 남길 예정입니다.</div> <div><br></div> <div><br></div> <div><br></div> <div>멀티 플레이 구현이 어느정도 진척이 있기에 테스트를 위한 외부 메뉴가 필요해 보입니다.</div> <div>Balsamiq Mockup 이라는 툴을 사용해 레이아웃 디자인을 합니다.</div> <div><br></div> <div>아래와 같은 모습이에요.</div> <div><br></div> <div><div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201706/1497247499451cd0231f9b47538494fb7f112fb75f__mn83937__w1280__h832__f97223__Ym201706.jpg" alt="mockup.jpg" class="chimg_photo" style="border:none;width:640px;height:416px;" filesize="97223"></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">저는 설치 버전을 구입해서 몇 년째 사용하고 있어요. </div> <div style="text-align:left;">기능적 특징은 애셋 종류가 많고, 편집하기가 매우 용이합니다.</div> <div style="text-align:left;">더불어 컨플루언스 (Confluence) 위키와 구글 플러그인으로 동작해서 웹 에서도 사용할 수 있는 것이 큰 장점입니다.</div> <div style="text-align:left;"><br></div> <div style="text-align:left;">이와 함께 내보내기 기능도 매우 사랑스럽습니다.</div> <div style="text-align:left;"><br></div> <div style="text-align:left;">각 애셋에는 다른 페이지로 이동할 수 있는 하이퍼 링크 기능이 있습니다.</div> <div style="text-align:left;">버튼을 클릭하면 설정된 페이지로 이동하는 것이죠.</div> <div style="text-align:left;"><br></div> <div style="text-align:left;">하이퍼링크가 설정된 목업(Mockup) 을 PDF 로 내보낸 뒤 해당 문서를 열어보면,</div> <div style="text-align:left;">실제로 내가 만든 UI가 동작하는 것을 확인할 수 있습니다. </div> <div style="text-align:left;"><br></div> <div style="text-align:left;">단순한 하이퍼링크 기능이지만, </div> <div style="text-align:left;">사용성 측면으로 볼 때 원하는 기기에서 바로 테스트 해볼 수 있는 것은 엄청난 장점이라고 생각합니다.</div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">이제 <span style="font-size:9pt;">꾸미기가 싹 빠진 기능 위주의 </span><span style="font-size:9pt;">UI 레이아웃을 만들어봅니다.</span></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">먼저 타이틀 화면을 만드는데요, <span style="font-size:9pt;">간단하게 제목과 싱글 플레이, 멀티플레이, 종료 버튼을 추가해 줍니다.</span></div> <div style="text-align:left;"><span style="font-size:9pt;">멀티 하단 공간은 나중에 다른 메뉴들을 추가하기 위해 남겨둡니다. </span></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201706/1497247500b6aa01661aaf4a909f639fbfd3bd4e4e__mn83937__w1280__h720__f14659__Ym201706.png" alt="title.png" class="chimg_photo" style="border:none;width:640px;height:360px;" filesize="14659"></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">다음으로 멀티 플레이를 기능을 구현할 것이기 때문에 관련 화면을 구성합니다.</div> <div style="text-align:left;"><span style="font-size:9pt;">멀티 플레이에 필요한 핵심 기능은 다음과 같습니다.</span></div> <div style="text-align:left;"> <ul><li>원하는 서버에 입장</li> <li>내 서버를 생성</li></ul></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201706/14972475990fda7eb7245348048a1cd6eaa30190e8__mn83937__w1280__h720__f49840__Ym201706.png" alt="server list.png" class="chimg_photo" style="border:none;width:640px;height:360px;" filesize="49840"></div><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"> <div>두 기능을 만족하기 위해 탭 메뉴를 '서버 리스트' 와 '서버 만들기' 로 나뉘었습니다.</div> <div><br></div> <div>그리고 각 씬에 필요한 내용들을 채워줍니다.</div> <div><span style="font-size:9pt;">서버 목록에 필요한 정보들을 넣고, 우측에는 선택한 서버에 대한 상세 정보 창을 배치합니다.</span></div></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><span style="font-size:9pt;">그 후 선택 가능/불가능한 정보들에 대해 색상으로 적절히 구분해 줍니다.</span></div> <div style="text-align:left;"> <ul><li>기본 배경은 무채색 계열. </li> <li>주요 아이템은 푸른색 계열.</li> <li>아이템 하이라이트는 보라색 계열.</li> <li>선택 가능한 텍스트는 노란색 계열. </li></ul></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">이후에는 다음 작업이 예정되어 있습니다. </div> <div style="text-align:left;"> <ul><li>에디터에서 UI 레이아웃 작성</li> <li>기본 UI 기능 구현</li> <li>Steamworks SDK 통합</li></ul><div><br></div> <div>에디터에서 실제로 UI 배치하고 기능을 동작하게 만든 후,</div> <div>스팀의 다양한 기능을 사용하기 위한 Steamworks SDK (이하 스팀 SDK) 를 통합합니다.</div> <div><br></div> <div> <div>여러분의 스팀 메뉴를 잘 살펴보면 서버 목록이 있을 거에요.</div> <div>여기에 있는 기능들 (서버 등록, 입장 인원, 맵, 게임모드 등)을 스팀 SDK 를 통해 사용할 수 있습니다.</div> <div><span style="font-size:9pt;">그 밖에 업적이라던가, 순위표 라던가 다양한 기능도 사용할 수 있구요 :)</span></div></div> <div><span style="font-size:9pt;"><br></span></div> <div><span style="font-size:9pt;">스팀 SDK 는 기본적으로 언리얼 엔진에 포함되어 있지만 최신 버전과 차이가 있기에 이를 잘 따져봐야 합니다.</span></div> <div><br></div> <div><br></div> <div><br></div> <div><br></div> <div><br></div></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">다음은 서버 만들기 메뉴입니다.</div> <div style="text-align:left;"><br></div> <div style="text-align:left;">저희는 Dedicated Server. 즉 방을 만든 유저가 서버가 되는 것이 아닌, 별도의 독립된 서버를 유저가 띄울 수 있게 하려 합니다.</div> <div style="text-align:left;"><span style="font-size:9pt;">그리하여 클라이언트에서 서버를 띄울 수 있게 별도의 메뉴를 만들어 주었습니다.</span></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"> <div> <div>이때 고민되는 문제가 다음과 같이 몇가지 있어요.</div> <div> <ul><li>공유기 설정이 필요한 부분</li> <li>서버를 띄웠을 때 일부 유저들은 익숙하지 않은 콘솔창이 뜸.</li> <li>띄워진 서버를 어떤 방법을 사용하여 쉽게 킬(Kill) 할 것인가.</li> <li>기타 등등</li></ul></div></div> <div> </div> <div>하지만 지금 고민하는 것은 시기상조니 일단 경험에 의거하여 빨리 만들기로 합니다. </div></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201706/149724749761f0d112803f4460b4bcd1b8315e65d7__mn83937__w1280__h720__f48593__Ym201706.png" alt="create server.png" class="chimg_photo" style="border:none;width:640px;height:360px;" filesize="48593"></div> <div style="text-align:left;"><br></div></div> <div><br></div> <div>일관성을 위해 '서버 목록' 페이지의 레이아웃을 그대로 활용합니다.</div> <div><br></div> <div>기초적인 설정메뉴들을 서버 목록이 있던 자리에 배치해주고,</div> <div>우측에는 현재 서버 설정을 출력해줍니다. 서버 입장 버튼이 서버 만들기 버튼으로 변경되었습니다.</div> <div><br></div> <div><br></div> <div>서버를 띄우기 위한 기본 메뉴 배치가 끝났습니다.</div> <div><span style="font-size:9pt;">이것으로 1차 구현을 진행하고, 상세한 서버 설정을 할 수 있는 Advanced 메뉴를 추가해야겠어요.</span></div> <div><br></div> <div><br></div> <div><br></div> <div><br></div> <div><br></div> <div>오늘은 여기까지... 잡담시작.</div> <div><br></div> <div>어제는 생일이었습니다.</div> <div>미래에 대한 고민을 잠시 내려둔채 영등포 타임스퀘어에 다녀왔어요.</div> <div><br></div> <div><br></div> <div>짝꿍이 그동안 쌓은 카드 포인트 모두 털어 예매한 골드클래스!</div> <div>미이라 봤습니다. 다크 유니버스 후속편이 기대됩니다.</div> <div><br></div> <div><div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201706/1497251200f438b97b823c403daecde60557634c8c__mn83937__w960__h720__f113529__Ym201706.jpg" alt="KakaoTalk_20170612_160558273.jpg" class="chimg_photo" style="border:none;width:320px;height:240px;"></div><br></div> <div><br></div> <div><br></div> <div><br></div> <div>돌아오는 길에 영접한 특별 아이템.</div> <div><br></div> <div><div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201706/1497251214d567d6a668b746d184b9594b2d2edd47__mn83937__w720__h960__f111887__Ym201706.jpg" alt="KakaoTalk_20170611_173757151.jpg" style="border:none;width:320px;height:427px;"></div><br></div> <div><br></div> <div><br></div> <div>하루를 책임져준 우리집 짝꿍에게 감사인사를 전하며... </div> <div>이만 마칩니다.</div> <div><br></div> <div><br></div> <div><br></div> <div><br></div> <div><a target="_blank" href="http://todayhumor.com/?gametalk_341844" target="_blank">회사 때려치우고 인디게임 제작기 1</a><br></div> <div><a target="_blank" href="http://todayhumor.com/?gametalk_342414" target="_blank">회사 때려치우고 인디게임 제작기 2</a><br></div>