[포트폴리오] Kimchinity

Kimchinity

시연영상

GITHUB : https://github.com/tooOpen/KimOEngine

IOCP와 WPF를 이용한 동시개발이 가능한 2D 게임 툴

 

 

과 제 명	IOCP와 WPF를 이용한 동시 개발이 가능한 2D 게임 툴
과제구분	창의과제
과제기간	2014. 11. 01 ~ 2015. 01. 31      (3개월)
지    역	대구 멤버십	참여인원	3명

 

구분	내용
개발 목적 및 동기	디지털 시대에 어울리는 창의력 사고를 기르기 위한 노력이 여기저기서 일어나고 있다. 그 중심엔 코딩 교육이 있다. 사람들이 만들어진 게임을 즐기는데 그치는 것이 아니라 자신이 생각하고 원하던 게임을 개발하며 공유하는데 재미를 느끼는 것이다. 두 명이 동시에 접속하여 실시간으로 같이 게임을 개발하고 채팅으로 의견을 공유하여 하나의 게임을 만들어 게임을 만드는 것 자체가 하나의 게임 성을 가진 놀이가 된다.
개발 환경 및 일정	- 개발환경 OS : Windows7 Tool : Visual Studio2013, Edit Plus Language : C#, JavaScript, JQuery - 개발일정   2014년 11월 1일 ~ 2015년 01월 31일
창의성/ 우수성	프로그래밍에 전문지식이 없는 사용자들이라도 해당 툴을 사용하면 쉽고 빠르게 인터렉티브한 게임을 제작하고 웹으로 체험할 수 있다. 실시간으로 2명의 사용자가 게임을 개발할 수 있는 환경을 제공
활용성/ 사업성	Naver 소프트웨어 교육처럼 프로그래밍 교육의 타겟 연령대가 점점 낮아지는 추세이다. 이런 추세에 맞추어 앞으로 다가올 저 연령 프로그래밍 교육 시장에 큰 획을 그을 프로젝트가 된다.
지원부서	S/W멤버십	기술 지원 연구원	임충렬
전화번호	010-5140-6765	E-Mail	cdark.lim@samsung.com

3. 개발 목표

 

코딩이 필요 없는 drag & drop 만으로 가능한 인터페이스 제공.

간단한 마우스 조작만으로도 게임을 구현할 수 있도록 리소스를 관리하는 리소스 박스, 코딩 부분을 대신하는 이벤트 시트, 오브젝트의 속성을 설정하는 속성 창을 만들어 게임개발을 처음 접하는 사용자들도 직관적으로 게임을 개발할 수 있도록 한다.

 

완성된 게임의 C#코드를 게임 엔진에 대응되게 하여 JavaScript로 변환.

WPF 툴로 만들어진 게임은 내부적으로 C#코드로 되어있는데 이를 Export하기위하여 kimchinity JavaScript Game Engine에 대응되는 JavaScript코드로 변환되어 만들어진 게임을 웹 환경에서 돌아갈 수 있도록 구현한다.

 

자체적인 자바 스크립트 2D Game Engine을 제작

자체적인 JavaScript Game Engine을 개발한다. Engine안에서는 게임 개발에 필요한 기능들이 구현되어있다. 물리적인 부분으로 충돌체크, 중력이 있고 게임 시스템적인 부분으로 스케줄러, 이벤트처리, AI, 사운드, 입력처리가 있다. 디스플레이 적인 부분으로는 HTML5의 Canvas와 WebGL을 사용하여 게임이 돌아가는 하드웨어에 그래픽하드웨어의 유무에 따라 자동으로 선택되어 그려지게 된다.

 

게임을 개발할 때에 2명의 개발자가 한 게임을 실시간으로 동시 개발 가능

.net Framework의 C# 소켓통신과 TCP/IP프로토콜을 이용하여 IOCP Server 모델을 통해서 게임을 동시에 개발중인 프로젝트의 이미지, 사운드 파일과 같은 게임 리소스들의 실시간 공유를 가능케 하는 FTP 기능을 구현한다. 그리고 메시지 기반의 data packet을 주고 받아 하나의 게임 개발 프로젝트를 2명의 개발자가 동시에 개발이 가능하도록 한다.

 

툴을 통해 제작된 서로 다른 게임을 합칠 수 있다.

이 툴로 만들어진 2개의 게임을 하나로 합치는 기능을 구현한다. 게임의 JavaScript파일을 툴로 업로드 하여 자바스크립트의 소스를 수정하고 합쳐 하나의 새로운 게임을 만든다. 이때 두 게임은 한 게임에서 다른 게임으로 포탈로 연결되고 원래 게임의 캐릭터가 다른 게임으로 넘어가는 방식으로 구현된다.

2. 시스템 구조도

시스템 구조도

소프트웨어 구조도

3. 구현기술

WPF의 기능을 JavaScript로 변환

WPF로 만든 게임 제작 툴에서 설정한 Map, 캐릭터, 이벤트, 속성 과 같은 정보들을 JavaScript게임엔진에 파라미터로 전달 하기 위하여 우선 위의 정보랑 상관없이 수정이 필요 없는 기본이 되는 게임 로직들이 들어있는 JavaScript파일들은 모두 서버에 올려 HTML파일에 올려둔다. 그러면 실제 WPF게임툴에서 하는 일은 실제 사용자가 수정한 변수들만 있는 JavaScript파일을 string 변수에 저장하고 파라미터들을 string 변수에서 수정하여 파일의 이름이나 특성들을 적용시킨 다음 파일 입출력을 통하여 JavaScript파일로 만들어 지정폴더에 만들게 된다. 그 후 이미지도 같은 위치에 복사하여 위치시킨다. 그러면 그 JavaScript파일을 사용하는 HTML파일을 실행시키면 게임은 수정된 파라미터들이 적용된 상태로 실행되게 된다.

JavaScript Game Engine 구조

 

JavaScript로 게임을 만들 수 있는 게임 프레임워크를 개발하였다. 기본적으로 입력을 받는 inputSystem, 게임의 GUI을 담당하는 GUI등이 있고 이미지와 사운드 리소스를 관리하는 사운드 매니저와 ResourcePreLaoder가 있다. 이 두 클래스의 공통적인 목적은 게임이 시작되기 전에 리소스들을 모두 로딩 시켜놓는데 있다. JavaScript같은 경우 리소스가 로드되어 있지 않다면 그냥 그리는 부분을 무시하고 넘어가기 때문에 로드기 모두 되었는지의 대한 체크는 필수라 할 수 있다. 또한 사운드 매니저는 음악의 재생과 정지를 제공한다.

다음으로 Sprite는 게임에서 실제 오브젝트로서 데이터를 가지는 객체들의 클래스이다. 즉 좌표 변수를 가지며 움직임이 필요한 이미지를 감싼 클래스이다. 이를 객체로 가지는 HeroSprite, EnemySpirte, DoorSpirte는 Sprite를 객체를 가지고 있고 그 이외에 더 필요한 데이터를 변수로 가지고 있는 클래스들이다.

Kimchinity Game Engine으로 만들 수 있는 게임들은 모두 State로 관리되게 된다. 크게 TitleState와 PlayState로 나눌 수 있다.

마지막으로 Game이라는 클래스에서 전체적인 게임의 루프를 관리한다. Game에서는 각 State별 Render함수화 Update함수를 호출하여 각 State에 맞는 처리를 해주며 게임을 관리한다.

2개의 게임이 합쳐지는 방식

 

두 개의 게임을 연결하여 하나의 게임인 것처럼 만드는 기능은 우선 두 개의 JavaScript게임 파일을 WPF에서 파일 입출력으로 읽은 다음 서브 게임에서의 필요한 코드 부분을 메인 게임 쪽으로 긁어 온다. 이때 그냥 붙여 넣는 것이 아니라 IF으로 감싸 실제로 한 게임이 끝나고 다음 게임 시작할 때 메인 게임 소스의 함수를 호출할 때 Boolean 값을 다르게 넣어 서브게임에서 붙여놓았던 부분이 실행되게 한다.

물론 다른 필수 적인 초기화 부분은 Game.js에서 모두 처리하여 준다.