NDC 14 - HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기

1. HTML5/JSON을 이용한
2D 범용 맵 에디터 만들기
아이펀 팩토리 부설 연구소
박순임(miyu@ifunfactory.com)

2. WHO AM I
• 2013 ~ iFunFactory Inc
• 2012 : NEXON Korea
• 2011 : NHN Japan
• 2008 : NCsoft Japan
!
• HTML, CSS, JavaScript, etc Web programing..
이정도는 거뜬한 개발자
...

3. 3
왜 Web 인가?
HTML CSS
Unofficial JavaScript logo

4. Desktop Application
A.Pros
• standalone
• 빠른 응답, 풍부한 사용자 경험
• 데이터 저장을 위한 별도 서버 시스템이
불필요하다
B. Cons
•OS별 별도의 프로그램 개발이 필요하다
•물리적 위치의 제약이 있다
•유지보수가 힘들다

5. Web Application
A.Pros
• 유지보수가 쉽다
• OS 별 프로그램 개발이 불필요하다
• 소프트웨어 배포가 필요하지 않다
!
• 어디서든지 인터넷을 이용해
액세스가 가능하다
B. Cons
•Cross Browsing 이슈가 있다
•온라인 데이터 처리의 보안 이슈
•데스크톱 애플리케이션에 비해
떨어지는 조작성

6. 간단하게 소개하는
Web 기반 맵 에디터

9. Web 기반 맵 에디터가
극복해야하는 문제

10. 문제점
1. Cross Browsing
2. 데스크톱 어플리케이션과 대등한 사용자 경험
3. 페이지 리로드 or 브라우저 종료시의 데이터 보존
4. JavaScript 의 성능
Unofficial JavaScript logo

11. 1. Cross Browsing
각종 Library 사용으로 극복하자!
!
•JavaScript Library - jQuery
•UI Library - jQuery UI

12. 2. 데스크톱 어플리케이션과
대등한 사용자 경험
A. Layout Manager - jQuery UI Layout Plug-in
B. 주요 기능 단축키 지원
C. Undo/Redo 구현

13. A. Layout Manager - jQuery UI Layout Plug-in
• http://layout.jquery-dev.net/
• Panel의 Resize, Hide/Show 기능 지원
• 다양한 Layout 표현이 가능

14. B. 주요 기능 단축키 지원 (1)
• 데스크톱 어플리케이션과 대응되는 기능의 단축키 구현이 필요하다
• Map Editor 내에서는 Asset에 대해
그룹 지정 or 그룹 복사/오려두기/붙여넣기/삭제
기능이 단축키를 이용해서도 가능하도록 구현한다

15. B. 주요 기능 단축키 지원 (2) - 문제점
• 단축키 기능을 잘못 활용하면 사용자 Input을 받는 요소에서
기대와는 전혀 다른 액션을 취하게 된다
!
• OS별로 단축키 정의가 다르다
선택한 항목/텍스트를
클립보드에 복사
붙이기
MAC OS command + C command + V
Windows ctrl + C ctrl + V

16. B. 주요 기능 단축키 지원 (3) - 해결책
• 구현한 단축키 기능을 제한하는 방법
• “document.activeElement” 를 이용하여 현재 active 된 element를 확인
• element가 사용자 입력을 받는 요소인 경우에는 단축키 기능을 적용하지 않기

17. B. 주요 기능 단축키 지원 (4) - 해결책
• JavaScript Library
• Mousetrap : http://craig.is/killing/mice
• keymaster : https://github.com/madrobby/keymaster
• OS별 단축키 지원
• 사용자 입력 Element에 대한 처리
근데 난 손 코딩으로 처리..OTL

18. C. Undo/Redo 구현하기 (1)
Move 용 데이터
Undo
Redo
현재위치{“action” ..
color:
Undo/Redo Stack 구현하기
{“action” ..
{“action” ..
{“action” ..
{“action” ..
{“action” ..

19. C. Undo/Redo 구현하기 (2)
• JavaScript Array를 이용한 History 구현하기
• 브라우저 종료나 페이지 리로드시에도 History가 보존되도록 구현
• WebStorage API의 LocalStorage 사용
• 5MB이하로 저장
• 브라우저를 닫아도 저장된 데이터가 로컬에 남아있다
• 사용자가 직접 삭제를 하기 전에는 삭제되지 않는다

20. 3. 데이터 보존 문제
• Auto Save -> 일정한 간격으로 Data를 Server에 저장한다
• 임시 저장 -> LocalStorage API를 이용해 Client에 저장한다
• LocalStorage 용량이 5M이므로 맵 데이터를 모두 저장하기에 용량이 부족하다
* 그러므로 Auto Save 사이의 데이터만 저장해두는 방식으로 구현한다

21. 4. JavaScript 의 성능 문제
맵을 Load 시 표시해주어야 하는 Asset이 많은 경우, Asset을 추가하는
Script 실행 중 Browser의 멈춤 현상이나, 페이지가 먹통이 되어버리는 문제가 있음

22. 그 외 기능
•맵 에디터 Zoom 기능 : CSS3 Transform 크기 변경 함수 Scale 사용
* CSS의 transform 속성은 엘리먼트(element)가 존재하는
좌표공간을 transform 함수(functions) 로 변형시킬 수 있도록해준다.
! jQuery 함수 drag에서 mousemove값에 Scale 값이 미적용 되는 부분 주의
•다중 선택된 Asset의 Align 지원
•유저가 설정 가능한 GuideLine

23. 그런데..
범용적으로 사용할 방법은?

24. 범용 맵 에디터가 가져야하는 조건
• 데이터를 다양한 서버/클라이언트에 연동할 수 있어야 한다
• 맵 데이터를 서버/클라이언트에 효율적으로 배포할 수 있어야 한다

25. 1. 다양하게 연동 가능한 데이터 (1)
• 제작된 맵 데이터를 JSON 형식으로 저장한다
• JSON의 장점
• 사람이 읽고 쓰기 편한 형식
• 더불어 기계가 분석하고 생성하기에 용이하다
• 대부분의 프로그래밍 언어들이 지원한다
• 다른 데이터로의 변경이 쉽다
!
• 이러한 장점을 바탕으로 툴에서도 사용하기 쉽고 Web에서도 사용하기 좋다

26. 1. 다양하게 연동 가능한 데이터 (2) - Tag
• 게임 클라이언트와의 Tag 정의
• 각 Asset 의 특징이나 맵의 특징에 관해 Tagging
• 정의된 Tag에 대해 게임 클라이언트가 해석
Tag : “3:fast”
설명 : 3배 빠른 붉은 루비
3

27. 2. 맵 데이터를 클라이언트로 전달하기 (1)
• 모든 맵을 다운로드 하도록 했을 때의 문제점
• 데이터양에 따라 다운로드 속도가 좌우된다
• 다운로드 중에는 게임을 할 수 없다
• 데이터 양이 많으면 -> 당연히 서버 비용이 증가한다

28. 2. 맵 데이터를 클라이언트로 전달하기 (2)

29. 마지막으로..

30. 맵 에디터의 강점
•UI가 쉽고 간단하다, 프로그래밍을 몰라도 맵을 제작할 수 있다
•JSON형식의 데이터라 에디터에 제한받지 않고 바로 열어 확인할 수 있다
•게임 맵을 만들고 프로그래머의 도움 없이 바로 확인 할 수 있다
- 박모 게임 기획자
- 박모 게임 프로그래머
- 김모 디자이너

31. 개발 중..
• Asset 배치를 그룹으로 묶어서 정의하기 기능
• Asset 배치의 모양을 그룹핑해 해당 그룹을 바로 추가할 수 있게..
• Preview 기능
• html2canvas Library 를 사용 (http://html2canvas.hertzen.com/)
하지만 Scroll 된 영역을 Capture하지 못 해 포기..
!
• 데이터 변환 지원 (XML 등)
• 쿼터뷰 맵, 타일 맵 지원

32. Summary
• 게임 형식이 비슷한 2D 모바일 게임을 모두 지원할 수 있는 맵 에디터 개발
• 접근이 쉽고 설치와 학습이 필요하지 않도록 Web Application 기반으로 작성
• 개발시 다양한 JavaScript Library 를 활용해 개발 시간 단축
• 맵 데이터의 전달은 Hash값을 바탕으로 필요한 데이터만 전송되도록 API 서버 구성
• 다양한 맵 형태에 대한 지원이 필요하다